From b1be15578750504d7c78fd8c90e78aada150a78d Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 18 Dec 2018 13:54:21 -0800 Subject: [PATCH] feat: add slim builds for modern browsers fixes #259 --- .babelrc | 73 +++++++++++++++++++++++++++------------------------- .gitignore | 1 + README.md | 28 +++++++++++++++++++- package.json | 7 ++--- 4 files changed, 70 insertions(+), 39 deletions(-) diff --git a/.babelrc b/.babelrc index fe082af..14f50df 100644 --- a/.babelrc +++ b/.babelrc @@ -2,47 +2,50 @@ "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", - { - "alias": { - "babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf", - "babel-runtime/helpers/extends": "./src/polyfills/extends", - "babel-runtime/helpers/inherits": "./src/polyfills/inherits", - "babel-runtime/helpers/createClass": "./src/polyfills/createClass", - "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn", - "babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck", - "babel-runtime/core-js/object/keys": "./src/polyfills/keys" - } - } ] ], "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", + "transform-runtime", + [ + "module-resolver", + { + "alias": { + "babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf", + "babel-runtime/helpers/extends": "./src/polyfills/extends", + "babel-runtime/helpers/inherits": "./src/polyfills/inherits", + "babel-runtime/helpers/createClass": "./src/polyfills/createClass", + "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn", + "babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck", + "babel-runtime/core-js/object/keys": "./src/polyfills/keys" + } + } + ] + ] + }, + "legacy-cjs": { "plugins": [ "transform-es2015-modules-commonjs" ] diff --git a/.gitignore b/.gitignore index 90717de..a45ab12 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 30cbec0..0087e4c 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 8362817..fe2edfe 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",