Include ES modules in NPM package

.babelrc

@@ -1,20 +1,55 @@
 {
-  "presets": ["@salesforce/babel-preset-design-system-react"],
   "env": {
+    "development": {
+			"presets": [["env", {
+				"targets": {
+					"browsers": ["last 2 versions", "ie 11"],
+					"node": "8.9.4"
+				}
+			}], "react"],
+			"plugins": ["transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"]
+    },
     "amd": {
-      "plugins": ["import-noop"]
+			"presets": [["env", {
+				"targets": {
+					"browsers": ["last 2 versions", "ie 11"],
+					"node": "8.9.4"
+				}
+			}], "react"],
+			"plugins": ["import-noop", "transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"]
     },
     "commonjs": {
-      "plugins": ["import-noop"]
-    },
+			"presets": [["env", {
+				"targets": {
+					"browsers": ["last 2 versions", "ie 11"],
+					"node": "8.9.4"
+				}
+			}], "react"],
+			"plugins": ["import-noop", "transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"]
+		},
+		"esm": {
+			"presets": [["env", {
+				"targets": {
+					"browsers": ["last 2 versions", "ie 11"],
+					"node": "8.9.4"
+				},
+				"modules": false
+			}], "react"],
+			"plugins": ["transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"]
+		},
     "test": {
-      "plugins": ["istanbul"]
+			"presets": [["env", {
+				"targets": {
+					"browsers": ["last 2 versions", "ie 11"]
+				}
+			}], "react"],
+			"plugins": ["istanbul", "transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"]
     }
   },
   "ignore": [
-    "preset/**",
+    "preset/**"
   ],
-  plugins: [
+  "plugins": [
     "root-import"
   ]
-}
+}

components/accordion/index.jsx

@@ -61,7 +61,7 @@ class Accordion extends Component {
 	}
 }
 
-export default Accordion;
-
 Accordion.displayName = ACCORDION;
 Accordion.propTypes = propTypes;
+
+export default Accordion;

components/avatar/index.jsx

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 // [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames) A
 // simple javascript utility for conditionally joining classNames together.
 import classNames from '../../utilities/class-names';
-import AVATAR from '../../utilities/constants';
+import { AVATAR } from '../../utilities/constants';
 import UtilityIcon from '../icon';
 
 // ### Display Name Always use the canonical component name as the React display
@@ -175,4 +175,4 @@ Avatar.defaultProps = defaultProps;
 Avatar.displayName = displayName;
 Avatar.propTypes = propTypes;
 
-module.exports = Avatar;
+export default Avatar;

components/forms/radio/index.jsx

@@ -111,4 +111,4 @@ Radio.displayName = RADIO;
 Radio.propTypes = propTypes;
 Radio.defaultProps = defaultProps;
 
-module.exports = Radio;
+export default Radio;

components/radio-group/index.jsx

@@ -138,4 +138,4 @@ RadioGroup.displayName = RADIO_GROUP;
 RadioGroup.propTypes = propTypes;
 RadioGroup.defaultProps = defaultProps;
 
-module.exports = RadioGroup;
+export default RadioGroup;

components/radio-group/radio.jsx

@@ -1,4 +1,4 @@
 // Alias
 import Radio from '../forms/radio/index';
 
-module.exports = Radio;
+export default Radio;

preset/index.js

@@ -7,8 +7,9 @@ module.exports = function buildPreset () {
 			require('babel-preset-env').default(null, {
 				targets: {
 					browsers: ['last 2 versions', 'ie 11'],
-					node: '6.8',
+					node: '8.9.4',
 				},
+				modules: false,
 			}),
 			require('babel-preset-react'),
 		],

scripts/dist.sh

@@ -3,7 +3,8 @@
 # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
-./node_modules/.bin/babel-node scripts/inline-icons.js --plugins transform-es2015-modules-commonjs
+npx babel-node scripts/inline-icons.js \
+    --plugins transform-es2015-modules-commonjs
 
 echo "# Building design-system-react"
 echo "## Preparing the .tmp directory"
@@ -12,13 +13,17 @@ rm -rf .tmp/
 # Uncomment this line if you need to build an AMD/Require.js module
 # rm -rf .tmp-amd/
 rm -rf .tmp-commonjs/
+# Source code
 rm -rf .tmp-es/
+# ES6 modules
+rm -rf .tmp-esm/
+# All the formats!!!
 rm -rf .tmp-npm/
 mkdir -p .tmp/
 
 echo "## Running webpack"
 
