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

This reverts commit fa44478.

Author: CompuIves

packages/app/package.json

@@ -117,7 +117,6 @@
     "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,16 +1,21 @@
 /* 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;
 
@@ -106,20 +111,45 @@ class BabelTranspiler extends WorkerTranspiler {
     // node_modules to commonjs and collecting deps
     if (loaderContext.options.simpleRequire || isNodeModule) {
       try {
-        const result = transformSucrase(code, {
-          transforms: ['dep-collector', 'imports', 'flow', 'jsx'],
-        });
-
-        await addCollectedDependencies(
-          loaderContext,
-          Array.from(result.dependencies).map(d => ({
-            path: d,
-          }))
-        );
+        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),
+            };
+          }
 
-        return {
-          transpiledCode: result.code,
-        };
+          // 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,
+          };
+        }
       } 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,17 +1051,10 @@ export class TranspiledModule {
       const usedGlobals = globals || {};
       usedGlobals.__dirname = pathUtils.dirname(this.module.path);
       usedGlobals.__filename = this.module.path;
-      const self = this;
-      // eslint-disable-next-line no-inner-declarations
-      function $csbImport(path: string) {
-        return manager
-          .evaluate(path, self)
+      usedGlobals.$csbImport = (path: string) =>
+        manager
+          .evaluate(path, this)
           .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

@@ -11357,18 +11357,6 @@ 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"
@@ -23321,7 +23309,7 @@ mute-stream@0.0.8, 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.7.0:
+mz@^2.5.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -32634,11 +32622,6 @@ 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"