feat: Use csb-sucrase for compiling node modules (#7064)

* feat: use our sucrase fork to speedup transform for node modules

* remove metric stuff

Author: DeMoorJasper

packages/app/package.json

@@ -117,6 +117,7 @@
     "console": "^0.7.2",
     "console-feed": "^3.1.9",
     "cropperjs": "^1.5.11",
+    "csb-sucrase": "^3.28.3",
     "css-modules-loader-core": "^1.1.0",
     "date-fns": "^2.4.1",
     "date-fns-tz": "^1.0.7",

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

@@ -1,21 +1,16 @@
 /* eslint-enable import/default */
 import { isBabel7 } from '@codesandbox/common/lib/utils/is-babel-7';
 import { isUrl } from '@codesandbox/common/lib/utils/is-url';
+import { transform as transformSucrase } from 'csb-sucrase';
 
 /* eslint-disable import/default */
 // @ts-ignore
 import BabelWorker from 'worker-loader?publicPath=/&name=babel-transpiler.[hash:8].worker.js!./worker/index';
 
 import delay from '@codesandbox/common/lib/utils/delay';
-import { endMeasure, measure } from '@codesandbox/common/lib/utils/metrics';
 import { LoaderContext, Manager } from 'sandpack-core';
 import WorkerTranspiler from '../worker-transpiler/transpiler';
 import getBabelConfig from './babel-parser';
-import { getSyntaxInfoFromAst } from './ast/syntax-info';
-import { convertEsModule } from './ast/convert-esmodule';
-import { ESTreeAST, generateCode, parseModule } from './ast/utils';
-import { collectDependenciesFromAST } from './ast/collect-dependencies';
-import { rewriteImportMeta } from './ast/rewrite-meta';
 
 const MAX_WORKER_ITERS = 100;
 
@@ -111,45 +106,20 @@ class BabelTranspiler extends WorkerTranspiler {
     // node_modules to commonjs and collecting deps
     if (loaderContext.options.simpleRequire || isNodeModule) {
       try {
-        const ast: ESTreeAST = parseModule(code);
-        const syntaxInfo = getSyntaxInfoFromAst(ast);
-        if (!syntaxInfo.jsx) {
-          // If the code is ESM we transform it to commonjs and return it
-          if (syntaxInfo.esm) {
-            measure(`esconvert-${path}`);
-            convertEsModule(ast);
-            // We collect requires instead of doing this in convertESModule as some modules also use require
-            // Which is actually invalid but we probably don't wanna break anyone's code if it works in other bundlers...
-            const deps = collectDependenciesFromAST(ast);
-            await addCollectedDependencies(
-              loaderContext,
-              deps.map(d => ({
-                path: d,
-              }))
-            );
-            rewriteImportMeta(ast, {
-              url: loaderContext.url,
-            });
-            endMeasure(`esconvert-${path}`, { silent: true });
-            return {
-              transpiledCode: generateCode(ast),
-            };
-          }
+        const result = transformSucrase(code, {
+          transforms: ['dep-collector', 'imports', 'flow', 'jsx'],
+        });
 
-          // If the code is commonjs and does not contain any more jsx, we generate and return the code.
-          measure(`dep-collection-${path}`);
-          const deps = collectDependenciesFromAST(ast);
-          await addCollectedDependencies(
-            loaderContext,
-            deps.map(d => ({
-              path: d,
-            }))
-          );
-          endMeasure(`dep-collection-${path}`, { silent: true });
-          return {
-            transpiledCode: code,
-          };
-        }
+        await addCollectedDependencies(
+          loaderContext,
+          Array.from(result.dependencies).map(d => ({
+            path: d,
+          }))
+        );
+
+        return {
+          transpiledCode: result.code,
+        };
       } catch (err) {
         // do not log this in production, it confuses our users
         if (process.env.NODE_ENV === 'development') {

packages/sandpack-core/src/transpiled-module/transpiled-module.ts

@@ -1051,10 +1051,17 @@ export class TranspiledModule {
       const usedGlobals = globals || {};
       usedGlobals.__dirname = pathUtils.dirname(this.module.path);
       usedGlobals.__filename = this.module.path;
-      usedGlobals.$csbImport = (path: string) =>
-        manager
-          .evaluate(path, this)
+      const self = this;
+      // eslint-disable-next-line no-inner-declarations
+      function $csbImport(path: string) {
+        return manager
+          .evaluate(path, self)
           .then(result => interopRequireWildcard(result));
+      }
+      $csbImport.meta = {
+        url: this.module.url ? this.module.url : `file://${this.module.path}`,
+      };
+      usedGlobals.$csbImport = $csbImport;
 
       const code =
         this.source.compiledCode +

yarn.lock

@@ -11308,6 +11308,18 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
+csb-sucrase@^3.28.3:
+  version "3.28.3"
+  resolved "https://registry.yarnpkg.com/csb-sucrase/-/csb-sucrase-3.28.3.tgz#62d3b46fa6b1334d5fa137b8c1ba3122530a37b5"
+  integrity sha512-ASHJbr48zp4TxlsOxdS9/+/ERQhDkDN8uj8rb5m+e6lm/GGvd76xdZbPM10HbejCcmRSjZIoJS0JrCllPsn7WA==
+  dependencies:
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 css-animation@^1.3.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/css-animation/-/css-animation-1.4.1.tgz#5b8813125de0fbbbb0bbe1b472ae84221469b7a8"
@@ -13680,7 +13692,7 @@ esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@1.0.1, esquery@^1.0.0, esquery@^1.0.1:
+esquery@^1.0.0, esquery@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
   integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
@@ -23142,7 +23154,7 @@ [email protected], mute-stream@~0.0.4:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-mz@^2.5.0:
+mz@^2.5.0, mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -32413,6 +32425,11 @@ ts-easing@^0.2.0:
   resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
   integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-invariant@^0.4.0, ts-invariant@^0.4.2, ts-invariant@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"