hi-ogawa · hi-ogawa · Sep 28, 2024 · Sep 27, 2024 · Sep 27, 2024 · Sep 27, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -23,6 +23,7 @@ jobs:
       - run: pnpm -C examples/workerd-cli test
       - run: pnpm -C examples/browser-cli test
       - run: pnpm -C examples/web-worker test-e2e
+      - run: pnpm -C examples/web-worker-rsc 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/web-worker-rsc/README.md b/examples/web-worker-rsc/README.md
@@ -0,0 +1,7 @@
+# web-worker-rsc
+
+Based on [`../web-worker`](../web-worker)
+
+```sh
+pnpm dev
+```
diff --git a/examples/web-worker-rsc/e2e/basic.test.ts b/examples/web-worker-rsc/e2e/basic.test.ts
@@ -0,0 +1,11 @@
+import { expect, test } from "@playwright/test";
+
+test("basic", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.getByTestId("worker-message")).toContainText(
+    "[Suspense:fallback]",
+  );
+  await expect(page.getByTestId("worker-message")).toContainText(
+    "[Suspense:OK]",
+  );
+});
diff --git a/examples/web-worker-rsc/index.html b/examples/web-worker-rsc/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Web Worker RSC</title>
+    <meta
+      name="viewport"
+      content="width=device-width, height=device-height, initial-scale=1.0"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/src/entry" type="module"></script>
+  </body>
+</html>
diff --git a/examples/web-worker-rsc/package.json b/examples/web-worker-rsc/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@hiogawa/vite-environment-examples-web-worker",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --app",
+    "preview": "vite preview",
+    "test-e2e": "playwright test",
+    "test-e2e-preview": "E2E_PREVIEW=1 playwright test"
+  },
+  "dependencies": {
+    "react": "19.0.0-rc-eb3ad065-20240822",
+    "react-dom": "19.0.0-rc-eb3ad065-20240822",
+    "react-server-dom-webpack": "19.0.0-rc-eb3ad065-20240822"
+  },
+  "devDependencies": {
+    "@hiogawa/vite-plugin-ssr-middleware-alpha": "workspace:*",
+    "@hiogawa/vite-plugin-workerd": "workspace:*",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}
diff --git a/examples/web-worker-rsc/playwright.config.ts b/examples/web-worker-rsc/playwright.config.ts
@@ -0,0 +1,26 @@
+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`
+  : `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/web-worker-rsc/src/app.tsx b/examples/web-worker-rsc/src/app.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import ReactClient from "react-server-dom-webpack/client";
+import workerUrl from "./worker/entry?worker-runner";
+
+export function App() {
+  const [count, setCount] = React.useState(0);
+  const [workerMessage, setWorkerMessage] = React.useState<React.ReactNode>(
+    "Waiting for worker...",
+  );
+
+  React.useEffect(() => {
+    const worker = new Worker(workerUrl, { type: "module" });
+    worker.addEventListener("message", async (e) => {
+      const root = await ReactClient.createFromReadableStream<React.ReactNode>(
+        e.data,
+      );
+      setWorkerMessage(root);
+    });
+    return () => {
+      worker.terminate();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h4>Client</h4>
+      <div>Count: {count}</div>
+      <button onClick={() => setCount((c) => c - 1)}>-1</button>
+      <button onClick={() => setCount((c) => c + 1)}>+1</button>
+      <hr />
+      <h4>Worker</h4>
+      <div data-testid="worker-message">{workerMessage}</div>
+    </div>
+  );
+}
diff --git a/examples/web-worker-rsc/src/entry.tsx b/examples/web-worker-rsc/src/entry.tsx
@@ -0,0 +1,10 @@
+import "./polyfill-webpack";
+import ReactDomClient from "react-dom/client";
+import { App } from "./app";
+
+async function main() {
+  const el = document.getElementById("root");
+  ReactDomClient.createRoot(el!).render(<App />);
+}
+
+main();
diff --git a/examples/web-worker-rsc/src/lib/ambient.d.ts b/examples/web-worker-rsc/src/lib/ambient.d.ts
@@ -0,0 +1,19 @@
+declare module "*?worker-runner" {
+  const src: string;
+  export default src;
+}
+
+declare module "react-server-dom-webpack/server" {
+  export function renderToReadableStream<T>(
+    data: T,
+    bundlerConfig: unknown,
+    opitons?: unknown,
+  ): ReadableStream<Uint8Array>;
+}
+
+declare module "react-server-dom-webpack/client" {
+  export function createFromReadableStream<T>(
+    stream: ReadableStream<Uint8Array>,
+    options?: unknown,
+  ): Promise<T>;
+}
diff --git a/examples/web-worker-rsc/src/lib/fetch-module-client.ts b/examples/web-worker-rsc/src/lib/fetch-module-client.ts
@@ -0,0 +1,12 @@
+import type { FetchFunction } from "vite";
+
+export function fetchClientFetchModule(environmentName: string): FetchFunction {
+  return async (...args) => {
+    const payload = JSON.stringify([environmentName, ...args]);
+    const response = await fetch(
+      "/@vite/fetchModule?" + new URLSearchParams({ payload }),
+    );
+    const result = response.json();
+    return result as any;
+  };
+}
diff --git a/examples/web-worker-rsc/src/lib/fetch-module-server.ts b/examples/web-worker-rsc/src/lib/fetch-module-server.ts
@@ -0,0 +1,21 @@
+import type { FetchFunction, Plugin } from "vite";
+
+export function vitePluginFetchModuleServer(): Plugin {
+  return {
+    name: vitePluginFetchModuleServer.name,
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        const url = new URL(req.url ?? "/", "https://any.local");
+        if (url.pathname === "/@vite/fetchModule") {
+          const [name, ...args] = JSON.parse(url.searchParams.get("payload")!);
+          const result = await server.environments[name]!.fetchModule(
+            ...(args as Parameters<FetchFunction>),
+          );
+          res.end(JSON.stringify(result));
+          return;
+        }
+        next();
+      });
+    },
+  };
+}
diff --git a/examples/web-worker-rsc/src/lib/runner.ts b/examples/web-worker-rsc/src/lib/runner.ts
@@ -0,0 +1,20 @@
+import { ESModulesEvaluator, ModuleRunner } from "vite/module-runner";
+import { fetchClientFetchModule } from "./fetch-module-client";
+
+export function createFetchRunner(options: {
+  root: string;
+  environmentName: string;
+}) {
+  const runner = new ModuleRunner(
+    {
+      root: options.root,
+      sourcemapInterceptor: false,
+      transport: {
+        fetchModule: fetchClientFetchModule(options.environmentName),
+      },
+      hmr: false,
+    },
+    new ESModulesEvaluator(),
+  );
+  return runner;
+}
diff --git a/examples/web-worker-rsc/src/polyfill-webpack.ts b/examples/web-worker-rsc/src/polyfill-webpack.ts
@@ -0,0 +1,3 @@
+Object.assign(globalThis, {
+  __webpack_require__: () => {},
+});
diff --git a/examples/web-worker-rsc/src/worker/entry.tsx b/examples/web-worker-rsc/src/worker/entry.tsx
@@ -0,0 +1,6 @@
+import "../polyfill-webpack";
+import ReactServer from "react-server-dom-webpack/server";
+import { Root } from "./root";
+
+const stream = ReactServer.renderToReadableStream(<Root />, {}, {});
+self.postMessage(stream, { transfer: [stream] });
diff --git a/examples/web-worker-rsc/src/worker/root.tsx b/examples/web-worker-rsc/src/worker/root.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+export function Root() {
+  return (
+    <div>
+      <div>Rendered in web worker</div>
+      <pre>[rendered at {new Date().toISOString()}]</pre>
+      <React.Suspense
+        fallback={
+          <div>
+            [Suspense:fallback] <pre>Sleeping 1 sec...</pre>
+          </div>
+        }
+      >
+        <div>
+          [Suspense:OK] <Sleep ms={1000} />
+        </div>
+      </React.Suspense>
+    </div>
+  );
+}
+
+async function Sleep(props: { ms: number }) {
+  await new Promise((r) => setTimeout(r, props.ms));
+  return <pre>[rendered at {new Date().toISOString()}]</pre>;
+}
diff --git a/examples/web-worker-rsc/tsconfig.json b/examples/web-worker-rsc/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "include": ["src", "e2e", "*.ts"],
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["vite/client", "react/experimental"],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/web-worker-rsc/vite.config.ts b/examples/web-worker-rsc/vite.config.ts
@@ -0,0 +1,35 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { vitePluginWorkerRunner } from "../web-worker/vite.config";
+import { vitePluginFetchModuleServer } from "./src/lib/fetch-module-server";
+
+export default defineConfig((_env) => ({
+  clearScreen: false,
+  plugins: [react(), vitePluginWorkerRunner(), vitePluginFetchModuleServer()],
+  environments: {
+    client: {
+      dev: {
+        optimizeDeps: {
+          exclude: ["vite/module-runner"],
+        },
+      },
+    },
+    worker: {
+      webCompatible: true,
+      resolve: {
+        conditions: ["react-server"],
+        noExternal: true,
+      },
+      dev: {
+        optimizeDeps: {
+          include: [
+            "react",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime",
+            "react-server-dom-webpack/server",
+          ],
+        },
+      },
+    },
+  },
+}));
diff --git a/examples/web-worker/vite.config.ts b/examples/web-worker/vite.config.ts
@@ -33,7 +33,7 @@ export default defineConfig((_env) => ({
   },
 }));
 
-function vitePluginWorkerRunner(): Plugin[] {
+export function vitePluginWorkerRunner(): Plugin[] {
   const workerEntryPlugin: Plugin = {
     name: vitePluginWorkerRunner.name + ":entry",
     transform(_code, id) {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml