chore(fullstack): move reactHmrPreamblePlugin to each example (#1201)

Let's push this to upstream vitejs/vite-plugin-react#890

Author: hi-ogawa

packages/fullstack/examples/basic/vite.config.ts

@@ -1,9 +1,7 @@
-import fullstack, {
-  reactHmrPreamblePlugin,
-} from "@hiogawa/vite-plugin-fullstack";
+import fullstack from "@hiogawa/vite-plugin-fullstack";
 // import inspect from "vite-plugin-inspect";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { type Plugin, defineConfig } from "vite";
 
 export default defineConfig((_env) => ({
   clearScreen: false,
@@ -42,3 +40,18 @@ export default defineConfig((_env) => ({
     },
   },
 }));
+
+// waiting for https://github.com/vitejs/vite-plugin-react/pull/890
+function reactHmrPreamblePlugin(): Plugin[] {
+  return [
+    {
+      name: "react-hmr-preamble",
+      resolveId: (id) =>
+        id === "virtual:react-hmr-preamble" ? "\0" + id : null,
+      load: (id) =>
+        id === "\0virtual:react-hmr-preamble"
+          ? react.preambleCode.replace("__BASE__", "/")
+          : null,
+    },
+  ];
+}

packages/fullstack/examples/cloudflare/vite.config.ts

@@ -1,9 +1,7 @@
 import { cloudflare } from "@cloudflare/vite-plugin";
-import fullstack, {
-  reactHmrPreamblePlugin,
-} from "@hiogawa/vite-plugin-fullstack";
+import fullstack from "@hiogawa/vite-plugin-fullstack";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { type Plugin, defineConfig } from "vite";
 
 export default defineConfig((_env) => ({
   clearScreen: false,
@@ -47,3 +45,18 @@ export default defineConfig((_env) => ({
     },
   },
 }));
+
+// waiting for https://github.com/vitejs/vite-plugin-react/pull/890
+function reactHmrPreamblePlugin(): Plugin[] {
+  return [
+    {
+      name: "react-hmr-preamble",
+      resolveId: (id) =>
+        id === "virtual:react-hmr-preamble" ? "\0" + id : null,
+      load: (id) =>
+        id === "\0virtual:react-hmr-preamble"
+          ? react.preambleCode.replace("__BASE__", "/")
+          : null,
+    },
+  ];
+}

packages/fullstack/examples/island/vite.config.ts

@@ -1,8 +1,6 @@
-import fullstack, {
-  reactHmrPreamblePlugin,
-} from "@hiogawa/vite-plugin-fullstack";
+import fullstack from "@hiogawa/vite-plugin-fullstack";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { type Plugin, defineConfig } from "vite";
 
 export default defineConfig((_env) => ({
   clearScreen: false,
@@ -40,3 +38,18 @@ export default defineConfig((_env) => ({
     },
   },
 }));
+
+// waiting for https://github.com/vitejs/vite-plugin-react/pull/890
+function reactHmrPreamblePlugin(): Plugin[] {
+  return [
+    {
+      name: "react-hmr-preamble",
+      resolveId: (id) =>
+        id === "virtual:react-hmr-preamble" ? "\0" + id : null,
+      load: (id) =>
+        id === "\0virtual:react-hmr-preamble"
+          ? react.preambleCode.replace("__BASE__", "/")
+          : null,
+    },
+  ];
+}

packages/fullstack/examples/react-router/vite.config.ts

@@ -1,9 +1,7 @@
-import fullstack, {
-  reactHmrPreamblePlugin,
-} from "@hiogawa/vite-plugin-fullstack";
+import fullstack from "@hiogawa/vite-plugin-fullstack";
 // import inspect from "vite-plugin-inspect";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { type Plugin, defineConfig } from "vite";
 import devtoolsJson from "vite-plugin-devtools-json";
 
 export default defineConfig((_env) => ({
@@ -44,3 +42,18 @@ export default defineConfig((_env) => ({
     },
   },
 }));
+
+// waiting for https://github.com/vitejs/vite-plugin-react/pull/890
+function reactHmrPreamblePlugin(): Plugin[] {
+  return [
+    {
+      name: "react-hmr-preamble",
+      resolveId: (id) =>
+        id === "virtual:react-hmr-preamble" ? "\0" + id : null,
+      load: (id) =>
+        id === "\0virtual:react-hmr-preamble"
+          ? react.preambleCode.replace("__BASE__", "/")
+          : null,
+    },
+  ];
+}

packages/fullstack/src/index.ts

@@ -1,2 +1 @@
-export { default, assetsPlugin } from "./plugin.ts";
-export { reactHmrPreamblePlugin } from "./plugins/react.ts";
+export { default, serverHandlerPlugin, assetsPlugin } from "./plugin.ts";