Fix edge case, add benchmarking

Author: CompuIves

packages/app/package.json

@@ -116,6 +116,7 @@
     "downshift": "^1.0.0-rc.14",
     "eslint-plugin-react-hooks": "1.6.0",
     "eslint-plugin-vue": "^4.2.2",
+    "estree-walker": "^1.0.1",
     "file-saver": "^1.3.3",
     "fontfaceobserver": "^2.0.13",
     "fuse.js": "^3.2.1",

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

@@ -9,6 +9,7 @@ import { ParsedConfigurationFiles } from '@codesandbox/common/lib/templates/temp
 import DependencyNotFoundError from 'sandbox-hooks/errors/dependency-not-found-error';
 import ModuleNotFoundError from 'sandbox-hooks/errors/module-not-found-error';
 
+import { generateBenchmarkInterface } from '../utils/benchmark';
 import { Module } from './types/module';
 import TranspiledModule, {
   ChildModule,
@@ -161,6 +162,9 @@ export default class Manager {
     if (process.env.NODE_ENV === 'development') {
       // eslint-disable-next-line no-console
       console.log(this);
+
+      // Initialize benchmark logic
+      getGlobal().Benchmark = generateBenchmarkInterface(this);
     }
 
     BrowserFS.configure(
@@ -499,6 +503,10 @@ export default class Manager {
     this.getTranspiledModules().map(tModule => tModule.resetCompilation());
   }
 
+  clearTranspilationCache() {
+    this.getTranspiledModules().map(tModule => tModule.resetTranspilation());
+  }
+
   getModules(): Array<Module | ChildModule> {
     return values(this.transpiledModules).map(t => t.module);
   }

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

@@ -4,17 +4,17 @@ exports[`convert-esmodule can convert class default exports 1`] = `
 "Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
-var $csb__default = class A {};
-exports.default = $csb__default;
+exports.default = A;
+class A {}
 "
 `;
 
 exports[`convert-esmodule can convert default exports 1`] = `
 "Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
-var $csb__default = function test() {};
-exports.default = $csb__default;
+exports.default = test;
+function test() {}
 "
 `;
 
@@ -127,4 +127,23 @@ var c = $csb__b.c;
 "
 `;
 
+exports[`convert-esmodule handles export mutations 1`] = `
+"Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.default = test;
+function test() {}
+exports.default = test = 5;;
+"
+`;
+
+exports[`convert-esmodule handles export mutations with no named function 1`] = `
+"Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.default = $csb__default;
+function $csb__default() {}
+"
+`;
+
 exports[`convert-esmodule ignores comments 1`] = `""`;

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

@@ -105,7 +105,23 @@ describe('convert-esmodule', () => {
     expect(convertEsModule(code)).toMatchSnapshot();
   });
 
-  it.only('has good perf', () => {
+  it('handles export mutations', () => {
+    const code = `
+      export default function test() {}
+
+      test = 5;
+    `;
+    expect(convertEsModule(code)).toMatchSnapshot();
+  });
+
+  it('handles export mutations with no named function', () => {
+    const code = `
+      export default function() {}
+    `;
+    expect(convertEsModule(code)).toMatchSnapshot();
+  });
+
+  it('has good perf', () => {
     /* eslint-disable */
     const code = require('./big-file');
 

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

@@ -3,6 +3,8 @@
 import * as meriyah from 'meriyah';
 import * as astring from 'astring';
 import { basename } from 'path';
+import { walk } from 'estree-walker';
+import { AssignmentExpression, ExpressionStatement } from 'meriyah/dist/estree';
 import { Syntax as n } from './syntax';
 import {
   generateRequireStatement,
@@ -30,7 +32,7 @@ export function convertEsModule(code: string) {
     return usedName;
   };
 
-  const program = meriyah.parseModule(code, { next: true });
+  let program = meriyah.parseModule(code, { next: true });
 
   let i = 0;
 
@@ -146,33 +148,96 @@ export function convertEsModule(code: string) {
         if (statement.declaration.type === n.FunctionDeclaration) {
           // @ts-ignore
           statement.declaration.type = n.FunctionExpression;
-        }
-        if (statement.declaration.type === n.ClassDeclaration) {
+        } else if (statement.declaration.type === n.ClassDeclaration) {
           // @ts-ignore
           statement.declaration.type = n.ClassExpression;
         }
         const newDeclaration = statement.declaration as meriyah.ESTree.Expression;
 
         // Create a var with the export
-        program.body[i] = {
-          type: n.VariableDeclaration,
-          kind: 'var' as 'var',
+        if (
+          statement.declaration.type === n.ClassExpression ||
+          statement.declaration.type === n.FunctionExpression
+        ) {
+          if (!statement.declaration.id) {
+            // If the function or class has no name, we give it to it
+            statement.declaration.id = {
+              type: n.Identifier,
+              name: varName,
+            };
+          }
+          program.body.splice(
+            i,
+            0,
+            generateExportStatement(statement.declaration.id.name, 'default')
+          );
+          i++;
 
-          declarations: [
-            {
-              type: n.VariableDeclarator,
-              id: {
-                type: n.Identifier,
-                name: varName,
+          program.body[i] = statement.declaration;
+          i++;
+        } else {
+          program.body[i] = {
+            type: n.VariableDeclaration,
+            kind: 'var' as 'var',
+
+            declarations: [
+              {
+                type: n.VariableDeclarator,
+                id: {
+                  type: n.Identifier,
+                  name: varName,
+                },
+                init: newDeclaration,
               },
-              init: newDeclaration,
-            },
-          ],
-        };
+            ],
+          };
+          i++;
 
-        i++;
+          program.body.splice(
+            i,
+            0,
+            generateExportStatement(varName, 'default')
+          );
+        }
 
-        program.body.splice(i, 0, generateExportStatement(varName, 'default'));
+        if (
+          newDeclaration.type === n.ClassDeclaration ||
+          newDeclaration.type === n.FunctionExpression
+        ) {
+          program = walk(program, {
+            enter(node, parent, prop, index) {
+              if (node.type === n.AssignmentExpression) {
+                const { left } = node as AssignmentExpression;
+                if (
+                  left.type === n.Identifier &&
+                  left.name === newDeclaration.id.name
+                ) {
+                  this.replace({
+                    type: n.ExpressionStatement,
+                    expression: {
+                      type: n.AssignmentExpression,
+                      left: {
+                        type: n.MemberExpression,
+                        object: {
+                          type: n.Identifier,
+                          name: 'exports',
+                        },
+                        computed: false,
+                        property: {
+                          type: n.Identifier,
+                          name: 'default',
+                        },
+                      },
+                      operator: '=' as '=',
+                      right: node,
+                    },
+                  } as ExpressionStatement);
+                  this.skip();
+                }
+              }
+            },
+          });
+        }
       }
     } else if (statement.type === n.ImportDeclaration) {
       // @ts-ignore Wrong typing in lib?

packages/app/src/sandbox/utils/benchmark.ts

@@ -0,0 +1,25 @@
+import _debug from '@codesandbox/common/lib/utils/debug';
+import Manager from '../eval/manager';
+
+const debug = _debug('cs:compiler:benchmarks');
+
+export function generateBenchmarkInterface(manager: Manager) {
+  return {
+    transpilation: async (n = 10, path = '/src/index.js') => {
+      const module = manager.resolveModule(path, '/');
+
+      const times = [];
+      for (let i = 0; i < n; i++) {
+        const t = Date.now();
+        // eslint-disable-next-line
+        await manager.transpileModules(module);
+        times.push(Date.now() - t);
+        manager.clearTranspilationCache();
+      }
+
+      debug(
+        `Transpilation Benchmark: ${times.reduce((p, j) => p + j, 0) / n}ms`
+      );
+    },
+  };
+}

yarn.lock

@@ -11431,6 +11431,11 @@ estree-walker@^0.6.0, estree-walker@^0.6.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
 [email protected], esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"