diff --git a/.babelrc b/.babelrc index fe082af21..c3452a543 100644 --- a/.babelrc +++ b/.babelrc @@ -2,30 +2,8 @@ "presets": ["react"], "plugins": [ "check-es2015-constants", - "transform-es2015-arrow-functions", - "transform-es2015-block-scoped-functions", - "transform-es2015-block-scoping", - "transform-es2015-classes", - "transform-es2015-computed-properties", - "transform-es2015-destructuring", - "transform-es2015-duplicate-keys", - "transform-es2015-for-of", - "transform-es2015-function-name", - "transform-es2015-literals", - "transform-es2015-object-super", - "transform-es2015-parameters", - "transform-es2015-shorthand-properties", - "transform-es2015-spread", - "transform-es2015-sticky-regex", - "transform-es2015-template-literals", - "transform-es2015-unicode-regex", - "transform-regenerator", - "transform-object-rest-spread", "transform-runtime", - [ - "transform-define", "scripts/define.js" - ], [ "module-resolver", { @@ -39,10 +17,35 @@ "babel-runtime/core-js/object/keys": "./src/polyfills/keys" } } + ], + [ + "transform-define", "scripts/define.js" ] ], "env": { - "cjs": { + "legacy-es": { + "plugins": [ + "transform-es2015-arrow-functions", + "transform-es2015-block-scoped-functions", + "transform-es2015-block-scoping", + "transform-es2015-classes", + "transform-es2015-computed-properties", + "transform-es2015-destructuring", + "transform-es2015-duplicate-keys", + "transform-es2015-for-of", + "transform-es2015-function-name", + "transform-es2015-literals", + "transform-es2015-object-super", + "transform-es2015-parameters", + "transform-es2015-shorthand-properties", + "transform-es2015-spread", + "transform-es2015-sticky-regex", + "transform-es2015-template-literals", + "transform-es2015-unicode-regex", + "transform-regenerator" + ] + }, + "legacy-cjs": { "plugins": [ "transform-es2015-modules-commonjs" ] diff --git a/.gitignore b/.gitignore index 90717debb..a45ab12d0 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,6 @@ node_modules/ dist/ dist-es/ +dist-modern/ stats.json report.html diff --git a/README.md b/README.md index 30cbec017..0087e4ca8 100644 --- a/README.md +++ b/README.md @@ -365,7 +365,33 @@ 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 + +## Optimizing for production + +### Modern/ES builds + +**Emoji Mart** comes in three flavors: + +``` +dist +dist-es +dist-modern +``` + +- `dist` is the standard build with the highest level of compatibility. +- `dist-es` is the same, but uses ES modules for better tree-shaking. +- `dist-modern` removes features not needed in modern evergreen browsers (i.e. latest Chrome, Edge, Firefox, and Safari). + +The default builds are `dist` and `dist-es`. (In Webpack, one or the other will be chosen based on your [resolve main fields](https://webpack.js.org/configuration/resolve/#resolve-mainfields).) +If you want to use `dist-modern`, you must explicitly import it: + +```js +import { Picker } from 'emoji-mart/dist-modern/index.js' +``` + +Using something like Babel, you can transpile the modern build to suit your own needs. + +### Removing prop-types 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): diff --git a/package.json b/package.json index 83628172c..fe2edfeb9 100644 --- a/package.json +++ b/package.json @@ -61,9 +61,10 @@ "scripts": { "clean": "rm -rf dist/ dist-es/", "build:data": "node scripts/build-data", - "build:dist": "npm run build:cjs && npm run build:es", - "build:cjs": "BABEL_ENV=cjs babel src --out-dir dist --copy-files", - "build:es": "babel src --out-dir dist-es --copy-files", + "build:dist": "npm run build:cjs && npm run build:es && npm run build:modern", + "build:cjs": "BABEL_ENV=legacy-cjs babel src --out-dir dist --copy-files", + "build:es": "BABEL_ENV=legacy-es babel src --out-dir dist-es --copy-files", + "build:modern": "babel src --out-dir dist-modern --copy-files", "build:docs": "cp css/emoji-mart.css docs && webpack --config ./docs/webpack.config.js", "build": "npm run clean && npm run build:dist", "watch": "BABEL_ENV=cjs babel src --watch --out-dir dist --copy-files",