Merge pull request #258 from nolanlawson/remove-proptypes

fix: allow prop-types to be removed in production

.babelrc

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

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

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",

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,

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,

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

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

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,

src/components/picker/nimble-picker.js

@@ -8,12 +8,13 @@ import store from '../../utils/store'
 import frequently from '../../utils/frequently'
 import { deepMerge, measureScrollbar, getSanitizedData } 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',
@@ -597,7 +598,7 @@ export default class NimblePicker extends React.PureComponent {
   }
 }
 
-NimblePicker.propTypes = {
+NimblePicker.propTypes /* remove-proptypes */ = {
   ...PickerPropTypes,
   data: PropTypes.object.isRequired,
 }

src/components/picker/picker.js

@@ -3,13 +3,14 @@ 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() {
     return <NimblePicker {...this.props} {...this.state} />
   }
 }
 
-Picker.propTypes = PickerPropTypes
+Picker.propTypes /* remove-proptypes */ = PickerPropTypes
 Picker.defaultProps = { ...PickerDefaultProps, data }

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,

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,

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,

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,

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,
 }

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 }

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 }

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=