fix: skip id query string in transform (fixes #23)

vitejs · Dec 15, 2022 · 7f22049 · 7f22049
1 parent 6f3e372
commit 7f22049
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - Support Emotion via the new `jsxImportSource` option (fixes [#25](https://github.com/vitejs/vite-plugin-react-swc/issues/25))
 - Fix HMR when using Vite `base` option (fixes [#18](https://github.com/vitejs/vite-plugin-react-swc/issues/18))
+- Fix usage with workers (fixes [#23](https://github.com/vitejs/vite-plugin-react-swc/issues/23))
 - Fix usage with `Vite Ruby` and `Laravel Vite` ([#20](https://github.com/vitejs/vite-plugin-react-swc/pull/20))
 - Fix plugin default export when using commonjs (fixes [#14](https://github.com/vitejs/vite-plugin-react-swc/issues/14))
 

diff --git a/playground/worker/__tests__/worker.spec.ts b/playground/worker/__tests__/worker.spec.ts
@@ -0,0 +1,27 @@
+import { test } from "@playwright/test";
+import {
+  setupDevServer,
+  setupBuildAndPreview,
+  setupWaitForLogs,
+} from "../../utils";
+
+test("Worker build", async ({ page }) => {
+  const { testUrl, server } = await setupBuildAndPreview("worker");
+  const waitForLogs = await setupWaitForLogs(page);
+  await page.goto(testUrl);
+  await waitForLogs("Worker lives!", "Worker imported!");
+
+  await server.httpServer.close();
+});
+
+test("Worker HMR", async ({ page }) => {
+  const { testUrl, server, editFile } = await setupDevServer("worker");
+  const waitForLogs = await setupWaitForLogs(page);
+  await page.goto(testUrl);
+  await waitForLogs("Worker lives!", "Worker imported!");
+
+  editFile("src/worker-via-url.ts", ["Worker lives!", "Worker updates!"]);
+  await waitForLogs("Worker updates!");
+
+  await server.close();
+});
diff --git a/playground/worker/index.html b/playground/worker/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 + React + Worker</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/playground/worker/package.json b/playground/worker/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "playground-hmr",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react-dom": "^18.0.9",
+    "@types/react": "^18.0.26",
+    "@vitejs/plugin-react-swc": "../../dist"
+  }
+}
diff --git a/playground/worker/public/vite.svg b/playground/worker/public/vite.svg
diff --git a/playground/worker/src/App.tsx b/playground/worker/src/App.tsx
@@ -0,0 +1,10 @@
+import { useState } from "react";
+import MyWorker from "./worker-via-import?worker&inline";
+
+new MyWorker();
+
+export const App = () => {
+  const [count, setCount] = useState(0);
+
+  return <button onClick={() => setCount(count + 1)}>count is {count}</button>;
+};
diff --git a/playground/worker/src/index.tsx b/playground/worker/src/index.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+new Worker(new URL("./worker-via-url.ts", import.meta.url), { type: "module" });
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/playground/worker/src/worker-via-import.ts b/playground/worker/src/worker-via-import.ts
@@ -0,0 +1,7 @@
+function printAlive(): void {
+  console.log("Worker imported!");
+}
+
+printAlive();
+
+export {};
diff --git a/playground/worker/src/worker-via-url.ts b/playground/worker/src/worker-via-url.ts
@@ -0,0 +1,7 @@
+function printAlive(): void {
+  console.log("Worker lives!");
+}
+
+printAlive();
+
+export {};
diff --git a/playground/worker/tsconfig.json b/playground/worker/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "include": ["src", "vite.config.ts"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+
+    /* Imports */
+    "moduleResolution": "node", // Allow `index` imports
+    "resolveJsonModule": true, // Allow json import
+    "forceConsistentCasingInFileNames": true, // Avoid difference in case between file name and import
+    "esModuleInterop": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true
+  }
+}
diff --git a/playground/worker/vite.config.ts b/playground/worker/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -49,7 +49,8 @@ const react = (options?: Options): PluginOption[] => [
         ),
       },
     ],
-    async transform(code, id, transformOptions) {
+    async transform(code, _id, transformOptions) {
+      const id = _id.split("?")[0];
       if (id.includes("node_modules")) return;
 
       const parser: ParserConfig | undefined = id.endsWith(".tsx")