From f60220870e797fdf8fb87e49041bc60584408143 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 18 Dec 2018 11:24:52 -0800 Subject: [PATCH] fix: allow prop-types to be removed in production fixes #257 --- .babelrc | 1 - README.md | 26 +++++++++++++ package.json | 1 - src/components/anchors.js | 2 +- src/components/category.js | 2 +- src/components/emoji/emoji.js | 5 ++- src/components/emoji/nimble-emoji.js | 8 +++- src/components/not-found.js | 2 +- src/components/picker/nimble-picker.js | 5 ++- src/components/picker/picker.js | 5 ++- src/components/preview.js | 2 +- src/components/search.js | 2 +- src/components/skins-dot.js | 2 +- src/components/skins-emoji.js | 2 +- src/components/skins.js | 2 +- src/utils/shared-default-props.js | 46 +++++++++++++++++++++++ src/utils/shared-props.js | 52 +------------------------- yarn.lock | 9 +---- 18 files changed, 97 insertions(+), 77 deletions(-) create mode 100644 src/utils/shared-default-props.js diff --git a/.babelrc b/.babelrc index d240a0b..11c2e5f 100644 --- a/.babelrc +++ b/.babelrc @@ -23,7 +23,6 @@ "transform-object-rest-spread", "transform-runtime", - "transform-react-remove-prop-types", [ "transform-define", "scripts/define.js" ], diff --git a/README.md b/README.md index 9d584f3..6fe8891 100644 --- a/README.md +++ b/README.md @@ -365,6 +365,32 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook ## Not opinionated **Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s 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 ```sh $ yarn build diff --git a/package.json b/package.json index e242b3f..d1e6e2b 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,6 @@ "babel-plugin-transform-define": "^1.3.0", "babel-plugin-transform-es2015-destructuring": "6.9.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-preset-es2015": "6.6.0", "babel-preset-react": "6.5.0", diff --git a/src/components/anchors.js b/src/components/anchors.js index 5008d6b..b468ce3 100644 --- a/src/components/anchors.js +++ b/src/components/anchors.js @@ -63,7 +63,7 @@ export default class Anchors extends React.PureComponent { } } -Anchors.propTypes = { +Anchors.propTypes /* remove-proptypes */ = { categories: PropTypes.array, onAnchorClick: PropTypes.func, icons: PropTypes.object, diff --git a/src/components/category.js b/src/components/category.js index dcd6b73..760be3d 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -211,7 +211,7 @@ export default class Category extends React.Component { } } -Category.propTypes = { +Category.propTypes /* remove-proptypes */ = { emojis: PropTypes.array, hasStickyPosition: PropTypes.bool, name: PropTypes.string.isRequired, diff --git a/src/components/emoji/emoji.js b/src/components/emoji/emoji.js index b74cae9..dbe727e 100644 --- a/src/components/emoji/emoji.js +++ b/src/components/emoji/emoji.js @@ -3,7 +3,8 @@ import React from 'react' import data from '../../../data/all.json' 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) => { for (let k in Emoji.defaultProps) { @@ -15,7 +16,7 @@ const Emoji = (props) => { return NimbleEmoji({ ...props }) } -Emoji.propTypes = EmojiPropTypes +Emoji.propTypes /* remove-proptypes */ = EmojiPropTypes Emoji.defaultProps = { ...EmojiDefaultProps, data } export default Emoji diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js index 8b19c6d..6e8c326 100644 --- a/src/components/emoji/nimble-emoji.js +++ b/src/components/emoji/nimble-emoji.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types' import { getData, getSanitizedData, unifiedToNative } from '../../utils' 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) => { 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 export default NimbleEmoji diff --git a/src/components/not-found.js b/src/components/not-found.js index 46c8af6..a1cbe33 100644 --- a/src/components/not-found.js +++ b/src/components/not-found.js @@ -26,7 +26,7 @@ export default class NotFound extends React.PureComponent { } } -NotFound.propTypes = { +NotFound.propTypes /* remove-proptypes */ = { notFound: PropTypes.func.isRequired, notFoundString: PropTypes.string.isRequired, emojiProps: PropTypes.object.isRequired, diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 24c0ff4..14cc218 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -8,12 +8,13 @@ import store from '../../utils/store' import frequently from '../../utils/frequently' import { deepMerge, measureScrollbar } from '../../utils' import { uncompress } from '../../utils/data' -import { PickerPropTypes, PickerDefaultProps } from '../../utils/shared-props' +import { PickerPropTypes } from '../../utils/shared-props' import Anchors from '../anchors' import Category from '../category' import Preview from '../preview' import Search from '../search' +import { PickerDefaultProps } from '../../utils/shared-default-props' const I18N = { search: 'Search', @@ -592,7 +593,7 @@ export default class NimblePicker extends React.PureComponent { } } -NimblePicker.propTypes = { +NimblePicker.propTypes /* remove-proptypes */ = { ...PickerPropTypes, data: PropTypes.object.isRequired, } diff --git a/src/components/picker/picker.js b/src/components/picker/picker.js index a96f090..8d68269 100644 --- a/src/components/picker/picker.js +++ b/src/components/picker/picker.js @@ -3,7 +3,8 @@ import React from 'react' import data from '../../../data/all.json' 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 { render() { @@ -11,5 +12,5 @@ export default class Picker extends React.PureComponent { } } -Picker.propTypes = PickerPropTypes +Picker.propTypes /* remove-proptypes */ = PickerPropTypes Picker.defaultProps = { ...PickerDefaultProps, data } diff --git a/src/components/preview.js b/src/components/preview.js index e9ab5ae..23ee8d6 100644 --- a/src/components/preview.js +++ b/src/components/preview.js @@ -113,7 +113,7 @@ export default class Preview extends React.PureComponent { } } -Preview.propTypes = { +Preview.propTypes /* remove-proptypes */ = { showSkinTones: PropTypes.bool, title: PropTypes.string.isRequired, emoji: PropTypes.string.isRequired, diff --git a/src/components/search.js b/src/components/search.js index fc8f31d..19992dd 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -89,7 +89,7 @@ export default class Search extends React.PureComponent { } } -Search.propTypes = { +Search.propTypes /* remove-proptypes */ = { onSearch: PropTypes.func, maxResults: PropTypes.number, emojisToShowFilter: PropTypes.func, diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js index c9efece..74dbc4a 100644 --- a/src/components/skins-dot.js +++ b/src/components/skins-dot.js @@ -39,7 +39,7 @@ export default class SkinsDot extends Skins { } } -SkinsDot.propTypes = { +SkinsDot.propTypes /* remove-proptypes */ = { onChange: PropTypes.func, skin: PropTypes.number.isRequired, i18n: PropTypes.object, diff --git a/src/components/skins-emoji.js b/src/components/skins-emoji.js index 8de2d19..5624a26 100644 --- a/src/components/skins-emoji.js +++ b/src/components/skins-emoji.js @@ -58,7 +58,7 @@ export default class SkinsEmoji extends Skins { } } -SkinsEmoji.propTypes = { +SkinsEmoji.propTypes /* remove-proptypes */ = { onChange: PropTypes.func, skin: PropTypes.number.isRequired, emojiProps: PropTypes.object.isRequired, diff --git a/src/components/skins.js b/src/components/skins.js index dd2b96f..8fd5154 100644 --- a/src/components/skins.js +++ b/src/components/skins.js @@ -30,7 +30,7 @@ export default class Skins extends React.PureComponent { } } -Skins.propTypes = { +Skins.propTypes /* remove-proptypes */ = { onChange: PropTypes.func, skin: PropTypes.number.isRequired, } diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js new file mode 100644 index 0000000..489869b --- /dev/null +++ b/src/utils/shared-default-props.js @@ -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 } diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js index 8a83752..74d7507 100644 --- a/src/utils/shared-props.js +++ b/src/utils/shared-props.js @@ -26,22 +26,6 @@ const EmojiPropTypes = { 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 = { onClick: PropTypes.func, onSelect: PropTypes.func, @@ -81,38 +65,4 @@ const PickerPropTypes = { icons: PropTypes.object, } -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 { - EmojiPropTypes, - EmojiDefaultProps, - PickerPropTypes, - PickerDefaultProps, -} +export { EmojiPropTypes, PickerPropTypes } diff --git a/yarn.lock b/yarn.lock index fb5d38e..e9b68d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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-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: version "6.24.1" 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" 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" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee" integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=