Resolve ESModules by default (#4191)

* Default to esmodules

* New packager

* Fix edge case with handling exports

* Test #1

* Test #2

* Test #2

* New try

* Patch resolve in babel

* Fix plugin

* Logging

* Remove esmodule check

* Change fallback

* Put check back

* Remove isEsModule check code

* Put convert esmodule code back in

* Optimize for speed

* Set a better default config

* Simplify boolean

* Set default babel configs

Author: CompuIves

packages/app/config/babel.dev.js

@@ -13,14 +13,13 @@ module.exports = {
       require.resolve('@babel/preset-env'),
       {
         targets: {
-          chrome: 70,
+          browsers: 'last 1 chrome versions',
           // We currently minify with uglify
           // Remove after https://github.com/mishoo/UglifyJS2/issues/448
         },
         // Disable polyfill transforms
         useBuiltIns: false,
         modules: false,
-        forceAllTransforms: !process.env.LOCAL_DEV,
       },
     ],
     // JSX, Flow
@@ -29,18 +28,11 @@ module.exports = {
   ].filter(Boolean),
   plugins: [
     require.resolve('react-hot-loader/babel'),
-    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-proposal-optional-chaining'),
-    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-    require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
-    require.resolve('@babel/plugin-syntax-dynamic-import'),
     require.resolve('babel-plugin-styled-components'),
     require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-graphql-tag'),
+    require.resolve('@babel/plugin-proposal-class-properties'),
     require.resolve('@babel/plugin-transform-react-display-name'),
   ],
 };

packages/app/config/webpack.common.js

@@ -22,7 +22,7 @@ const APP_HOT = Boolean(process.env.APP_HOT);
 const __DEV__ = NODE_ENV === 'development'; // eslint-disable-line no-underscore-dangle
 const __PROD__ = NODE_ENV === 'production'; // eslint-disable-line no-underscore-dangle
 // const __TEST__ = NODE_ENV === 'test'; // eslint-disable-line no-underscore-dangle
-const babelConfig = __DEV__ && !SANDBOX_ONLY ? babelDev : babelProd;
+const babelConfig = __DEV__ ? babelDev : babelProd;
 const publicPath = SANDBOX_ONLY || __DEV__ ? '/' : getHost.default() + '/';
 const isLint = 'LINT' in process.env;
 

packages/app/integration-tests/tests/sandboxes.test.js

@@ -81,6 +81,14 @@ function loadSandbox(page, sandboxId, timeout) {
     page.goto(sandboxUrl(sandboxId), {
       timeout: 0, // we manage the timeout ourselves
     });
+    page.on('console', msg => {
+      for (let i = 0; i < msg.args().length; ++i) {
+        console.log(`${i}: ${msg.args()[i]}`); // eslint-disable-line
+      }
+    });
+    page.on('error', msg => {
+      console.log('error', msg); // eslint-disable-line
+    });
     await pageLoaded(page);
     clearTimeout(timer);
     await page.waitFor(2 * SECOND);

packages/app/src/sandbox/eval/manager.ts

@@ -1088,8 +1088,6 @@ export default class Manager implements IEvaluator {
 
               if (
                 !this.manifest.contents[tModule.module.path] ||
-                (tModule.module.path.endsWith('.js') &&
-                  tModule.module.requires == null) ||
                 tModule.module.downloaded
               ) {
                 // Only save modules that are not precomputed

packages/app/src/sandbox/eval/presets/angular-cli/index.js

@@ -224,7 +224,36 @@ export default function initialize() {
   ]);
 
   preset.registerTranspiler(module => /\.js$/.test(module.path), [
-    { transpiler: babelTranspiler },
+    {
+      transpiler: babelTranspiler,
+      options: {
+        config: {
+          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,
+              },
+            ],
+          ],
+        },
+      },
+    },
   ]);
 
   preset.registerTranspiler(module => /\.json$/.test(module.path), [

packages/app/src/sandbox/eval/presets/create-react-app/v1.ts

@@ -26,7 +26,36 @@ export default function initialize() {
   ]);
 
   preset.registerTranspiler(module => /\.jsx?$/.test(module.path), [
-    { transpiler: babelTranspiler },
+    {
+      transpiler: babelTranspiler,
+      options: {
+        config: {
+          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,
+              },
+            ],
+          ],
+        },
+      },
+    },
   ]);
 
   preset.registerTranspiler(module => /\.json$/.test(module.path), [

packages/app/src/sandbox/eval/presets/cxjs/index.js

@@ -23,6 +23,32 @@ export default function initialize() {
       options: {
         dynamicCSSModules: true,
         compileNodeModulesWithEnv: true,
+
+        config: {
+          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,
+              },
+            ],
+          ],
+        },
       },
     },
   ]);

packages/app/src/sandbox/eval/transpiled-module.ts

@@ -1116,10 +1116,10 @@ export default class TranspiledModule {
     };
 
     const isNpmDependnecy = this.module.path.startsWith('/node_modules/');
+    const canOptimizeSize = sourceEqualsCompiled && optimizeForSize;
     // Don't cache source if it didn't change, also don't cache changed source from npm
     // dependencies as we can compile those really quickly.
-    const shouldCacheTranspiledSource =
-      !(sourceEqualsCompiled && optimizeForSize) && !isNpmDependnecy;
+    const shouldCacheTranspiledSource = !canOptimizeSize && !isNpmDependnecy;
 
     if (shouldCacheTranspiledSource) {
       serializableObject.source = this.source;

packages/app/src/sandbox/eval/transpilers/babel/babel-parser.js renamed to packages/app/src/sandbox/eval/transpilers/babel/babel-parser.ts

@@ -1,37 +1,16 @@
 // @flow
 
 const DEFAULT_BABEL_CONFIG = {
-  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,
-      },
-    ],
-  ],
+  presets: ['env', 'react'],
+  plugins: [],
 };
 
 /**
  * Parses the .babelrc if it exists, if it doesn't it will return a default config
  */
 export default function getBabelConfig(
   config: Object | undefined,
-  loaderOptions: Object,
+  loaderOptions: { disableCodeSandboxPlugins?: boolean },
   path: string,
   isV7: boolean = false
 ) {
@@ -41,7 +20,13 @@ export default function getBabelConfig(
     return resolvedConfig;
   }
 
-  const finalConfig = {
+  const finalConfig: Partial<{
+    sourceMaps: string;
+    sourceFileName: string;
+    filename: string;
+    plugins: string[];
+    presets: string[];
+  }> = {
     ...resolvedConfig,
     sourceMaps: 'inline',
     sourceFileName: path,