wip: virtual:ssr-assets

react-server-dom-vite-example/package.json

@@ -3,7 +3,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build --app",
 		"preview": "vite preview",
 		"tsc": "tsc -b",
 		"lint": "biome check --write .",

react-server-dom-vite-example/src/entry.client.tsx

@@ -9,6 +9,10 @@ async function main() {
 		{},
 	);
 	ReactDomClient.hydrateRoot(document, payload.root);
+
+	const el = document.createElement("div");
+	el.textContent = "hydrated";
+	document.body.appendChild(el);
 }
 
 main();

react-server-dom-vite-example/src/entry.ssr.tsx

@@ -37,11 +37,11 @@ export default async function handler(
 		{},
 	);
 
+	const ssrAssets = await import("virtual:ssr-assets");
+
 	const htmlStream = fromPipeableToWebReadable(
 		ReactDomServer.renderToPipeableStream(payload.root, {
-			bootstrapModules: [
-				import.meta.env.DEV ? "/src/entry.client.tsx" : "/todo",
-			],
+			bootstrapModules: ssrAssets.bootstrapModules,
 		}),
 	);
 
@@ -64,7 +64,6 @@ async function importRscEntry(): Promise<typeof import("./entry.rsc")> {
 	if (import.meta.env.DEV) {
 		return await __rscRunner.import("/src/entry.rsc.tsx");
 	} else {
-		// @ts-ignore
-		return await import("virtual:build-rsc-entry");
+		return (await import("virtual:build-rsc-entry")) as any;
 	}
 }

react-server-dom-vite-example/src/types/ambient.d.ts

@@ -49,3 +49,11 @@ declare module "@jacob-ebey/react-server-dom-vite/client" {
 		manifest: unknown,
 	): Promise<T>;
 }
+
+declare module "virtual:ssr-assets" {
+	export const bootstrapModules: string[];
+}
+
+declare module "virtual:build-rsc-entry" {
+	export {};
+}

react-server-dom-vite-example/vite.config.ts

@@ -1,19 +1,21 @@
+import assert from "node:assert";
 import path from "node:path";
 import {
+	type Manifest,
 	type Plugin,
 	type RunnableDevEnvironment,
 	createRunnableDevEnvironment,
 	defineConfig,
 } from "vite";
 
+let clientManifest: Manifest;
+
 export default defineConfig({
 	appType: "custom",
 	environments: {
 		client: {
-			optimizeDeps: {
-				entries: [],
-			},
 			build: {
+				manifest: true,
 				outDir: "dist/client",
 				rollupOptions: {
 					input: { index: "/src/entry.client.tsx" },
@@ -87,12 +89,41 @@ export default defineConfig({
 				};
 			},
 		},
-		createVirtualPlugin("build-rsc-entry", function () {
-			// TODO
-			return `export {}`;
+		{
+			name: "virtual:build-rsc-entry",
+			resolveId(source) {
+				if (source === "virtual:build-rsc-entry") {
+					// externalize rsc entry in ssr entry as relative path
+					return { id: "../rsc/index.js", external: true };
+				}
+			},
+		},
+		createVirtualPlugin("ssr-assets", function () {
+			assert(this.environment.name === "ssr");
+			let bootstrapModules: string[] = [];
+			if (this.environment.mode === "dev") {
+				bootstrapModules = ["/src/entry.client.tsx"];
+			}
+			if (this.environment.mode === "build") {
+				bootstrapModules = [clientManifest["src/entry.client.tsx"].file];
+			}
+			return `export const bootstrapModules = ${JSON.stringify(bootstrapModules)}`;
 		}),
+		{
+			name: "misc",
+			writeBundle(_options, bundle) {
+				if (this.environment.name === "client") {
+					const output = bundle[".vite/manifest.json"];
+					assert(output.type === "asset");
+					assert(typeof output.source === "string");
+					clientManifest = JSON.parse(output.source);
+				}
+			},
+		},
 	],
 	builder: {
+		sharedPlugins: true,
+		sharedConfigBuild: true,
 		async buildApp(builder) {
 			await builder.build(builder.environments.rsc);
 			await builder.build(builder.environments.client);