hi-ogawa · hi-ogawa · Mar 18, 2024 · Mar 18, 2024 · Mar 18, 2024 · Mar 18, 2024
diff --git a/packages/react-server/README.md b/packages/react-server/README.md
@@ -1,6 +1,6 @@
 # @hiogawa/react-server
 
-[Try it on Stackblitz](https://stackblitz.com/edit/github-ufbaye?file=src%2Froutes%2Fserver-action%2Fclient.tsx)
+[Try it on Stackblitz](https://stackblitz.com/github/hi-ogawa/vite-plugins/tree/feat-react-server-full-html/)
 
 ![image](https://github.com/hi-ogawa/vite-plugins/assets/4232207/119a42ee-d68e-401d-830a-161cc53c8b24)
 

diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -19,6 +19,8 @@ test("navigation", async ({ page }) => {
   await page.getByRole("link", { name: "/test/other" }).click();
   await page.getByText("Other Page").click();
   await page.waitForURL("/test/other");
+  await page.goBack();
+  await page.waitForURL("/test");
 
   await checkClientState();
 });
@@ -91,15 +93,21 @@ test("@dev client hmr", async ({ page }) => {
   expect(await res.text()).toContain("<div>test-hmr-edit-div</div>");
 });
 
-test("css", async ({ page }) => {
+test("css", async ({ page, browser }) => {
   await page.goto("/test");
   await expect(page.getByRole("heading", { name: "RSC Experiment" })).toHaveCSS(
     "font-weight",
     "700",
   );
+
+  const page2 = await browser.newPage({ javaScriptEnabled: false });
+  await page2.goto("/test");
+  await expect(
+    page2.getByRole("heading", { name: "RSC Experiment" }),
+  ).toHaveCSS("font-weight", "700");
 });
 
-test("@dev css hmr", async ({ page }) => {
+test("@dev css hmr", async ({ page, browser }) => {
   await page.goto("/test");
   await page.getByText("hydrated: true").click();
 
@@ -114,10 +122,18 @@ test("@dev css hmr", async ({ page }) => {
     "font-weight",
     "300",
   );
+
+  // verify new style is applied without js
+  const page2 = await browser.newPage({ javaScriptEnabled: false });
+  await page2.goto("/test");
+  await expect(
+    page2.getByRole("heading", { name: "RSC Experiment" }),
+  ).toHaveCSS("font-weight", "300");
 });
 
 test("server action with js", async ({ page }) => {
   await page.goto("/test/action");
+  await page.getByText("hydrated: true").click();
 
   const checkClientState = await setupCheckClientState(page);
 
@@ -189,6 +205,29 @@ test("custom entry-react-server", async ({ request }) => {
   expect(await res.json()).toEqual({ hello: "world" });
 });
 
+test("head in rsc", async ({ page }) => {
+  await page.goto("/test/head");
+  await page.getByText("hydrated: true").click();
+
+  const checkClientState = await setupCheckClientState(page);
+
+  await page.getByRole("link", { name: "title = hello" }).click();
+  await expect(page).toHaveTitle("hello");
+  await page.getByRole("link", { name: "title = world" }).click();
+  await expect(page).toHaveTitle("world");
+
+  await checkClientState();
+
+  // TODO: it doesn't magically overwrite already rendered title in the layout...
+  const res = await page.request.get("/test/head?title=hello");
+  const resText = await res.text();
+  expect(resText).toMatch(/<head>.*<title>rsc-experiment<\/title>.*<\/head>/s);
+  expect(resText).toMatch(/<head>.*<title>hello<\/title>.*<\/head>/s);
+  expect(resText).toMatch(
+    /<head>.*<meta name="test" content="hello"\/>.*<\/head>/s,
+  );
+});
+
 async function setupCheckClientState(page: Page) {
   // setup client state
   await page.getByPlaceholder("test-input").fill("hello");

diff --git a/packages/react-server/examples/basic/index.html b/packages/react-server/examples/basic/index.html
diff --git a/packages/react-server/examples/basic/src/routes/layout.tsx b/packages/react-server/examples/basic/src/routes/layout.tsx
@@ -2,12 +2,21 @@ import type { LayoutRouteProps } from "@hiogawa/react-server/server";
 import { Header } from "../components/header";
 import { NavMenu } from "../components/nav-menu";
 
-export default async function Layout(props: LayoutRouteProps) {
+export default function Layout(props: LayoutRouteProps) {
   return (
-    <div className="p-4 flex flex-col gap-2">
-      <Header />
-      <NavMenu links={["/", "/test", "/demo/waku_02"]} />
-      {props.children}
-    </div>
+    <html>
+      <head>
+        <meta charSet="UTF-8" />
+        <title>rsc-experiment</title>
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body>
+        <div className="p-4 flex flex-col gap-2">
+          <Header />
+          <NavMenu links={["/", "/test", "/demo/waku_02"]} />
+          {props.children}
+        </div>
+      </body>
+    </html>
   );
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/head/page.tsx b/packages/react-server/examples/basic/src/routes/test/head/page.tsx
@@ -0,0 +1,21 @@
+import { Link } from "@hiogawa/react-server/client";
+import type { PageRouteProps } from "@hiogawa/react-server/server";
+
+export default function Page(props: PageRouteProps) {
+  const title = new URL(props.request.url).searchParams.get("title");
+  return (
+    <div className="flex flex-col gap-2">
+      {title && <title>{title}</title>}
+      {title && <meta name="test" content={title} />}
+      <h5 className="text-lg font-bold">head test</h5>
+      <div className="flex gap-2">
+        <Link className="antd-btn antd-btn-default px-2" href="?title=hello">
+          title = hello
+        </Link>
+        <Link className="antd-btn antd-btn-default px-2" href="?title=world">
+          title = world
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/layout.tsx b/packages/react-server/examples/basic/src/routes/test/layout.tsx
@@ -11,6 +11,7 @@ export default async function Layout(props: React.PropsWithChildren) {
           "/test/other",
           "/test/action",
           "/test/deps",
+          "/test/head",
           "/test/not-found",
         ]}
       />

diff --git a/packages/react-server/examples/starter/index.html b/packages/react-server/examples/starter/index.html
diff --git a/packages/react-server/examples/starter/src/routes/layout.tsx b/packages/react-server/examples/starter/src/routes/layout.tsx
@@ -1,29 +1,36 @@
 import { Link } from "@hiogawa/react-server/client";
 
-export default async function Layout(props: React.PropsWithChildren) {
+export default function Layout(props: React.PropsWithChildren) {
   return (
-    <div>
-      <h3>React Server Starter</h3>
-      <a
-        href="https://github.com/hi-ogawa/vite-plugins/tree/main/packages/react-server"
-        target="_blank"
-      >
-        GitHub
-      </a>
-      <nav>
-        <ul>
-          <li>
-            <Link href="/">Home</Link>
-          </li>
-          <li>
-            <Link href="/use-state">Counter (useState)</Link>
-          </li>
-          <li>
-            <Link href="/server-action">Counter (server action)</Link>
-          </li>
-        </ul>
-      </nav>
-      {props.children}
-    </div>
+    <html>
+      <head>
+        <meta charSet="UTF-8" />
+        <title>React Server Starter</title>
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body>
+        <h3>React Server Starter</h3>
+        <a
+          href="https://github.com/hi-ogawa/vite-plugins/tree/main/packages/react-server"
+          target="_blank"
+        >
+          GitHub
+        </a>
+        <nav>
+          <ul>
+            <li>
+              <Link href="/">Home</Link>
+            </li>
+            <li>
+              <Link href="/use-state">Counter (useState)</Link>
+            </li>
+            <li>
+              <Link href="/server-action">Counter (server action)</Link>
+            </li>
+          </ul>
+        </nav>
+        {props.children}
+      </body>
+    </html>
   );
 }
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hiogawa/react-server",
-  "version": "0.1.0-pre.4",
+  "version": "0.1.0-pre.6",
   "license": "MIT",
   "type": "module",
   "exports": {

diff --git a/packages/react-server/src/entry/browser.tsx b/packages/react-server/src/entry/browser.tsx
@@ -7,7 +7,7 @@ import { debug } from "../lib/debug";
 import { injectActionId, wrapRscRequestUrl } from "../lib/shared";
 import type { CallServerCallback } from "../lib/types";
 
-// TODO: root error boundary?
+// TODO: root error boundary? suspense?
 
 export async function start() {
   initDomWebpackCsr();
@@ -72,11 +72,8 @@ export async function start() {
     return React.use(rsc);
   }
 
-  const rootEl = document.getElementById("root");
-  tinyassert(rootEl);
-
   reactDomClient.hydrateRoot(
-    rootEl,
+    document,
     <React.StrictMode>
       <Root />
     </React.StrictMode>,

diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
@@ -1,11 +1,12 @@
-import { typedBoolean } from "@hiogawa/utils";
+import { splitFirst } from "@hiogawa/utils";
 import reactDomServer from "react-dom/server.edge";
 import { injectRSCPayload } from "rsc-html-stream/server";
 import {
   createModuleMap,
   initDomWebpackSsr,
   invalidateImportCacheOnFinish,
 } from "../lib/ssr";
+import { invalidateModule } from "../plugin/utils";
 
 export async function handler(request: Request): Promise<Response> {
   const reactServer = await importReactServer();
@@ -36,7 +37,6 @@ export async function importReactServer(): Promise<
   }
 }
 
-// TODO: full <html> render by RSC?
 export async function renderHtml(
   rscStream: ReadableStream,
 ): Promise<ReadableStream> {
@@ -62,69 +62,37 @@ export async function renderHtml(
     },
   );
 
+  if (import.meta.env.DEV) {
+    // ensure latest css
+    invalidateModule(__devServer, "\0virtual:ssr-assets");
+    invalidateModule(__devServer, "\0virtual:dev-ssr-css.css?direct");
+  }
+  const assets = (await import("virtual:ssr-assets" as string)).default;
+
   const ssrStream = await reactDomServer.renderToReadableStream(rscNode, {
-    // TODO
-    bootstrapModules: [],
-    bootstrapScripts: [],
+    bootstrapModules: assets.bootstrapModules,
   });
 
   return ssrStream
     .pipeThrough(invalidateImportCacheOnFinish(renderId))
-    .pipeThrough(await injectToHtmlTempalte())
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(injectToHead(assets.head))
+    .pipeThrough(new TextEncoderStream())
     .pipeThrough(injectRSCPayload(rscStream2));
 }
 
-async function injectToHtmlTempalte() {
-  let html = await importHtmlTemplate();
-
-  if (import.meta.env.DEV) {
-    // fix dev FOUC (cf. https://github.com/hi-ogawa/vite-plugins/pull/110)
-    // for now crawl only direct dependency of entry-client
-    const entry = "/src/entry-client";
-    await __devServer.transformRequest(entry);
-    const modNode = await __devServer.moduleGraph.getModuleByUrl(entry);
-    if (modNode) {
-      const links = [...modNode.importedModules]
-        .map((modNode) => modNode.id)
-        .filter(typedBoolean)
-        .filter((id) => id.match(CSS_LANGS_RE))
-        .map((id) => `<link rel="stylesheet" href="${id}?direct" />\n`)
-        .join("");
-      html = html.replace("</head>", `${links}</head>`);
-    }
-  }
-
-  // transformer to inject SSR stream
-  const [pre, post] = html.split("<!--@INJECT_SSR@-->");
-  const encoder = new TextEncoder();
-  return new TransformStream<Uint8Array, Uint8Array>({
-    start(controller) {
-      controller.enqueue(encoder.encode(pre));
-    },
+function injectToHead(data: string) {
+  const marker = "<head>";
+  let done = false;
+  return new TransformStream<string, string>({
     transform(chunk, controller) {
+      if (!done && chunk.includes(marker)) {
+        const [pre, post] = splitFirst(chunk, marker);
+        controller.enqueue(pre + marker + data + post);
+        done = true;
+        return;
+      }
       controller.enqueue(chunk);
     },
-    flush(controller) {
-      controller.enqueue(encoder.encode(post));
-    },
   });
 }
-
-async function importHtmlTemplate() {
-  let html: string;
-  if (import.meta.env.DEV) {
-    const mod = await import("/index.html?raw");
-    html = await __devServer.transformIndexHtml("/", mod.default);
-  } else {
-    const mod = await import("/dist/client/index.html?raw");
-    html = mod.default;
-  }
-  // ensure </body></html> trailer
-  // https://github.com/devongovett/rsc-html-stream/blob/5c2f058996e42be6120dfaf1df384361331f3ea9/server.js#L2
-  html = html.replace(/<\/body>\s*<\/html>\s*/, "</body></html>");
-  return html;
-}
-
-// cf. https://github.com/vitejs/vite/blob/d6bde8b03d433778aaed62afc2be0630c8131908/packages/vite/src/node/constants.ts#L49C23-L50
-const CSS_LANGS_RE =
-  /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;