Improve esmodules loading by writing a custom converter

Author: CompuIves

packages/app/package.json

@@ -113,8 +113,10 @@
     "debug": "^2.6.8",
     "dot-object": "^1.9.0",
     "downshift": "^1.0.0-rc.14",
+    "escodegen": "^1.13.0",
     "eslint-plugin-react-hooks": "1.6.0",
     "eslint-plugin-vue": "^4.2.2",
+    "esprima": "^4.0.1",
     "file-saver": "^1.3.3",
     "fontfaceobserver": "^2.0.13",
     "fuse.js": "^3.2.1",
@@ -248,6 +250,8 @@
     "@sentry/cli": "^1.47.1",
     "@types/codemirror": "^0.0.72",
     "@types/debug": "^4.1.1",
+    "@types/escodegen": "^0.0.6",
+    "@types/esprima": "^4.0.2",
     "@types/gsap": "^1.20.1",
     "@types/jest": "24.0.13",
     "@types/lodash-es": "^4.17.2",

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

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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[`convert-esmodule can convert default exports 1`] = `
+"Object.defineProperty(exports, '__esModule', { value: true });
+var $csb__default = function test() {
+};
+exports.default = $csb__default;"
+`;
+
+exports[`convert-esmodule can convert default imports 1`] = `
+"var $csb__b = require('./b');
+var default = $csb__b.default;"
+`;
+
+exports[`convert-esmodule can convert function exports 1`] = `
+"Object.defineProperty(exports, '__esModule', { value: true });
+function test() {
+}
+exports.test = test;
+const test2 = () => {
+};
+exports.test2 = test2;
+class Test {
+}
+exports.Test = Test;"
+`;
+
+exports[`convert-esmodule can convert named imports 1`] = `
+"var $csb__b = require('./b');
+var a = $csb__b.a;
+var b = $csb__b.b;
+var c = $csb__b.c;"
+`;
+
+exports[`convert-esmodule can convert normal exports 1`] = `
+"Object.defineProperty(exports, '__esModule', { value: true });
+var $csb__store = require('./test/store.js');
+exports.test = $csb__store.test;
+exports.test2 = $csb__store.test2;"
+`;
+
+exports[`convert-esmodule can convert reexports 1`] = `
+"Object.defineProperty(exports, '__esModule', { value: true });
+var $csb__store = require('./test/store.js');
+Object.keys($csb__store).forEach(function (key) {
+    if (key === 'default' || key === '__esModule')
+        return;
+    exports[key] = $csb__store[key];
+});"
+`;
+
+exports[`convert-esmodule can convert weird default exports 1`] = `
+"Object.defineProperty(exports, '__esModule', { value: true });
+var $csb__default = a = 'b';
+exports.default = $csb__default;"
+`;
+
+exports[`convert-esmodule can handle as imports 1`] = `
+"var $csb__b = require('./b');
+var b = $csb__b.a;"
+`;

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

@@ -0,0 +1,68 @@
+import { convertEsModule } from './convert-esmodule';
+
+describe('convert-esmodule', () => {
+  it('can convert reexports', () => {
+    const code = `
+      export * from './test/store.js';
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can convert normal exports', () => {
+    const code = `
+      export { test, test2 } from './test/store.js';
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can convert function exports', () => {
+    const code = `
+      export function test() {}
+      export const test2 = () => {}
+      export class Test {}
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can convert default exports', () => {
+    const code = `
+      export default function test() {}
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can convert class default exports', () => {
+    const code = `
+      export default class A {}
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can convert weird default exports', () => {
+    const code = `
+      export default a = 'b';
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can convert default imports', () => {
+    const code = `
+      import a from './b';
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can convert named imports', () => {
+    const code = `
+      import {a, b, c} from './b';
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+
+  it('can handle as imports', () => {
+    const code = `
+      import { a as b } from './b';
+    `;
+    expect(convertEsModule('/index.js', code)).toMatchSnapshot();
+  });
+});