vite-plugin-react-server 0.3.18 → 0.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-server",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "Vite plugin for React Server Components (RSC)",
   "type": "module",
   "main": "./dist/plugin/index.js",
@@ -91,8 +91,8 @@
   },
   "homepage": "https://github.com/nicobrinkkemper/vite-plugin-react-server#readme",
   "peerDependencies": {
-    "react": "^0.0.0-experimental-d55cc79b-20250228",
-    "react-dom": "^0.0.0-experimental-d55cc79b-20250228",
+    "react": "^0.0.0-experimental-f9d78089-20250306",
+    "react-dom": "^0.0.0-experimental-f9d78089-20250306",
     "vite": "*"
   },
   "peerDependenciesMeta": {

package/plugin/checkFilesExist.ts

@@ -1,9 +1,10 @@
 import { existsSync } from "node:fs";
 import { join } from "node:path";
 import type { CheckFilesExistReturn, ResolvedUserOptions } from "./types.js";
-import { normalizePath } from "vite";
 import { createInputNormalizer } from "./helpers/inputNormalizer.js";
 
+let stashedFiles: CheckFilesExistReturn | null = null;
+
 const resolveFileOption = (pageOrProps: string | ((url: string) => string)) => {
   if (typeof pageOrProps === "string") {
     return () => pageOrProps;
@@ -16,6 +17,9 @@ export async function checkFilesExist(
   options: ResolvedUserOptions,
   root: string
 ): Promise<CheckFilesExistReturn> {
+  if(stashedFiles){
+    return stashedFiles;
+  }
   if (!root || root === "") {
     throw new Error("Root not found");
   }
@@ -57,6 +61,6 @@ export async function checkFilesExist(
     pageMap.set(pageKey, pageValue);
     propsMap.set(propsKey, propsValue);
   }
-
-  return { pageMap, pageSet, propsMap, propsSet, urlMap, errors };
+  stashedFiles = { pageMap, pageSet, propsMap, propsSet, urlMap, errors };
+  return stashedFiles;
 }

package/plugin/collect-manifest-client-files.ts

@@ -0,0 +1,152 @@
+import type { Manifest, ModuleGraph } from "vite";
+import { createInputNormalizer } from "./helpers/inputNormalizer.js";
+import { DEFAULT_CONFIG } from "./config/defaults.js";
+
+export async function collectModuleGraphCss({
+  moduleGraph,
+  pagePath,
+  onCss,
+  parentUrl,
+}: {
+  moduleGraph: ModuleGraph;
+  pagePath: string;
+  onCss?: (path: string, parentUrl: string) => void;
+  parentUrl?: string;
+}) {
+  if (!pagePath) return new Map<string, string>();
+
+  const cssFiles = new Map<string, string>();
+  const pageModule = await moduleGraph.getModuleByUrl(pagePath, true);
+  if (!pageModule) {
+    return new Map<string, string>();
+  }
+  const seen = new Set<string>();
+  const walkModule = (mod: any) => {
+    if (!mod?.id || seen.has(mod.id)) return;
+    seen.add(mod.id);
+    if (mod?.id?.endsWith(".css")) {
+      cssFiles.set(mod?.url, mod?.id);
+      onCss?.(mod?.url, parentUrl ?? pagePath);
+    }
+    mod?.importedModules?.forEach((imp: any) => walkModule(imp));
+  };
+  walkModule(pageModule);
+  return cssFiles;
+}
+
+export function collectManifestClientFiles({
+  manifest,
+  root,
+  pagePath,
+  preserveModulesRoot,
+  moduleBase,
+  onCss,
+  onClientModule,
+  testClient = DEFAULT_CONFIG.AUTO_DISCOVER.clientComponents,
+  testJson = DEFAULT_CONFIG.AUTO_DISCOVER.jsonPattern,
+}: {
+  manifest: Manifest;
+  root: string;
+  pagePath: string;
+  preserveModulesRoot?: boolean;
+  moduleBase?: string;
+  onCss?: (path: string, parentUrl: string) => void;
+  onClientModule?: (path: string, parentUrl: string) => void;
+  parentUrl?: string;
+  testClient?: (id: string) => boolean;
+  testJson?: (id: string) => boolean;
+}) {
+  const normalizer = createInputNormalizer({
+    root,
+    removeExtension: true,
+    preserveModulesRoot: preserveModulesRoot ? moduleBase : undefined,
+  });
+  const [_, value] = normalizer(pagePath);
+
+  const cssFiles = new Map<string, string>();
+  const clientFiles = new Map<string, string>();
+  const seen = new Set<string>();
+  const manifestValues = Object.values(manifest);
+
+  // Try different variations of the path
+  const possibleKeys = [
+    value, // Relative path
+  ];
+
+  const walkManifestEntry = (id: string, parentUrl: string) => {
+    if (seen.has(id)) return;
+    seen.add(id);
+
+    // Get the manifest entry
+    const entry = manifest[id] ?? manifestValues.find((e) => id === e.file);
+    if (!entry) {
+      console.log(
+        `No manifest entry found for ${id}, possible keys: ${Object.keys(
+          manifest
+        ).join(", ")}`
+      );
+      return;
+    }
+    if (
+      (typeof testClient === "function" &&
+        typeof onClientModule === "function" &&
+        testClient(entry.file)) ||
+      (typeof testJson === "function" && testJson(entry.file))
+    ) {
+      onClientModule?.(entry.file ?? "", parentUrl);
+      clientFiles.set(id, entry.name ?? "");
+    }
+
+    // Add direct CSS from the css array
+    if (entry.css) {
+      entry.css.forEach((css: string) => {
+        cssFiles.set(css, css);
+        onCss?.(css, id);
+        onClientModule?.(css, id);
+      });
+    }
+
+    // Walk imports recursively
+    if (entry.imports) {
+      entry.imports.forEach((imp: string) =>
+        walkManifestEntry(imp, entry.file)
+      );
+    }
+
+    // Also check dynamicImports
+    if (entry.dynamicImports) {
+      entry.dynamicImports.forEach((imp: string) =>
+        walkManifestEntry(imp, entry.file)
+      );
+    }
+  };
+
+  // Try all possible keys
+  for (const possibleKey of possibleKeys) {
+    if (manifest[possibleKey]) {
+      walkManifestEntry(possibleKey, pagePath);
+      break;
+    }
+  }
+
+  // If no entry found by key, try matching by file
+  if (cssFiles.size === 0) {
+    const entry = manifestValues.find(
+      (e) =>
+        possibleKeys.includes(e.file) ||
+        (e.src && possibleKeys.includes(e.src)) ||
+        (e.name && possibleKeys.includes(e.name))
+    );
+    if (entry) {
+      walkManifestEntry(value, pagePath);
+    } else {
+      console.warn(
+        `No manifest entry found for ${value} (tried all possible keys: ${possibleKeys.join(
+          ", "
+        )})`
+      );
+    }
+  }
+
+  return { cssFiles, clientFiles };
+}

package/plugin/components.tsx

@@ -1,14 +1,59 @@
-import { createElement } from 'react';
-
+import React from "react";
 /**
  * A component that emits <link> tags for CSS files during streaming.
  * The high precedence ensures they bubble up to the document head.
  */
-export function CssCollector({ url, moduleBasePath }: { url: string, moduleBasePath: string }) {
-  return createElement('link', {
-    key: url,
-    rel: 'stylesheet',
-    href: url,
-    precedence: 'high'
-  });
-} 
+export function CssCollector({
+  children,
+  cssFiles,
+  moduleBaseUrl,
+  route = "/"
+}: {
+  children?: React.ReactNode;
+  cssFiles: string[];
+  moduleBaseUrl?: string;
+  route?: string;
+}) {
+  // Calculate depth and prefix based on route
+  const depth = route.split('/').filter(Boolean).length ;
+  const prefix = depth > 0 ? '../'.repeat(depth) : './';
+  const base = typeof moduleBaseUrl === 'string' && moduleBaseUrl !== '' ? moduleBaseUrl : prefix;
+
+  return React.createElement(
+    React.Fragment,
+    null,
+    ...cssFiles.map((css) => {
+      try {
+        if(moduleBaseUrl) {
+          new URL(css, moduleBaseUrl);
+        } else {
+          new URL(`file://${base}${css}`);
+        }
+      } catch (error) {
+        return React.createElement('style', {type: 'text/css'}, 
+          css
+        );
+      }
+      // Handle different types of paths
+      let url = css;
+      if (css.startsWith('http') || css.startsWith('data:')) {
+        // Keep absolute URLs as is
+        url = css;
+      } else if (css.startsWith('/')) {
+        // Convert absolute paths to relative
+        url = base + css.slice(1);
+      } else if (!css.startsWith('./') && !css.startsWith('../')) {
+        // Add prefix to relative paths that don't start with ./ or ../
+        url = base + css;
+      }
+      
+      return React.createElement("link", {
+        key: css,
+        rel: "stylesheet",
+        href: url,
+        precedence: "high",
+      });
+    }),
+    children
+  );
+}

package/plugin/config/defaults.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+export const DEFAULT_CONFIG = {
+  FILE_REGEX: /\.(m|c)?(j|t)sx?$/,
+  CLIENT_ASSETS_DIR: "assets",
+  RSC_DIR: "rsc",
+  MODULE_BASE: "src",
+  MODULE_BASE_PATH: "",
+  MODULE_BASE_URL: "",
+  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 }) => (
+    <html>
+      <head></head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  ),
+  COLLECT_CSS: true,
+  COLLECT_ASSETS: true,
+  DEV_PORT: 5173,
+  PREVIEW_PORT: 4173,
+  DEV_HOST: "localhost",
+  PREVIEW_HOST: "localhost",
+  ENV_PREFIX: "VITE_",
+  BUILD: {
+    pages: () => ["/"],
+    client: "client",
+    server: "server",
+    static: "static",
+    api: "api",
+    outDir: "dist",
+    assetsDir: "assets",
+    hash: "hash",
+    preserveModulesRoot: true,
+  },
+  MODULE_BASE_EXCEPTIONS: [] as string[],
+  AUTO_DISCOVER: {
+    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: (id: string) => id,
+} as const;

package/plugin/config/getPaths.ts

@@ -1,15 +1,9 @@
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
 
 export const getNodePath = (root: string = process.cwd()): string => {
   return process.env['module_root'] ?? join(root, "node_modules");
 }
 
-export const getPluginRoot = (): string => {
-  const __dirname = dirname(fileURLToPath(import.meta.url));
-  return join(__dirname, '..');
-}
-
 export const getMode = (): "production" | "development" | "test" => {
   return process.env['NODE_ENV'] === "development" 
     ? "development" 

package/plugin/config/mimeTypes.ts

@@ -0,0 +1,17 @@
+
+export const MIME_TYPES: Record<string, string> = {
+    '.html': 'text/html',
+    '.css': 'text/css',
+    '.js': 'application/javascript',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.rsc': 'text/x-component'
+  };

package/plugin/config/resolveOptions.ts

@@ -2,8 +2,8 @@ import type { PreRenderedAsset } from "rollup";
 import type { PreRenderedChunk } from "rollup";
 import type { StreamPluginOptions, ResolvedUserOptions } from "../types.js";
 import { DEFAULT_CONFIG } from "./defaults.js";
-import { createModuleIdGenerator } from "./createModuleIdGenerator.js";
-import { normalizePath } from "vite";
+import { join } from "node:path";
+import { pluginRoot } from "../root.js";
 
 const resolveAutoDiscoverMatcher = (
   options: undefined | string | RegExp | ((path: string) => boolean),
@@ -45,8 +45,8 @@ const handleSearchQuery = (path: string) => {
 
 const applyPattern = (
   path: string,
-  pattern?: string | RegExp | ((path: string) => boolean) | undefined,
-  fallback?: string | undefined
+  _pattern?: string | RegExp | ((path: string) => boolean) | undefined,
+  _fallback?: string | undefined
 ) => {
   // TODO: What to actually do here? I guess we could replace the extension, but it's not needed since we map them from the manifest anyway.
   return path;
@@ -54,7 +54,7 @@ const applyPattern = (
 
 export const resolveOptions = (
   options: StreamPluginOptions,
-  isClient: boolean = false
+  isClient: boolean
 ):
   | { type: "success"; userOptions: ResolvedUserOptions }
   | { type: "error"; error: Error } => {
@@ -149,7 +149,9 @@ export const resolveOptions = (
   const hashString = hashOption === "" ? "" : `-[${hashOption}]`;
   const hash = (n: string | null) => {
     if (!n) return "";
-    if (hashString === "") return n;
+    if (hashString === "" || (  !isClient && !n.endsWith('.css')  && !n.endsWith('.json') ) ) {
+      return n;
+    }
     const extensionIndex = n.lastIndexOf(".");
     if (extensionIndex !== -1) {
       // put hash between extension and filename
@@ -172,19 +174,27 @@ export const resolveOptions = (
     if (testVendor(path)) {
       return path;
     }
-    
+
     if (testCssModule(path)) {
       // For CSS modules, keep the .css.js extension
-      return applyPattern(path, options.autoDiscover?.cssModulePattern, ".css.js");
+      return applyPattern(
+        path,
+        options.autoDiscover?.cssModulePattern,
+        ".css.js"
+      );
     }
-    
+
     if (testCss(path)) {
       // For regular CSS files, keep the .css extension
       return applyPattern(path, options.autoDiscover?.cssPattern, ".css");
     }
 
     if (testClientComponents(path)) {
-      return applyPattern(path, options.autoDiscover?.clientComponents, "client");
+      return applyPattern(
+        path,
+        options.autoDiscover?.clientComponents,
+        "client"
+      );
     }
     if (testHtml(path)) {
       return applyPattern(path, options.autoDiscover?.htmlPattern, ".html");
@@ -209,7 +219,11 @@ export const resolveOptions = (
       );
     }
     if (testServerFunctions(path)) {
-      return applyPattern(path, options.autoDiscover?.serverFunctions, "server");
+      return applyPattern(
+        path,
+        options.autoDiscover?.serverFunctions,
+        "server"
+      );
     }
     if (testModulePattern(path)) {
       return path;
@@ -220,23 +234,23 @@ export const resolveOptions = (
   const entryFile = (n: PreRenderedChunk) => {
     if (testVendor(n.name)) {
       const search = n.facadeModuleId?.split("?")[1];
-      if(search) {
-        return `${n.name}.${search}.js`;
+      if (search) {
+        return hash(`${n.name}.${search}.js`);
       } else {
-        return n.name + ".js";
+        return hash(`${n.name}.js`);
       }
     }
-    return addJS(getOutputPath(ensureModuleBase(ensureNoRoot(n.name))));
+    return hash(addJS(getOutputPath(ensureModuleBase(ensureNoRoot(n.name)))));
   };
 
   const chunkFile = (n: PreRenderedChunk) => {
     // For chunks, we always want .js
-    return addJS(getOutputPath(ensureModuleBase(ensureNoRoot('_'+n.name))));
+    return hash(addJS(getOutputPath(ensureModuleBase(ensureNoRoot("_" + n.name)))));
   };
 
   const assetFile = (n: PreRenderedAsset) => {
     // For assets, keep the original extension
-    return getOutputPath(ensureModuleBase(ensureNoRoot(n.names[0])));
+    return hash(getOutputPath(ensureModuleBase(ensureNoRoot(n.names[0]))));
   };
 
   const build =
@@ -286,13 +300,23 @@ export const resolveOptions = (
   const moduleBasePath =
     typeof options.moduleBasePath === "string"
       ? options.moduleBasePath
-      : options.moduleBase.startsWith("/")
-      ? options.moduleBase
-      : "/" + options.moduleBase;
+      : DEFAULT_CONFIG.MODULE_BASE_PATH;
   const moduleBaseURL =
     typeof options.moduleBaseURL === "string"
       ? options.moduleBaseURL
-      : moduleBasePath ?? DEFAULT_CONFIG.MODULE_BASE_URL;
+      : DEFAULT_CONFIG.MODULE_BASE_URL;
+  const rscWorkerPath =
+    typeof options.rscWorkerPath === "string"
+      ? join(projectRoot, options.rscWorkerPath)
+      : join(pluginRoot, DEFAULT_CONFIG.RSC_WORKER_PATH);
+  const htmlWorkerPath =
+    typeof options.htmlWorkerPath === "string"
+      ? join(projectRoot, options.htmlWorkerPath)
+      : join(pluginRoot, DEFAULT_CONFIG.HTML_WORKER_PATH);
+  const loaderPath =
+    typeof options.loaderPath === "string"
+      ? join(projectRoot, options.loaderPath)
+      : join(pluginRoot, DEFAULT_CONFIG.LOADER_PATH);
 
   const autoDiscover = {
     modulePattern: testModulePattern,
@@ -306,26 +330,11 @@ export const resolveOptions = (
     vendorPattern: testVendor,
   };
 
-  const moduleId =
-    typeof options.moduleId === "function"
-      ? options.moduleId
-      : createModuleIdGenerator({
-          isProduction: process.env["NODE_ENV"] === "production",
-          inputRoot: projectRoot,
-          client: client,
-          server: server,
-          moduleBase: moduleBase,
-          preserveModulesRoot: preserveModulesRoot,
-          removeExtension: DEFAULT_CONFIG.FILE_REGEX,
-          imports: {},
-        });
-
   try {
     return {
       type: "success",
       userOptions: {
         projectRoot,
-        moduleId: moduleId,
         moduleBase,
         moduleBasePath,
         moduleBaseURL,
@@ -337,10 +346,9 @@ export const resolveOptions = (
         propsExportName: propsExportName,
         collectCss: options.collectCss ?? DEFAULT_CONFIG.COLLECT_CSS,
         collectAssets: options.collectAssets ?? DEFAULT_CONFIG.COLLECT_ASSETS,
-        htmlWorkerPath:
-          options.htmlWorkerPath ?? DEFAULT_CONFIG.HTML_WORKER_PATH,
-        rscWorkerPath: options.rscWorkerPath ?? DEFAULT_CONFIG.RSC_WORKER_PATH,
-        loaderPath: options.loaderPath ?? DEFAULT_CONFIG.LOADER_PATH,
+        htmlWorkerPath: htmlWorkerPath,
+        rscWorkerPath: rscWorkerPath,
+        loaderPath: loaderPath,
         clientEntry: options.clientEntry ?? DEFAULT_CONFIG.CLIENT_ENTRY,
         serverEntry: options.serverEntry ?? DEFAULT_CONFIG.SERVER_ENTRY,
         moduleBaseExceptions: options.moduleBaseExceptions ?? [],

package/plugin/config/resolvePages.ts

@@ -1,8 +1,12 @@
 import type { ResolvedUserOptions } from '../types.js';
 
+export let stashedPages: string[] = [];
 export async function resolvePages(
   pages: ResolvedUserOptions["build"]["pages"]
 ): Promise<{ type: "success"; error?:never; pages: string[] } | { type: "error"; error: Error; pages?:never }> {
+  if(stashedPages.length > 0){
+    return { type: "success", pages: stashedPages };
+  }
   if (!pages) {
     return { type: "success", pages: [] };
   }
@@ -10,24 +14,24 @@ export async function resolvePages(
   try {
     // Handle function
     if (typeof pages === "function") {
-      const result = await Promise.resolve(pages());
-      return resolvePages(result);
+      return resolvePages(pages());
     }
 
     // Handle Promise
     if (pages instanceof Promise) {
-      const result = await pages;
-      return resolvePages(result);
+      return resolvePages(await pages);
     }
 
     // Handle string
     if (typeof pages === "string") {
+      stashedPages = [pages];
       return { type: "success", pages: [pages] };
     }
 
     // Handle array
     if (Array.isArray(pages)) {
       if (pages.every(page => typeof page === "string")) {
+        stashedPages = pages;
         return { type: "success", pages };
       }
       throw new Error('All pages must be strings');