Add babel7 config

.babelrc

@@ -1,16 +1,20 @@
 {
   "env": {
     "test": {
-      "presets": ["env", "react"],
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-flow",
+        "@babel/preset-react"
+      ],
       "plugins": [
-        "babel-plugin-transform-async-to-generator",
-        "babel-plugin-transform-object-rest-spread",
-        "babel-plugin-transform-class-properties",
-        "babel-plugin-transform-runtime",
-        "babel-plugin-syntax-dynamic-import",
+        "@babel/plugin-transform-async-to-generator",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-syntax-dynamic-import",
         "babel-plugin-lodash",
         "babel-plugin-system-import-transformer",
-        "babel-macros"
+        "babel-plugin-macros"
       ]
     }
   }

packages/app/babel.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        '@babel/preset-env',
+        '@babel/preset-flow',
+        '@babel/preset-react',
+      ],
+      plugins: [
+        '@babel/plugin-transform-destructuring',
+        '@babel/plugin-transform-async-to-generator',
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-transform-runtime',
+        '@babel/plugin-syntax-dynamic-import',
+        'babel-plugin-lodash',
+        'babel-plugin-system-import-transformer',
+        'babel-plugin-macros',
+      ],
+    },
+  },
+};

packages/app/config/babel.dev.js

@@ -6,37 +6,33 @@ module.exports = {
   cacheDirectory: true,
   presets: [
     // Latest stable ECMAScript features
+    require.resolve('@babel/preset-flow'),
     [
-      'env',
+      require.resolve('@babel/preset-env'),
       {
         targets: {
           chrome: 67,
           // We currently minify with uglify
           // Remove after https://github.com/mishoo/UglifyJS2/issues/448
-          uglify: true,
         },
         // Disable polyfill transforms
         useBuiltIns: false,
         modules: false,
+        forceAllTransforms: true,
       },
     ],
     // JSX, Flow
-    'react',
+    require.resolve('@babel/preset-react'),
   ],
   plugins: [
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    require.resolve('babel-plugin-transform-class-properties'),
-    require.resolve('babel-plugin-transform-runtime'),
+    require.resolve('@babel/plugin-transform-template-literals'),
+    require.resolve('@babel/plugin-transform-destructuring'),
+    require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    require.resolve('@babel/plugin-proposal-class-properties'),
+    require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
-    require.resolve('babel-plugin-syntax-dynamic-import'),
+    require.resolve('@babel/plugin-syntax-dynamic-import'),
     require.resolve('babel-plugin-styled-components'),
-    require.resolve('babel-macros'),
-    [
-      require.resolve('react-loadable/babel'),
-      {
-        server: true,
-        webpack: true,
-      },
-    ],
+    require.resolve('babel-plugin-macros'),
   ],
 };

packages/app/config/babel.prod.js

@@ -4,45 +4,60 @@ module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   presets: [
+    require.resolve('@babel/preset-flow'),
     // Latest stable ECMAScript features
     [
-      'env',
+      require.resolve('@babel/preset-env'),
       {
         targets: {
           ie: 11,
-          // We currently minify with uglify
-          // Remove after https://github.com/mishoo/UglifyJS2/issues/448
-          uglify: true,
         },
         // Disable polyfill transforms
         useBuiltIns: false,
         modules: false,
+        forceAllTransforms: true,
       },
     ],
     // JSX, Flow
-    'react',
+    require.resolve('@babel/preset-react'),
   ],
   plugins: [
-    require.resolve('babel-plugin-transform-async-to-generator'),
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    require.resolve('babel-plugin-transform-class-properties'),
-    require.resolve('babel-plugin-transform-runtime'),
+    require.resolve('@babel/plugin-transform-template-literals'),
+    require.resolve('@babel/plugin-transform-destructuring'),
+    require.resolve('@babel/plugin-transform-async-to-generator'),
+    require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    require.resolve('@babel/plugin-proposal-class-properties'),
+    require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
-    require.resolve('babel-plugin-syntax-dynamic-import'),
+    require.resolve('@babel/plugin-syntax-dynamic-import'),
     require.resolve('babel-plugin-styled-components'),
-    require.resolve('babel-macros'),
-    [
-      require.resolve('react-loadable/babel'),
-      {
-        server: true,
-        webpack: true,
-      },
-    ],
+    require.resolve('babel-plugin-macros'),
     // Optimization: hoist JSX that never changes out of render()
     // Disabled because of issues:
     // * https://github.com/facebookincubator/create-react-app/issues/525
     // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/
     // TODO: Enable again when these issues are resolved.
     // require.resolve('babel-plugin-transform-react-constant-elements')
   ],
+  overrides: [
+    {
+      test: ['../src/sandbox'],
+      presets: [
+        require.resolve('@babel/preset-flow'),
+        // Latest stable ECMAScript features
+        [
+          require.resolve('@babel/preset-env'),
+          {
+            targets: {
+              ie: 11,
+            },
+            // Disable polyfill transforms
+            useBuiltIns: false,
+            modules: false,
+            forceAllTransforms: true,
+          },
+        ],
+      ],
+    },
+  ],
 };

