Merge pull request #1668 from storybooks/switchto-babel-preset-env

Switch to babel preset env + async/await/generator support

addons/storyshots/package.json

@@ -25,7 +25,7 @@
     "@storybook/react": "^3.2.5",
     "babel-cli": "^6.24.1",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"

app/react-native/package.json

@@ -40,8 +40,8 @@
     "babel-plugin-transform-regenerator": "^6.24.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.2.0",    
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.23.0",

app/react-native/src/server/config/babel.js

@@ -1,33 +1,20 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   presets: [
-    // let, const, destructuring, classes, modules
-    require.resolve('babel-preset-es2015'),
-    // exponentiation
-    require.resolve('babel-preset-es2016'),
-    // JSX, Flow
+    [
+      require.resolve('babel-preset-env'),
+      {
+        modules: false,
+      },
+    ],
     require.resolve('babel-preset-react'),
   ],
   plugins: [
-    // function x(a, b, c,) { }
     require.resolve('babel-plugin-syntax-trailing-function-commas'),
-    // await fetch()
     require.resolve('babel-plugin-syntax-async-functions'),
-    // class { handleClick = () => { } }
     require.resolve('babel-plugin-transform-class-properties'),
-    // { ...todo, completed: true }
     require.resolve('babel-plugin-transform-object-rest-spread'),
-    // function* () { yield 42; yield 43; }
     require.resolve('babel-plugin-transform-regenerator'),
     // Polyfills the runtime needed for async/await and generators
     [

app/react-native/src/server/config/babel.prod.js

@@ -1,33 +1,21 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   presets: [
-    // let, const, destructuring, classes, modules
-    require.resolve('babel-preset-es2015'),
-    // exponentiation
-    require.resolve('babel-preset-es2016'),
-    // JSX, Flow
+    [
+      require.resolve('babel-preset-env'),
+      {
+        modules: false,
+      },
+    ],
     require.resolve('babel-preset-react'),
+    require.resolve('babel-preset-minify'),
   ],
   plugins: [
-    // function x(a, b, c,) { }
     require.resolve('babel-plugin-syntax-trailing-function-commas'),
-    // await fetch()
     require.resolve('babel-plugin-syntax-async-functions'),
-    // class { handleClick = () => { } }
     require.resolve('babel-plugin-transform-class-properties'),
-    // { ...todo, completed: true }
     require.resolve('babel-plugin-transform-object-rest-spread'),
-    // function* () { yield 42; yield 43; }
     require.resolve('babel-plugin-transform-regenerator'),
     // Polyfills the runtime needed for async/await and generators
     [
@@ -38,7 +26,5 @@ module.exports = {
         regenerator: true,
       },
     ],
-    // Optimization: hoist JSX that never changes out of render()
-    require.resolve('babel-plugin-transform-react-constant-elements'),
   ],
 };

app/react/package.json

@@ -32,8 +32,8 @@
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-react-docgen": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.2.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.0.0",
     "babel-preset-stage-0": "^6.24.1",

app/react/src/server/babel_config.test.js

@@ -12,7 +12,7 @@ describe('babel_config', () => {
     mock({
       '.babelrc': `{
         "presets": [
-          "es2015",
+          "env",
           "foo-preset"
         ],
         "plugins": [
@@ -41,7 +41,7 @@ describe('babel_config', () => {
     mock({
       '.babelrc': `{
         "presets": [
-          "es2015",
+          "env",
           "foo-preset"
         ],
         "plugins": "bar-plugin"
@@ -68,7 +68,7 @@ describe('babel_config', () => {
     mock({
       '.babelrc': `{
         "presets": [
-          "es2015",
+          "env",
           "foo-preset"
         ]
       }`,

app/react/src/server/config/babel.js

@@ -1,19 +1,31 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
+const findCacheDir = require('find-cache-dir');
 
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
+  cacheDirectory: findCacheDir({ name: 'react-storybook' }),
   presets: [
-    require.resolve('babel-preset-es2015'),
-    require.resolve('babel-preset-es2016'),
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: false,
+      },
+    ],
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
   ],
+  plugins: [
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
 };

app/react/src/server/config/babel.prod.js

@@ -1,19 +1,29 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   presets: [
-    require.resolve('babel-preset-es2015'),
-    require.resolve('babel-preset-es2016'),
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: false,
+      },
+    ],
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
+    require.resolve('babel-preset-minify'),
+  ],
+  plugins: [
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
   ],
 };

app/vue/package.json

@@ -33,6 +33,7 @@
     "babel-loader": "^7.0.0",
     "babel-plugin-react-docgen": "^1.6.0",
     "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.2.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.0.0",
     "babel-preset-stage-0": "^6.24.1",

app/vue/src/server/babel_config.test.js

@@ -12,7 +12,7 @@ describe('babel_config', () => {
     mock({
       '.babelrc': `{
         "presets": [
-          "es2015",
+          "env",
           "foo-preset"
         ],
         "plugins": [
@@ -41,7 +41,7 @@ describe('babel_config', () => {
     mock({
       '.babelrc': `{
         "presets": [
-          "es2015",
+          "env",
           "foo-preset"
         ],
         "plugins": "bar-plugin"
@@ -68,7 +68,7 @@ describe('babel_config', () => {
     mock({
       '.babelrc': `{
         "presets": [
-          "es2015",
+          "env",
           "foo-preset"
         ]
       }`,

app/vue/src/server/config/babel.js

@@ -1,24 +1,31 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
 const findCacheDir = require('find-cache-dir');
 
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables a cache directory for faster-rebuilds
-  // `find-cache-dir` will create the cache directory under the node_modules directory.
   cacheDirectory: findCacheDir({ name: 'react-storybook' }),
   presets: [
-    require.resolve('babel-preset-env'),
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: false,
+      },
+    ],
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
   ],
+  plugins: [
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
 };

app/vue/src/server/config/babel.prod.js

@@ -1,18 +1,29 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   presets: [
-    require.resolve('babel-preset-env'),
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: false,
+      },
+    ],
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
+    require.resolve('babel-preset-minify'),
+  ],
+  plugins: [
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
   ],
 };

lib/cli/generators/METEOR/index.js

@@ -9,8 +9,7 @@ module.exports = Promise.all([
   latestVersion('@storybook/react'),
   latestVersion('react'),
   latestVersion('react-dom'),
-  latestVersion('babel-preset-es2015'),
-  latestVersion('babel-preset-es2016'),
+  latestVersion('babel-preset-env'),
   latestVersion('babel-preset-react'),
   latestVersion('babel-preset-stage-1'),
   latestVersion('babel-root-slash-import'),
@@ -20,8 +19,7 @@ module.exports = Promise.all([
       storybookVersion,
       reactVersion,
       reactDomVersion,
-      presetEs2015Version,
-      presetEs2016Version,
+      presetEnvVersion,
       presetReactVersion,
       presetStage1Version,
       rootSlashImportVersion,
@@ -47,12 +45,11 @@ module.exports = Promise.all([
       }
     } else {
       babelrc = {
-        presets: ['es2015', 'es2016', 'react', 'stage-1'],
+        presets: ['env', 'react', 'stage-1'],
         plugins: ['babel-root-slash-import'],
       };
 
-      packageJson.devDependencies['babel-preset-es2015'] = `^${presetEs2015Version}`;
-      packageJson.devDependencies['babel-preset-es2016'] = `^${presetEs2016Version}`;
+      packageJson.devDependencies['babel-preset-env'] = `^${presetEnvVersion}`;
       packageJson.devDependencies['babel-preset-react'] = `^${presetReactVersion}`;
       packageJson.devDependencies['babel-preset-stage-1'] = `^${presetStage1Version}`;
       packageJson.devDependencies['babel-root-slash-import'] = `^${rootSlashImportVersion}`;

lib/ui/example/package.json

@@ -9,7 +9,7 @@
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.2",
     "babel-loader": "^7.0.0",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "eslint": "^3.19.0",