Babel7

.babelrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    '@babel/react',
+    '@babel/flow',
+    ['@babel/env', { modules: false, loose: true }],
+  ],
+  plugins: [
+    ['@babel/proposal-class-properties', { loose: true }],
+    ['@babel/proposal-object-rest-spread', { loose: true }],
+  ],
+  comments: false,
+};
+
+if (process.env.NODE_ENV === 'test') {
+  module.exports.plugins.push('@babel/transform-modules-commonjs');
+}

.size-snapshot.json

@@ -1,21 +1,26 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 391074,
-    "minified": 148259,
-    "gzipped": 42162
+    "bundled": 356054,
+    "minified": 134070,
+    "gzipped": 37695
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 353559,
-    "minified": 135149,
-    "gzipped": 37985
+    "bundled": 320016,
+    "minified": 121108,
+    "gzipped": 33429
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 174113,
-    "minified": 88585,
-    "gzipped": 22372,
+    "bundled": 179908,
+    "minified": 90873,
+    "gzipped": 23472,
     "treeshaked": {
-      "rollup": 76698,
-      "webpack": 78485
+      "rollup": {
+        "code": 75679,
+        "import_statements": 733
+      },
+      "webpack": {
+        "code": 77480
+      }
     }
   }
 }

.storybook/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "@babel/react",
+    "@babel/flow",
+    ["@babel/env", { "modules": false, "loose": true }]
+  ],
+  "plugins": [
+    ["@babel/proposal-class-properties", { "loose": true }],
+    ["@babel/proposal-object-rest-spread", { "loose": true }]
+  ],
+  "comments": false
+}

.storybook/babel-setup.md

@@ -0,0 +1,6 @@
+# Babel
+
+storybook looks for a root `.babelrc` in the project for its babel config. However, we are using `.babelrc.js` which is not supported. Rather than putting effort into this we are just having a custom `.babelrc` in this folder which is the same as `.babelrc.js`. This is lame, but we are looking to move away from storybook in the short term anyway.
+
+- [Storybook babel docs](https://storybook.js.org/configurations/custom-babel-config/)
+- [Storybook issue for supporting `babelrc.js`](https://github.com/storybooks/storybook/issues/2582)

package.json

@@ -46,7 +46,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "babel-runtime": "^6.26.0",
+    "@babel/runtime": "7.0.0-beta.51",
     "css-box-model": "^1.0.0",
     "memoize-one": "^4.0.0",
     "prop-types": "^15.6.1",
@@ -58,20 +58,19 @@
   },
   "devDependencies": {
     "@atlaskit/css-reset": "^2.0.6",
+    "@babel/core": "^7.0.0-beta.51",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.51",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.51",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.51",
+    "@babel/plugin-transform-runtime": "^7.0.0-beta.51",
+    "@babel/preset-env": "^7.0.0-beta.51",
+    "@babel/preset-flow": "^7.0.0-beta.51",
+    "@babel/preset-react": "^7.0.0-beta.51",
     "@storybook/react": "^3.4.8",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.5",
     "babel-jest": "^23.2.0",
     "babel-plugin-styled-components": "^1.5.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
     "cross-env": "^5.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -95,7 +94,7 @@
     "react-test-renderer": "^16.3.1",
     "rimraf": "^2.6.2",
     "rollup": "^0.61.2",
-    "rollup-plugin-babel": "^3.0.5",
+    "rollup-plugin-babel": "^4.0.0-beta.5",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",

rollup.config.js

@@ -2,13 +2,12 @@
 
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
-import uglify from 'rollup-plugin-uglify';
 import babel from 'rollup-plugin-babel';
 import replace from 'rollup-plugin-replace';
 import strip from 'rollup-plugin-strip';
+import { uglify } from 'rollup-plugin-uglify';
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
-
-const pkg = require('./package.json');
+import pkg from './package.json';
 
 const input = './src/index.js';
 const extensions = ['.js', '.jsx'];
@@ -17,9 +16,10 @@ const extensions = ['.js', '.jsx'];
 // e.g. 'react'
 const excludeAllExternals = id => !id.startsWith('.') && !id.startsWith('/');
 
-const getBabelOptions = () => ({
+const getBabelOptions = ({ useESModules }) => ({
   exclude: 'node_modules/**',
   runtimeHelpers: true,
+  plugins: [['@babel/transform-runtime', { useESModules }]],
 });
 
 const matchSnapshot = process.env.SNAPSHOT === 'match';
@@ -39,7 +39,7 @@ export default [
     // Only deep dependency required is React
     external: ['react'],
     plugins: [
-      babel(getBabelOptions()),
+      babel(getBabelOptions({ useESModules: true })),
       resolve({ extensions }),
       commonjs({ include: 'node_modules/**' }),
       replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
@@ -60,7 +60,7 @@ export default [
     plugins: [
       // Setting production env before running babel etc
       replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
-      babel(getBabelOptions()),
+      babel(getBabelOptions({ useESModules: true })),
       resolve({ extensions }),
       commonjs({ include: 'node_modules/**' }),
       strip({ debugger: true }),
@@ -75,18 +75,21 @@ export default [
     input,
     output: { file: pkg.main, format: 'cjs' },
     external: excludeAllExternals,
-    plugins: [resolve({ extensions }), babel(getBabelOptions())],
+    plugins: [
+      resolve({ extensions }),
+      babel(getBabelOptions({ useESModules: false })),
+    ],
   },
   // EcmaScript Module (esm) build
   // - Keeping console.log statements
   // - All external packages are not bundled
   {
     input,
-    output: { file: pkg.module, format: 'es' },
+    output: { file: pkg.module, format: 'esm' },
     external: excludeAllExternals,
     plugins: [
       resolve({ extensions }),
-      babel(getBabelOptions()),
+      babel(getBabelOptions({ useESModules: true })),
       sizeSnapshot({ matchSnapshot }),
     ],
   },