codesandbox · CompuIves · Oct 1, 2018 · Sep 23, 2018 · Sep 23, 2018 · Sep 23, 2018
diff --git a/.babelrc b/.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"
       ]
     }
   }

diff --git a/packages/app/babel.config.js b/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',
+      ],
+    },
+  },
+};
diff --git a/packages/app/config/babel.dev.js b/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'),
   ],
 };
diff --git a/packages/app/config/babel.prod.js b/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,
+          },
+        ],
+      ],
+    },
+  ],
 };
diff --git a/packages/app/config/polyfills.js b/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');
diff --git a/packages/app/config/webpack.common.js b/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.
       {

diff --git a/packages/app/integration-tests/browser-tests/browsers.test.js b/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,

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -10,7 +10,7 @@
     "start": "cross-env LOCAL_SERVER=1 node scripts/start.js",
     "start:sandbox": "cross-env SANDBOX_ONLY=true node scripts/start.js",
     "start:dev_api": "node scripts/start.js",
-    "start:test": "cross-env LOCAL_SERVER=1 NODE_ENV=test SANDBOX_ONLY=true node scripts/start.js",
+    "start:test": "cross-env LOCAL_SERVER=1 SANDBOX_ONLY=true node scripts/start.js",
     "build": "cross-env NODE_ENV=production node scripts/build.js",
     "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js",
     "build:clean": "rimraf www",
@@ -24,14 +24,26 @@
     "typecheck": "flow check"
   },
   "devDependencies": {
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
+    "@babel/helper-module-imports": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-async-to-generator": "^7.1.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/plugin-transform-template-literals": "^7.0.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "autoprefixer": "8.5.0",
-    "babel-core": "^6.26.0",
-    "babel-jest": "^21.2.0",
-    "babel-loader": "7.1.1",
-    "babel-macros": "^1.0.2",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "8.0.2",
     "babel-plugin-codegen": "^1.2.0",
-    "babel-plugin-lodash": "^3.2.11",
-    "babel-plugin-styled-components": "1.5.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-styled-components": "1.7.1",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
@@ -98,6 +110,7 @@
     "worker-loader": "2.0.0"
   },
   "dependencies": {
+    "@babel/plugin-transform-destructuring": "^7.1.2",
     "@cerebral/http": "^4.0.0",
     "@cerebral/mobx-state-tree": "^3.0.0",
     "@emmetio/codemirror-plugin": "^0.3.5",
@@ -109,9 +122,11 @@
     "axios": "^0.16.2",
     "babel-code-frame": "^6.26.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.2",
+    "babel-macros": "^2.0.0",
     "babel-plugin-detective": "^2.0.0",
     "babel-plugin-dynamic-import-node": "^1.0.2",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
+    "babel-plugin-macros": "^2.4.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-system-import": "^1.1.5",
     "babel-plugin-system-import-transformer": "3.1.0",
@@ -187,13 +202,13 @@
     "qs": "^6.5.0",
     "querystring": "^0.2.0",
     "rc-slider": "^8.2.0",
-    "react": "16.3.0",
+    "react": "16.5.2",
     "react-addons-css-transition-group": "^15.6.0",
     "react-apollo": "^2.1.4",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
-    "react-dom": "16.3.0",
-    "react-draggable": "^3.0.4",
+    "react-dom": "16.5.2",
+    "react-draggable": "^3.0.5",
     "react-error-overlay": "^1.0.10",
     "react-icons": "^2.2.7",
     "react-inspector": "^2.2.0",
@@ -235,7 +250,7 @@
       "/create-zip\\/.*\\/files/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(common|lodash-es|sandbox-hooks|react-icons))"
+      "node_modules/(?!(common|lodash-es|sandbox-hooks|react-icons)/.+\\.js$)"
     ],
     "moduleNameMapper": {
       "\\.css$": "<rootDir>/__mocks__/styleMock.js",

diff --git a/packages/app/src/app/components/CodeEditor/index.js b/packages/app/src/app/components/CodeEditor/index.js
@@ -1,8 +1,7 @@
 // @flow
 
 import React from 'react';
-import Loadable from 'react-loadable';
-import Loading from 'app/components/Loading';
+import Loadable from 'app/utils/Loadable';
 import Title from 'app/components/Title';
 import SubTitle from 'app/components/SubTitle';
 import getUI from 'common/templates/configuration/ui';
@@ -23,11 +22,9 @@ import Configuration from './Configuration';
 import MonacoDiff from './MonacoDiff';
 import { Icons, Icon } from './elements';
 
-const CodeMirror = Loadable({
-  loader: () =>
-    import(/* webpackChunkName: 'codemirror-editor' */ './CodeMirror'),
-  LoadingComponent: Loading,
-});
+const CodeMirror = Loadable(() =>
+  import(/* webpackChunkName: 'codemirror-editor' */ './CodeMirror')
+);
 
 const getDependencies = (sandbox: Sandbox): ?{ [key: string]: string } => {
   const packageJSON = sandbox.modules.find(

diff --git a/...ages/Dashboard/Sidebar/SandboxesItem/utils/__snapshots__/get-direct-children.test.js.snap b/...ages/Dashboard/Sidebar/SandboxesItem/utils/__snapshots__/get-direct-children.test.js.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`get-direct-children works with deeper paths 1`] = `
-Array [
+Set {
   "test2",
   "test3",
-]
+}
 `;
 
 exports[`get-direct-children works with root path 1`] = `
-Array [
+Set {
   "test",
   "test2",
-]
+}
 `;
 
 exports[`get-direct-children works with sub paths 1`] = `
-Array [
+Set {
   "test2",
-]
+}
 `;
diff --git a/packages/app/src/app/pages/Sandbox/QuickActions/index.js b/packages/app/src/app/pages/Sandbox/QuickActions/index.js
@@ -18,7 +18,7 @@ import {
 class QuickActions extends React.Component {
   // we'll just keep track of what the user changes the inputValue to be
   // so when the user makes a wish we can provide that info to genie
-  inputValue = ''
+  inputValue = '';
   updateGenie = () => {
     const keybindings = this.props.store.preferences.keybindings;
     const signals = this.props.signals;
@@ -74,18 +74,20 @@ class QuickActions extends React.Component {
 
   persistGenie() {
     const { enteredMagicWords } = genie.options();
-    window.localStorage.setItem('genie', JSON.stringify({ enteredMagicWords }))
+    window.localStorage.setItem('genie', JSON.stringify({ enteredMagicWords }));
   }
 
   loadGenie() {
-    try {    
-      const { enteredMagicWords } = JSON.parse(window.localStorage.getItem('genie'))
-      genie.options({ enteredMagicWords })
+    try {
+      const { enteredMagicWords } = JSON.parse(
+        window.localStorage.getItem('genie')
+      );
+      genie.options({ enteredMagicWords });
     } catch (error) {
       // it may not exist in localStorage yet, or the JSON was malformed somehow
       // so we'll persist it to update localStorage so it doesn't throw an error
       // next time the page is loaded.
-      this.persistGenie()
+      this.persistGenie();
     }
   }
 
@@ -115,7 +117,7 @@ class QuickActions extends React.Component {
           }) => {
             const inputProps = getInputProps({
               onChange: ev => {
-                this.inputValue = ev.target.value
+                this.inputValue = ev.target.value;
               },
               innerRef: el => el && el.focus(),
               onKeyUp: this.handleKeyUp,

diff --git a/packages/app/src/app/pages/common/UserMenu/elements.js b/packages/app/src/app/pages/common/UserMenu/elements.js
@@ -26,11 +26,13 @@ export const Name = styled.div`
 `;
 
 export const Username = styled.div`
-  color: ${props =>
-    props.main
-      ? props.theme['editor.foreground'] || 'white'
-      : props.theme.light
-        ? 'rgba(0, 0, 0, 0.6)'
-        : 'rgba(255, 255, 255, 0.6)'};
+  color: ${props => {
+    if (props.main) {
+      return props.theme['editor.foreground'] || 'white';
+    }
+    return props.theme.light
+      ? 'rgba(0, 0, 0, 0.6)'
+      : 'rgba(255, 255, 255, 0.6)';
+  }}
   font-size: ${props => (props.main ? 1 : 0.875)}em;
 `;
diff --git a/packages/app/src/app/pages/index.js b/packages/app/src/app/pages/index.js
@@ -1,12 +1,11 @@
 // @flow
 import * as React from 'react';
 import { inject, observer } from 'mobx-react';
-import Loadable from 'react-loadable';
+import Loadable from 'app/utils/Loadable';
 import { Route, Switch, Redirect } from 'react-router-dom';
 
 import _debug from 'app/utils/debug';
 import Notifications from 'app/pages/common/Notifications';
-import Loading from 'app/components/Loading';
 import { DragDropContext } from 'react-dnd';
 
 import send, { DNT } from 'common/utils/analytics';
@@ -21,53 +20,37 @@ import HTML5Backend from './common/HTML5BackendWithFolderSupport';
 
 const routeDebugger = _debug('cs:app:router');
 
-const SignIn = Loadable({
-  loader: () =>
-    import(/* webpackChunkName: 'page-sign-in' */ './common/SignIn'),
-  LoadingComponent: Loading,
-});
-const Live = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-sign-in' */ './Live'),
-  LoadingComponent: Loading,
-});
-const ZeitSignIn = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-zeit' */ './common/ZeitAuth'),
-  LoadingComponent: Loading,
-});
-const NotFound = Loadable({
-  loader: () =>
-    import(/* webpackChunkName: 'page-not-found' */ './common/NotFound'),
-  LoadingComponent: Loading,
-});
-const Profile = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-profile' */ './Profile'),
-  LoadingComponent: Loading,
-});
-const Search = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-search' */ './Search'),
-  LoadingComponent: Loading,
-});
-const CLI = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-cli' */ './CLI'),
-  LoadingComponent: Loading,
-});
-const GitHub = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-github' */ './GitHub'),
-  LoadingComponent: Loading,
-});
-const CliInstructions = Loadable({
-  loader: () =>
-    import(/* webpackChunkName: 'page-cli-instructions' */ './CliInstructions'),
-  LoadingComponent: Loading,
-});
-const Patron = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-patron' */ './Patron'),
-  LoadingComponent: Loading,
-});
-const Terms = Loadable({
-  loader: () => import(/* webpackChunkName: 'page-terms' */ './Terms'),
-  LoadingComponent: Loading,
-});
+const SignIn = Loadable(() =>
+  import(/* webpackChunkName: 'page-sign-in' */ './common/SignIn')
+);
+const Live = Loadable(() =>
+  import(/* webpackChunkName: 'page-sign-in' */ './Live')
+);
+const ZeitSignIn = Loadable(() =>
+  import(/* webpackChunkName: 'page-zeit' */ './common/ZeitAuth')
+);
+const NotFound = Loadable(() =>
+  import(/* webpackChunkName: 'page-not-found' */ './common/NotFound')
+);
+const Profile = Loadable(() =>
+  import(/* webpackChunkName: 'page-profile' */ './Profile')
+);
+const Search = Loadable(() =>
+  import(/* webpackChunkName: 'page-search' */ './Search')
+);
+const CLI = Loadable(() => import(/* webpackChunkName: 'page-cli' */ './CLI'));
+const GitHub = Loadable(() =>
+  import(/* webpackChunkName: 'page-github' */ './GitHub')
+);
+const CliInstructions = Loadable(() =>
+  import(/* webpackChunkName: 'page-cli-instructions' */ './CliInstructions')
+);
+const Patron = Loadable(() =>
+  import(/* webpackChunkName: 'page-patron' */ './Patron')
+);
+const Terms = Loadable(() =>
+  import(/* webpackChunkName: 'page-terms' */ './Terms')
+);
 
 type Props = {
   signals: any,

diff --git a/packages/app/src/app/utils/Loadable.js b/packages/app/src/app/utils/Loadable.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import Loading from '../components/Loading';
+
+export default loader =>
+  class extends React.Component {
+    state = {
+      LoadedComponent: null,
+      hasTimedOut: false,
+    };
+    timer;
+    componentDidMount() {
+      loader().then(module => {
+        this.setState({
+          LoadedComponent: module.default,
+        });
+      });
+      this.timer = setTimeout(
+        () =>
+          this.setState({
+            hasTimedOut: true,
+          }),
+        1000
+      );
+    }
+    componentWillUnmount() {
+      clearTimeout(this.timer);
+    }
+    render() {
+      const { LoadedComponent, hasTimedOut } = this.state;
+
+      if (LoadedComponent) {
+        return <LoadedComponent />;
+      }
+
+      if (hasTimedOut) {
+        return <Loading />;
+      }
+
+      return null;
+    }
+  };
diff --git a/packages/app/src/sandbox/eval/loaders/eval.js b/packages/app/src/sandbox/eval/loaders/eval.js
@@ -1,6 +1,20 @@
 // @flow
 import buildProcess from './utils/process';
 
+const g = typeof window === 'undefined' ? self : window;
+const requestFrame = (() => {
+  const raf =
+    g.requestAnimationFrame ||
+    g.mozRequestAnimationFrame ||
+    g.webkitRequestAnimationFrame ||
+    function(fn) {
+      return g.setTimeout(fn, 20);
+    };
+  return function(fn) {
+    return raf(fn);
+  };
+})();
+
 /* eslint-disable no-unused-vars */
 export default function(
   code: string,
@@ -10,27 +24,35 @@ export default function(
   globals: Object = {},
   { asUMD = false }: { asUMD: boolean } = {}
 ) {
-  const g = typeof window === 'undefined' ? self : window;
   const exports = module.exports;
 
   const global = g;
   const process = buildProcess(env);
   g.global = global;
 
-  const globalsCode = ', ' + Object.keys(globals).join(', ');
+  const globalsCode = Object.keys(globals).length
+    ? ', ' + Object.keys(globals).join(', ')
+    : '';
   const globalsValues = Object.keys(globals).map(k => globals[k]);
   try {
-    const newCode = `(function evaluate(require, module, exports, process, setImmediate, global${globalsCode}) {${code}\n})`;
+    const newCode =
+      `(function evaluate(require, module, exports, process, setImmediate, global` +
+      globalsCode +
+      `) {` +
+      code +
+      `\n})`;
     // eslint-disable-next-line no-eval
-    (0, eval)(newCode).apply(this, [
-      require,
-      asUMD ? undefined : module,
-      asUMD ? undefined : exports,
-      process,
-      setImmediate,
-      asUMD ? undefined : global,
-      ...globalsValues,
-    ]);
+    (0, eval)(newCode).apply(
+      this,
+      [
+        require,
+        asUMD ? undefined : module,
+        asUMD ? undefined : exports,
+        process,
+        requestFrame,
+        asUMD ? undefined : global,
+      ].concat(globalsValues)
+    );
 
     return module.exports;
   } catch (e) {

diff --git a/packages/app/src/sandbox/eval/transpilers/babel/worker/evaluate.js b/packages/app/src/sandbox/eval/transpilers/babel/worker/evaluate.js
@@ -2,16 +2,17 @@ import resolve from 'browser-resolve';
 import hashsum from 'hash-sum';
 import { dirname } from 'path';
 import type FSType from 'fs';
+import detectOldBrowser from 'common/detect-old-browser';
 import evaluateCode from '../../../loaders/eval';
 
 let cache = {};
 let cachedPaths = {};
-let transpileBeforeExec = false;
+let transpileBeforeExec = detectOldBrowser();
 
 export const resetCache = () => {
   cache = {};
   cachedPaths = {};
-  transpileBeforeExec = false;
+  transpileBeforeExec = detectOldBrowser();
 };
 
 export default function evaluate(
@@ -79,7 +80,7 @@ export default function evaluate(
 
     cachedPaths[dirName][requirePath] = resolvedPath;
 
-    let resolvedCode = fs.readFileSync(resolvedPath).toString();
+    const resolvedCode = fs.readFileSync(resolvedPath).toString();
     const id = hashsum(resolvedCode + resolvedPath);
 
     if (cache[id]) {
@@ -88,12 +89,6 @@ export default function evaluate(
 
     cache[id] = {};
 
-    if (transpileBeforeExec) {
-      const { code: transpiledCode } = Babel.transform(resolvedCode);
-
-      resolvedCode = transpiledCode;
-    }
-
     return evaluate(
       fs,
       BFSRequire,
@@ -126,6 +121,36 @@ export default function evaluate(
   }
   finalCode += `\n//# sourceURL=${location.origin}${path}`;
 
+  if (transpileBeforeExec) {
+    const { code: transpiledCode } = Babel.transform(finalCode, {
+      presets: ['es2015', 'react', 'stage-0'],
+      plugins: [
+        'transform-async-to-generator',
+        'transform-object-rest-spread',
+        'transform-decorators-legacy',
+        'transform-class-properties',
+        // Polyfills the runtime needed for async/await and generators
+        [
+          'transform-runtime',
+          {
+            helpers: false,
+            polyfill: false,
+            regenerator: true,
+          },
+        ],
+        [
+          'transform-regenerator',
+          {
+            // Async functions are converted to generators by babel-preset-env
+            async: false,
+          },
+        ],
+      ],
+    });
+
+    finalCode = transpiledCode;
+  }
+
   const exports = evaluateCode(finalCode, require, cache[id], {
     VUE_CLI_BABEL_TRANSPILE_MODULES: true,
   });

diff --git a/packages/app/src/sandbox/eval/transpilers/babel/worker/index.js b/packages/app/src/sandbox/eval/transpilers/babel/worker/index.js
@@ -1,7 +1,6 @@
-require('core-js/fn/string/starts-with');
-require('core-js/fn/string/ends-with');
-require('core-js/fn/array/find');
-require('core-js/fn/promise');
+import loadPolyfills from 'common/load-dynamic-polyfills';
+
+require('app/config/polyfills');
 
 self.importScripts(
   `${process.env.CODESANDBOX_HOST}/static/browserfs/browserfs.min.js`
@@ -11,4 +10,6 @@ self.BrowserFS = BrowserFS;
 self.process = BrowserFS.BFSRequire('process');
 self.Buffer = BrowserFS.BFSRequire('buffer').Buffer;
 
-require('./babel-worker');
+loadPolyfills().then(() => {
+  require('./babel-worker');
+});
diff --git a/packages/app/src/sandbox/index.html b/packages/app/src/sandbox/index.html
@@ -1,22 +1,23 @@
 <!doctype html>
 <html lang="en">
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Sandbox - CodeSandbox</title>
-  <link rel="manifest" href="/manifest.json">
-  <link rel="shortcut icon" href="/favicon.ico">
-  <script src="<%= webpackConfig.output.publicPath %>static/browserfs/browserfs.min.js" type="text/javascript"></script>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Sandbox - CodeSandbox</title>
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <script src="<%= webpackConfig.output.publicPath %>static/browserfs/browserfs.min.js"
+      type="text/javascript"></script>
 
-  <script>
+    <script>
     window.process = BrowserFS.BFSRequire('process');
     window.Buffer = BrowserFS.BFSRequire('buffer').Buffer;
   </script>
-</head>
+  </head>
 
-<body>
-  <div id="csb-loading-screen"></div>
-</body>
+  <body>
+    <div id="csb-loading-screen"></div>
+  </body>
 
 </html>
diff --git a/packages/common/.babelrc b/packages/common/.babelrc
diff --git a/packages/common/babel.config.js b/packages/common/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-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',
+        '@babel/plugin-transform-flow-strip-types',
+      ],
+    },
+  },
+};
diff --git a/packages/common/detect-old-browser.js b/packages/common/detect-old-browser.js
@@ -1,5 +1,5 @@
 function detectIE() {
-  const ua = window.navigator.userAgent;
+  const ua = navigator.userAgent;
 
   const msie = ua.indexOf('MSIE ');
   if (msie > 0) {

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -7,6 +7,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
     "image-extensions": "^1.1.0",
     "jsonlint": "^1.6.3",
     "memoize-one": "^3.1.1",
@@ -15,5 +16,17 @@
     "react-textarea-autosize": "^6.1.0",
     "react-tippy": "^0.14.0",
     "styled-components": "^3.2.1"
+  },
+  "devDependencies": {
+    "babel-jest": "^23.6.0",
+    "jest": "^21.2.1"
+  },
+  "jest": {
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
   }
 }
diff --git a/packages/homepage/package.json b/packages/homepage/package.json
@@ -38,7 +38,7 @@
   "main": "n/a",
   "scripts": {
     "patch": "sed -i -e 's/if(c\\.initial) return;/if(!c||c.initial) return;/g' ./node_modules/extract-text-webpack-plugin/index.js",
-    "build": "rm -rf node_modules/graphql && gatsby build && yarn remove-styles",
+    "build": "rimraf node_modules/graphql && gatsby build && yarn remove-styles",
     "build:clean": "rimraf public",
     "remove-styles": "rimraf public/styles.css",
     "start": "gatsby develop",

diff --git a/packages/react-sandpack/package.json b/packages/react-sandpack/package.json
@@ -90,7 +90,7 @@
     "smooshpack": "^0.0.35"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.5.2"
   },
   "devDependencies": {
     "@storybook/addon-knobs": "^3.3.14",
@@ -101,7 +101,7 @@
     "@types/node": "^9.4.6",
     "@types/react-broadcast": "^0.6.0",
     "awesome-typescript-loader": "^3.5.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "7.0.0-bridge.0",
     "colors": "^1.1.2",
     "commitizen": "^2.9.6",
     "coveralls": "^3.0.0",
@@ -119,8 +119,8 @@
     "npm-run-all": "^4.1.2",
     "prettier": "^1.4.4",
     "prompt": "^1.0.0",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "replace-in-file": "^3.0.0-beta.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.55.4",

diff --git a/standalone-packages/codesandbox-browserfs/yarn.lock b/standalone-packages/codesandbox-browserfs/yarn.lock
diff --git a/standalone-packages/sse-loading-screen/yarn.lock b/standalone-packages/sse-loading-screen/yarn.lock
diff --git a/yarn.lock b/yarn.lock