move examples around

examples/react/rsc/client/app.js → examples/react/rsc/spa/app.js

@@ -1,5 +1,7 @@
 import serverComponent from "@vinxi/react-server-dom-vite/plugin";
 import reactRefresh from "@vitejs/plugin-react";
+import { readFileSync } from "fs";
+import { join } from "path";
 import { createApp } from "vinxi";
 import { virtual } from "vinxi/lib/plugins/virtual";
 
@@ -92,7 +94,7 @@ function serverComponents() {
 
 /**
  *
- * @returns {import('vite').Plugin}
+ * @returns {import('vinxi').PluginOption}
  */
 function clientComponents() {
 	let isBuild;
@@ -103,25 +105,53 @@ function clientComponents() {
 			isBuild = env.command === "build";
 			// @ts-ignore
 			const router = config.router;
+			// @ts-ignore
+			const app = config.app;
 
 			if (isBuild) {
+				const rscRouter = app.getRouter("rsc");
+
 				const reactServerManifest = JSON.parse(
-					readFileSync(".build/rsc/_rsc/react-server-manifest.json", "utf-8"),
+					readFileSync(
+						join(
+							rscRouter.build.outDir,
+							rscRouter.base,
+							"react-server-manifest.json",
+						),
+						"utf-8",
+					),
 				);
 
 				input = {
-					entry: getEntries(router)[0],
+					entry: router.handler,
 					...Object.fromEntries(
 						reactServerManifest.client.map((key) => {
 							return [hash(key), key];
 						}),
 					),
 				};
 
+				console.log(input);
+
 				return {
 					ssr: {
 						external: ["react", "react-dom", "@vinxi/react-server-dom-vite"],
 					},
+					optimizeDeps: {
+						include: [
+							"@vinxi/react-server-dom-vite",
+							"react-server-dom-vite",
+							"react",
+							"react-dom",
+						],
+					}, // optimizeDeps: {
+					// 	include: [
+					// 		"@vinxi/react-server-dom-vite/client.browser",
+					// 		"@vinxi/react-server-dom-vite/runtime",
+					// 		"react",
+					// 		"react-dom",
+					// 	],
+					// },
 					build: {
 						rollupOptions: {
 							// preserve the export names of the server actions in chunks
@@ -154,24 +184,29 @@ function clientComponents() {
 				return {
 					optimizeDeps: {
 						include: [
-							"@vinxi/react-server-dom-vite/client",
-							"@vinxi/react-server-dom-vite/runtime",
+							"@vinxi/react-server-dom-vite",
+							"react-server-dom-vite",
 							"react",
 							"react-dom",
 						],
 					},
 					ssr: {
-						external: ["react", "react-dom", "@vinxi/react-server-dom-vite"],
+						external: [
+							"react",
+							"react-dom",
+							"@vinxi/react-server-dom-vite",
+							"react-server-dom-vite",
+						],
 					},
 				};
 			}
 		},
 
 		configResolved(config) {
 			if (isBuild) {
-				const reactServerManifest = JSON.parse(
-					readFileSync(".build/rsc/_rsc/react-server-manifest.json", "utf-8"),
-				);
+				// const reactServerManifest = JSON.parse(
+				// 	readFileSync(".build/rsc/_rsc/react-server-manifest.json", "utf-8"),
+				// );
 				config.build.rollupOptions.input = input;
 			}
 		},
@@ -192,7 +227,10 @@ function viteServer() {
 			},
 		},
 		virtual({
-			"#vite-dev-server": () => `export default viteServers['${router.name}']`,
+			"#vite-dev-server": ({ env }) =>
+				env.command === "build"
+					? `export default undefined`
+					: `export default viteServers['${router.name}']`,
 		}),
 	];
 }

examples/react/rsc/client/app/client.tsx → examples/react/rsc/spa/app/client.tsx

@@ -9,7 +9,7 @@ import { ServerComponent } from "./server-component";
 globalThis.__vite__ = createModuleLoader({
 	loadModule: async (id) => {
 		return import(
-			/* @vite-ignore */ import.meta.env.MANIFEST["client"].inputs[id].output
+			/* @vite-ignore */ import.meta.env.MANIFEST["client"].chunks[id].output
 				.path
 		);
 	},

examples/react/rsc/react-rsc/app/client.tsx → examples/react/rsc/ssr/app/client.tsx

@@ -7,16 +7,12 @@ import "vinxi/runtime/client";
 import { ServerComponent } from "./server-component";
 
 globalThis.__vite__ = createModuleLoader({
-	loadModule: import.meta.env.DEV
-		? async (id) => {
-				return import(
-					/* @vite-ignore */ import.meta.env.MANIFEST["client"].inputs[id]
-						.output.path
-				);
-		  }
-		: async (id) => {
-				return import("/_build/" + id + ".js");
-		  },
+	loadModule: async (id) => {
+		return import(
+			/* @vite-ignore */ import.meta.env.MANIFEST["client"].chunks[id].output
+				.path
+		);
+	},
 });
 
 startTransition(() => {

examples/react/rsc/client/package.json → examples/react/rsc/ssr/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@picocss/pico": "^1.5.7",
     "@vinxi/react": "workspace:^",
+    "@vinxi/react-server-dom-vite": "^0.0.2",
     "@vitejs/plugin-react": "^4.0.1",
     "autoprefixer": "^10.4.14",
     "react": "0.0.0-experimental-035a41c4e-20230704",

packages/vinxi/client.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="vite/client" />
 
 declare interface Window {
-	manifest: any;
+	MANIFEST: any;
 }
 
 interface ImportMetaEnv {
 	// more env variables...
-	readonly manifest: any;
+	readonly MANIFEST: any;
 }
 
 interface ImportMeta {

packages/vinxi/lib/manifest/client-manifest.js

@@ -16,6 +16,22 @@ const manifest = new Proxy(
 				handler: import.meta.env.DEV
 					? join(import.meta.env.CWD, import.meta.env.ROUTER_HANDLER)
 					: import.meta.env.ROUTER_HANDLER,
+				chunks: new Proxy(
+					{},
+					{
+						get(target, chunk) {
+							invariant(typeof chunk === "string", "Chunk expected");
+							let outputPath = import.meta.env.DEV
+								? join(import.meta.env.BASE_URL, "@fs", chunk)
+								: join(import.meta.env.BASE_URL, chunk + ".js");
+							return {
+								output: {
+									path: outputPath,
+								},
+							};
+						},
+					},
+				),
 				inputs: new Proxy(
 					{},
 					{

packages/vinxi/lib/manifest/dev-server-manifest.js

@@ -26,6 +26,32 @@ export function createDevManifest(app) {
 						return {};
 					},
 					handler: router.handler,
+					chunks: new Proxy(
+						{},
+						{
+							get(target, chunk) {
+								invariant(typeof chunk === "string", "Chunk expected");
+								let absolutePath = isAbsolute(chunk)
+									? chunk
+									: join(app.config.root, chunk);
+
+								let relativePath = relative(app.config.root, chunk);
+								if (router.build.target === "browser") {
+									return {
+										output: {
+											path: join(router.base, "@fs", absolutePath),
+										},
+									};
+								} else {
+									return {
+										output: {
+											path: absolutePath,
+										},
+									};
+								}
+							},
+						},
+					),
 					inputs: new Proxy(
 						{},
 						{

packages/vinxi/server.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="vite/client" />
 
 declare interface Window {
-	manifest: any;
+	MANIFEST: any;
 }
 
 interface ImportMetaEnv {
 	// more env variables...
-	readonly manifest: any;
+	readonly MANIFEST: any;
 }
 
 interface ImportMeta {