fix: allow prop-types to be removed in production

fixes #257
nolan/hinaloe-test
Nolan Lawson 2018-12-18 11:24:52 -08:00
parent bae7afb282
commit f60220870e
18 changed files with 97 additions and 77 deletions

View File

@ -23,7 +23,6 @@
"transform-object-rest-spread", "transform-object-rest-spread",
"transform-runtime", "transform-runtime",
"transform-react-remove-prop-types",
[ [
"transform-define", "scripts/define.js" "transform-define", "scripts/define.js"
], ],

View File

@ -365,6 +365,32 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook
## Not opinionated ## Not opinionated
**Emoji Mart** doesnt automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. Its up to the developer to mount/unmount (its fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji. **Emoji Mart** doesnt automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. Its up to the developer to mount/unmount (its fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji.
## Removing prop-types in production
To remove [prop-types](https://github.com/facebook/prop-types) in production, use [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types):
```bash
npm install --save-dev babel-plugin-transform-react-remove-prop-types
```
Then add to your `.babelrc`:
```json
"plugins": [
[
"transform-react-remove-prop-types",
{
"removeImport": true,
"additionalLibraries": [
"../../utils/shared-props"
]
}
]
]
```
You'll also need to ensure that Babel is transpiling `emoji-mart`, e.g. [by not excluding `node_modules` in `babel-loader`](https://github.com/babel/babel-loader#usage).
## Development ## Development
```sh ```sh
$ yarn build $ yarn build

View File

@ -36,7 +36,6 @@
"babel-plugin-transform-define": "^1.3.0", "babel-plugin-transform-define": "^1.3.0",
"babel-plugin-transform-es2015-destructuring": "6.9.0", "babel-plugin-transform-es2015-destructuring": "6.9.0",
"babel-plugin-transform-object-rest-spread": "6.8.0", "babel-plugin-transform-object-rest-spread": "6.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.8",
"babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "6.6.0", "babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0", "babel-preset-react": "6.5.0",

View File

@ -63,7 +63,7 @@ export default class Anchors extends React.PureComponent {
} }
} }
Anchors.propTypes = { Anchors.propTypes /* remove-proptypes */ = {
categories: PropTypes.array, categories: PropTypes.array,
onAnchorClick: PropTypes.func, onAnchorClick: PropTypes.func,
icons: PropTypes.object, icons: PropTypes.object,

View File

@ -211,7 +211,7 @@ export default class Category extends React.Component {
} }
} }
Category.propTypes = { Category.propTypes /* remove-proptypes */ = {
emojis: PropTypes.array, emojis: PropTypes.array,
hasStickyPosition: PropTypes.bool, hasStickyPosition: PropTypes.bool,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,

View File

@ -3,7 +3,8 @@ import React from 'react'
import data from '../../../data/all.json' import data from '../../../data/all.json'
import NimbleEmoji from './nimble-emoji' import NimbleEmoji from './nimble-emoji'
import { EmojiPropTypes, EmojiDefaultProps } from '../../utils/shared-props' import { EmojiPropTypes } from '../../utils/shared-props'
import { EmojiDefaultProps } from '../../utils/shared-default-props'
const Emoji = (props) => { const Emoji = (props) => {
for (let k in Emoji.defaultProps) { for (let k in Emoji.defaultProps) {
@ -15,7 +16,7 @@ const Emoji = (props) => {
return NimbleEmoji({ ...props }) return NimbleEmoji({ ...props })
} }
Emoji.propTypes = EmojiPropTypes Emoji.propTypes /* remove-proptypes */ = EmojiPropTypes
Emoji.defaultProps = { ...EmojiDefaultProps, data } Emoji.defaultProps = { ...EmojiDefaultProps, data }
export default Emoji export default Emoji

View File

@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import { getData, getSanitizedData, unifiedToNative } from '../../utils' import { getData, getSanitizedData, unifiedToNative } from '../../utils'
import { uncompress } from '../../utils/data' import { uncompress } from '../../utils/data'
import { EmojiPropTypes, EmojiDefaultProps } from '../../utils/shared-props' import { EmojiPropTypes } from '../../utils/shared-props'
import { EmojiDefaultProps } from '../../utils/shared-default-props'
const _getData = (props) => { const _getData = (props) => {
var { emoji, skin, set, data } = props var { emoji, skin, set, data } = props
@ -191,7 +192,10 @@ const NimbleEmoji = (props) => {
} }
} }
NimbleEmoji.propTypes = { ...EmojiPropTypes, data: PropTypes.object.isRequired } NimbleEmoji.propTypes /* remove-proptypes */ = {
...EmojiPropTypes,
data: PropTypes.object.isRequired,
}
NimbleEmoji.defaultProps = EmojiDefaultProps NimbleEmoji.defaultProps = EmojiDefaultProps
export default NimbleEmoji export default NimbleEmoji

View File

@ -26,7 +26,7 @@ export default class NotFound extends React.PureComponent {
} }
} }
NotFound.propTypes = { NotFound.propTypes /* remove-proptypes */ = {
notFound: PropTypes.func.isRequired, notFound: PropTypes.func.isRequired,
notFoundString: PropTypes.string.isRequired, notFoundString: PropTypes.string.isRequired,
emojiProps: PropTypes.object.isRequired, emojiProps: PropTypes.object.isRequired,

View File

@ -8,12 +8,13 @@ import store from '../../utils/store'
import frequently from '../../utils/frequently' import frequently from '../../utils/frequently'
import { deepMerge, measureScrollbar } from '../../utils' import { deepMerge, measureScrollbar } from '../../utils'
import { uncompress } from '../../utils/data' import { uncompress } from '../../utils/data'
import { PickerPropTypes, PickerDefaultProps } from '../../utils/shared-props' import { PickerPropTypes } from '../../utils/shared-props'
import Anchors from '../anchors' import Anchors from '../anchors'
import Category from '../category' import Category from '../category'
import Preview from '../preview' import Preview from '../preview'
import Search from '../search' import Search from '../search'
import { PickerDefaultProps } from '../../utils/shared-default-props'
const I18N = { const I18N = {
search: 'Search', search: 'Search',
@ -592,7 +593,7 @@ export default class NimblePicker extends React.PureComponent {
} }
} }
NimblePicker.propTypes = { NimblePicker.propTypes /* remove-proptypes */ = {
...PickerPropTypes, ...PickerPropTypes,
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
} }

View File

@ -3,7 +3,8 @@ import React from 'react'
import data from '../../../data/all.json' import data from '../../../data/all.json'
import NimblePicker from './nimble-picker' import NimblePicker from './nimble-picker'
import { PickerPropTypes, PickerDefaultProps } from '../../utils/shared-props' import { PickerPropTypes } from '../../utils/shared-props'
import { PickerDefaultProps } from '../../utils/shared-default-props'
export default class Picker extends React.PureComponent { export default class Picker extends React.PureComponent {
render() { render() {
@ -11,5 +12,5 @@ export default class Picker extends React.PureComponent {
} }
} }
Picker.propTypes = PickerPropTypes Picker.propTypes /* remove-proptypes */ = PickerPropTypes
Picker.defaultProps = { ...PickerDefaultProps, data } Picker.defaultProps = { ...PickerDefaultProps, data }

View File

@ -113,7 +113,7 @@ export default class Preview extends React.PureComponent {
} }
} }
Preview.propTypes = { Preview.propTypes /* remove-proptypes */ = {
showSkinTones: PropTypes.bool, showSkinTones: PropTypes.bool,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
emoji: PropTypes.string.isRequired, emoji: PropTypes.string.isRequired,

View File

@ -89,7 +89,7 @@ export default class Search extends React.PureComponent {
} }
} }
Search.propTypes = { Search.propTypes /* remove-proptypes */ = {
onSearch: PropTypes.func, onSearch: PropTypes.func,
maxResults: PropTypes.number, maxResults: PropTypes.number,
emojisToShowFilter: PropTypes.func, emojisToShowFilter: PropTypes.func,

View File

@ -39,7 +39,7 @@ export default class SkinsDot extends Skins {
} }
} }
SkinsDot.propTypes = { SkinsDot.propTypes /* remove-proptypes */ = {
onChange: PropTypes.func, onChange: PropTypes.func,
skin: PropTypes.number.isRequired, skin: PropTypes.number.isRequired,
i18n: PropTypes.object, i18n: PropTypes.object,

View File

@ -58,7 +58,7 @@ export default class SkinsEmoji extends Skins {
} }
} }
SkinsEmoji.propTypes = { SkinsEmoji.propTypes /* remove-proptypes */ = {
onChange: PropTypes.func, onChange: PropTypes.func,
skin: PropTypes.number.isRequired, skin: PropTypes.number.isRequired,
emojiProps: PropTypes.object.isRequired, emojiProps: PropTypes.object.isRequired,

View File

@ -30,7 +30,7 @@ export default class Skins extends React.PureComponent {
} }
} }
Skins.propTypes = { Skins.propTypes /* remove-proptypes */ = {
onChange: PropTypes.func, onChange: PropTypes.func,
skin: PropTypes.number.isRequired, skin: PropTypes.number.isRequired,
} }

