diff --git a/react-server-dom-vite-example/src/entry.client.tsx b/react-server-dom-vite-example/src/entry.client.tsx index 4416775..c7e818a 100644 --- a/react-server-dom-vite-example/src/entry.client.tsx +++ b/react-server-dom-vite-example/src/entry.client.tsx @@ -3,14 +3,10 @@ import React from "react"; import ReactDomClient from "react-dom/client"; import type { ServerPayload } from "./entry.rsc"; import type { CallServerFn } from "./types"; -import { resolveClientReference } from "./utils/client-reference"; +import { clientReferenceManifest } from "./utils/client-reference"; import { getFlightStreamBrowser } from "./utils/stream-script"; async function main() { - const manifest = { - resolveClientReference, - }; - const callServer: CallServerFn = async (id, args) => { const url = new URL(window.location.href); url.searchParams.set("__rsc", id); @@ -19,7 +15,7 @@ async function main() { method: "POST", body: await ReactClient.encodeReply(args), }), - manifest, + clientReferenceManifest, { callServer }, ); setPayload(payload); @@ -29,28 +25,22 @@ async function main() { const initialPayload = await ReactClient.createFromReadableStream( getFlightStreamBrowser(), - manifest, + clientReferenceManifest, { callServer }, ); let setPayload: (v: ServerPayload) => void; function BrowserRoot() { - const [payload, setPayload_] = React.useState( - initialPayload - ); + const [payload, setPayload_] = React.useState(initialPayload); const [_isPending, startTransition] = React.useTransition(); setPayload = (v) => startTransition(() => setPayload_(v)); return payload.root; } - ReactDomClient.hydrateRoot( - document, - , - { - formState: initialPayload.formState, - }, - ); + ReactDomClient.hydrateRoot(document, , { + formState: initialPayload.formState, + }); } main(); diff --git a/react-server-dom-vite-example/src/entry.rsc.tsx b/react-server-dom-vite-example/src/entry.rsc.tsx index 4c43482..b90ee7b 100644 --- a/react-server-dom-vite-example/src/entry.rsc.tsx +++ b/react-server-dom-vite-example/src/entry.rsc.tsx @@ -1,7 +1,10 @@ import ReactServer from "@jacob-ebey/react-server-dom-vite/server"; import type { ReactFormState } from "react-dom/client"; import { App } from "./app"; -import type { ServerReferenceManifest } from "./types"; +import type { + ClientReferenceMetadataManifest, + ServerReferenceManifest, +} from "./types"; import { fromPipeableToWebReadable } from "./utils/fetch"; export interface RscHandlerResult { @@ -57,12 +60,7 @@ export async function handler( root: , returnValue, }, - { - resolveClientReferenceMetadata(metadata) { - // console.log("[debug:resolveClientReferenceMetadata]", { metadata }, Object.getOwnPropertyDescriptors(metadata)); - return [metadata.$$id]; - }, - }, + clientReferenceMetadataManifest, {}, ), ); @@ -95,3 +93,10 @@ const serverReferenceManifest: ServerReferenceManifest = { }; }, }; + +const clientReferenceMetadataManifest: ClientReferenceMetadataManifest = { + resolveClientReferenceMetadata(metadata) { + // console.log("[debug:resolveClientReferenceMetadata]", { metadata }, Object.getOwnPropertyDescriptors(metadata)); + return metadata.$$id; + }, +}; diff --git a/react-server-dom-vite-example/src/entry.ssr.tsx b/react-server-dom-vite-example/src/entry.ssr.tsx index a619383..001112e 100644 --- a/react-server-dom-vite-example/src/entry.ssr.tsx +++ b/react-server-dom-vite-example/src/entry.ssr.tsx @@ -3,7 +3,7 @@ import ReactClient from "@jacob-ebey/react-server-dom-vite/client"; import ReactDomServer from "react-dom/server"; import type { ModuleRunner } from "vite/module-runner"; import type { ServerPayload } from "./entry.rsc"; -import { resolveClientReference } from "./utils/client-reference"; +import { clientReferenceManifest } from "./utils/client-reference"; import { createRequest, fromPipeableToWebReadable, @@ -35,9 +35,7 @@ export default async function handler( const payload = await ReactClient.createFromNodeStream( fromWebToNodeReadable(flightStream1), - { - resolveClientReference, - }, + clientReferenceManifest, ); const ssrAssets = await import("virtual:ssr-assets"); diff --git a/react-server-dom-vite-example/src/types/ambient.d.ts b/react-server-dom-vite-example/src/types/ambient.d.ts index c10bed0..7dce48a 100644 --- a/react-server-dom-vite-example/src/types/ambient.d.ts +++ b/react-server-dom-vite-example/src/types/ambient.d.ts @@ -3,10 +3,7 @@ declare module "@jacob-ebey/react-server-dom-vite/server" { export function renderToPipeableStream( data: T, - manifest: { - // biome-ignore format: - resolveClientReferenceMetadata: import(".").ResolveClientReferenceMetadataFn; - }, + manifest: import(".").ClientReferenceMetadataManifest, opitons?: unknown, ): import("react-dom/server").PipeableStream; @@ -27,16 +24,12 @@ declare module "@jacob-ebey/react-server-dom-vite/server" { declare module "@jacob-ebey/react-server-dom-vite/client" { export function createFromNodeStream( stream: import("node:stream").Readable, - manifest: { - resolveClientReference: import(".").ResolveClientReferenceFn; - }, + manifest: import(".").ClientReferenceManifest, ): Promise; export function createFromReadableStream( stream: ReadableStream, - manifest: { - resolveClientReference: import(".").ResolveClientReferenceFn; - }, + manifest: import(".").ClientReferenceManifest, options: { callServer: import(".").CallServerFn; }, diff --git a/react-server-dom-vite-example/src/types/index.ts b/react-server-dom-vite-example/src/types/index.ts index ecb975e..9dab098 100644 --- a/react-server-dom-vite-example/src/types/index.ts +++ b/react-server-dom-vite-example/src/types/index.ts @@ -1,10 +1,12 @@ -export type ResolveClientReferenceMetadataFn = (metadata: { $$id: string }) => [ - string, -]; +export type ClientReferenceMetadataManifest = { + resolveClientReferenceMetadata(metadata: { $$id: string }): string; +}; -export type ResolveClientReferenceFn = (reference: [string]) => { - preload(): Promise; - get(): unknown; +export type ClientReferenceManifest = { + resolveClientReference(reference: string): { + preload(): Promise; + get(): unknown; + }; }; export type ResolveServerReferenceFn = (reference: string) => { diff --git a/react-server-dom-vite-example/src/utils/client-reference.ts b/react-server-dom-vite-example/src/utils/client-reference.ts index 2d55819..915c494 100644 --- a/react-server-dom-vite-example/src/utils/client-reference.ts +++ b/react-server-dom-vite-example/src/utils/client-reference.ts @@ -1,22 +1,25 @@ -export function resolveClientReference(reference: [string]) { - // console.log("[debug:resolveClientReference]", { reference }) - const [id, name] = reference[0].split("#"); - let mod: Record; - return { - async preload() { - // console.log("[debug:preload]", { id, name}) - if (import.meta.env.DEV) { - mod ??= await import(/* @vite-ignore */ id); - } else { - const { default: references } = await import( - "virtual:build-client-references" - ); - mod ??= await references[id](); - } - }, - get() { - // console.log("[debug:get]", { id, name }) - return mod[name]; - }, - }; -} +import type { ClientReferenceManifest } from "../types"; + +export const clientReferenceManifest: ClientReferenceManifest = { + resolveClientReference(reference: string) { + const [id, name] = reference.split("#"); + let resolved: unknown; + return { + async preload() { + let mod: Record; + if (import.meta.env.DEV) { + mod = await import(/* @vite-ignore */ id); + } else { + const references = await import( + "virtual:build-client-references" as string + ); + mod = references.default[id](); + } + resolved = mod[name]; + }, + get() { + return resolved; + }, + }; + }, +};