Skip to content

Commit

Permalink
fix: allow prop-types to be removed in production
Browse files Browse the repository at this point in the history
  • Loading branch information
nolanlawson committed Mar 8, 2019
1 parent bae7afb commit f602208
Show file tree
Hide file tree
Showing 18 changed files with 97 additions and 77 deletions.
1 change: 0 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@

"transform-object-rest-spread",
"transform-runtime",
"transform-react-remove-prop-types",
[
"transform-define", "scripts/define.js"
],
Expand Down
26 changes: 26 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/anchors.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/category.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 3 additions & 2 deletions src/components/emoji/emoji.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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
8 changes: 6 additions & 2 deletions src/components/emoji/nimble-emoji.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
2 changes: 1 addition & 1 deletion src/components/not-found.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 3 additions & 2 deletions src/components/picker/nimble-picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -592,7 +593,7 @@ export default class NimblePicker extends React.PureComponent {
}
}

NimblePicker.propTypes = {
NimblePicker.propTypes /* remove-proptypes */ = {
...PickerPropTypes,
data: PropTypes.object.isRequired,
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/picker/picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
2 changes: 1 addition & 1 deletion src/components/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/search.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/skins-dot.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/skins-emoji.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/skins.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default class Skins extends React.PureComponent {
}
}

Skins.propTypes = {
Skins.propTypes /* remove-proptypes */ = {
onChange: PropTypes.func,
skin: PropTypes.number.isRequired,
}
Expand Down
46 changes: 46 additions & 0 deletions src/utils/shared-default-props.js
Original file line number Diff line number Diff line change
@@ -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 }
52 changes: 1 addition & 51 deletions src/utils/shared-props.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 }
9 changes: 1 addition & 8 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1345,13 +1345,6 @@ [email protected], 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"

[email protected]:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
Expand Down Expand Up @@ -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=
Expand Down

0 comments on commit f602208

Please sign in to comment.