chore(vite-node-miniflare): simplify examples (#633)

hi-ogawa · Aug 29, 2024 · 51f74ad · 51f74ad
1 parent 28356c6
commit 51f74ad
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 40 deletions.
diff --git a/packages/vite-node-miniflare/examples/basic/src/worker-entry.ts b/packages/vite-node-miniflare/examples/basic/src/worker-entry.ts
@@ -2,15 +2,9 @@ import { h, renderToString } from "@hiogawa/tiny-react";
 import { App } from "./app";
 
 export default {
-  async fetch(request: Request, env: any) {
+  async fetch(request: Request, _env: any) {
     // load template
-    let html: string;
-    if (import.meta.env.DEV) {
-      html = (await import("/index.html?raw")).default;
-      html = await env.__RPC.transformIndexHtml("/", html);
-    } else {
-      html = (await import("/dist/client/index.html?raw")).default;
-    }
+    let html: string = (await import("virtual:index-html" as string)).default;
 
     // ssr
     const ssrHtml = renderToString(h(App, { url: request.url }));

diff --git a/packages/vite-node-miniflare/examples/basic/tsconfig.json b/packages/vite-node-miniflare/examples/basic/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "../../../../tsconfig.base.json",
-  "include": ["src", "vite.config.ts", "playwright.config.ts"],
+  "include": ["*.ts", "src", "e2e"],
   "compilerOptions": {
     "types": ["vite/client"],
     "jsx": "react-jsx",

diff --git a/packages/vite-node-miniflare/examples/basic/vite.config.ts b/packages/vite-node-miniflare/examples/basic/vite.config.ts
@@ -1,8 +1,9 @@
+import fs from "node:fs";
 import { tinyReactVitePlugin } from "@hiogawa/tiny-react/dist/plugins/vite";
 import { vitePluginViteNodeMiniflare } from "@hiogawa/vite-node-miniflare";
 import { vitePluginSimpleHmr } from "@hiogawa/vite-plugin-simple-hmr";
 import { Log } from "miniflare";
-import { defineConfig } from "vite";
+import { type Plugin, type ViteDevServer, defineConfig } from "vite";
 
 export default defineConfig({
   clearScreen: false,
@@ -23,5 +24,33 @@ export default defineConfig({
       },
     }),
     tinyReactVitePlugin(),
+    vitePluginVirtualIndexHtml(),
   ],
 });
+
+export function vitePluginVirtualIndexHtml(): Plugin {
+  let server: ViteDevServer | undefined;
+  return {
+    name: vitePluginVirtualIndexHtml.name,
+    configureServer(server_) {
+      server = server_;
+    },
+    resolveId(source, _importer, _options) {
+      return source === "virtual:index-html" ? "\0" + source : undefined;
+    },
+    async load(id, _options) {
+      if (id === "\0" + "virtual:index-html") {
+        let html: string;
+        if (server) {
+          this.addWatchFile("index.html");
+          html = await fs.promises.readFile("index.html", "utf-8");
+          html = await server.transformIndexHtml("/", html);
+        } else {
+          html = await fs.promises.readFile("dist/client/index.html", "utf-8");
+        }
+        return `export default ${JSON.stringify(html)}`;
+      }
+      return;
+    },
+  };
+}
diff --git a/packages/vite-node-miniflare/examples/react-router/src/server/ssr.tsx b/packages/vite-node-miniflare/examples/react-router/src/server/ssr.tsx
@@ -46,16 +46,7 @@ export function ssrHandler(): RequestHandler {
     }
 
     // load tempalte
-    let html: string;
-    if (import.meta.env.DEV) {
-      html = (await import("/index.html?raw")).default;
-      html = await (ctx.platform as any).env.__RPC.transformIndexHtml(
-        "/",
-        html,
-      );
-    } else {
-      html = (await import("/dist/client/index.html?raw")).default;
-    }
+    let html: string = (await import("virtual:index-html" as string)).default;
 
     html = html.replace("<!--@INJECT_SSR@-->", () => ssrHtml);
     html = html.replace(

diff --git a/packages/vite-node-miniflare/examples/react-router/vite.config.ts b/packages/vite-node-miniflare/examples/react-router/vite.config.ts
@@ -3,6 +3,7 @@ import { vitePluginViteNodeMiniflare } from "@hiogawa/vite-node-miniflare";
 import react from "@vitejs/plugin-react";
 import { Log } from "miniflare";
 import { defineConfig } from "vite";
+import { vitePluginVirtualIndexHtml } from "../basic/vite.config";
 
 export default defineConfig({
   clearScreen: false,
@@ -30,5 +31,6 @@ export default defineConfig({
       },
     }),
     react(),
+    vitePluginVirtualIndexHtml(),
   ],
 });
diff --git a/packages/vite-node-miniflare/examples/react/src/worker-entry.tsx b/packages/vite-node-miniflare/examples/react/src/worker-entry.tsx
@@ -2,15 +2,9 @@ import ReactDomServer from "react-dom/server";
 import { App } from "./app";
 
 export default {
-  async fetch(request: Request, env: any) {
+  async fetch(request: Request, _env: any) {
     // load template
-    let html: string;
-    if (import.meta.env.DEV) {
-      html = (await import("/index.html?raw")).default;
-      html = await env.__RPC.transformIndexHtml("/", html);
-    } else {
-      html = (await import("/dist/client/index.html?raw")).default;
-    }
+    let html: string = (await import("virtual:index-html" as string)).default;
 
     // ssr
     const ssrHtml = ReactDomServer.renderToString(<App url={request.url} />);

diff --git a/packages/vite-node-miniflare/examples/react/vite.config.ts b/packages/vite-node-miniflare/examples/react/vite.config.ts
@@ -2,6 +2,7 @@ import { vitePluginViteNodeMiniflare } from "@hiogawa/vite-node-miniflare";
 import react from "@vitejs/plugin-react";
 import { Log } from "miniflare";
 import { defineConfig } from "vite";
+import { vitePluginVirtualIndexHtml } from "../basic/vite.config";
 
 export default defineConfig({
   clearScreen: false,
@@ -27,5 +28,6 @@ export default defineConfig({
       },
     }),
     react(),
+    vitePluginVirtualIndexHtml(),
   ],
 });
diff --git a/packages/vite-node-miniflare/examples/remix/app/worker-entry.ts b/packages/vite-node-miniflare/examples/remix/app/worker-entry.ts
@@ -16,10 +16,19 @@ function createFetchHandler() {
     // expose env.kv
     Object.assign(globalThis, { env });
 
-    // DevServerHook is implemented via custom rpc
+    // DevServerHook is implemented via serviceBindings
     if (import.meta.env.DEV) {
       unstable_setDevServerHooks({
-        getCriticalCss: env.__RPC.__remixGetCriticalCss,
+        getCriticalCss: async (...args) => {
+          const response = await env.__remixGetCriticalCss.fetch(
+            new Request("https://test.local", {
+              method: "POST",
+              body: JSON.stringify(args),
+            }),
+          );
+          const { result } = await response.json();
+          return result as any;
+        },
       });
     }
 

diff --git a/packages/vite-node-miniflare/examples/remix/vite.config.ts b/packages/vite-node-miniflare/examples/remix/vite.config.ts
@@ -1,6 +1,6 @@
 import { vitePluginViteNodeMiniflare } from "@hiogawa/vite-node-miniflare";
 import { vitePlugin as remix } from "@remix-run/dev";
-import { Log } from "miniflare";
+import { Log, Response as MiniflareResponse } from "miniflare";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -27,15 +27,17 @@ export default defineConfig({
         options.log = new Log();
         options.kvNamespaces = { kv: "0".repeat(32) };
         options.kvPersist = ".wrangler/state/v3/kv";
-      },
-      customRpc: {
-        // DevServerHook is implemented via custom rpc
-        // https://github.com/remix-run/remix/blob/db4471d2e32a175abdcb907b877f9a510c735d8b/packages/remix-server-runtime/dev.ts#L37-L48
-        __remixGetCriticalCss: (...args: any[]) => {
-          return (globalThis as any)["__remix_devServerHooks"].getCriticalCss(
-            ...args,
-          );
-        },
+        options.serviceBindings = {
+          // DevServerHook is implemented via serviceBindings based rpc
+          // https://github.com/remix-run/remix/blob/db4471d2e32a175abdcb907b877f9a510c735d8b/packages/remix-server-runtime/dev.ts#L37-L48
+          __remixGetCriticalCss: async (request) => {
+            const args: any = await request.json();
+            const result = await (globalThis as any)[
+              "__remix_devServerHooks"
+            ].getCriticalCss(...args);
+            return new MiniflareResponse(JSON.stringify({ result }));
+          },
+        };
       },
     }),
     remix(),