vite-plugin-react-server 0.3.15 → 0.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-server",
-  "version": "0.3.15",
+  "version": "0.3.18",
   "description": "Vite plugin for React Server Components (RSC)",
   "type": "module",
   "main": "./dist/plugin/index.js",
@@ -62,12 +62,13 @@
     "test": "npm run build && npm run test:client && NODE_ENV=development npm run test:server",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
-    "experimental:clean-install": "npm install react-server-dom-esm react@experimental react-dom@experimental",
+    "experimental:clean-install": "npm install react-server-dom-esm react@experimental react-dom@experimental && npm install react-server-dom-esm",
     "experimental:copy": "cp -r ./oss-experimental/* ./node_modules/",
     "experimental:patch": "npx patch-package react-server-dom-esm react react-dom --exclude 'nothing'",
     "experimental:move-patches": "mv patches/* ./scripts/",
-    "experimental:setup": "rm -rf patches/* && npm run experimental:clean-install && npm run experimental:copy && npm run experimental:patch && npm run experimental:move-patches && node scripts/check-react-version.mjs",
-    "postinstall": "npm install react-server-dom-esm && node scripts/check-react-version.mjs &&  patch-package"
+    "experimental:setup": "rm -rf patches/* && npm run experimental:clean-install && npm run experimental:copy && npm run experimental:patch && npm run experimental:move-patches",
+    "experimental:patch-react": "npm run experimental:clean-install && node scripts/check-react-version.mjs && node bin/patch.mjs",
+    "postinstall": "patch-package"
   },
   "keywords": [
     "vite",
@@ -90,8 +91,8 @@
   },
   "homepage": "https://github.com/nicobrinkkemper/vite-plugin-react-server#readme",
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*",
+    "react": "^0.0.0-experimental-d55cc79b-20250228",
+    "react-dom": "^0.0.0-experimental-d55cc79b-20250228",
     "vite": "*"
   },
   "peerDependenciesMeta": {
@@ -109,9 +110,8 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "acorn-loose": "^8.3.0",
+    "happy-dom": "^17.1.8",
     "patch-package": "^8.0.0",
-    "react": "^0.0.0-experimental-d55cc79b-20250228",
-    "react-dom": "^0.0.0-experimental-d55cc79b-20250228",
     "react-server-dom-esm": "^0.0.1",
     "rollup": "^4.34.0",
     "source-map": "^0.7.4",

package/plugin/collect-css-manifest.ts

@@ -33,13 +33,12 @@ export function collectManifestCss(
   onCss?: (path: string, parentUrl: string) => void,
   parentUrl?: string
 ) {
-  const relativePagePath = pagePath.startsWith(root + "/")
-    ? pagePath.slice(root.length + 1)
+  const relativePagePath = root !== "" && pagePath.startsWith(root.endsWith('/') ? root : root + '/')
+    ? pagePath.slice(root.length + (root.endsWith('/') ? 0 : 1))
     : pagePath;
-  if (!relativePagePath) return new Map<string, string>();
   const cssFiles = new Map<string, string>();
   const seen = new Set<string>();
-
+  const manifestValues = Object.values(manifest);
   const walkManifestEntry = (id: string) => {
     if (seen.has(id)) return;
     seen.add(id);
@@ -54,13 +53,13 @@ export function collectManifestCss(
       return;
     }
     // Get the manifest entry
-    const entry = manifest[id];
+    const entry = manifest[id] ?? manifestValues.find(e => e.file === id);
     if (!entry) return;
 
     // Add direct CSS
     if (entry.css) {
       entry.css.forEach((css: string) => {
-        cssFiles.set(entry.file, css);
+        cssFiles.set(entry.src ?? entry.file ?? '', css);
         onCss?.(css, parentUrl ?? pagePath);
       });
     }

package/plugin/config/defaults.ts

@@ -11,9 +11,9 @@ export const DEFAULT_CONFIG = {
   SERVER_ENTRY: "src/server.tsx",
   PAGE_EXPORT_NAME: "Page",
   PROPS_EXPORT_NAME: "props",
-  HTML_WORKER_PATH: `worker/html/html-worker.${process.env['NODE_ENV'] === 'development' ? 'development' : 'production'}.js`,
-  RSC_WORKER_PATH: `worker/rsc/rsc-worker.${process.env['NODE_ENV'] === 'development' ? 'development' : 'production'}.js`,
-  LOADER_PATH: 'worker/loader.js',
+  HTML_WORKER_PATH: `node_modules/vite-plugin-react-server/dist/plugin/worker/html/html-worker.${process.env['NODE_ENV'] === 'development' ? 'development' : 'production'}.js`,
+  RSC_WORKER_PATH: `node_modules/vite-plugin-react-server/dist/plugin/worker/rsc/rsc-worker.${process.env['NODE_ENV'] === 'development' ? 'development' : 'production'}.js`,
+  LOADER_PATH: 'node_modules/vite-plugin-react-server/dist/plugin/worker/loader.js',
   RSC_EXTENSION: ".rsc",
   HTML: ({ children }: { children: any }) => children,
   COLLECT_CSS: true,

package/plugin/config/resolveUserConfig.ts

@@ -146,7 +146,7 @@ export function resolveUserConfig({
         userConfig: {
           ...config,
           root: root,
-          mode: configEnv.command === "build" ? "production" : "development",
+          mode: configEnv.mode ?? configEnv.command === "build" ? "production" : "development",
           resolve: {
             external: ["react", "react-dom"],
             alias: {},
@@ -194,7 +194,7 @@ export function resolveUserConfig({
       userConfig: {
         ...config,
         root: root,
-        mode: configEnv.command === "build" ? "production" : "development",
+        mode: configEnv.mode ?? configEnv.command === "build" ? "production" : "development",
         resolve: {
           alias: {},
           externalConditions: ["react-server"],

package/plugin/react-client/plugin.ts

@@ -24,6 +24,7 @@ import type {
   RscWorkerResponse,
 } from "../worker/types.js";
 import { createLogger } from "../utils/logger.js";
+import { readFileSync } from "node:fs";
 
 const log = createLogger("react-client");
 let userOptions: ResolvedUserOptions;
@@ -188,6 +189,7 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
             if (foundClient) {
               res.setHeader("Content-Type", "application/javascript");
               res.end(foundClient);
+              return;
             }
             const foundServer =
               serverManifest &&
@@ -207,6 +209,21 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
             next();
           }
         } else {
+          let html = '';
+          try {
+            const last = value.split('/').pop();
+            if(!last?.includes('.')) {
+              const isDir = await stat(join(fileRoot, value));
+              if (isDir.isDirectory()) {
+                html = readFileSync(join(fileRoot, value, 'index.html'), 'utf-8');
+                res.setHeader("Content-Type", "text/html");
+                res.end(html);
+                return;
+              }
+            }
+          } catch (error) {
+            
+          }
           next();
         }
       });

package/plugin/react-server/createRscStream.ts

@@ -21,7 +21,8 @@ function CssCollector({
       return React.createElement('link', {
         key: css,
         rel: 'stylesheet',
-        href: url
+        href: url,
+        precedence: 'high'
       })
     }),
     children
@@ -68,6 +69,9 @@ export function createRscStream({
       moduleBasePath,
       {
         onError: (error: Error) => {
+          if(process.env['NODE_ENV'] === 'development') {
+            console.trace(error);
+          }
           logger.error(`Stream error at ${route}.`, {error});
         },
         onPostpone: logger.info ?? console.info,  

package/plugin/react-server/plugin.ts

@@ -33,6 +33,7 @@ import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import type { ServerResponse } from "node:http";
 import { collectManifestCss } from "../collect-css-manifest.js";
+import { cssFiles } from "../worker/rsc/state.js";
 
 let resolvedConfig: ResolvedConfig | null = null;
 let serverManifestPath: string | null = null;
@@ -286,16 +287,11 @@ export function reactServerPlugin(
 
         const clientManifest = clientManifestResult.manifest;
 
-        // Initialize worker
-        const htmlWorkerPath = join(
-          getPluginRoot(),
-          DEFAULT_CONFIG.HTML_WORKER_PATH
-        );
 
         worker = await createWorker({
           projectRoot: root,
-          workerPath: htmlWorkerPath,
-          condition: "react-server",
+          workerPath: userOptions.htmlWorkerPath,
+          condition: 'react-server',
           reverseCondition: true,
           mode: (resolvedConfig?.mode ?? "production") as
             | "production"
@@ -402,13 +398,13 @@ export function reactServerPlugin(
           {
             pipableStreamOptions: {
               bootstrapModules: clientManifest["index.html"]?.file
-                ? [clientManifest["index.html"].file]
+                ? [clientManifest["index.html"].file.startsWith('/') ? clientManifest["index.html"].file : '/' + clientManifest["index.html"].file]
                 : [],
             },
             moduleBasePath: "",
             moduleBaseURL: "",
             clientCss: clientManifest["index.html"]?.css
-              ? clientManifest["index.html"].css
+              ? clientManifest["index.html"].css.map(css => css.startsWith('/') ? css : '/' + css)
               : [],
             userConfig,
             pluginOptions: userOptions,
@@ -433,14 +429,10 @@ export function reactServerPlugin(
 
         // Update stats to include CSS and client components
         const stats: BuildStats = {
-          htmlFiles: userOptions.build.pages.length,
-          clientComponents: Object.keys(clientManifest).filter(
-            userOptions.autoDiscover.clientComponents
-          ).length,
-          cssFiles: Object.keys(clientManifest)
-            .flatMap(userOptions.autoDiscover.cssPattern)
-            .filter(Boolean).length,
-          totalRoutes: userOptions.build.pages.length,
+          htmlFiles: files.urlMap.size,
+          clientComponents: clientComponents.size,
+          cssFiles: cssFiles.size,
+          totalRoutes: files.urlMap.size,
           timing: {
             config: ((timing.configResolved ?? 0) - timing.start) / 1000,
             build:
@@ -464,10 +456,8 @@ export function reactServerPlugin(
 
         console.log("\n[vite-plugin-react-server] Build Summary:");
         console.log("─".repeat(50));
-        console.log(`�� Generated ${stats.htmlFiles} HTML files`);
-        console.log(`🎯 Processed ${stats.clientComponents} client components`);
-        console.log(`🎨 Included ${stats.cssFiles} CSS files`);
-        console.log(`🛣️  Total routes: ${stats.totalRoutes}`);
+        console.log(`🎨 Included ${buildCssFiles.size} CSS files`);
+        console.log(`🛣️  Total routes: ${files.urlMap.size}`);
         console.log("─".repeat(50));
         console.log("⏱️  Timing:");
         console.log(`  Config:  ${formatDuration(stats.timing.config)}`);

package/plugin/resolveProps.ts

@@ -81,6 +81,7 @@ export async function resolveProps({
         ),
       };
     } catch (error) {
+      console.trace(error);
       console.warn(found, "error in resolveProps", propsModule, url, path);
       return {
         type: "error",

package/plugin/worker/createWorker.ts

@@ -53,7 +53,7 @@ export async function createWorker(options: CreateWorkerOptions) {
 
   // Create worker with proper environment
   const worker = new Worker(
-    workerPath.startsWith("/") ? workerPath : join(projectRoot, workerPath),
+    workerPath.startsWith("/") ? workerPath : './' + workerPath,
     {
       env,
       resourceLimits,

package/plugin/worker/html/html-worker.production.tsx

@@ -1,5 +1,10 @@
 import { messageHandler } from "./messageHandler.js";
 import { parentPort } from "node:worker_threads";
+import { Window } from 'happy-dom';
+const window = new Window({ url: 'https://localhost:8080' });
+const document = window.document;
+globalThis.window = window as any;
+globalThis.document = document as any;
 
 let ready = false;
 if (!parentPort) throw new Error("This module must be run as a worker");

package/plugin/worker/html/messageHandler.ts

@@ -13,8 +13,6 @@ import { join } from "path";
 const activeRenders = new Map<string, HtmlRenderState>();
 const htmlContent = new Map<string, string>();
 const htmlPromises = new Map<string, Promise<string>>();
-
-
 export const messageHandler = async (message: HtmlWorkerMessage) => {
   try {
     switch (message.type) {

package/plugin/worker/html/renderPages.ts

@@ -92,7 +92,7 @@ export async function renderPages(
       });
     });
 
-    collectManifestCss(
+    const newCssFiles = collectManifestCss(
       options.clientManifest,
       options.moduleBasePath,
       'index.html',
@@ -125,7 +125,6 @@ export async function renderPages(
           }
         }
       );
-
       // Create handler for pure RSC output
       const rscResult = await createHandler(route, {
         ...options.pluginOptions,
@@ -134,7 +133,7 @@ export async function renderPages(
         loader: options.loader,
         clientManifest: options.clientManifest,
         serverManifest: options.serverManifest,
-        cssFiles: clientCss,
+        cssFiles: Array.from(newCssFiles.values()).concat(clientCss),
         pipableStreamOptions: {
           ...options.pipableStreamOptions,
           importMap: {

package/plugin/worker/rsc/messageHandler.tsx

@@ -1,27 +1,21 @@
-import { createWriteStream } from "node:fs";
-import { mkdir } from "node:fs/promises";
-import { dirname, join } from "node:path";
-import { parentPort } from "node:worker_threads";
+import { join } from "node:path";
 import { PassThrough } from "node:stream";
+import { parentPort } from "node:worker_threads";
+import React from "react";
 import {
   renderToPipeableStream,
   // @ts-ignore
 } from "react-server-dom-esm/server.node";
+import { createLogger } from "../../utils/logger.js";
 import type {
   RscChunkMessage,
   RscEndMessage,
   RscWorkerMessage,
 } from "../types.js";
-import { createLogger } from "../../utils/logger.js";
 import {
-  cssFiles,
-  clientFiles,
-  serverActionFiles,
   addCssFile,
-  clearCssFiles,
+  cssFiles
 } from "./state.js";
-import type { WriteStream } from "node:fs";
-import React from "react";
 
 const log = createLogger("rsc-worker");
 
@@ -85,6 +79,7 @@ export async function messageHandler(message: RscWorkerMessage) {
         moduleBaseURL,
         {
           onError: (error: Error) => {
+            console.log('onError', error);
             log.error(`Stream error at ${id}:`, error);
             parentPort?.postMessage({
               type: "ERROR",

package/scripts/check-react-version.mjs

@@ -6,28 +6,18 @@ import React from 'react'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-const TEMPLATE_VERSION = '0.0.0-experimental-b3a95caf-20250113'
-const ACTUAL_TEMPLATE_VERSION = '19.1.0-experimental-b3a95caf-20250113'
-const TARGET_VERSION = '0.0.0-experimental-d55cc79b-20250228'
-const ACTUAL_TARGET_VERSION = '19.1.0-experimental-d55cc79b-20250228'
+const TEMPLATE_VERSION = '0.0.0-experimental-eda36a1c-20250228'
 const STUB_VERSION = '0.0.1'
 
 async function main() {
     // Read installed React version
-    const reactPkgPath = path.resolve(process.cwd(), 'node_modules/react/package.json')
-    const reactPkg = JSON.parse(await fs.readFile(reactPkgPath, 'utf-8'))
-    const userPkg = JSON.parse(await fs.readFile(path.resolve(process.cwd(), 'package.json'), 'utf-8'))
     const patchVersion = React.version
+    const PATCH_RECONCILER_VERSION = patchVersion.replace('19.1.0', '0.0.0')
+    if(TEMPLATE_VERSION === PATCH_RECONCILER_VERSION) {
+        console.log('React version is already patched')
+        return;
+    } 
     
-    let userVersion = userPkg.dependencies?.react ?? userPkg.devDependencies?.react ?? userPkg.peerDependencies?.react
-    if(!userVersion) {
-        throw new Error('React version not found in package.json')
-    } else {
-      userVersion = userVersion.replace('^', '')
-    }
-    if(userVersion !== TARGET_VERSION) {
-      throw new Error(`React patch was made for version ${ACTUAL_TARGET_VERSION}, but you installed version ${userVersion}`)
-    }
     // Define patches to process
     const patches = [
       {
@@ -36,11 +26,11 @@ async function main() {
       },
       {
         template: path.resolve(__dirname, `react+${TEMPLATE_VERSION}.patch`),
-        output: `react+${userVersion}.patch`
+        output: `react+${PATCH_RECONCILER_VERSION}.patch`
       },
       {
         template: path.resolve(__dirname, `react-dom+${TEMPLATE_VERSION}.patch`),
-        output: `react-dom+${userVersion}.patch`
+        output: `react-dom+${PATCH_RECONCILER_VERSION}.patch`
       }
     ]
 
@@ -57,14 +47,6 @@ async function main() {
       console.log(`Wrote patch file to ${outputPath}`)
     }
 
-    console.log(`React version check result: 
-      userVersion: ${userVersion}
-      patchVersion: ${patchVersion}
-      ACTUAL_TARGET_VERSION: ${ACTUAL_TARGET_VERSION}
-      ACTUAL_TEMPLATE_VERSION: ${ACTUAL_TEMPLATE_VERSION}
-      TARGET_VERSION: ${TARGET_VERSION}
-      TEMPLATE_VERSION: ${TEMPLATE_VERSION}
-`)
 }
 
 const PATCH = ``

package/scripts/react+0.0.0-experimental-eda36a1c-20250228.patch

@@ -0,0 +1,57 @@
+diff --git a/node_modules/react/cjs/react.development.js b/node_modules/react/cjs/react.development.js
+index 9aa7fdf..2bc8270 100644
+--- a/node_modules/react/cjs/react.development.js
++++ b/node_modules/react/cjs/react.development.js
+@@ -1277,7 +1277,7 @@
+     exports.useTransition = function () {
+       return resolveDispatcher().useTransition();
+     };
+-    exports.version = "19.1.0-experimental-d55cc79b-20250228";
++    exports.version = "19.1.0-experimental-eda36a1c-20250228";
+     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+       "function" ===
+         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
+diff --git a/node_modules/react/cjs/react.production.js b/node_modules/react/cjs/react.production.js
+index 3678d50..24d6e95 100644
+--- a/node_modules/react/cjs/react.production.js
++++ b/node_modules/react/cjs/react.production.js
+@@ -576,4 +576,4 @@ exports.useSyncExternalStore = function (
+ exports.useTransition = function () {
+   return ReactSharedInternals.H.useTransition();
+ };
+-exports.version = "19.1.0-experimental-d55cc79b-20250228";
++exports.version = "19.1.0-experimental-eda36a1c-20250228";
+diff --git a/node_modules/react/cjs/react.react-server.development.js b/node_modules/react/cjs/react.react-server.development.js
+index 15d4371..8497113 100644
+--- a/node_modules/react/cjs/react.react-server.development.js
++++ b/node_modules/react/cjs/react.react-server.development.js
+@@ -981,5 +981,5 @@
+     exports.useMemo = function (create, deps) {
+       return resolveDispatcher().useMemo(create, deps);
+     };
+-    exports.version = "19.1.0-experimental-d55cc79b-20250228";
++    exports.version = "19.1.0-experimental-eda36a1c-20250228";
+   })();
+diff --git a/node_modules/react/cjs/react.react-server.production.js b/node_modules/react/cjs/react.react-server.production.js
+index 6c7c438..694169d 100644
+--- a/node_modules/react/cjs/react.react-server.production.js
++++ b/node_modules/react/cjs/react.react-server.production.js
+@@ -561,4 +561,4 @@ exports.useId = function () {
+ exports.useMemo = function (create, deps) {
+   return ReactSharedInternals.H.useMemo(create, deps);
+ };
+-exports.version = "19.1.0-experimental-d55cc79b-20250228";
++exports.version = "19.1.0-experimental-eda36a1c-20250228";
+diff --git a/node_modules/react/package.json b/node_modules/react/package.json
+index f7c9f76..b6e85b0 100644
+--- a/node_modules/react/package.json
++++ b/node_modules/react/package.json
+@@ -4,7 +4,7 @@
+   "keywords": [
+     "react"
+   ],
+-  "version": "0.0.0-experimental-d55cc79b-20250228",
++  "version": "0.0.0-experimental-eda36a1c-20250228",
+   "homepage": "https://react.dev/",
+   "bugs": "https://github.com/facebook/react/issues",
+   "license": "MIT",