hi-ogawa · hi-ogawa · Apr 9, 2024 · Apr 8, 2024 · Apr 8, 2024 · Apr 8, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -12,11 +12,14 @@ jobs:
       - run: corepack enable
       - run: pnpm i
       - run: pnpm lint-check
+      - run: pnpm -C examples/workerd build
       - run: pnpm tsc
       - run: npx playwright install chromium
       - run: pnpm -C examples/react-ssr test-e2e
       - run: pnpm -C examples/react-ssr build
       - run: pnpm -C examples/react-ssr test-e2e-preview
+      - run: pnpm -C examples/react-ssr test-e2e-workerd
+      - run: pnpm -C examples/react-ssr-workerd test-e2e
       - run: pnpm -C examples/react-server test-e2e
       - run: pnpm -C examples/react-server build
       - run: pnpm -C examples/react-server test-e2e-preview
diff --git a/examples/react-ssr-workerd/README.md b/examples/react-ssr-workerd/README.md
@@ -0,0 +1,5 @@
+# react-ssr-workerd
+
+```sh
+pnpm dev
+```
diff --git a/examples/react-ssr-workerd/e2e/basic.test.ts b/examples/react-ssr-workerd/e2e/basic.test.ts
@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("basic", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("#root")).toContainText("hydrated: true");
+  await expect(page.locator("#root")).toContainText("Count: 0");
+  await page.getByRole("button", { name: "+" }).click();
+  await expect(page.locator("#root")).toContainText("Count: 1");
+});
diff --git a/examples/react-ssr-workerd/index.html b/examples/react-ssr-workerd/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>react-ssr-workerd</title>
+    <meta
+      name="viewport"
+      content="width=device-width, height=device-height, initial-scale=1.0"
+    />
+  </head>
+  <body>
+    <script src="/src/entry-client" type="module"></script>
+  </body>
+</html>
diff --git a/examples/react-ssr-workerd/package.json b/examples/react-ssr-workerd/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@hiogawa/vite-environment-examples-react-ssr-workerd",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "test-e2e": "playwright test"
+  },
+  "dependencies": {
+    "react": "18.3.0-canary-6c3b8dbfe-20240226",
+    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240405.0",
+    "@hiogawa/vite-plugin-workerd": "workspace:*",
+    "@types/react": "18.2.72",
+    "@types/react-dom": "18.2.22"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}
diff --git a/examples/react-ssr-workerd/playwright.config.ts b/examples/react-ssr-workerd/playwright.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env["E2E_PORT"] || 6174);
+const command = process.env["E2E_PREVIEW"]
+  ? `pnpm preview --port ${port} --strict-port`
+  : process.env["E2E_WORKERD"]
+    ? `pnpm dev-workerd --port ${port} --strict-port`
+    : `pnpm dev --port ${port} --strict-port`;
+
+export default defineConfig({
+  testDir: "e2e",
+  use: {
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: devices["Desktop Chrome"],
+    },
+  ],
+  webServer: {
+    command,
+    port,
+  },
+  forbidOnly: !!process.env["CI"],
+  retries: process.env["CI"] ? 2 : 0,
+  reporter: "list",
+});
diff --git a/examples/react-ssr-workerd/src/adapters/node.tsx b/examples/react-ssr-workerd/src/adapters/node.tsx
@@ -0,0 +1,4 @@
+import { createMiddleware } from "@hattip/adapter-node/native-fetch";
+import { handler } from "../entry-server";
+
+export default createMiddleware((ctx) => handler(ctx.request));
diff --git a/examples/react-ssr-workerd/src/adapters/workerd.ts b/examples/react-ssr-workerd/src/adapters/workerd.ts
@@ -0,0 +1,8 @@
+import { handler } from "../entry-server";
+
+export default {
+  fetch(request: Request, env: unknown) {
+    Object.assign(globalThis, { env });
+    return handler(request);
+  },
+};
diff --git a/examples/react-ssr-workerd/src/entry-client.tsx b/examples/react-ssr-workerd/src/entry-client.tsx
@@ -0,0 +1,14 @@
+import { tinyassert } from "@hiogawa/utils";
+import ReactDomClient from "react-dom/client";
+import Page from "./routes/page";
+import React from "react";
+
+async function main() {
+  const el = document.getElementById("root");
+  tinyassert(el);
+  React.startTransition(() => {
+    ReactDomClient.hydrateRoot(el, <Page />);
+  });
+}
+
+main();
diff --git a/examples/react-ssr-workerd/src/entry-server.tsx b/examples/react-ssr-workerd/src/entry-server.tsx
@@ -0,0 +1,28 @@
+import ReactDomServer from "react-dom/server.edge";
+import Page from "./routes/page";
+
+export async function handler(request: Request) {
+  const url = new URL(request.url);
+  if (url.pathname === "/api") {
+    return apiHandler(request);
+  }
+  if (url.pathname === "/nodejs-compat") {
+    const util = await import("node:util");
+    return new Response(util.format("hello %s", "world"));
+  }
+
+  const ssrHtml = ReactDomServer.renderToString(<Page />);
+  let html = (await import("virtual:index-html")).default;
+  html = html.replace(/<body>/, `<body><div id="root">${ssrHtml}</div>`);
+  return new Response(html, { headers: { "content-type": "text/html" } });
+}
+
+async function apiHandler(request: Request) {
+  let count = Number(await env.kv.get("count"));
+  if (request.method === "POST") {
+    const { delta } = await request.json();
+    count += delta;
+    await env.kv.put("count", String(count));
+  }
+  return new Response(JSON.stringify({ count }));
+}
diff --git a/examples/react-ssr-workerd/src/routes/page.tsx b/examples/react-ssr-workerd/src/routes/page.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+export default function Page() {
+  const [count, setCount] = React.useState<number>();
+
+  const [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
+    setHydrated(true);
+    getCount().then(setCount);
+  }, []);
+
+  return (
+    <div>
+      <div>hydrated: {String(hydrated)}</div>
+      <div>Count: {count ?? "..."}</div>
+      <button onClick={async () => changeCount(-1).then(setCount)}>-1</button>
+      <button onClick={async () => changeCount(+1).then(setCount)}>+1</button>
+    </div>
+  );
+}
+
+async function getCount() {
+  const res = await fetch("/api");
+  const { count } = await res.json();
+  return count as number;
+}
+
+async function changeCount(delta: number) {
+  const res = await fetch("/api", {
+    method: "POST",
+    body: JSON.stringify({ delta }),
+  });
+  const { count } = await res.json();
+  return count as number;
+}
diff --git a/examples/react-ssr-workerd/src/types/react.d.ts b/examples/react-ssr-workerd/src/types/react.d.ts
@@ -0,0 +1,3 @@
+declare module "react-dom/server.edge" {
+  export * from "react-dom/server";
+}
diff --git a/examples/react-ssr-workerd/src/types/virtual.d.ts b/examples/react-ssr-workerd/src/types/virtual.d.ts
@@ -0,0 +1,4 @@
+declare module "virtual:index-html" {
+  const src: string;
+  export default src;
+}
diff --git a/examples/react-ssr-workerd/src/types/workerd.d.ts b/examples/react-ssr-workerd/src/types/workerd.d.ts
@@ -0,0 +1,3 @@
+declare const env: {
+  kv: import("@cloudflare/workers-types").KVNamespace;
+};
diff --git a/examples/react-ssr-workerd/tsconfig.json b/examples/react-ssr-workerd/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "include": ["src", "vite.config.ts", "e2e", "playwright.config.ts"],
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["vite/client"],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/react-ssr-workerd/vite.config.ts b/examples/react-ssr-workerd/vite.config.ts
@@ -0,0 +1,47 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { vitePluginWorkerd } from "@hiogawa/vite-plugin-workerd";
+import { vitePluginVirtualIndexHtml } from "../react-ssr/vite.config";
+import { Log } from "miniflare";
+
+export default defineConfig((_env) => ({
+  clearScreen: false,
+  appType: "custom",
+  plugins: [
+    react(),
+    vitePluginWorkerd({
+      entry: "/src/adapters/workerd.ts",
+      miniflare: {
+        log: new Log(),
+      },
+      wrangler: {
+        configPath: "./wrangler.toml",
+      },
+    }),
+    vitePluginVirtualIndexHtml(),
+  ],
+  environments: {
+    workerd: {
+      // [feedback] how to prevent deps optimization to inject this? still `ssr.target: "webworker"` needed?
+      //    import { createRequire } from 'module';const require = createRequire(import.meta.url);
+      nodeCompatible: false,
+      webCompatible: true,
+      resolve: {
+        noExternal: true,
+      },
+      dev: {
+        optimizeDeps: {
+          include: [
+            "react",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime",
+            "react-dom/server.edge",
+          ],
+        },
+      },
+    },
+  },
+  ssr: {
+    target: "webworker",
+  },
+}));
diff --git a/examples/react-ssr-workerd/wrangler.toml b/examples/react-ssr-workerd/wrangler.toml
@@ -0,0 +1,5 @@
+compatibility_date = "2024-01-01"
+compatibility_flags = ["nodejs_compat"]
+kv_namespaces = [
+  { binding = "kv", id = "test-namespace" }
+]
diff --git a/examples/react-ssr/package.json b/examples/react-ssr/package.json
@@ -4,10 +4,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev-workerd": "vite --config vite.config.workerd.ts",
     "build": "vite build --all",
     "preview": "vite preview",
     "test-e2e": "playwright test",
     "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
