diff --git a/examples/react/rsc/client/.gitignore b/examples/react/rsc/spa/.gitignore similarity index 100% rename from examples/react/rsc/client/.gitignore rename to examples/react/rsc/spa/.gitignore diff --git a/examples/react/rsc/client/app.js b/examples/react/rsc/spa/app.js similarity index 79% rename from examples/react/rsc/client/app.js rename to examples/react/rsc/spa/app.js index 6df0f735..42c20ad0 100644 --- a/examples/react/rsc/client/app.js +++ b/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,14 +105,25 @@ 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]; @@ -118,10 +131,27 @@ function clientComponents() { ), }; + 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,14 +184,19 @@ 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", + ], }, }; } @@ -169,9 +204,9 @@ function clientComponents() { 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}']`, }), ]; } diff --git a/examples/react/rsc/client/app/Counter.tsx b/examples/react/rsc/spa/app/Counter.tsx similarity index 100% rename from examples/react/rsc/client/app/Counter.tsx rename to examples/react/rsc/spa/app/Counter.tsx diff --git a/examples/react/rsc/client/app/actions.tsx b/examples/react/rsc/spa/app/actions.tsx similarity index 100% rename from examples/react/rsc/client/app/actions.tsx rename to examples/react/rsc/spa/app/actions.tsx diff --git a/examples/react/rsc/client/app/app.tsx b/examples/react/rsc/spa/app/app.tsx similarity index 100% rename from examples/react/rsc/client/app/app.tsx rename to examples/react/rsc/spa/app/app.tsx diff --git a/examples/react/rsc/client/app/client.tsx b/examples/react/rsc/spa/app/client.tsx similarity index 89% rename from examples/react/rsc/client/app/client.tsx rename to examples/react/rsc/spa/app/client.tsx index 616a47ca..7ee7997a 100644 --- a/examples/react/rsc/client/app/client.tsx +++ b/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 ); }, diff --git a/examples/react/rsc/client/app/react-server.tsx b/examples/react/rsc/spa/app/react-server.tsx similarity index 100% rename from examples/react/rsc/client/app/react-server.tsx rename to examples/react/rsc/spa/app/react-server.tsx diff --git a/examples/react/rsc/client/app/server-component.tsx b/examples/react/rsc/spa/app/server-component.tsx similarity index 100% rename from examples/react/rsc/client/app/server-component.tsx rename to examples/react/rsc/spa/app/server-component.tsx diff --git a/examples/react/rsc/client/app/server.tsx b/examples/react/rsc/spa/app/server.tsx similarity index 100% rename from examples/react/rsc/client/app/server.tsx rename to examples/react/rsc/spa/app/server.tsx diff --git a/examples/react/rsc/client/app/style.css b/examples/react/rsc/spa/app/style.css similarity index 100% rename from examples/react/rsc/client/app/style.css rename to examples/react/rsc/spa/app/style.css diff --git a/examples/react/rsc/client/index.html b/examples/react/rsc/spa/index.html similarity index 100% rename from examples/react/rsc/client/index.html rename to examples/react/rsc/spa/index.html diff --git a/examples/react/rsc/react-rsc/package.json b/examples/react/rsc/spa/package.json similarity index 100% rename from examples/react/rsc/react-rsc/package.json rename to examples/react/rsc/spa/package.json diff --git a/examples/react/rsc/client/postcss.config.cjs b/examples/react/rsc/spa/postcss.config.cjs similarity index 100% rename from examples/react/rsc/client/postcss.config.cjs rename to examples/react/rsc/spa/postcss.config.cjs diff --git a/examples/react/rsc/client/public/favicon.ico b/examples/react/rsc/spa/public/favicon.ico similarity index 100% rename from examples/react/rsc/client/public/favicon.ico rename to examples/react/rsc/spa/public/favicon.ico diff --git a/examples/react/rsc/client/tailwind.config.cjs b/examples/react/rsc/spa/tailwind.config.cjs similarity index 100% rename from examples/react/rsc/client/tailwind.config.cjs rename to examples/react/rsc/spa/tailwind.config.cjs diff --git a/examples/react/rsc/client/tsconfig.json b/examples/react/rsc/spa/tsconfig.json similarity index 100% rename from examples/react/rsc/client/tsconfig.json rename to examples/react/rsc/spa/tsconfig.json diff --git a/examples/react/rsc/react-rsc/.gitignore b/examples/react/rsc/ssr/.gitignore similarity index 100% rename from examples/react/rsc/react-rsc/.gitignore rename to examples/react/rsc/ssr/.gitignore diff --git a/examples/react/rsc/react-rsc/app.js b/examples/react/rsc/ssr/app.js similarity index 100% rename from examples/react/rsc/react-rsc/app.js rename to examples/react/rsc/ssr/app.js diff --git a/examples/react/rsc/react-rsc/app/Counter.tsx b/examples/react/rsc/ssr/app/Counter.tsx similarity index 100% rename from examples/react/rsc/react-rsc/app/Counter.tsx rename to examples/react/rsc/ssr/app/Counter.tsx diff --git a/examples/react/rsc/react-rsc/app/actions.tsx b/examples/react/rsc/ssr/app/actions.tsx similarity index 100% rename from examples/react/rsc/react-rsc/app/actions.tsx rename to examples/react/rsc/ssr/app/actions.tsx diff --git a/examples/react/rsc/react-rsc/app/app.tsx b/examples/react/rsc/ssr/app/app.tsx similarity index 100% rename from examples/react/rsc/react-rsc/app/app.tsx rename to examples/react/rsc/ssr/app/app.tsx diff --git a/examples/react/rsc/react-rsc/app/client.tsx b/examples/react/rsc/ssr/app/client.tsx similarity index 65% rename from examples/react/rsc/react-rsc/app/client.tsx rename to examples/react/rsc/ssr/app/client.tsx index 091a8a70..60e12b56 100644 --- a/examples/react/rsc/react-rsc/app/client.tsx +++ b/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(() => { diff --git a/examples/react/rsc/react-rsc/app/react-server.tsx b/examples/react/rsc/ssr/app/react-server.tsx similarity index 100% rename from examples/react/rsc/react-rsc/app/react-server.tsx rename to examples/react/rsc/ssr/app/react-server.tsx diff --git a/examples/react/rsc/react-rsc/app/server-component.tsx b/examples/react/rsc/ssr/app/server-component.tsx similarity index 100% rename from examples/react/rsc/react-rsc/app/server-component.tsx rename to examples/react/rsc/ssr/app/server-component.tsx diff --git a/examples/react/rsc/react-rsc/app/server.tsx b/examples/react/rsc/ssr/app/server.tsx similarity index 100% rename from examples/react/rsc/react-rsc/app/server.tsx rename to examples/react/rsc/ssr/app/server.tsx diff --git a/examples/react/rsc/react-rsc/app/style.css b/examples/react/rsc/ssr/app/style.css similarity index 100% rename from examples/react/rsc/react-rsc/app/style.css rename to examples/react/rsc/ssr/app/style.css diff --git a/examples/react/rsc/client/package.json b/examples/react/rsc/ssr/package.json similarity index 92% rename from examples/react/rsc/client/package.json rename to examples/react/rsc/ssr/package.json index b540c662..21aa3507 100644 --- a/examples/react/rsc/client/package.json +++ b/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", diff --git a/examples/react/rsc/react-rsc/postcss.config.cjs b/examples/react/rsc/ssr/postcss.config.cjs similarity index 100% rename from examples/react/rsc/react-rsc/postcss.config.cjs rename to examples/react/rsc/ssr/postcss.config.cjs diff --git a/examples/react/rsc/react-rsc/public/favicon.ico b/examples/react/rsc/ssr/public/favicon.ico similarity index 100% rename from examples/react/rsc/react-rsc/public/favicon.ico rename to examples/react/rsc/ssr/public/favicon.ico diff --git a/examples/react/rsc/react-rsc/tailwind.config.cjs b/examples/react/rsc/ssr/tailwind.config.cjs similarity index 100% rename from examples/react/rsc/react-rsc/tailwind.config.cjs rename to examples/react/rsc/ssr/tailwind.config.cjs diff --git a/examples/react/rsc/react-rsc/tsconfig.json b/examples/react/rsc/ssr/tsconfig.json similarity index 100% rename from examples/react/rsc/react-rsc/tsconfig.json rename to examples/react/rsc/ssr/tsconfig.json diff --git a/packages/vinxi/client.d.ts b/packages/vinxi/client.d.ts index 4295bb2f..d5ee8662 100644 --- a/packages/vinxi/client.d.ts +++ b/packages/vinxi/client.d.ts @@ -1,12 +1,12 @@ /// declare interface Window { - manifest: any; + MANIFEST: any; } interface ImportMetaEnv { // more env variables... - readonly manifest: any; + readonly MANIFEST: any; } interface ImportMeta { diff --git a/packages/vinxi/lib/manifest/client-manifest.js b/packages/vinxi/lib/manifest/client-manifest.js index 840b0846..6280c3d8 100644 --- a/packages/vinxi/lib/manifest/client-manifest.js +++ b/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( {}, { diff --git a/packages/vinxi/lib/manifest/dev-server-manifest.js b/packages/vinxi/lib/manifest/dev-server-manifest.js index bffe666a..ef58916d 100644 --- a/packages/vinxi/lib/manifest/dev-server-manifest.js +++ b/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( {}, { diff --git a/packages/vinxi/server.d.ts b/packages/vinxi/server.d.ts index 4295bb2f..d5ee8662 100644 --- a/packages/vinxi/server.d.ts +++ b/packages/vinxi/server.d.ts @@ -1,12 +1,12 @@ /// declare interface Window { - manifest: any; + MANIFEST: any; } interface ImportMetaEnv { // more env variables... - readonly manifest: any; + readonly MANIFEST: any; } interface ImportMeta { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65f6663a..a2ea2d20 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: '@vinxi/react': specifier: workspace:^ version: link:../../../../packages/vinxi-react + '@vinxi/react-server-dom-vite': + specifier: ^0.0.2 + version: 0.0.2(react-dom@0.0.0-experimental-035a41c4e-20230704)(react@0.0.0-experimental-035a41c4e-20230704)(vite@4.3.9) '@vitejs/plugin-react': specifier: ^4.0.1 version: 4.0.1(vite@4.3.9)