feat: add slim builds for modern browsers

fixes missive#259
nolanlawson · Dec 18, 2018 · 606ed96 · 606ed96
1 parent 19f6876
commit 606ed96
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 36 deletions.
diff --git a/.babelrc b/.babelrc
@@ -2,27 +2,7 @@
   "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-react-remove-prop-types",
       {
@@ -35,22 +15,45 @@
     ],
     [
       "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,6 +365,29 @@ 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.
 
+## 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'
+```
+
 ## Development
 ```sh
 $ yarn build

diff --git a/package.json b/package.json
@@ -62,9 +62,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",