Merge pull request #260 from nolanlawson/add-slim-build

feat: add slim builds for modern browsers

.babelrc

@@ -2,6 +2,29 @@
   "presets": ["react"],
   "plugins": [
     "check-es2015-constants",
+    "transform-object-rest-spread",
+    "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"
+        }
+      }
+    ],
+    [
+      "transform-define", "scripts/define.js"
+    ]
+  ],
+  "env": {
+    "legacy-es": {
+      "plugins": [
         "transform-es2015-arrow-functions",
         "transform-es2015-block-scoped-functions",
         "transform-es2015-block-scoping",
@@ -19,30 +42,10 @@
         "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"
-        }
-      }
+        "transform-regenerator"
       ]
-  ],
-  "env": {
-    "cjs": {
+    },
+    "legacy-cjs": {
       "plugins": [
         "transform-es2015-modules-commonjs"
       ]

.gitignore

@@ -2,5 +2,6 @@
 node_modules/
 dist/
 dist-es/
+dist-modern/
 stats.json
 report.html

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):
 

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