fix: standalone 07_router example (#322)

* test: add standalone test

* fix: crypto

* fix it

* restore waku-client

* fix one more

* does this fix?

* test: improve

* revert: code

* Revert "revert: code"

This reverts commit 8fc45bd.

* fix: code

* refactor

---------

Co-authored-by: daishi <[email protected]>

Author: himself65

.gitignore

@@ -8,3 +8,4 @@ dist
 .devcontainer
 .vscode
 *.tsbuildinfo
+.cache

e2e/07_router_standalone.spec.ts

@@ -0,0 +1,85 @@
+import { debugChildProcess, getFreePort, test } from './utils.js';
+import { fileURLToPath } from 'node:url';
+import { cp, mkdir, rm } from 'node:fs/promises';
+import { exec, execSync } from 'node:child_process';
+import { expect, type Page } from '@playwright/test';
+import crypto from 'node:crypto';
+import waitPort from 'wait-port';
+
+const cacheDir = fileURLToPath(new URL('./.cache', import.meta.url));
+const exampleDir = fileURLToPath(
+  new URL('../examples/07_router', import.meta.url),
+);
+const wakuDir = fileURLToPath(new URL('../packages/waku', import.meta.url));
+
+async function testRouterExample(page: Page, port: number) {
+  await waitPort({
+    port,
+  });
+
+  await page.goto(`http://localhost:${port}`);
+  await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
+
+  await page.click("a[href='/foo']");
+
+  await expect(page.getByRole('heading', { name: 'Foo' })).toBeVisible();
+
+  await page.goto(`http://localhost:${port}/foo`);
+  await expect(page.getByRole('heading', { name: 'Foo' })).toBeVisible();
+}
+
+test.describe('07_router standalone', () => {
+  const dirname = crypto.randomUUID();
+  test.beforeAll('copy code', async () => {
+    await mkdir(cacheDir, {
+      recursive: true,
+    });
+    await cp(exampleDir, `${cacheDir}/${dirname}`, { recursive: true });
+    // cleanup node_modules and output
+    await rm(`${cacheDir}/${dirname}/node_modules`, {
+      recursive: true,
+      force: true,
+    });
+    await rm(`${cacheDir}/${dirname}/dist`, { recursive: true, force: true });
+    execSync('pnpm install', {
+      cwd: `${cacheDir}/${dirname}`,
+      stdio: 'inherit',
+    });
+    // copy waku
+    await cp(wakuDir, `${cacheDir}/${dirname}/node_modules/waku`, {
+      recursive: true,
+    });
+  });
+
+  test('should prod work', async ({ page }) => {
+    execSync('pnpm run build', {
+      cwd: `${cacheDir}/${dirname}`,
+      stdio: 'inherit',
+    });
+    const port = await getFreePort();
+    const cp = exec('pnpm run start', {
+      cwd: `${cacheDir}/${dirname}`,
+      env: {
+        ...process.env,
+        PORT: `${port}`,
+      },
+    });
+    debugChildProcess(cp);
+    await testRouterExample(page, port);
+    cp.kill();
+  });
+
+  test('should dev work', async ({ page }) => {
+    const port = await getFreePort();
+    const cp = exec('pnpm run dev', {
+      cwd: `${cacheDir}/${dirname}`,
+      env: {
+        ...process.env,
+        PORT: `${port}`,
+      },
+    });
+    debugChildProcess(cp);
+    await testRouterExample(page, port);
+    cp.kill();
+  });
+});

e2e/utils.ts

@@ -1,6 +1,7 @@
 import net from 'node:net';
 import { test as basicTest } from '@playwright/test';
 import type { ConsoleMessage } from '@playwright/test';
+import type { ChildProcess } from 'node:child_process';
 
 export async function getFreePort(): Promise<number> {
   return new Promise<number>((res) => {
@@ -12,6 +13,16 @@ export async function getFreePort(): Promise<number> {
   });
 }
 
+export function debugChildProcess(cp: ChildProcess) {
+  cp.stdout?.on('data', (data) => {
+    console.log(`stdout: ${data}`);
+  });
+
+  cp.stderr?.on('data', (data) => {
+    console.error(`stderr: ${data}`);
+  });
+}
+
 export const test = basicTest.extend({
   page: async ({ page }, use) => {
     const unexpectedErrors: RegExp[] = [

packages/waku/src/lib/builder/build.ts

@@ -8,7 +8,13 @@ import type { RollupLog, LoggingFunction } from 'rollup';
 
 import { resolveConfig } from '../config.js';
 import type { Config, ResolvedConfig } from '../config.js';
-import { joinPath, extname, filePathToFileURL } from '../utils/path.js';
+import {
+  joinPath,
+  extname,
+  filePathToFileURL,
+  fileURLToFilePath,
+  decodeFilePathFromAbsolute,
+} from '../utils/path.js';
 import {
   createReadStream,
   createWriteStream,
@@ -140,15 +146,18 @@ const buildServerBundle = async (
   const serverBuildOutput = await buildVite({
     plugins: [
       nonjsResolvePlugin(),
-      rscTransformPlugin(
-        true,
-        config.assetsDir,
-        {
-          [WAKU_CLIENT_MODULE]: WAKU_CLIENT_MODULE_VALUE,
+      rscTransformPlugin({
+        isBuild: true,
+        assetsDir: config.assetsDir,
+        clientEntryFiles: {
+          // FIXME this seems very ad-hoc
+          [WAKU_CLIENT_MODULE]: decodeFilePathFromAbsolute(
+            joinPath(fileURLToFilePath(import.meta.url), '../../../client.js'),
+          ),
           ...clientEntryFiles,
         },
         serverEntryFiles,
-      ),
+      }),
     ],
     ssr: {
       resolve: {
@@ -208,6 +217,8 @@ export function loadModule(id) {
       return import('./${psDir}/${RSDW_CLIENT_MODULE}.js');
     case 'public/${WAKU_CLIENT_MODULE}':
       return import('./${psDir}/${WAKU_CLIENT_MODULE}.js');
+    case '${psDir}/${WAKU_CLIENT_MODULE}.js':
+      return import('./${psDir}/${WAKU_CLIENT_MODULE}.js');
 ${Object.entries(serverEntryFiles || {})
   .map(
     ([k]) => `

packages/waku/src/lib/handlers/dev-worker-impl.ts

@@ -96,7 +96,7 @@ const moduleImports: Set<string> = new Set();
 const mergedViteConfig = await mergeUserViteConfig({
   plugins: [
     nonjsResolvePlugin(),
-    rscTransformPlugin(false),
+    rscTransformPlugin({ isBuild: false }),
     rscReloadPlugin(moduleImports, (type) => {
       const mesg: MessageRes = { type };
       parentPort!.postMessage(mesg);

packages/waku/src/lib/handlers/handler-dev.ts

@@ -5,7 +5,7 @@ import { default as viteReact } from '@vitejs/plugin-react';
 import type { EntriesDev } from '../../server.js';
 import { resolveConfig } from '../config.js';
 import type { Config } from '../config.js';
-import { joinPath } from '../utils/path.js';
+import { joinPath, decodeFilePathFromAbsolute } from '../utils/path.js';
 import { endStream } from '../utils/stream.js';
 import { renderHtml } from '../renderers/html-renderer.js';
 import { decodeInput, hasStatusCode } from '../renderers/utils.js';
@@ -188,9 +188,28 @@ export function createHandler<
       }
       return;
     }
+    // HACK re-export "?v=..." URL to avoid dual module hazard.
+    const viteUrl = req.url.toString().slice(req.url.origin.length);
+    const fname = viteUrl.startsWith(config.basePath + '@fs/')
+      ? decodeFilePathFromAbsolute(
+          viteUrl.slice(config.basePath.length + '@fs'.length),
+        )
+      : joinPath(vite.config.root, viteUrl);
+    for (const item of vite.moduleGraph.idToModuleMap.values()) {
+      if (
+        item.file === fname &&
+        item.url !== viteUrl &&
+        !item.url.includes('?html-proxy')
+      ) {
+        res.setHeader('Content-Type', 'application/javascript');
+        res.setStatus(200);
+        endStream(res.stream, `export * from "${item.url}";`);
+        return;
+      }
+    }
     const viteReq: any = Readable.fromWeb(req.stream as any);
     viteReq.method = req.method;
-    viteReq.url = req.url.toString().slice(req.url.origin.length);
+    viteReq.url = viteUrl;
     viteReq.headers = { 'content-type': req.contentType };
     const viteRes: any = Writable.fromWeb(res.stream as any);
     Object.defineProperty(viteRes, 'statusCode', {

packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts

@@ -2,49 +2,41 @@ import type { Plugin } from 'vite';
 import * as RSDWNodeLoader from 'react-server-dom-webpack/node-loader';
 
 export function rscTransformPlugin(
-  isBuild: boolean,
-  assetsDir?: string,
-  clientEntryFiles?: Record<string, string>,
-  serverEntryFiles?: Record<string, string>,
+  opts:
+    | {
+        isBuild: false;
+      }
+    | {
+        isBuild: true;
+        assetsDir: string;
+        clientEntryFiles: Record<string, string>;
+        serverEntryFiles: Record<string, string>;
+      },
 ): Plugin {
-  const clientFileMap = new Map<string, string>();
-  const serverFileMap = new Map<string, string>();
   const getClientId = (id: string) => {
-    if (!assetsDir) {
-      throw new Error('assetsDir is required');
+    if (!opts.isBuild) {
+      throw new Error('not buiding');
     }
-    if (!clientFileMap.has(id)) {
-      throw new Error(`Cannot find client id for ${id}`);
+    for (const [k, v] of Object.entries(opts.clientEntryFiles)) {
+      if (v === id) {
+        return `@id/${opts.assetsDir}/${k}.js`;
+      }
     }
-    return `@id/${assetsDir}/${clientFileMap.get(id)}.js`;
+    throw new Error('client id not found: ' + id);
   };
   const getServerId = (id: string) => {
-    if (!assetsDir) {
-      throw new Error('assetsDir is required');
+    if (!opts.isBuild) {
+      throw new Error('not buiding');
     }
-    if (!serverFileMap.has(id)) {
-      throw new Error(`Cannot find server id for ${id}`);
+    for (const [k, v] of Object.entries(opts.serverEntryFiles)) {
+      if (v === id) {
+        return `@id/${opts.assetsDir}/${k}.js`;
+      }
     }
-    return `@id/${assetsDir}/${serverFileMap.get(id)}.js`;
+    throw new Error('server id not found: ' + id);
   };
-  let buildStarted = false;
   return {
     name: 'rsc-transform-plugin',
-    async buildStart() {
-      for (const [k, v] of Object.entries(clientEntryFiles || {})) {
-        const resolvedId = await this.resolve(v);
-        if (!resolvedId) {
-          throw new Error(`Cannot resolve ${v}`);
-        }
-        clientFileMap.set(resolvedId.id, k);
-      }
-      for (const [k, v] of Object.entries(serverEntryFiles || {})) {
-        serverFileMap.set(v, k);
-      }
-      // HACK Without checking buildStarted in transform,
-      // this.resolve calls transform, and getClientId throws an error.
-      buildStarted = true;
-    },
     async transform(code, id) {
       const resolve = async (
         specifier: string,
@@ -71,7 +63,7 @@ export function rscTransformPlugin(
         resolve,
       );
       let { source } = await RSDWNodeLoader.load(id, null, load);
-      if (isBuild && buildStarted) {
+      if (opts.isBuild) {
         // TODO we should parse the source code by ourselves with SWC
         if (
           /^import {registerClientReference} from "react-server-dom-webpack\/server";/.test(