+    "test-e2e-workerd": "E2E_WORKERD=1 playwright test",
     "vc-build": "SERVER_ENTRY=/src/adapters/vercel-edge.ts pnpm build && bash misc/vercel-edge/build.sh",
     "vc-release": "vercel deploy --prebuilt misc/vercel-edge --prod"
   },
@@ -16,6 +18,7 @@
     "react-dom": "18.3.0-canary-6c3b8dbfe-20240226"
   },
   "devDependencies": {
+    "@hiogawa/vite-plugin-workerd": "workspace:*",
     "@types/react": "18.2.72",
     "@types/react-dom": "18.2.22"
   },

diff --git a/examples/react-ssr/playwright.config.ts b/examples/react-ssr/playwright.config.ts
@@ -1,10 +1,11 @@
 import { defineConfig, devices } from "@playwright/test";
 
 const port = Number(process.env["E2E_PORT"] || 6174);
-const isPreview = Boolean(process.env["E2E_PREVIEW"]);
-const command = isPreview
+const command = process.env["E2E_PREVIEW"]
   ? `pnpm preview --port ${port} --strict-port`
-  : `pnpm dev --port ${port} --strict-port`;
+  : process.env["E2E_WORKERD"]
+    ? `pnpm dev-workerd --port ${port} --strict-port`
+    : `pnpm dev --port ${port} --strict-port`;
 
 export default defineConfig({
   testDir: "e2e",
@@ -21,7 +22,6 @@ export default defineConfig({
     command,
     port,
   },
-  grepInvert: isPreview ? /@dev/ : /@build/,
   forbidOnly: !!process.env["CI"],
   retries: process.env["CI"] ? 2 : 0,
   reporter: "list",

diff --git a/examples/react-ssr/src/adapters/workerd.ts b/examples/react-ssr/src/adapters/workerd.ts
@@ -0,0 +1,5 @@
+import { handler } from "../entry-server";
+
+export default {
+  fetch: handler,
+};
diff --git a/examples/react-ssr/tsconfig.json b/examples/react-ssr/tsconfig.json
@@ -1,6 +1,12 @@
 {
   "extends": "@tsconfig/strictest/tsconfig.json",
-  "include": ["src", "vite.config.ts", "e2e", "playwright.config.ts"],
+  "include": [
+    "src",
+    "vite.config.ts",
+    "vite.config.workerd.ts",
+    "e2e",
+    "playwright.config.ts"
+  ],
   "compilerOptions": {
     "exactOptionalPropertyTypes": false,
     "verbatimModuleSyntax": true,

diff --git a/examples/react-ssr/vite.config.workerd.ts b/examples/react-ssr/vite.config.workerd.ts
@@ -0,0 +1,44 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { vitePluginWorkerd } from "@hiogawa/vite-plugin-workerd";
+import { vitePluginVirtualIndexHtml } from "./vite.config";
+import { Log } from "miniflare";
+
+export default defineConfig((_env) => ({
+  clearScreen: false,
+  appType: "custom",
+  plugins: [
+    react(),
+    vitePluginWorkerd({
+      entry: "/src/adapters/workerd.ts",
+      miniflare: {
+        log: new Log(),
+      },
+    }),
+    vitePluginVirtualIndexHtml(),
+  ],
+  environments: {
+    workerd: {
+      // [feedback] how to prevent deps optimization to inject this? still `ssr.target: "webworker"` needed?
+      //    import { createRequire } from 'module';const require = createRequire(import.meta.url);
+      nodeCompatible: false,
+      webCompatible: true,
+      resolve: {
+        noExternal: true,
+      },
+      dev: {
+        optimizeDeps: {
+          include: [
+            "react",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime",
+            "react-dom/server.edge",
+          ],
+        },
+      },
+    },
+  },
+  ssr: {
+    target: "webworker",
+  },
+}));
diff --git a/examples/workerd/README.md b/examples/workerd/README.md
@@ -0,0 +1,12 @@
+# workerd
+
+Vite module runner on Durable Objects.
+
+See [`examples/react-ssr-workerd`](../react-ssr-workerd).
+
+## references
+
+- https://github.com/cloudflare/workers-sdk/blame/2789f26a87c769fc6177b0bdc79a839a15f4ced1/packages/miniflare/test/plugins/do/index.spec.ts
+- https://github.com/cloudflare/workers-sdk/blob/d994066f255f6851759a055eac3b52a4aa4b83c3/packages/vitest-pool-workers/src/worker/index.ts#L174
+- https://github.com/cloudflare/workers-sdk/blob/2789f26a87c769fc6177b0bdc79a839a15f4ced1/packages/vitest-pool-workers/src/pool/index.ts#L630
+- https://github.com/cloudflare/workers-sdk/pull/5530