diff --git a/packages/vite-node-miniflare/examples/basic/src/worker-entry.ts b/packages/vite-node-miniflare/examples/basic/src/worker-entry.ts index 0bc11d917..7da6af1d8 100644 --- 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 index a0246323d..56555fe02 100644 --- 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 index b0a07c577..74c437143 100644 --- 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 index 01ef0bd1b..7bcad8fb1 100644 --- 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("", () => 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 index df465bf41..c90c08b3c 100644 --- 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 index d57e5f242..1f72a94fb 100644 --- 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(); diff --git a/packages/vite-node-miniflare/examples/react/vite.config.ts b/packages/vite-node-miniflare/examples/react/vite.config.ts index 5b4388a21..9cb465ed6 100644 --- 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 index ffcb0e156..cf5505817 100644 --- 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 index 35a82cfe5..f7cc84037 100644 --- 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(),