feat: add slim builds for modern browsers

fixes missive#259
nolanlawson · Mar 8, 2019 · 047093c · 047093c
1 parent c27e624
commit 047093c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 37 deletions.
diff --git a/.babelrc b/.babelrc
@@ -2,45 +2,48 @@
   "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"
-        }
-      }
     ]
   ],
   "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"
+            }
+          }
+        ]
+      ]
+    },
+    "legacy-cjs": {
       "plugins": [
         "transform-es2015-modules-commonjs"
       ]

diff --git 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
@@ -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 browsers (essentially everything except
+[object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax),
+part of ES2018 and thus still not widely supported).
+
+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'
+```
+
+### 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
@@ -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",