vite-plugin-react-server 0.3.18 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-server",
-  "version": "0.3.18",
+  "version": "1.0.0",
   "description": "Vite plugin for React Server Components (RSC)",
   "type": "module",
   "main": "./dist/plugin/index.js",
@@ -19,13 +19,15 @@
     ".": "./dist/plugin/index.js",
     "./client": "./dist/client.js",
     "./server": "./dist/server.js",
+    "./static": "./dist/static.js",
     "./html-worker": "./dist/plugin/worker/html-worker.js",
     "./rsc-worker": "./dist/plugin/worker/rsc-worker.js",
     "./loader": "./dist/plugin/worker/loader.js",
     "./package.json": "./package.json",
     "./patch": "./scripts/patch.mjs",
     "./check-react-version": "./scripts/check-react-version.mjs",
-    "./css-loader": "./dist/plugin/loader/css-loader.js"
+    "./css-loader": "./dist/plugin/loader/css-loader.js",
+    "./components": "./dist/plugin/components.js"
   },
   "typesVersions": {
     "*": {
@@ -38,11 +40,17 @@
       "server": [
         "./dist/plugin/react-server/plugin.d.ts"
       ],
+      "static": [
+        "./dist/plugin/static/plugin.d.ts"
+      ],
       "worker": [
         "./dist/plugin/worker/worker.d.ts"
       ],
       "loader": [
         "./dist/plugin/worker/loader.d.ts"
+      ],
+      "components": [
+        "./dist/plugin/components.d.ts"
       ]
     }
   },
@@ -91,8 +99,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": {
@@ -120,13 +128,13 @@
     "typescript": "^5.7.3",
     "vite": "^6.0.11",
     "vitest": "^3.0.4",
-    "webpack-sources": "^3.2.3"
+    "webpack-sources": "^3.2.3",
+    "tsx": "^4.19.2"
   },
   "bin": {
     "check-react-version": "./scripts/check-react-version.mjs",
     "patch": "./bin/patch.mjs"
   },
   "dependencies": {
-    "tsx": "^4.19.2"
   }
 }

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,167 @@
+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) {
+      const hasKey = Object.keys(manifest).find((key) => id === key);
+      if (hasKey) {
+        console.log(
+          `Manifest entry found for ${id}, but it is ${typeof entry}`
+        );
+        return;
+      } else {
+        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 {
+      const hasKey = Object.keys(manifest).find((key) => value === key);
+      if (hasKey) {
+        console.warn(
+          `Manifest entry found for ${value}, but it is ${typeof manifest[hasKey]}`
+        );
+      } else {
+        console.warn(
+          `No manifest entry found for ${value} (tried all possible keys: ${possibleKeys.join(
+            ", "
+          )} for manifest keys: ${Object.keys(manifest).join(", ")})`
+        );
+      }
+    }
+  }
+
+  return { cssFiles, clientFiles };
+}

package/plugin/components.ts

@@ -0,0 +1,3 @@
+export { Html } from "./html.js";
+export { CssCollector } from "./css-collector.js";
+export { InlineCssCollector } from "./css-collector-inline.js";

package/plugin/config/defaults.tsx

@@ -0,0 +1,70 @@
+import { CssCollector } from "../css-collector.js";
+import { Html } from "../html.js";
+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",
+  CSS_COLLECTOR: CssCollector,
+  HTML: Html,
+  COLLECT_CSS: true,
+  COLLECT_ASSETS: true,
+  INLINE_CSS: 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,
+  },
+  CSS: {
+    inlineThreshold: 4096, // 4KB
+    inlinePatterns: [/\.module\.css$/], // Always inline CSS modules
+    linkPatterns: [/node_modules/], // Always link node_modules CSS
+  },
+  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

@@ -1,9 +1,11 @@
 import type { PreRenderedAsset } from "rollup";
 import type { PreRenderedChunk } from "rollup";
-import type { StreamPluginOptions, ResolvedUserOptions } from "../types.js";
+import type { StreamPluginOptions, ResolvedUserOptions, InlineCssCollectorProps, CssCollectorProps } 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";
+import { InlineCssCollector } from "../css-collector-inline.js";
+import { CssCollector } from "../css-collector.js";
 
 const resolveAutoDiscoverMatcher = (
   options: undefined | string | RegExp | ((path: string) => boolean),
@@ -45,18 +47,18 @@ 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;
 };
 
-export const resolveOptions = (
-  options: StreamPluginOptions,
-  isClient: boolean = false
+export const resolveOptions = <InlineCSS extends boolean = boolean>(
+  options: StreamPluginOptions<InlineCSS>,
+  isClient: boolean
 ):
-  | { type: "success"; userOptions: ResolvedUserOptions }
+  | { type: "success"; userOptions: ResolvedUserOptions<InlineCSS> }
   | { type: "error"; error: Error } => {
   const projectRoot = options.projectRoot ?? process.cwd();
   const {
@@ -149,7 +151,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 +176,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 +221,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 +236,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 +302,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,
@@ -305,27 +331,13 @@ export const resolveOptions = (
     cssModulePattern: testCssModule,
     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: {},
-        });
-
+  const inlineCss = options.inlineCss;
+  const InlineOrLinkCssCollector = options.CssCollector ?? inlineCss ? InlineCssCollector : CssCollector;
   try {
     return {
       type: "success",
       userOptions: {
         projectRoot,
-        moduleId: moduleId,
         moduleBase,
         moduleBasePath,
         moduleBaseURL,
@@ -333,14 +345,15 @@ export const resolveOptions = (
         Page: options.Page ?? DEFAULT_CONFIG.PAGE,
         props: options.props ?? DEFAULT_CONFIG.PROPS,
         Html: options.Html ?? DEFAULT_CONFIG.HTML,
+        CssCollector: InlineOrLinkCssCollector as InlineCSS extends true ? React.FC<React.PropsWithChildren<InlineCssCollectorProps>> : React.FC<React.PropsWithChildren<CssCollectorProps>>,
         pageExportName: pageExportName,
         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,
+        inlineCss: options.inlineCss ?? DEFAULT_CONFIG.INLINE_CSS,
+        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');