vite-plugin-react-server 0.3.10 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-server",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "Vite plugin for React Server Components (RSC)",
   "type": "module",
   "main": "./dist/plugin/index.js",
@@ -24,7 +24,8 @@
     "./loader": "./dist/plugin/worker/loader.js",
     "./package.json": "./package.json",
     "./patch": "./scripts/patch.mjs",
-    "./check-react-version": "./scripts/check-react-version.mjs"
+    "./check-react-version": "./scripts/check-react-version.mjs",
+    "./css-loader": "./dist/plugin/loader/css-loader.js"
   },
   "typesVersions": {
     "*": {
@@ -61,14 +62,12 @@
     "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:copy": "cp -r ./oss-experimental/* ./node_modules/",
-    "experimental:patch": "npx patch-package react-server-dom-esm --exclude 'nothing' && npx patch-package react react-dom",
+    "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 install react-server-dom-esm react@canary react-dom@canary && npm run experimental:copy && npm run experimental:patch && npm run experimental:move-patches && node scripts/check-react-version.mjs",
-    "experimental:check": "node scripts/check-react-version.mjs",
-    "postinstall": "npm install react-server-dom-esm && node scripts/check-react-version.mjs &&  patch-package",
-    "start": "cd template; NODE_OPTIONS='--conditions react-server' npx vite",
-    "template:build": "cd template && NODE_OPTIONS='--conditions react-server' npx vite build"
+    "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"
   },
   "keywords": [
     "vite",
@@ -80,7 +79,7 @@
   "author": "Nico Brinkkemper",
   "license": "MIT",
   "engines": {
-    "node": "^23.6.0"
+    "node": "^23.7.0"
   },
   "repository": {
     "type": "git",
@@ -107,13 +106,12 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^20.17.16",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "acorn-loose": "^8.3.0",
     "patch-package": "^8.0.0",
-    "react": "^19.1.0-canary-8759c5c8-20250207",
-    "react-dom": "^19.1.0-canary-8759c5c8-20250207",
+    "react": "^0.0.0-experimental-e670e72f-20250214",
+    "react-dom": "^0.0.0-experimental-e670e72f-20250214",
     "react-server-dom-esm": "^0.0.1",
     "rollup": "^4.34.0",
     "source-map": "^0.7.4",
@@ -122,9 +120,13 @@
     "typescript": "^5.7.3",
     "vite": "^6.0.11",
     "vitest": "^3.0.4",
-    "webpack-sources": "^3.2.0"
+    "webpack-sources": "^3.2.3"
   },
   "bin": {
-    "vite-plugin-react-server-patch": "./scripts/check-react-version.mjs"
+    "check-react-version": "./scripts/check-react-version.mjs",
+    "patch": "./bin/patch.mjs"
+  },
+  "dependencies": {
+    "tsx": "^4.19.2"
   }
 }

package/plugin/assertServerCondition.ts

@@ -1,4 +1,4 @@
-function assertServerCondition<P extends typeof process>(p: P): asserts p is P & { env: { NODE_OPTIONS: string } } {
+export function assertServerCondition<P extends typeof process>(p: P): asserts p is P & { env: { NODE_OPTIONS: string } } {
     const nodeOptions = p.env['NODE_OPTIONS'];
     if (!nodeOptions?.match(/--conditions[= ]react-server/)) {
         if(!nodeOptions?.match(/--conditions/)) {
@@ -9,5 +9,4 @@ function assertServerCondition<P extends typeof process>(p: P): asserts p is P &
         }
     }
     return undefined;
-  };
-assertServerCondition(process);
+  };

package/plugin/checkFilesExist.ts

@@ -1,82 +1,62 @@
 import { existsSync } from "node:fs";
-import { resolve, relative } from "node:path";
-import type { CheckFilesExistReturn, StreamPluginOptions } from "./types.js";
-import { DEFAULT_CONFIG } from "./config/defaults.js";
+import { join } from "node:path";
+import type { CheckFilesExistReturn, ResolvedUserOptions } from "./types.js";
+import { normalizePath } from "vite";
+import { createInputNormalizer } from "./helpers/inputNormalizer.js";
+
+const resolveFileOption = (pageOrProps: string | ((url: string) => string)) => {
+  if (typeof pageOrProps === "string") {
+    return () => pageOrProps;
+  }
+  return pageOrProps;
+};
 
 export async function checkFilesExist(
   pages: string[],
-  options: Pick<StreamPluginOptions, "Page" | "props">,
+  options: ResolvedUserOptions,
   root: string
 ): Promise<CheckFilesExistReturn> {
+  if (!root || root === "") {
+    throw new Error("Root not found");
+  }
   const errors: string[] = [];
   const pageSet = new Set<string>();
-  const pageMap = new Map<string, string>();
-  
-  const toKey = (path: string) => {
-    return relative(root, resolve(root, path))
-      .replace(/\\/g, '/')
-      .replace(DEFAULT_CONFIG.FILE_REGEX, '')
-      .replace(/^\.\//, '');
-  }
-  // Check if files exist when string paths are provided
-  if (typeof options.Page === "string") {
-    const pagePath = options.Page;
-    const fullPagePath = resolve(root, pagePath);
-    const key = toKey(pagePath);
-    pageMap.set(key, pagePath);
-    if (!pageSet.has(key)) {
-      if (!existsSync(fullPagePath)) {
-        errors.push(`Page file not found: ${pagePath}, ${fullPagePath}`);
-      }
-      pageSet.add(pagePath.replace(/^\//, ''));
-    }
-  } else if (typeof options.Page === "function" && pages) {
-    for (const page of pages) {
-      const pagePath = options.Page(page);
-      const fullPagePath = resolve(root, pagePath);
-      const key = toKey(pagePath);
-      pageMap.set(key, pagePath);
-      if (pageSet.has(key)) {
-        continue;
-      }
-      if (!existsSync(fullPagePath)) {
-        errors.push(`Page file not found: ${pagePath}, ${fullPagePath}`);
-      }
-      pageSet.add(pagePath);
-    }
-  }
-
   const propsSet = new Set<string>();
+  const pageMap = new Map<string, string>();
   const propsMap = new Map<string, string>();
-  if (typeof options.props === "string") {
-    const propsPath = options.props;
-    const fullPropsPath = resolve(root, propsPath);
-    const key = toKey(propsPath);
-    propsMap.set(key, propsPath);
-    if (!propsSet.has(key)) {
-      if (!existsSync(fullPropsPath)) {
-        errors.push(`Props file not found: ${propsPath}, ${fullPropsPath}`);
-      }
-      propsSet.add(propsPath);
-    }
-  } else if (typeof options.props === "function" && pages) {
-    for (const page of pages) {
-      const propsPath = options.props(page);
-      const fullPropsPath = resolve(root, propsPath);
-      const key = toKey(propsPath);
-      propsMap.set(key, propsPath);
-      if (propsSet.has(key)) {
-        continue;
+  const urlMap = new Map<string, { props: string; page: string }>();
+  const normalizer = createInputNormalizer({
+    root,
+    preserveModulesRoot: options.build.preserveModulesRoot === true ? options.moduleBase : undefined,
+    removeExtension: true,
+  });
+  const pageFn = resolveFileOption(options.Page);
+  const propsFn = resolveFileOption(options.props);
+  for (const page of pages) {
+    const pagePath = pageFn(page);
+    const propsPath = propsFn(page);
+    const [pageKey, pageValue] = normalizer(pagePath);
+    const [propsKey, propsValue] = normalizer(propsPath);
+    try {
+      if (!existsSync(join(root, pageValue))) {
+        errors.push(
+          `Page file not found: ${pagePath}, ${join(root, pagePath)}`
+        );
       }
-      if (!existsSync(fullPropsPath)) {
-        errors.push(`Props file not found: ${propsPath}, ${fullPropsPath}`);
+      if (!existsSync(join(root, propsValue))) {
+        errors.push(
+          `Props file not found: ${propsPath}, ${join(root, propsPath)}`
+        );
       }
-      propsSet.add(propsPath);
+    } catch (error) {
+      errors.push(`Error checking files: ${error}`);
     }
+    urlMap.set(page, { props: propsPath, page: pagePath });
+    pageSet.add(pagePath);
+    propsSet.add(propsPath);
+    pageMap.set(pageKey, pageValue);
+    propsMap.set(propsKey, propsValue);
   }
 
-  if (errors.length) {
-    console.warn("React Stream Plugin Validation:\n" + errors.join("\n"));
-  }
-  return { pageMap, pageSet, propsMap, propsSet };
+  return { pageMap, pageSet, propsMap, propsSet, urlMap, errors };
 }

package/plugin/collect-css-manifest.ts

@@ -47,6 +47,11 @@ export function collectManifestCss(
       onCss?.(id);
       return;
     }
+    if (id.endsWith(".css.js")) {
+      cssFiles.set(id.slice(0, -3), id.slice(0, -3));
+      onCss?.(id.slice(0, -3));
+      return;
+    }
     // Get the manifest entry
     const entry = manifest[id];
     if (!entry) return;
@@ -73,6 +78,5 @@ export function collectManifestCss(
   if (manifest[relativePagePath]) {
     walkManifestEntry(relativePagePath);
   }
-
   return cssFiles;
 }

package/plugin/config/createModuleIdGenerator.ts

@@ -0,0 +1,52 @@
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+
+export const createModuleIdGenerator = ({
+  inputRoot,
+  client,
+  server,
+  moduleBase,
+  isProduction,
+  preserveModulesRoot,
+  imports,
+  removeExtension
+}: {
+  isProduction: boolean;
+  inputRoot: string;
+  client: string;
+  server: string;
+  moduleBase: string;
+  preserveModulesRoot: boolean;
+  removeExtension: ((path: string) => boolean) | string | RegExp;
+  imports: Record<string, string>;
+}) => {
+  const normalizer = createInputNormalizer({
+    root: inputRoot,
+    removeExtension: removeExtension,
+    preserveModulesRoot: preserveModulesRoot === true ? moduleBase : undefined,
+  });
+  return (moduleIdPath: string, ssr = isProduction) => {
+    const [moduleId, modulePath] = normalizer(moduleIdPath);
+    const key = preserveModulesRoot ? `${moduleBase}/${moduleId}` : moduleId;
+    const hasImports = key in imports;
+
+    if (hasImports) {
+      // Return the actual file path from the manifest
+      const mappedImport = imports[key];
+      const noRoot = mappedImport.startsWith(inputRoot) ? mappedImport.slice(inputRoot.length +1) : mappedImport;
+      const noModuleBase = preserveModulesRoot ? noRoot.startsWith(moduleBase) ? noRoot.slice(moduleBase.length) : noRoot : noRoot;
+      return noModuleBase;
+    } else if (ssr && isProduction) {
+      // Only throw in production SSR builds
+      const availableImports =
+        Object.keys(imports).length > 0
+          ? Object.keys(imports).join(", ")
+          : "none";
+      throw new Error(
+        `${availableImports === "none" ? "No imports." : `Module ID ${key}, ${modulePath} is not in imports. Available imports: ${availableImports}`}`
+      );
+    } else {
+      // For development or non-SSR builds, use the module ID
+      return moduleId;
+    }
+  };
+};

package/plugin/config/defaults.ts

@@ -1,5 +1,3 @@
-import { moduleIdDefault } from "./moduleIdDefault.js";
-
 export const DEFAULT_CONFIG = {
   FILE_REGEX: /\.(m|c)?(j|t)sx?$/,
   CLIENT_ASSETS_DIR: "assets",
@@ -7,21 +5,19 @@ export const DEFAULT_CONFIG = {
   MODULE_BASE: "src",
   MODULE_BASE_PATH: "/src",
   MODULE_BASE_URL: "/src",
-  PAGE: "/src/page/page.tsx",
-  PROPS: "/src/page/props.ts",
-  CLIENT_ENTRY: "/src/client.tsx",
-  SERVER_ENTRY: "/src/server.tsx",
-  PAGE_EXPORT: "Page",
-  PROPS_EXPORT: "props",
-  HTML_WORKER_PATH: 'worker/html/html-worker.js',
-  RSC_WORKER_PATH: 'worker/rsc/rsc-worker.js',
+  PAGE: "src/page/page.tsx",
+  PROPS: "src/page/props.ts",
+  CLIENT_ENTRY: "src/client.tsx",
+  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',
   RSC_EXTENSION: ".rsc",
   HTML: ({ children }: { children: any }) => children,
   COLLECT_CSS: true,
   COLLECT_ASSETS: true,
-  PAGE_PATTERN: "/src/page/**/*.page.tsx",
-  PROPS_PATTERN: "/src/page/**/*.props.ts",
   DEV_PORT: 5173,
   PREVIEW_PORT: 4173,
   DEV_HOST: "localhost",
@@ -29,16 +25,27 @@ export const DEFAULT_CONFIG = {
   ENV_PREFIX: "VITE_",
   BUILD: {
     pages: () => ["/"],
-    client: "dist/client",
-    server: "dist/server",
-    static: "dist/static",
+    client: "client",
+    server: "server",
+    static: "static",
+    api: "api",
+    outDir: "dist",
+    assetsDir: "assets",
+    hash: "hash",
+    preserveModulesRoot: true,
   },
   MODULE_BASE_EXCEPTIONS: [] as string[],
   AUTO_DISCOVER: {
-    pagePattern: /page\.(m|c)?(j|t)sx?/,
-    propsPattern: /props\.(m|c)?(j|t)sx?/,
-    clientComponents: /client\.(m|c)?(j|t)sx?/,
-    serverFunctions: /server\.(m|c)?(j|t)sx?/,
+    modulePattern: (n: string) => DEFAULT_CONFIG.FILE_REGEX.test(n),
+    pagePattern: (n: string) => n.toLowerCase().endsWith('/page') || n.toLowerCase() === 'page',
+    propsPattern: (n: string) => n.toLowerCase().endsWith('/props') || n.toLowerCase() === 'props',
+    clientComponents: (n: string) => n.toLowerCase().endsWith('.client') || n.toLowerCase() === 'client',
+    serverFunctions: (n: string) => n.toLowerCase().endsWith('.server') || n.toLowerCase() === 'server',
+    cssPattern: (n: string) => n.toLowerCase().endsWith('.css'),
+    cssModulePattern: (n: string) => n.toLowerCase().endsWith('.css.js'),
+    vendorPattern: (n: string) => n.toLowerCase().startsWith('node_modules') || n.toLowerCase().startsWith('_virtual'),
+    htmlPattern: (n: string) => n.toLowerCase().endsWith('.html'),
+    jsonPattern: (n: string) => n.toLowerCase().endsWith('.json'),
   },
-  MODULE_ID: moduleIdDefault
+  MODULE_ID: (id: string) => id,
 } as const;