View File

@ -0,0 +1,46 @@
const EmojiDefaultProps = {
skin: 1,
set: 'apple',
sheetSize: 64,
sheetColumns: 52,
sheetRows: 52,
native: false,
forceSize: false,
tooltip: false,
backgroundImageFn: (set, sheetSize) =>
`https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
onOver: () => {},
onLeave: () => {},
onClick: () => {},
}
const PickerDefaultProps = {
onClick: () => {},
onSelect: () => {},
onSkinChange: () => {},
emojiSize: 24,
perLine: 9,
i18n: {},
style: {},
title: 'Emoji Mart™',
emoji: 'department_store',
color: '#ae65c5',
set: EmojiDefaultProps.set,
skin: null,
defaultSkin: EmojiDefaultProps.skin,
native: EmojiDefaultProps.native,
sheetSize: EmojiDefaultProps.sheetSize,
backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
emojisToShowFilter: null,
showPreview: true,
showSkinTones: true,
emojiTooltip: EmojiDefaultProps.tooltip,
autoFocus: false,
custom: [],
skinEmoji: '',
notFound: () => {},
notFoundEmoji: 'sleuth_or_spy',
icons: {},
}
export { PickerDefaultProps, EmojiDefaultProps }

View File

@ -26,22 +26,6 @@ const EmojiPropTypes = {
emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
} }
const EmojiDefaultProps = {
skin: 1,
set: 'apple',
sheetSize: 64,
sheetColumns: 52,
sheetRows: 52,
native: false,
forceSize: false,
tooltip: false,
backgroundImageFn: (set, sheetSize) =>
`https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
onOver: () => {},
onLeave: () => {},
onClick: () => {},
}
const PickerPropTypes = { const PickerPropTypes = {
onClick: PropTypes.func, onClick: PropTypes.func,
onSelect: PropTypes.func, onSelect: PropTypes.func,
@ -81,38 +65,4 @@ const PickerPropTypes = {
icons: PropTypes.object, icons: PropTypes.object,
} }
const PickerDefaultProps = { export { EmojiPropTypes, PickerPropTypes }
onClick: () => {},
onSelect: () => {},
onSkinChange: () => {},
emojiSize: 24,
perLine: 9,
i18n: {},
style: {},
title: 'Emoji Mart™',
emoji: 'department_store',
color: '#ae65c5',
set: EmojiDefaultProps.set,
skin: null,
defaultSkin: EmojiDefaultProps.skin,
native: EmojiDefaultProps.native,
sheetSize: EmojiDefaultProps.sheetSize,
backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
emojisToShowFilter: null,
showPreview: true,
showSkinTones: true,
emojiTooltip: EmojiDefaultProps.tooltip,
autoFocus: false,
custom: [],
skinEmoji: '',
notFound: () => {},
notFoundEmoji: 'sleuth_or_spy',
icons: {},
}
export {
EmojiPropTypes,
EmojiDefaultProps,
PickerPropTypes,
PickerDefaultProps,
}

View File

@ -1345,13 +1345,6 @@ babel-plugin-transform-react-jsx@6.24.1, babel-plugin-transform-react-jsx@^6.24.
babel-plugin-syntax-jsx "^6.8.0" babel-plugin-syntax-jsx "^6.8.0"
babel-runtime "^6.22.0" babel-runtime "^6.22.0"
babel-plugin-transform-react-remove-prop-types@^0.4.8:
version "0.4.8"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.8.tgz#0aff04bc1d6564ec49cf23bcffb99c11881958db"
integrity sha1-Cv8EvB1lZOxJzyO8/7mcEYgZWNs=
dependencies:
babel-traverse "^6.25.0"
babel-plugin-transform-regenerator@6.24.1: babel-plugin-transform-regenerator@6.24.1:
version "6.24.1" version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418" resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
@ -1677,7 +1670,7 @@ babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.7.0:
babylon "^6.18.0" babylon "^6.18.0"
lodash "^4.17.4" lodash "^4.17.4"
babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0, babel-traverse@^6.7.2: babel-traverse@^6.24.1, babel-traverse@^6.26.0, babel-traverse@^6.7.2:
version "6.26.0" version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4= integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=