packages/app/config/polyfills.js

@@ -1,23 +1,21 @@
+const g = typeof window === 'undefined' ? self : window;
+
 if (typeof Promise === 'undefined') {
   // Rejection tracking prevents a common issue where React gets into an
   // inconsistent state due to an error, but it gets swallowed by a Promise,
   // and the user has no idea what causes React's erratic future behavior.
   require('promise/lib/rejection-tracking').enable();
-  window.Promise = require('promise/lib/es6-extensions.js');
+  g.Promise = require('promise/lib/es6-extensions.js');
 }
 
 // fetch() polyfill for making API calls.
 require('whatwg-fetch');
 
-// Object.assign() is commonly used with React.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');
-
-window.cosmiconfig = {};
-window.prettier = {};
-window.jsdom = {
+g.cosmiconfig = {};
+g.prettier = {};
+g.jsdom = {
   JSDOM: {
-    fragment(htmlString) {
+    fragment: function(htmlString) {
       const div = document.createElement('div');
       div.innerHTML = htmlString.trim();
 
@@ -26,3 +24,9 @@ window.jsdom = {
     },
   },
 };
+
+// IE11
+require('core-js/fn/array/find');
+require('core-js/fn/array/from');
+require('core-js/fn/object/assign');
+require('core-js/fn/symbol');

packages/app/config/webpack.common.js

@@ -65,10 +65,7 @@ module.exports = {
           require.resolve('./polyfills'),
           path.join(paths.appSrc, 'index.js'),
         ],
-        sandbox: [
-          require.resolve('./polyfills'),
-          path.join(paths.sandboxSrc, 'index.js'),
-        ],
+        sandbox: [path.join(paths.sandboxSrc, 'index.js')],
         'sandbox-startup': path.join(paths.sandboxSrc, 'startup.js'),
         embed: [
           require.resolve('./polyfills'),
@@ -97,26 +94,18 @@ module.exports = {
         loader: 'file-loader',
         type: 'javascript/auto',
       },
-      {
-        test: /\.js$/,
-        include: [paths.src, paths.common, /@emmetio/],
-        exclude: [
-          /eslint\.4\.1\.0\.min\.js$/,
-          /typescriptServices\.js$/,
-          /\.no-webpack\./,
-        ],
-        loader: 'happypack/loader',
-      },
-
       // Transpile node dependencies, node deps are often not transpiled for IE11
       {
         test: [
           new RegExp(`${sepRe}node_modules${sepRe}.*ansi-styles`),
           new RegExp(`${sepRe}node_modules${sepRe}.*chalk`),
           new RegExp(`${sepRe}node_modules${sepRe}.*jest`),
-          new RegExp(`sandbox-hooks`),
           new RegExp(`${sepRe}node_modules${sepRe}.*monaco-textmate`),
           new RegExp(`${sepRe}node_modules${sepRe}.*onigasm`),
+          new RegExp(`react-icons`),
+          new RegExp(`${sepRe}node_modules${sepRe}.*gsap`),
+          new RegExp(`${sepRe}node_modules${sepRe}.*babel-plugin-macros`),
+          new RegExp(`sandbox-hooks`),
           new RegExp(
             `${sepRe}node_modules${sepRe}vue-template-es2015-compiler`
           ),
@@ -127,25 +116,40 @@ module.exports = {
         loader: 'babel-loader',
         query: {
           presets: [
+            '@babel/preset-flow',
             [
-              'env',
+              '@babel/preset-env',
               {
                 targets: {
                   ie: 11,
                   esmodules: true,
                 },
+                modules: 'umd',
+                useBuiltIns: false,
               },
             ],
-            'react',
+            '@babel/preset-react',
           ],
           plugins: [
-            'transform-async-to-generator',
-            'transform-object-rest-spread',
-            'transform-class-properties',
-            'transform-runtime',
+            '@babel/plugin-transform-template-literals',
+            '@babel/plugin-transform-destructuring',
+            '@babel/plugin-transform-async-to-generator',
+            '@babel/plugin-proposal-object-rest-spread',
+            '@babel/plugin-proposal-class-properties',
+            '@babel/plugin-transform-runtime',
           ],
         },
       },
+      {
+        test: /\.js$/,
+        include: [paths.src, paths.common, /@emmetio/],
+        exclude: [
+          /eslint\.4\.1\.0\.min\.js$/,
+          /typescriptServices\.js$/,
+          /\.no-webpack\./,
+        ],
+        loader: 'happypack/loader',
+      },
 
       // `eslint-plugin-vue/lib/index.js` depends on `fs` module we cannot use in browsers, so needs shimming.
       {

packages/app/integration-tests/browser-tests/browsers.test.js

@@ -10,6 +10,7 @@ function getCapabilities(browserInfo) {
     'browserstack.user': process.env.BROWSER_STACK_USER,
     'browserstack.key': process.env.BROWSER_STACK_KEY,
     'browserstack.local': 'true',
+    'browserstack.debug': 'true',
     'browserstack.console': 'errors',
     'browserstack.networkLogs': true,
     build: hash,