refactor(rsc): load client reference without vite preload

Author: hi-ogawa

packages/react-server/src/features/client-component/browser.tsx

@@ -16,5 +16,7 @@ async function importWrapper(id: string) {
 }
 
 export function initializeReactClientBrowser() {
-  ReactClient.setRequireModule({ load: importWrapper });
+  ReactClient.setRequireModule({
+    load: (payload) => importWrapper(payload.id),
+  });
 }

packages/react-server/src/features/client-component/ssr.tsx

@@ -24,7 +24,7 @@ async function ssrImport(id: string) {
 
 export function initializeReactClientSsr() {
   ReactClient.setRequireModule({
-    load: ssrImport,
+    load: (payload) => ssrImport(payload.id),
   });
 }
 

packages/rsc/examples/basic-core/src/browser.tsx

@@ -7,7 +7,7 @@ import type { RscPayload } from "./rsc";
 async function main() {
   ReactClient.setRequireModule({
     load(id) {
-      return import(/* @vite-ignore */ id);
+      return import(/* @vite-ignore */ id.id);
     },
   });
 

packages/rsc/examples/basic-core/src/ssr.tsx

@@ -13,7 +13,7 @@ export async function renderHtml({
 }: { url: URL; stream: ReadableStream; formState?: ReactFormState }) {
   ReactClient.setRequireModule({
     load(id) {
-      return import(/* @vite-ignore */ id);
+      return import(/* @vite-ignore */ id.id);
     },
   });
 

packages/rsc/examples/basic/e2e/basic.test.ts

@@ -1,4 +1,4 @@
-import fs from "node:fs";
+import { createHash } from "node:crypto";
 import { type Page, expect, test } from "@playwright/test";
 import {
   createEditor,
@@ -70,13 +70,18 @@ testNoJs("module preload on ssr @build", async ({ page }) => {
   const srcs = await page
     .locator(`head >> link[rel="modulepreload"]`)
     .evaluateAll((elements) => elements.map((el) => el.getAttribute("href")));
-  const viteManifest = JSON.parse(
-    fs.readFileSync("dist/client/.vite/manifest.json", "utf-8"),
-  );
-  const file =
-    (process.env.TEST_BASE ? "/custom-base/" : "/") +
-    viteManifest["src/routes/client.tsx"].file;
-  expect(srcs).toContain(file);
+  const { default: manifest } = await import(
+    "../dist/client/__vite_rsc_assets_manifest.js" as any
+  );
+  function hashString(v: string) {
+    return createHash("sha256").update(v).digest().toString("hex").slice(0, 12);
+  }
+  const deps =
+    manifest.clientReferenceManifest[hashString("src/routes/client.tsx")];
+  const hrefs = deps.js.map(
+    (href: string) => (process.env.TEST_BASE ? "/custom-base" : "") + href,
+  );
+  expect(srcs).toEqual(expect.arrayContaining(hrefs));
 });
 
 test("server reference update @dev @js", async ({ page }) => {

packages/rsc/examples/react-router/e2e/basic.test.ts

@@ -1,4 +1,4 @@
-import fs from "node:fs";
+import { createHash } from "node:crypto";
 import { expect, test } from "@playwright/test";
 import {
   createEditor,
@@ -42,11 +42,15 @@ testNoJs("ssr modulepreload @build", async ({ page }) => {
   const srcs = await page
     .locator(`head >> link[rel="modulepreload"]`)
     .evaluateAll((elements) => elements.map((el) => el.getAttribute("href")));
-  const viteManifest = JSON.parse(
-    fs.readFileSync("dist/client/.vite/manifest.json", "utf-8"),
+  const { default: manifest } = await import(
+    "../dist/client/__vite_rsc_assets_manifest.js" as any
   );
-  const file = "/" + viteManifest["app/routes/home.client.tsx"].file;
-  expect(srcs).toContain(file);
+  function hashString(v: string) {
+    return createHash("sha256").update(v).digest().toString("hex").slice(0, 12);
+  }
+  const deps =
+    manifest.clientReferenceManifest[hashString("app/routes/home.client.tsx")];
+  expect(srcs).toEqual(expect.arrayContaining(deps.js));
 });
 
 test("client hmr @dev", async ({ page }) => {

packages/rsc/src/browser.ts

@@ -1,23 +1,27 @@
-import * as clientReferences from "virtual:vite-rsc/client-references";
 import { setRequireModule } from "./core/browser";
 import { withBase } from "./utils/base";
 
 export * from "./react/browser";
 
+// @ts-ignore
+import { __vitePreload } from "virtual:vite-rsc/preload-helper";
+
 export function initialize(options?: {
   onHmrReload?: () => void;
 }): void {
   setRequireModule({
-    load: async (id) => {
+    load: async (payload) => {
+      const id = payload.id;
       if (import.meta.env.DEV) {
         // @ts-ignore
         return __vite_rsc_raw_import__(withBase(id));
       } else {
-        const import_ = clientReferences.default[id];
-        if (!import_) {
-          throw new Error(`client reference not found '${id}'`);
-        }
-        return import_();
+        return __vitePreload(
+          () => import(/* @vite-ignore */ withBase(id)),
+          // base for deps is handled by `__vitePreload`
+          // TODO: refactor base handling to be consistent?
+          [...payload.js, ...payload.css].map((href) => href.slice(1)),
+        );
       }
     },
   });

packages/rsc/src/core/browser.ts

@@ -1,16 +1,17 @@
 import { memoize } from "@hiogawa/utils";
-import { removeReferenceCacheTag, setInternalRequire } from "./shared";
+import type { ClientReferencePayload } from "./rsc";
+import { setInternalRequire } from "./shared";
 
 let init = false;
 
 export function setRequireModule(options: {
-  load: (id: string) => Promise<unknown>;
+  load: (payload: ClientReferencePayload) => Promise<unknown>;
 }): void {
   if (init) return;
   init = true;
 
   const requireModule = memoize((id: string) => {
-    return options.load(removeReferenceCacheTag(id));
+    return options.load(JSON.parse(id));
   });
 
   (globalThis as any).__vite_rsc_client_require__ = requireModule;

packages/rsc/src/core/rsc.ts

@@ -100,18 +100,18 @@ export function createServerDecodeClientManifest(): ModuleMap {
 }
 
 export function createClientManifest(): BundlerConfig {
-  const cacheTag = import.meta.env.DEV ? createReferenceCacheTag() : "";
+  const cacheTag = import.meta.env.DEV ? createReferenceCacheTag() : undefined;
 
   return new Proxy(
     {},
     {
       get(_target, $$id, _receiver) {
         tinyassert(typeof $$id === "string");
-        let [id, name] = $$id.split("#");
-        tinyassert(id);
+        let [key, name] = $$id.split("#");
+        tinyassert(key);
         tinyassert(name);
         return {
-          id: id + cacheTag,
+          id: JSON.stringify({ id: key, cacheTag, ...manifest[key], key }),
           name,
           chunks: [],
           async: true,
@@ -120,3 +120,20 @@ export function createClientManifest(): BundlerConfig {
     },
   );
 }
+
+export type ClientReferencePayload = {
+  key?: string;
+  id: string;
+  js: string[];
+  css: string[];
+};
+
+export type ClientReferenceManifest = Record<string, ClientReferencePayload>;
+
+let manifest: ClientReferenceManifest = {};
+
+export function setClientReferenceManifest(
+  manifest_: ClientReferenceManifest,
+): void {
+  manifest = manifest_;
+}

packages/rsc/src/core/ssr.ts

@@ -1,17 +1,18 @@
 import { memoize } from "@hiogawa/utils";
 import type { ServerConsumerManifest } from "../types";
-import { removeReferenceCacheTag, setInternalRequire } from "./shared";
+import type { ClientReferencePayload } from "./rsc";
+import { setInternalRequire } from "./shared";
 
 let init = false;
 
 export function setRequireModule(options: {
-  load: (id: string) => unknown;
+  load: (payload: ClientReferencePayload) => unknown;
 }): void {
   if (init) return;
   init = true;
 
   const requireModule = memoize((id: string) => {
-    return options.load(removeReferenceCacheTag(id));
+    return options.load(JSON.parse(id));
   });
 
   const clientRequire = (id: string) => {