fix: workaround vite treating npm: as built-ins (#3205)

Upstream fix: vitejs/vite#20558

Author: marvinhagemeister

deno.lock

@@ -12,7 +12,7 @@ import { devServer } from "./plugins/dev_server.ts";
 import { buildIdPlugin } from "./plugins/build_id.ts";
 import { clientSnapshot } from "./plugins/client_snapshot.ts";
 import { serverSnapshot } from "./plugins/server_snapshot.ts";
-import { commonjs } from "./plugins/commonjs.ts";
+import { patches } from "./plugins/patches.ts";
 
 export function fresh(config?: FreshViteConfig): Plugin[] {
   const fConfig: ResolvedFreshViteConfig = {
@@ -109,7 +109,7 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
         fConfig.routeDir = pathWithRoot(fConfig.routeDir, config.root);
       },
     },
-    commonjs(),
+    patches(),
     serverEntryPlugin(fConfig),
     ...serverSnapshot(fConfig),
     clientEntryPlugin(),

packages/plugin-vite/src/mod.ts

@@ -1,31 +1,7 @@
-import type { Plugin } from "vite";
-import * as babel from "@babel/core";
-
-export function commonjs(): Plugin {
-  return {
-    name: "cjs",
-    applyToEnvironment() {
-      return true;
-    },
-    transform(code, id) {
-      const res = babel.transformSync(code, {
-        filename: id,
-        babelrc: false,
-        plugins: [cjsPlugin],
-      });
-
-      if (res?.code) {
-        return {
-          code: res.code,
-          map: res.map,
-        };
-      }
-    },
-  };
-}
+import type { types } from "@babel/core";
 
 export function cjsPlugin(
-  { types: t }: { types: typeof babel.types },
+  { types: t }: { types: typeof types },
 ): babel.PluginObj {
   const HAS_ES_MODULE = "esModule";
   const REQUIRE_CALLS = "requireCalls";
@@ -143,16 +119,16 @@ export function cjsPlugin(
 }
 
 function isModuleExports(
-  t: typeof babel.types,
-  node: babel.types.MemberExpression,
+  t: typeof types,
+  node: types.MemberExpression,
 ): boolean {
   return t.isIdentifier(node.object) && node.object.name === "module" &&
     t.isIdentifier(node.property) && node.property.name === "exports";
 }
 
 function getExportsAssignName(
-  t: typeof babel.types,
-  node: babel.types.MemberExpression,
+  t: typeof types,
+  node: types.MemberExpression,
 ): string | null {
   if (
     (t.isMemberExpression(node.object) &&
@@ -170,8 +146,8 @@ function getExportsAssignName(
  * Detect `exports.__esModule = true;`
  */
 function isEsModuleFlag(
-  t: typeof babel.types,
-  node: babel.types.AssignmentExpression,
+  t: typeof types,
+  node: types.AssignmentExpression,
 ): boolean {
   if (!t.isMemberExpression(node.left)) return false;
 
@@ -187,8 +163,8 @@ function isEsModuleFlag(
  * Check for `Object.defineProperty(exports, '__esModule', { value: true })`
  */
 function isObjEsModuleFlag(
-  t: typeof babel.types,
-  node: babel.types.CallExpression,
+  t: typeof types,
+  node: types.CallExpression,
 ): boolean {
   return t.isMemberExpression(node.callee) &&
     t.isIdentifier(node.callee.object) &&

packages/plugin-vite/src/plugins/commonjs.ts

@@ -0,0 +1,39 @@
+import type { types } from "@babel/core";
+
+// Workaround until upstream PR is merged and released,
+// see: https://github.com/vitejs/vite/pull/20558
+export function npmWorkaround(
+  { types: t }: { types: typeof types },
+): babel.PluginObj {
+  return {
+    name: "fresh-npm-workaround",
+    visitor: {
+      ImportDeclaration(path) {
+        const source = path.node.source;
+        if (source.value.startsWith("npm:")) {
+          source.value = `deno-${source.value}`;
+        }
+      },
+      ExportNamedDeclaration(path) {
+        const source = path.node.source;
+        if (source === null || source === undefined) return;
+
+        if (source.value.startsWith("npm:")) {
+          source.value = `deno-${source.value}`;
+        }
+      },
+      CallExpression(path) {
+        if (!t.isImport(path.node.callee)) return;
+        if (path.node.arguments.length < 1) return;
+
+        const source = path.node.arguments[0];
+        if (t.isStringLiteral(source)) {
+          if (source.value.startsWith("npm:")) {
+            source.value = `deno-${source.value}`;
+            return;
+          }
+        }
+      },
+    },
+  };
+}

packages/plugin-vite/src/plugins/npm_workaround.ts

@@ -0,0 +1,47 @@
+import { expect } from "@std/expect/expect";
+import * as babel from "@babel/core";
+import { npmWorkaround } from "./npm_workaround.ts";
+
+function runTest(options: { input: string; expected: string }) {
+  const res = babel.transformSync(options.input, {
+    filename: "foo.js",
+    babelrc: false,
+    plugins: [npmWorkaround],
+  });
+
+  const output = res?.code ?? "";
+  expect(output).toEqual(options.expected);
+}
+
+Deno.test("npm workaround - import declaration", () => {
+  runTest({
+    input: `import * as foo from "npm:foo";
+import foo2 from "npm:foo";
+import { bar } from "npm:foo";
+import baz, { bar2 } from "npm:foo";`,
+    expected: `import * as foo from "deno-npm:foo";
+import foo2 from "deno-npm:foo";
+import { bar } from "deno-npm:foo";
+import baz, { bar2 } from "deno-npm:foo";`,
+  });
+});
+
+Deno.test("npm workaround - export declaration", () => {
+  runTest({
+    input: `export * as foo from "npm:foo";
+export { bar } from "npm:foo";`,
+    expected: `export * as foo from "deno-npm:foo";
+export { bar } from "deno-npm:foo";`,
+  });
+});
+
+Deno.test("npm workaround - import()", () => {
+  runTest({
+    input: `import("npm:foo");
+import("npm:foo", { type: "json" })`,
+    expected: `import("deno-npm:foo");
+import("deno-npm:foo", {
+  type: "json"
+});`,
+  });
+});

packages/plugin-vite/src/plugins/npm_workaround_test.ts

@@ -0,0 +1,32 @@
+import type { Plugin } from "vite";
+import * as babel from "@babel/core";
+import { cjsPlugin } from "./commonjs.ts";
+import { npmWorkaround } from "./npm_workaround.ts";
+
+export function patches(): Plugin {
+  return {
+    name: "fresh:patches",
+    applyToEnvironment() {
+      return true;
+    },
+    resolveId(id) {
+      if (id.startsWith("deno-npm:")) {
+        return id.slice("deno-".length);
+      }
+    },
+    transform(code, id) {
+      const res = babel.transformSync(code, {
+        filename: id,
+        babelrc: false,
+        plugins: [npmWorkaround, cjsPlugin],
+      });
+
+      if (res?.code) {
+        return {
+          code: res.code,
+          map: res.map,
+        };
+      }
+    },
+  };
+}