Merge branch 'master' into fix/reserved-keyword

packages/app/package.json

@@ -264,6 +264,7 @@
     "@types/gsap": "^1.20.1",
     "@types/jest": "24.0.13",
     "@types/lodash-es": "^4.17.2",
+    "@types/lru-cache": "^5.1.0",
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.9.17",

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

@@ -248,7 +248,7 @@ export default class Manager implements IEvaluator {
   }
 
   // Hoist these 2 functions to the top, since they get executed A LOT
-  isFile = (p: string, cb: Function | undefined, c: Function) => {
+  isFile = (p: string, cb?: Function | undefined, c?: Function) => {
     const callback = c || cb;
     const hasCallback = typeof callback === 'function';
 
@@ -645,7 +645,7 @@ export default class Manager implements IEvaluator {
           extensions: defaultExtensions.map(ext => '.' + ext),
           isFile: this.isFile,
           readFileSync: this.readFileSync,
-          packageFilter,
+          packageFilter: packageFilter(this.isFile),
           moduleDirectory: this.getModuleDirectories(),
         },
         (err, foundPath) => {
@@ -760,7 +760,7 @@ export default class Manager implements IEvaluator {
           extensions: defaultExtensions.map(ext => '.' + ext),
           isFile: this.isFile,
           readFileSync: this.readFileSync,
-          packageFilter,
+          packageFilter: packageFilter(this.isFile),
           moduleDirectory: this.getModuleDirectories(),
         });
         endMeasure(measureKey, { silent: true });

packages/app/src/sandbox/eval/npm/fetch-npm-module.ts

@@ -276,10 +276,15 @@ function resolvePath(
 ): Promise<string> {
   const currentPath = currentTModule.module.path;
 
-  const isFile = (p, c, cb) => {
+  const isFile = (p: string, c?: any, cb?: any): any => {
     const callback = cb || c;
 
-    callback(null, Boolean(manager.transpiledModules[p]) || Boolean(meta[p]));
+    const result = Boolean(manager.transpiledModules[p]) || Boolean(meta[p]);
+    if (!callback) {
+      return result;
+    }
+
+    return callback(null, result);
   };
 
   return new Promise((res, reject) => {
@@ -288,7 +293,7 @@ function resolvePath(
       {
         filename: currentPath,
         extensions: defaultExtensions.map(ext => '.' + ext),
-        packageFilter,
+        packageFilter: packageFilter(isFile),
         moduleDirectory: [
           'node_modules',
           manager.envVariables.NODE_PATH,

packages/app/src/sandbox/eval/transpilers/babel/check.ts

@@ -21,11 +21,7 @@ function checkComment(match: string[]) {
   return true;
 }
 
-export function shouldTranspile(code: string, path: string) {
-  if (isESModule(code)) {
-    return true;
-  }
-
+export function hasNewSyntax(code: string, path: string) {
   if (path.endsWith('.min.js')) {
     // This needs no transpiling and often fools our JSX check with <a etc...
     return false;
@@ -43,3 +39,11 @@ export function shouldTranspile(code: string, path: string) {
 
   return false;
 }
+
+export function shouldTranspile(code: string, path: string) {
+  if (isESModule(code)) {
+    return true;
+  }
+
+  return hasNewSyntax(code, path);
+}

packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/__snapshots__/index.test.ts.snap

@@ -326,6 +326,12 @@ function $_csb__interopRequireDefault(obj) {
 
 exports[`convert-esmodule ignores comments 1`] = `""`;
 
+exports[`convert-esmodule keeps import order 1`] = `
+"var $csb__1 = require(\\"1\\");
+var $csb__2 = require(\\"2\\");
+"
+`;
+
 exports[`convert-esmodule parses and writes chars with linebreaks 1`] = `
 "var WS_CHARS = \\"u2000- 

  　\\";
 "

packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.test.ts

@@ -267,6 +267,14 @@ describe('convert-esmodule', () => {
     expect(convertEsModule(code)).toMatchSnapshot();
   });
 
+  it('keeps import order', () => {
+    const code = `
+    import '1';
+    import '2';
+    `;
+    expect(convertEsModule(code)).toMatchSnapshot();
+  });
+
   it('parses and writes chars with linebreaks', () => {
     const code =
       "var WS_CHARS = 'u2000-\\u200a\\u2028\\u2029\\u202f\\u205f\\u3000\\ufeff'";

packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.ts

@@ -39,6 +39,7 @@ export function convertEsModule(code: string) {
   let program = meriyah.parseModule(code, { next: true });
 
   let i = 0;
+  let importOffset = 0;
 
   let addedSpecifier = false;
   function addEsModuleSpecifier() {
@@ -268,7 +269,12 @@ export function convertEsModule(code: string) {
       // Remove this statement
       program.body.splice(i, 1);
       // Create require statement instead of the import
-      program.body.unshift(generateRequireStatement(varName, source.value));
+      program.body.splice(
+        importOffset,
+        0,
+        generateRequireStatement(varName, source.value)
+      );
+      importOffset++;
 
       statement.specifiers.reverse().forEach(specifier => {
         let localName: string;
@@ -300,10 +306,11 @@ export function convertEsModule(code: string) {
 
           program.body.splice(
             // After the require statement
-            1,
+            importOffset,
             0,
             generateInteropRequireExpression(varName, localName)
           );
+          importOffset++;
           return;
         }
 
@@ -316,7 +323,7 @@ export function convertEsModule(code: string) {
         }
 
         // insert in index 1 instead of 0 to be after the interopRequireDefault
-        program.body.splice(1, 0, {
+        program.body.splice(importOffset, 0, {
           type: n.VariableDeclaration,
           kind: 'var' as 'var',
           declarations: [
@@ -346,6 +353,7 @@ export function convertEsModule(code: string) {
             },
           ],
         });
+        importOffset++;
       });
     }
   }

packages/app/src/sandbox/eval/transpilers/babel/index.ts

@@ -11,7 +11,7 @@ import Manager from '../../manager';
 import { LoaderContext } from '../../transpiled-module';
 import WorkerTranspiler from '../worker-transpiler';
 import getBabelConfig from './babel-parser';
-import { shouldTranspile } from './check';
+import { hasNewSyntax } from './check';
 import { convertEsModule } from './convert-esmodule';
 import regexGetRequireStatements from './worker/simple-get-require-statements';
 
@@ -52,11 +52,13 @@ class BabelTranspiler extends WorkerTranspiler {
 
       const isNodeModule = path.startsWith('/node_modules');
 
+      let convertedToEsmodule = false;
       if (isESModule(newCode) && isNodeModule) {
         try {
           measure(`esconvert-${path}`);
           newCode = convertEsModule(newCode);
           endMeasure(`esconvert-${path}`, { silent: true });
+          convertedToEsmodule = true;
         } catch (e) {
           console.warn(
             `Error when converting '${path}' esmodule to commonjs: ${e.message}`
@@ -71,7 +73,8 @@ class BabelTranspiler extends WorkerTranspiler {
         // faster than generating an AST from the code.
         if (
           (loaderContext.options.simpleRequire || isNodeModule) &&
-          !shouldTranspile(newCode, path)
+          !hasNewSyntax(newCode, path) &&
+          !(isESModule(newCode) && !convertedToEsmodule)
         ) {
           regexGetRequireStatements(newCode).forEach(dependency => {
             if (dependency.isGlob) {

packages/app/src/sandbox/eval/transpilers/babel/worker/dynamic-download.ts

@@ -113,7 +113,7 @@ function downloadRequires(currentPath: string, code: string) {
             filename: currentPath,
             extensions: ['.js', '.json'],
             moduleDirectory: ['node_modules'],
-            packageFilter,
+            packageFilter: packageFilter(this.isFile),
           });
         } catch (e) {
           await downloadFromError(e);

packages/app/src/sandbox/eval/utils/is-es-module.test.ts

@@ -1,6 +1,16 @@
 import isESModule from './is-es-module';
 
 describe('is-es-module', () => {
+  it('works with import', () => {
+    const code = `import a from 'a'`;
+    expect(isESModule(code)).toBe(true);
+  });
+
+  it('works with export', () => {
+    const code = `export a from 'a'`;
+    expect(isESModule(code)).toBe(true);
+  });
+
   it('handles exports that are not at the start of the line', () => {
     const code = `function r(r){var t=r&&r.pop?[]:{};for(var n in r)t[n]=r[n];return t}export default function(t,n,l){n.split&&(n=n.split("."));for(var o=r(t),a=o,e=0,f=n.length;e<f;e++)a=a[n[e]]=e===f-1?l&&l.call?l(a[n[e]]):l:r(a[n[e]]);return o}`;
     expect(isESModule(code)).toBe(true);

packages/app/src/sandbox/eval/utils/resolve-utils.ts

@@ -1,10 +1,49 @@
+import { join } from 'path';
+import Cache from 'lru-cache';
 import { PackageJSON } from '@codesandbox/common/lib/types';
 
-export function packageFilter(p: PackageJSON) {
+const pkgCache = new Cache<string, PackageJSON>(10000);
+
+function replaceModuleField(
+  isFile: (p: string) => boolean,
+  p: PackageJSON,
+  pkgLocation: string
+): PackageJSON {
+  const checks = [
+    [pkgLocation, p.module],
+    [pkgLocation, p.module, 'index.js'],
+    [pkgLocation, p.module, 'index.mjs'],
+  ];
   if (p.module) {
-    // eslint-disable-next-line
-    p.main = p.module;
+    const foundFile = checks.find(pathSegments => {
+      const path = join(...pathSegments);
+      return isFile(path);
+    });
+
+    if (foundFile) {
+      // eslint-disable-next-line
+      p.main = p.module;
+    }
   }
 
   return p;
 }
+
+export const packageFilter = (isFile: (p: string) => boolean) => (
+  p: PackageJSON,
+  pkgLocation: string
+) => {
+  const id = p.name + p.version;
+  const cache = pkgCache.get(id);
+
+  if (cache) {
+    return cache;
+  }
+
+  // measure('replace-module-field');
+  const result = replaceModuleField(isFile, p, pkgLocation);
+  // endMeasure('replace-module-field');
+  pkgCache.set(id, result);
+
+  return result;
+};

yarn.lock

@@ -4652,6 +4652,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
   integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
 
+"@types/lru-cache@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-5.1.0.tgz#57f228f2b80c046b4a1bd5cac031f81f207f4f03"
+  integrity sha512-RaE0B+14ToE4l6UqdarKPnXwVDuigfFv+5j9Dze/Nqr23yyuqdNvzcZi3xB+3Agvi5R4EOgAksfv3lXX4vBt9w==
+
 "@types/marked@0.0.28":
   version "0.0.28"
   resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.0.28.tgz#44ba754e9fa51432583e8eb30a7c4dd249b52faa"