add vite support

timfish · timfish · commit eb090c71ccfe · 2024-10-01T14:36:14.000+02:00
diff --git a/package.json b/package.json
@@ -14,6 +14,10 @@
     "esbuild": {
       "require": "./dist/esbuild.js",
       "import": "./dist/esbuild.mjs"
+    },
+    "vite": {
+      "require": "./dist/vite.js",
+      "import": "./dist/vite.mjs"
     }
   },
   "scripts": {
@@ -26,6 +30,7 @@
     "pkgroll": "^2.5.0",
     "rollup": "^4.22.5",
     "typescript": "^5.6.2",
+    "vite": "^5.4.8",
     "vitest": "^2.1.1",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
diff --git a/src/common.ts b/src/common.ts
@@ -29,7 +29,7 @@ export function stringToUUID(str: string): string {
 
 export function addDebugIdToSource(input: string, debugId: string): string {
   return input.replace(
-    /\s*(?:\/\/# debugId=.+)?\s*(\/\/# .+)?\s*$/,
+    /\s*(?:\/\/# debugId=.+)?\s*(\/\/# sourceMappingURL=.+)?\s*$/,
     `\n//# debugId=${debugId}\n$1`
   );
 }
diff --git a/src/rollup.ts b/src/rollup.ts
@@ -10,7 +10,7 @@ export default function debugIds(): Plugin {
   return {
     name: "rollup-plugin-debug-ids",
     generateBundle: function (
-      _: unknown,
+      _,
       bundle: { [fileName: string]: OutputAsset | OutputChunk }
     ) {
       for (const [key, value] of Object.entries(bundle)) {
@@ -36,6 +36,22 @@ export default function debugIds(): Plugin {
           sourceMapFile.source.toString(),
           debugId
         );
+
+        // vite has plugins that run after us which can modify the sourcemap so we
+        // proxy the sourceMapFile to re-add the debugId if the source gets set again
+        bundle[value.sourcemapFileName] = new Proxy(
+          bundle[value.sourcemapFileName],
+          {
+            set: function (target, prop, value) {
+              if (prop === "source") {
+                target[prop] = addDebugIdToSourcemap(value, debugId);
+              } else {
+                target[prop] = value;
+              }
+              return true;
+            },
+          }
+        );
       }
     },
   };
diff --git a/src/vite.ts b/src/vite.ts
@@ -0,0 +1,11 @@
+import rollupPlugin from "./rollup";
+import { Plugin } from "vite";
+
+export default function debugIds(): Plugin {
+  return {
+    ...rollupPlugin(),
+    name: "vite-plugin-debug-ids",
+    apply: "build",
+    enforce: "post",
+  };
+}
diff --git a/test/vite/no-sourcemaps/snap/assets/another-CR7-3Cjc.js b/test/vite/no-sourcemaps/snap/assets/another-CR7-3Cjc.js
@@ -0,0 +1 @@
+console.log("anther");
diff --git a/test/vite/no-sourcemaps/snap/assets/index-CGQYQSPO.js b/test/vite/no-sourcemaps/snap/assets/index-CGQYQSPO.js
diff --git a/test/vite/no-sourcemaps/src/another.js b/test/vite/no-sourcemaps/src/another.js
@@ -0,0 +1 @@
+console.log("anther");
diff --git a/test/vite/no-sourcemaps/src/index.html b/test/vite/no-sourcemaps/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/test/vite/no-sourcemaps/src/main.js b/test/vite/no-sourcemaps/src/main.js
@@ -0,0 +1,2 @@
+console.log("do nothing");
+import("./another.js");
diff --git a/test/vite/no-sourcemaps/vite.config.mjs b/test/vite/no-sourcemaps/vite.config.mjs
@@ -0,0 +1,15 @@
+import { join } from "path";
+import debugIds from "../../../dist/vite.mjs";
+import { defineConfig } from "vite";
+
+const __dirname = new URL(".", import.meta.url).pathname;
+
+export default defineConfig({
+  root: join(__dirname, "src"),
+  mode: "production",
+  plugins: [debugIds()],
+  build: {
+    outDir: join(__dirname, "dist"),
+    emptyOutDir: true,
+  },
+});
diff --git a/test/vite/vite.test.ts b/test/vite/vite.test.ts
@@ -0,0 +1,52 @@
+import { describe, test } from "vitest";
+import { execFileSync } from "child_process";
+import { join } from "path";
+import { TestOptions, testSourcesAndMaps } from "../utils";
+
+const __dirname = new URL(".", import.meta.url).pathname;
+
+function viteTest(path: string, options: TestOptions) {
+  const baseDir = join(__dirname, path);
+  execFileSync("vite", ["build", "--config", "vite.config.mjs"], {
+    cwd: baseDir,
+    stdio: "inherit",
+  });
+
+  testSourcesAndMaps(baseDir, options);
+}
+
+describe("vite", () => {
+  test("no sourcemaps", () => {
+    viteTest("no-sourcemaps", {
+      sourceFiles: ["assets/index-CGQYQSPO.js", "assets/another-CR7-3Cjc.js"],
+    });
+  });
+
+  test("with sourcemaps", () => {
+    viteTest("with-sourcemaps", {
+      sourceFiles: ["assets/index-CGQYQSPO.js", "assets/another-CR7-3Cjc.js"],
+      mapIds: {
+        "assets/index-CGQYQSPO.js.map": "c5154bb4-4fc4-4e84-8714-3a86aedb6ee5",
+        "assets/another-CR7-3Cjc.js.map":
+          "97e9f740-675c-47d6-805e-e509aebfe047",
+      },
+    });
+  });
+
+  test("with hidden sourcemaps", () => {
+    viteTest("with-hidden-sourcemaps", {
+      sourceFiles: ["assets/index-CGQYQSPO.js", "assets/another-CR7-3Cjc.js"],
+      mapIds: {
+        "assets/index-CGQYQSPO.js.map": "8a4b9b46-753c-432e-8cde-de2454981c55",
+        "assets/another-CR7-3Cjc.js.map":
+          "21b62a8a-8ef3-4a10-847e-d766353e713b",
+      },
+    });
+  });
+
+  test("with inline sourcemaps", () => {
+    viteTest("with-inline-sourcemaps", {
+      sourceFiles: ["assets/index-CGQYQSPO.js", "assets/another-CR7-3Cjc.js"],
+    });
+  });
+});
diff --git a/test/vite/with-hidden-sourcemaps/snap/assets/another-CR7-3Cjc.js b/test/vite/with-hidden-sourcemaps/snap/assets/another-CR7-3Cjc.js
@@ -0,0 +1,2 @@
+console.log("anther");
+//# debugId=21b62a8a-8ef3-4a10-847e-d766353e713b
diff --git a/test/vite/with-hidden-sourcemaps/snap/assets/index-CGQYQSPO.js b/test/vite/with-hidden-sourcemaps/snap/assets/index-CGQYQSPO.js
diff --git a/test/vite/with-hidden-sourcemaps/src/another.js b/test/vite/with-hidden-sourcemaps/src/another.js
@@ -0,0 +1 @@
+console.log("anther");
diff --git a/test/vite/with-hidden-sourcemaps/src/index.html b/test/vite/with-hidden-sourcemaps/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/test/vite/with-hidden-sourcemaps/src/main.js b/test/vite/with-hidden-sourcemaps/src/main.js
@@ -0,0 +1,2 @@
+console.log("do nothing");
+import("./another.js");
diff --git a/test/vite/with-hidden-sourcemaps/vite.config.mjs b/test/vite/with-hidden-sourcemaps/vite.config.mjs
@@ -0,0 +1,16 @@
+import { join } from "path";
+import debugIds from "../../../dist/vite.mjs";
+import { defineConfig } from "vite";
+
+const __dirname = new URL(".", import.meta.url).pathname;
+
+export default defineConfig({
+  root: join(__dirname, "src"),
+  mode: "production",
+  plugins: [debugIds()],
+  build: {
+    outDir: join(__dirname, "dist"),
+    sourcemap: "hidden",
+    emptyOutDir: true,
+  },
+});
diff --git a/test/vite/with-inline-sourcemaps/snap/assets/another-CR7-3Cjc.js b/test/vite/with-inline-sourcemaps/snap/assets/another-CR7-3Cjc.js
diff --git a/test/vite/with-inline-sourcemaps/snap/assets/index-CGQYQSPO.js b/test/vite/with-inline-sourcemaps/snap/assets/index-CGQYQSPO.js
diff --git a/test/vite/with-inline-sourcemaps/src/another.js b/test/vite/with-inline-sourcemaps/src/another.js
@@ -0,0 +1 @@
+console.log("anther");
diff --git a/test/vite/with-inline-sourcemaps/src/index.html b/test/vite/with-inline-sourcemaps/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/test/vite/with-inline-sourcemaps/src/main.js b/test/vite/with-inline-sourcemaps/src/main.js
@@ -0,0 +1,2 @@
+console.log("do nothing");
+import("./another.js");
diff --git a/test/vite/with-inline-sourcemaps/vite.config.mjs b/test/vite/with-inline-sourcemaps/vite.config.mjs
@@ -0,0 +1,16 @@
+import { join } from "path";
+import debugIds from "../../../dist/vite.mjs";
+import { defineConfig } from "vite";
+
+const __dirname = new URL(".", import.meta.url).pathname;
+
+export default defineConfig({
+  root: join(__dirname, "src"),
+  mode: "production",
+  plugins: [debugIds()],
+  build: {
+    outDir: join(__dirname, "dist"),
+    sourcemap: "inline",
+    emptyOutDir: true,
+  },
+});
diff --git a/test/vite/with-sourcemaps/snap/assets/another-CR7-3Cjc.js b/test/vite/with-sourcemaps/snap/assets/another-CR7-3Cjc.js
diff --git a/test/vite/with-sourcemaps/snap/assets/index-CGQYQSPO.js b/test/vite/with-sourcemaps/snap/assets/index-CGQYQSPO.js
diff --git a/test/vite/with-sourcemaps/src/another.js b/test/vite/with-sourcemaps/src/another.js
@@ -0,0 +1 @@
+console.log("anther");
diff --git a/test/vite/with-sourcemaps/src/index.html b/test/vite/with-sourcemaps/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/test/vite/with-sourcemaps/src/main.js b/test/vite/with-sourcemaps/src/main.js
@@ -0,0 +1,2 @@
+console.log("do nothing");
+import("./another.js");
diff --git a/test/vite/with-sourcemaps/vite.config.mjs b/test/vite/with-sourcemaps/vite.config.mjs
@@ -0,0 +1,16 @@
+import { join } from "path";
+import debugIds from "../../../dist/vite.mjs";
+import { defineConfig } from "vite";
+
+const __dirname = new URL(".", import.meta.url).pathname;
+
+export default defineConfig({
+  root: join(__dirname, "src"),
+  mode: "production",
+  plugins: [debugIds()],
+  build: {
+    outDir: join(__dirname, "dist"),
+    sourcemap: true,
+    emptyOutDir: true,
+  },
+});
diff --git a/yarn.lock b/yarn.lock
@@ -1783,7 +1783,7 @@ vite-node@2.1.1:
     pathe "^1.1.2"
     vite "^5.0.0"
 
-vite@^5.0.0:
+vite@^5.0.0, vite@^5.4.8:
   version "5.4.8"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.8.tgz#af548ce1c211b2785478d3ba3e8da51e39a287e8"
   integrity sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export function stringToUUID(str: string): string {`
`29`	`29`
`30`	`30`	`export function addDebugIdToSource(input: string, debugId: string): string {`
`31`	`31`	`return input.replace(`
`32`		`- /\s(?:\/\/# debugId=.+)?\s(\/\/# .+)?\s*$/,`
	`32`	`+ /\s(?:\/\/# debugId=.+)?\s(\/\/# sourceMappingURL=.+)?\s*$/,`
`33`	`33`	`\n//# debugId=${debugId}\n$1`
`34`	`34`	`);`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+console.log("do nothing");`
	`2`	`+import("./another.js");`