-BUILD="./node_modules/.bin/webpack --config webpack.config.dist.js"
+BUILD="npx webpack --config webpack.config.dist.js"
 
 eval $BUILD
 eval "MINIFY=true $BUILD"
@@ -35,7 +40,8 @@ cp docs/README-dist.md .tmp/README.md
 
 echo "## Running JS steps"
 
-./node_modules/.bin/babel-node scripts/dist.js
+npx babel-node scripts/dist.js \
+    --plugins transform-es2015-modules-commonjs
 
 echo "## Copying the components"
 
@@ -45,6 +51,7 @@ cp -r .tmp .tmp-commonjs
 cp -r .tmp .tmp-es
 rm -rf .tmp/
 
+# Copy source code
 cp -r components .tmp-es/components
 cp -r styles .tmp-es/styles
 cp -r icons .tmp-es/icons
@@ -76,30 +83,62 @@ echo "## Transpiling with Babel"
 
 # CommonJS module transpilation
 NODE_ENV=commonjs \
-./node_modules/.bin/babel \
+npx babel \
     .tmp-es/components \
     --plugins transform-es2015-modules-commonjs \
     --out-dir .tmp-commonjs/components \
     --ignore site-stories.js,__docs__,__examples__,__tests__
 
 cp -r styles .tmp-commonjs/styles
 
-./node_modules/.bin/babel \
+npx babel \
     .tmp-es/icons \
     --plugins transform-es2015-modules-commonjs \
     --out-dir .tmp-commonjs/icons
 
 NODE_ENV=commonjs \
-./node_modules/.bin/babel \
+npx babel \
     .tmp-es/utilities \
     --plugins transform-es2015-modules-commonjs \
     --out-dir .tmp-commonjs/utilities
 
+# ES6 module transpilation
+NODE_ENV=esm \
+npx babel \
+    .tmp-es/components \
+    --out-dir .tmp-esm/components \
+    --source-maps \
+    --ignore site-stories.js,__docs__,__examples__,__tests__
+
+cp -r styles .tmp-esm/styles
+
+cp -r icons .tmp-esm/icons
+
+NODE_ENV=esm \
+npx babel \
+    .tmp-es/utilities \
+    --source-maps \
+    --out-dir .tmp-esm/utilities
+
+NODE_ENV=esm \
+npx babel \
+    .tmp-es/icons \
+    --out-dir .tmp-esm/icons
+
+
 # NPM module structure
-# * `[root]/design-system-react.js` (UMD bundle, backwards compatible)
-# * `[root]/components/**` ES6 source code. To use: `import Button from 'design-system-react/components/button'`. This will need transpiler plugins.
-# * `lib/**` commonjs transpiled (no babel presets needed, linked to from `package.main`, this would be backwards compatible as long as you didn't want real ES6 modules, this would also be compatible with `create-react-app` See https://github.com/facebookincubator/create-react-app/issues/1125 which doesn't transpile `node_modules` ). To use: `import { Button } from 'design-system-react'`.
+# You module bundler will decide whether to use `module` or `lib` as an entry point.
+# * `/design-system-react.js` (UMD bundle, backwards compatible, all the things! -- DONT' USE in production.)
+# * `/components/**` ES6 source code. To use: `import Button from 'design-system-react/components/button'`. This will need transpiler plugins.
+# * `module/**` ES6 modules transpiled (babel-env preset needed, linked to from `package.module`, To use: `import { Button } from 'design-system-react'`.
+# * `lib/**` commonjs transpiled (no babel presets needed, linked to from `package.main`). To use: `import { Button } from 'design-system-react'`.
 cp -r .tmp-es .tmp-npm
 cp -r .tmp-commonjs .tmp-npm/lib
+cp -r .tmp-esm .tmp-npm/module
+
+# Remove browser UMD bundle from commonjs folder, since the files already exists in the root folder
+rm .tmp-npm/lib/*.map
+rm .tmp-npm/lib/*.js
 
-./node_modules/.bin/babel-node scripts/npm-transform.js --plugins transform-es2015-modules-commonjs
+npx babel-node scripts/npm-transform.js \
+    --plugins transform-es2015-modules-commonjs

scripts/npm-transform.js

@@ -34,6 +34,8 @@ async.series(
 
 			packageJSON.name = '@salesforce/design-system-react';
 			packageJSON.main = 'lib/components/index.js';
+			packageJSON.module = 'module/components/index.js';
+			packageJSON.sideEffects = false;
 
 			fs.writeFile(
 				distPath('package.json'),