rewrite import.meta to (#6031)

packages/app/src/sandbox/eval/transpilers/babel/ast/__snapshots__/rewrite-meta.test.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rewrite import.meta Can detect and rewrite import.meta to $csb__import_meta 1`] = `
+"\\"use strict\\";
+var $csb__import_meta = {
+  url: \\"https://csb.io/index.js\\"
+};
+const a = $csb__import_meta.url;
+"
+`;
+
+exports[`Rewrite import.meta Should not add a global $csb__import_meta when there is no need for it 1`] = `
+"\\"use strict\\";
+const a = \\"hello\\";
+"
+`;

packages/app/src/sandbox/eval/transpilers/babel/ast/collect-dependencies.ts

@@ -1,13 +1,14 @@
 import { walk } from 'estree-walker';
 
 import { ESTreeAST } from './utils';
+import { Syntax as n } from './syntax';
 
 export function collectDependenciesFromAST(ast: ESTreeAST): Array<string> {
   const deps: Set<string> = new Set();
   walk(ast.program, {
     enter(node) {
       // @ts-ignore
-      if (node.type === 'CallExpression' && node.callee.name === 'require') {
+      if (node.type === n.CallExpression && node.callee.name === 'require') {
         // @ts-ignore
         if (node.arguments.length && node.arguments[0].value) {
           // @ts-ignore

packages/app/src/sandbox/eval/transpilers/babel/ast/rewrite-meta.test.ts

@@ -0,0 +1,24 @@
+import { rewriteImportMeta } from './rewrite-meta';
+import { generateCode, parseModule } from './utils';
+
+describe('Rewrite import.meta', () => {
+  it('Can detect and rewrite import.meta to $csb__import_meta', () => {
+    const code = `const a = import.meta.url;`;
+    const ast = parseModule(code);
+    rewriteImportMeta(ast, {
+      url: 'https://csb.io/index.js',
+    });
+    const result = generateCode(ast);
+    expect(result).toMatchSnapshot();
+  });
+
+  it('Should not add a global $csb__import_meta when there is no need for it', () => {
+    const code = `const a = "hello";`;
+    const ast = parseModule(code);
+    rewriteImportMeta(ast, {
+      url: 'https://csb.io/index.js',
+    });
+    const result = generateCode(ast);
+    expect(result).toMatchSnapshot();
+  });
+});

packages/app/src/sandbox/eval/transpilers/babel/ast/rewrite-meta.ts

@@ -0,0 +1,72 @@
+// This code is written to be performant, that's why we opted to ignore these linting issues
+/* eslint-disable no-loop-func, no-continue */
+import * as meriyah from 'meriyah';
+import { walk } from 'estree-walker';
+
+import { Syntax as n } from './syntax';
+import { ESTreeAST } from './utils';
+
+export interface IESModuleMeta {
+  url: string;
+}
+
+const CSB_IMPORT_META_NAME = '$csb__import_meta';
+export function rewriteImportMeta(ast: ESTreeAST, meta: IESModuleMeta): void {
+  let hasImportMeta = false;
+  walk(ast.program, {
+    enter(node: meriyah.ESTree.MemberExpression) {
+      if (node.type === n.MemberExpression) {
+        if (
+          node.object.type === n.MetaProperty &&
+          node.object.meta.name === 'import'
+        ) {
+          node.object = {
+            type: n.Identifier,
+            name: CSB_IMPORT_META_NAME,
+          };
+
+          hasImportMeta = true;
+
+          this.skip();
+        }
+      }
+    },
+  });
+
+  if (hasImportMeta) {
+    ast.program.body.unshift({
+      type: n.VariableDeclaration,
+      kind: 'var',
+      declarations: [
+        {
+          type: n.VariableDeclarator,
+          id: {
+            type: n.Identifier,
+            name: CSB_IMPORT_META_NAME,
+          },
+          init: {
+            type: n.ObjectExpression,
+            properties: [
+              {
+                type: n.Property,
+                kind: 'init',
+                computed: false,
+                shorthand: false,
+                method: false,
+                key: {
+                  type: n.Identifier,
+                  name: 'url',
+                },
+                value: {
+                  type: n.Literal,
+                  value: meta.url,
+                  raw: JSON.stringify(meta.url),
+                },
+              },
+            ],
+          },
+        },
+      ],
+    });
+  }
+}

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

@@ -15,6 +15,7 @@ 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;
 
@@ -32,6 +33,13 @@ function addCollectedDependencies(
   return Promise.all(deps.map(dep => loaderContext.addDependency(dep)));
 }
 
+function getModuleUrl(path: string): string {
+  if (isUrl(path)) {
+    return path;
+  }
+  return new URL(path, window.location.href).href;
+}
+
 // Right now this is in a worker, but when we're going to allow custom plugins
 // we need to move this out of the worker again, because the config needs
 // to support custom plugins
@@ -100,6 +108,9 @@ class BabelTranspiler extends WorkerTranspiler {
             // 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);
+            rewriteImportMeta(ast, {
+              url: getModuleUrl(loaderContext.path),
+            });
             endMeasure(`esconvert-${path}`, { silent: true });
             return {
               transpiledCode: generateCode(ast),