feat: support ESM (tree-shaking) (#455)

Ref #77

Closes #455

Author: TrySound

.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "./lib/dist/react-transition-group.js": {
-    "bundled": 79410,
-    "minified": 22589,
-    "gzipped": 6905
+    "bundled": 79947,
+    "minified": 22686,
+    "gzipped": 6939
   },
   "./lib/dist/react-transition-group.min.js": {
-    "bundled": 46139,
-    "minified": 14975,
-    "gzipped": 4685
+    "bundled": 45963,
+    "minified": 15056,
+    "gzipped": 4715
   }
 }

package.json

@@ -2,14 +2,18 @@
   "name": "react-transition-group",
   "version": "2.6.1",
   "description": "A react component toolset for managing animations",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "scripts": {
     "test": "npm run lint && npm run testonly",
     "testonly": "jest --verbose",
     "tdd": "jest --watch",
-    "build": "babel src --out-dir lib --delete-dir-on-start && npm run build:dist && cp README.md LICENSE ./lib",
+    "build": "rimraf lib && yarn build:cjs && yarn build:esm && yarn build:pick && yarn build:dist && cp README.md LICENSE ./lib",
     "build:docs": "npm -C www run build",
-    "build:dist": "cross-env BABEL_ENV=esm yarn rollup -c",
+    "build:cjs": "babel src --out-dir lib/cjs",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --out-dir lib/esm",
+    "build:pick": "cherry-pick --name=react-transition-group --cwd=lib --input-dir=../src --cjs-dir=cjs --esm-dir=esm",
+    "build:dist": "cross-env BABEL_ENV=esm rollup -c",
     "bootstrap": "yarn && yarn --cwd www",
     "lint": "eslint src test",
     "release": "release",
@@ -74,6 +78,7 @@
     "babel-loader": "^8.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
     "babel-preset-jason": "^6.0.1",
+    "cherry-pick": "^0.3.0",
     "cross-env": "^5.2.0",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",

rollup.config.js

@@ -5,7 +5,7 @@ import replace from 'rollup-plugin-replace';
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
 import { terser } from 'rollup-plugin-terser';
 
-const input = './src/umd.js';
+const input = './src/index.js';
 const name = 'ReactTransitionGroup';
 const globals = {
   react: 'React',

src/index.js

@@ -1,12 +1,4 @@
-import CSSTransition from './CSSTransition';
-import ReplaceTransition from './ReplaceTransition';
-import TransitionGroup from './TransitionGroup';
-import Transition from './Transition';
-
-
-module.exports = {
-  Transition,
-  TransitionGroup,
-  ReplaceTransition,
-  CSSTransition,
-};
+export { default as CSSTransition } from './CSSTransition';
+export { default as ReplaceTransition } from './ReplaceTransition';
+export { default as TransitionGroup } from './TransitionGroup';
+export { default as Transition } from './Transition';

src/umd.js

@@ -3419,6 +3419,16 @@ cheerio@^1.0.0-rc.2:
     lodash "^4.15.0"
     parse5 "^3.0.1"
 
+cherry-pick@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/cherry-pick/-/cherry-pick-0.3.0.tgz#b52626016c41197e6bffa0fc27074ae07988804a"
+  integrity sha512-N/+3l1f9yvD6Qpsj3jkBvSt5skLudVXGoSSQUy+yWoM13RjfVCvOiYLFr/JczOhTMwBPBuzE4WKCSxmYE1FFBg==
+  dependencies:
+    chalk "^2.4.1"
+    rimraf "^2.6.2"
+    tiny-glob "^0.2.0"
+    yargs "^11.0.0"
+
 child-process-promise@^2.2.1:
   version "2.2.1"
   resolved "http://storage.mds.yandex.net/get-npm/38095/child-process-promise-2.2.1.tgz#4730a11ef610fad450b8f223c79d31d7bdad8074"
@@ -5634,6 +5644,11 @@ globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
+globalyzer@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465"
+  integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==
+
 globby@8.0.1, globby@^8.0.0, globby@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.1.tgz#b5ad48b8aa80b35b814fc1281ecc851f1d2b5b50"
@@ -5657,6 +5672,11 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globrex@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
+  integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -11101,6 +11121,14 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-glob@^0.2.0:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.6.tgz#9e056e169d9788fe8a734dfa1ff02e9b92ed7eda"
+  integrity sha512-A7ewMqPu1B5PWwC3m7KVgAu96Ch5LA0w4SnEN/LbDREj/gAD0nPWboRbn8YoP9ISZXqeNAlMvKSKoEuhcfK3Pw==
+  dependencies:
+    globalyzer "^0.1.0"
+    globrex "^0.1.1"
+
 tiny-relative-date@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"