fix vite-swc integration plugin

XantreDev · Dec 23, 2023 · 1c96810 · 1c96810
1 parent bed34c6
commit 1c96810
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 263 deletions.
diff --git a/.changeset/rude-years-carry.md b/.changeset/rude-years-carry.md
@@ -0,0 +1,5 @@
+---
+"@preact-signals/safe-react": patch
+---
+
+Fix vite SWC integration in dev mode
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -126,8 +126,8 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",
-    "react": "^16.14.0 || 17.x || 18.x",
-    "@swc/core": "^1.3.100"
+    "@swc/core": "^1.3.100",
+    "react": "^16.14.0 || 17.x || 18.x"
   },
   "devDependencies": {
     "@babel/traverse": "^7.23.4",
@@ -146,6 +146,7 @@
     "@vitejs/plugin-react": "^4.1.1",
     "check-export-map": "^1.3.0",
     "concurrently": "^8.2.2",
+    "esbuild": "0.18.18",
     "radash": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/packages/react/src/integrations/vite.mjs b/packages/react/src/integrations/vite.mjs
@@ -2,6 +2,7 @@
 import { createRequire } from "node:module";
 import { transform } from "@swc/core";
 import path from "node:path";
+import fs from "node:fs";
 
 const require = createRequire(import.meta.url);
 /**
@@ -25,6 +26,51 @@ export const createReactAlias = () => {
   };
 };
 
+/**
+ *
+ * @param {string} code
+ * @param {string} filename
+ * @returns
+ */
+const transformSignals = (code, filename) =>
+  transform(code, {
+    filename: filename,
+    jsc: {
+      target: "esnext",
+      parser: {
+        syntax: "typescript",
+        tsx: true,
+      },
+      experimental: {
+        plugins: [["@preact-signals/safe-react/swc", { mode: "manual" }]],
+      },
+    },
+  });
+
+/**
+ *
+ * @param {{filter: (id: string) => boolean;}} options
+ * @returns {import('esbuild').Plugin}
+ */
+export const esbuildPluginBabel = (options) => ({
+  name: "swc",
+
+  setup(build) {
+    build.onLoad({ filter: /.*/ }, async (args) => {
+      if (!options.filter(args.path)) return;
+
+      const contents = await fs.promises.readFile(args.path, "utf8");
+      if (!contents.includes("@useSignals")) {
+        return { contents };
+      }
+
+      return transformSignals(contents, args.path).then((it) => ({
+        contents: it.code,
+      }));
+    });
+  },
+});
+
 /**
  *
  * @param {{filter: (id: string) => boolean}} param0
@@ -34,22 +80,22 @@ export const createSWCTransformDepsPlugin = ({ filter }) => [
   {
     enforce: "pre",
     name: "vite:preact-signals-safe-react",
+    config() {
+      return {
+        optimizeDeps: {
+          esbuildOptions: {
+            plugins: [esbuildPluginBabel({ filter })],
+          },
+        },
+      };
+    },
     transform(code, id) {
       if (filter(id) && code.includes("@useSignals")) {
         this.debug(`transforming ${id}`);
-        return transform(code, {
-          filename: id,
-          jsc: {
-            target: "esnext",
-            parser: {
-              syntax: "typescript",
-              tsx: true,
-            },
-            experimental: {
-              plugins: [["@preact-signals/safe-react/swc", { mode: "manual" }]],
-            },
-          },
-        }).then((it) => it.code);
+        return transformSignals(code, id).then((it) => ({
+          code: it.code,
+          map: it.map,
+        }));
       }
     },
   },