vite-plugin-react-server 0.3.18 → 0.3.19

package/plugin/config/resolveUserConfig.ts

@@ -11,6 +11,7 @@ import { globSync } from "fs";
 import type { OutputOptions } from "rollup";
 export type ResolveUserConfigProps = {
   isClient?: boolean;
+  isStatic?: boolean;
   config: UserConfig;
   configEnv: ConfigEnv;
   userOptions: ResolvedUserOptions;
@@ -23,6 +24,7 @@ export type ResolveUserConfigReturn =
 
 export function resolveUserConfig({
   isClient = false,
+  isStatic = false,
   config,
   configEnv,
   userOptions,
@@ -110,7 +112,7 @@ export function resolveUserConfig({
       ? autoDiscoveredClientFiles(clientEntry)
       : autoDiscoveredServerFiles(autoDiscoveredFiles(serverEntry ?? {}));
 
-    const envDir = isClient
+    const envDir = isStatic ? userOptions.build.static : isClient
       ? userOptions.build.client
       : userOptions.build.server;
 
@@ -132,7 +134,7 @@ export function resolveUserConfig({
       interop: "auto",
     } satisfies OutputOptions;
     
-    const newOutput = Array.isArray(config.build?.rollupOptions?.output)
+    let newOutput = Array.isArray(config.build?.rollupOptions?.output)
       ? [...config.build?.rollupOptions?.output, pluginOutput]
       : typeof config.build?.rollupOptions?.output === "object" &&
         config.build?.rollupOptions?.output !== null
@@ -140,7 +142,7 @@ export function resolveUserConfig({
       : pluginOutput;
 
     if (isClient) {
-      // client build options
+      // client plugin build options (client plugin still outputs server files)
       return {
         type: "success",
         userConfig: {
@@ -168,13 +170,11 @@ export function resolveUserConfig({
             emptyOutDir: config.build?.emptyOutDir ?? true,
             outDir: join(userOptions.build.outDir, envDir),
             assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
+            copyPublicDir: config.build?.copyPublicDir ?? true,
             // modern browsers
             target: ["esnext"],
             minify: true,
-            ssr:
-              typeof configEnv.isSsrBuild === "boolean"
-                ? configEnv.isSsrBuild
-                : true,
+            ssr: typeof config.build?.ssr === "boolean" ? config.build?.ssr : configEnv.isSsrBuild ?? false,
             manifest: config.build?.manifest ?? `.vite/manifest.json`,
             ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
             ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
@@ -189,6 +189,9 @@ export function resolveUserConfig({
       };
     }
     // server build options
+    if(configEnv.isSsrBuild === false) {
+      configEnv.isSsrBuild = true
+    }
     return {
       type: "success",
       userConfig: {
@@ -196,7 +199,6 @@ export function resolveUserConfig({
         root: root,
         mode: configEnv.mode ?? configEnv.command === "build" ? "production" : "development",
         resolve: {
-          alias: {},
           externalConditions: ["react-server"],
         },
         // server build options
@@ -206,10 +208,11 @@ export function resolveUserConfig({
           outDir: join(userOptions.build.outDir, envDir),
           target: config.build?.target ?? "node18",
           minify: config.build?.minify ?? true,
-          ssr: config.build?.ssr ?? configEnv.isSsrBuild ?? true,
+          ssr: typeof config.build?.ssr === "boolean" ? config.build?.ssr : configEnv.isSsrBuild ?? true,
           manifest: config.build?.manifest ?? `.vite/manifest.json`,
           ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
           ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
+          copyPublicDir: config.build?.copyPublicDir ?? isStatic,
           assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
           rollupOptions: {
             ...config.build?.rollupOptions,

package/plugin/{react-server → helpers}/createHandler.ts

@@ -1,13 +1,13 @@
 import type { PipeableStream } from "react-dom/server";
 import { createLogger } from "vite";
 import {
-  collectManifestCss,
+  collectManifestClientFiles,
   collectModuleGraphCss,
-} from "../collect-css-manifest.js";
+} from "../collect-manifest-client-files.js";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { resolvePage } from "../resolvePage.js";
 import { resolveProps } from "../resolveProps.js";
-import type { CreateHandlerOptions, ResolvedUserOptions } from "../types.js";
+import type { CheckFilesExistReturn, CreateHandlerOptions, ResolvedUserOptions } from "../types.js";
 import { createRscStream } from "./createRscStream.js";
 
 type CreateHandlerResult = 
@@ -16,15 +16,21 @@ type CreateHandlerResult =
   | { type: "skip" };
 
 interface HandlerAssets {
-  css: Set<string>;
-  clientPath: string;
+  css: string[];
+  bootstrapModules: string[];
 }
 
-export async function createHandler<T>(
+export async function createHandler<T>({
+  url,
+  urlMap,
+  pluginOptions,
+  streamOptions,
+}: {
   url: string,
+  urlMap: CheckFilesExistReturn['urlMap'],
   pluginOptions: ResolvedUserOptions,
   streamOptions: CreateHandlerOptions<T>
-): Promise<CreateHandlerResult> {
+}): Promise<CreateHandlerResult> {
   const root = pluginOptions.projectRoot ?? process.cwd();
 
   const Html = pluginOptions.Html ?? DEFAULT_CONFIG.HTML;
@@ -35,29 +41,29 @@ export async function createHandler<T>(
   const controller = new AbortController();
 
   const cssFiles = streamOptions.cssFiles;
-  const propsPath =
-    typeof pluginOptions.props === "function"
-      ? pluginOptions.props(url)
-      : pluginOptions.props;
-  const pagePath =
-    typeof pluginOptions.Page === "function"
-      ? pluginOptions.Page(url)
-      : pluginOptions.Page;
 
-  const cssModules = new Set<string>();
+
+  const cssModules = streamOptions.cssModules ?? new Set<string>();
 
   if (!(streamOptions.serverManifest || streamOptions.moduleGraph))
     throw new Error("Missing server manifest or moduleGraph, pass it to options.");
 
   const getCss = streamOptions.serverManifest
     ? (id: string) =>
-        collectManifestCss(
-          streamOptions.serverManifest!,
-          root,
-          id,
-          streamOptions.onCssFile
-        )
-    : (id: string) => collectModuleGraphCss(streamOptions.moduleGraph!, id);
+        collectManifestClientFiles({
+          manifest: streamOptions.serverManifest!,
+          root: root,
+          pagePath: id,
+          onCss: streamOptions.onCssFile,
+          moduleBase: pluginOptions.moduleBase,
+          preserveModulesRoot: pluginOptions.build.preserveModulesRoot,
+        }).cssFiles
+    : (id: string) =>
+        collectModuleGraphCss({
+          moduleGraph: streamOptions.moduleGraph!,
+          pagePath: id,
+          onCss: streamOptions.onCssFile,
+        });
 
   const loadWithCss = async (id: string, parentUrl: string) => {
     try {
@@ -81,45 +87,22 @@ export async function createHandler<T>(
   };
 
   const PropsModule = await resolveProps({
-    propsModule: await loadWithCss(propsPath ?? pagePath, url),
-    path: String(propsPath ?? pagePath),
+    propsModule: await loadWithCss(urlMap.get(url)?.props ?? url, url),
+    path: String(urlMap.get(url)?.props ?? url),
     exportName: propsExportName,
     url,
   });
-  if (PropsModule.type === "error")
-    return { type: PropsModule.type, error: PropsModule?.error };
-  if (PropsModule.type === "skip") return { type: PropsModule.type };
-  const props = PropsModule[propsExportName as keyof typeof PropsModule] as any;
-  if (props?.type === "error") return { type: props.type, error: props.error };
-  if (props?.type === "skip") return { type: props.type };
-
+  if (PropsModule.type !== "success") {
+    return PropsModule
+  }
   const PageModule = await resolvePage({
-    pageModule: await loadWithCss(pagePath, url),
-    path: pagePath,
+    pageModule: await loadWithCss(urlMap.get(url)?.page ?? url, url),
+    path: String(urlMap.get(url)?.page ?? url),
     exportName: pageExportName,
     url,
   });
-  if (PageModule.type === "error")
-    return { type: PageModule.type, error: PageModule.error };
-  if (PageModule.type === "skip") return { type: PageModule.type };
-  const Page = PageModule[pageExportName as keyof typeof PageModule] as any;
-  if (Page?.type === "error") return { type: Page.type, error: Page.error };
-  if (Page?.type === "skip") return { type: Page.type };
-  if (!(typeof Page === "function")) {
-    return {
-      type: "error",
-      error: new Error("Invalid Page component: " + pagePath, {
-        cause: Page,
-      }),
-    };
-  }
-  if (!(typeof props === "object")) {
-    return {
-      type: "error",
-      error: new Error("Invalid props: " + propsPath, {
-        cause: props,
-      }),
-    } 
+  if (PageModule.type !== "success") {
+    return PageModule
   }
 
   // Add any additional CSS files
@@ -128,16 +111,17 @@ export async function createHandler<T>(
   }
   const stream = createRscStream({
     Html: Html,
-    Page: Page,
-    props: props,
-    moduleBasePath: '',
+    Page: PageModule[pageExportName as keyof typeof PageModule],
+    props: PropsModule[propsExportName as keyof typeof PropsModule],
+    moduleBasePath: streamOptions.moduleBasePath,
+    moduleBaseURL: streamOptions.moduleBaseURL,
     logger: streamOptions.logger ?? createLogger(),
     cssFiles: Array.from(cssModules),
     route: url,
     url,
     pipableStreamOptions: streamOptions.pipableStreamOptions,
     htmlProps: {
-      pageProps: props,
+      pageProps: PropsModule[propsExportName as keyof typeof PropsModule],
       route: url,
       url: url,
     },
@@ -148,15 +132,14 @@ export async function createHandler<T>(
   }
 
   const assets: HandlerAssets = {
-    css: new Set(cssFiles ?? []),
-    clientPath: pagePath ?? ''
+    css: Array.from(cssModules).concat(cssFiles ?? []),
+    bootstrapModules: streamOptions.pipableStreamOptions?.bootstrapModules ?? [],
   };
-
   return {
     type: "success",
     controller,
     stream,
     assets,
-    clientPath: assets.clientPath,
+    clientPath: urlMap.get(url)?.page ?? '',
   };
 }

package/plugin/helpers/createRscStream.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+// @ts-ignore
+import { renderToPipeableStream } from "react-server-dom-esm/server.node";
+import type { PipeableStreamOptions } from "../worker/types.js";
+import type { Logger } from "vite";
+import { CssCollector } from "../components.js";
+
+export function createRscStream({
+  Html,
+  Page,
+  props,
+  moduleBasePath,
+  moduleBaseURL,
+  logger,
+  cssFiles = [],
+  route,
+  url,
+  pipableStreamOptions,
+  htmlProps,
+}: {
+  Html: React.ComponentType<any>;
+  Page: React.ComponentType<any>;
+  props: any;
+  moduleBasePath: string;
+  moduleBaseURL: string;
+  logger: Logger;
+  cssFiles?: string[];
+  route: string;
+  url: string;
+  pipableStreamOptions?: PipeableStreamOptions;
+  htmlProps?: any;
+}) {
+  const htmlIsFragment = Html == React.Fragment;
+  if (!htmlIsFragment) {
+    if (!htmlProps) {
+      htmlProps = {};
+    }
+    if(!("moduleBaseUrl" in htmlProps)) {
+      htmlProps["moduleBaseUrl"] = moduleBaseURL;
+    }
+    if(!("moduleBasePath" in htmlProps)) {
+      htmlProps["moduleBasePath"] = moduleBasePath;
+    }
+    if (!("url" in htmlProps)) {
+      htmlProps["url"] = url;
+    }
+    if (!("route" in htmlProps)) {
+      htmlProps["route"] = route;
+    }
+    if (!("pageProps" in htmlProps)) {
+      htmlProps["pageProps"] = props;
+    }
+  }
+  const withCss = React.createElement(
+    CssCollector,
+    { cssFiles, route, moduleBaseUrl: moduleBaseURL },
+    React.createElement(Page, props)
+  );
+  // Otherwise wrap with Html component
+  const content = htmlIsFragment
+    ? withCss
+    : React.createElement(Html, htmlProps, withCss);
+  try {
+    return renderToPipeableStream(content, moduleBaseURL, {
+      onError: (error: Error) => {
+        if (process.env["NODE_ENV"] === "development") {
+          console.trace(error);
+        }
+        logger.error(`Stream error at ${route}.`, { error });
+      },
+      onPostpone: logger.info ?? console.info,
+      environmentName: "Server",
+      ...pipableStreamOptions,
+    });
+  } catch (error) {
+    logger.error(`Failed to create stream for ${route}.`, {
+      error: error as Error,
+    });
+    return null;
+  }
+}

package/plugin/helpers/getBundleManifest.ts

@@ -4,8 +4,7 @@ import type {
   OutputChunk,
 } from "rollup";
 import { createInputNormalizer } from "./inputNormalizer.js";
-import { join } from "path";
-import { DEFAULT_CONFIG, resolveOptions } from "../config/index.js";
+import { DEFAULT_CONFIG } from "../config/index.js";
 
 interface BundleManifestEntry {
   file: string;
@@ -70,7 +69,7 @@ export function getBundleManifest({
         }
         
         // Normalize both paths, removing the root prefix
-        const [normalizedId, sourcePath] = normalizer(moduleId);
+        let [normalizedId, sourcePath] = normalizer(moduleId);
 
         // For virtual modules, use a consistent naming scheme
         let finalFileName = fileName;
@@ -91,12 +90,22 @@ export function getBundleManifest({
           
           finalFileName = virtualModules.get(virtualKey)!;
         }
+        // handle preserveModulesRoot
+        if(normalizedId.startsWith('\x00')){
+          normalizedId = normalizedId.slice(1);
+        }
+        if(sourcePath.startsWith('/')){
+          sourcePath = sourcePath.slice(1);
+        }
+        if(moduleBase && preserveModulesRoot && normalizedId?.startsWith(moduleBase + '/')) {
+          normalizedId = normalizedId.slice(moduleBase.length + 1);
+        }
         const bundleManifestEntry = [
           sourcePath,
           {
             file: finalFileName,
-            name: normalizedId.startsWith('\x00') ? normalizedId.replace('\x00', '') : normalizedId,
-            src: sourcePath.startsWith('/') ? sourcePath.slice(1) : sourcePath,
+            name: normalizedId,
+            src: sourcePath,
             isEntry: chunk.isEntry,
             ...(chunk.imports?.length > 0 ? { imports: chunk.imports } : {}),
             ...(chunk.dynamicImports?.length > 0 ? { dynamicImports: chunk.dynamicImports } : {}),

package/plugin/loader/createBuildLoader.ts

@@ -1,4 +1,4 @@
-import { join, relative, resolve } from "node:path";
+import { join } from "node:path";
 import type { PluginContext } from "rollup";
 import type { ResolvedUserConfig, ResolvedUserOptions } from "../../server.js";
 import type { Manifest } from "vite";
@@ -15,26 +15,29 @@ export interface BuildLoaderOptions {
 
 export function createBuildLoader({
   root,
-  userConfig,
+  userConfig: _userConfig,
   userOptions,
-  pluginContext,
+  pluginContext: _pluginContext,
   serverManifest,
   clientManifest,
 }: BuildLoaderOptions) {
   const normalizer = createInputNormalizer({
     root,
-    preserveModulesRoot: undefined,
-    removeExtension: false,
+    preserveModulesRoot: userOptions.build.preserveModulesRoot === true ? userOptions.moduleBase : undefined,
+    removeExtension: true,
   });
   return async function buildLoader(id: string) {
     const [key, value] = normalizer(id);
+    if(value !== id){
+      console.warn(`[vite-plugin-react-server] Mismatch in build loader for ${id} !== ${value} (${key})`);
+    }
     // Remove leading slash if present
     const distDir = userOptions.build.outDir;
     const manifests = [clientManifest, serverManifest];
     // Try to find the module in the manifest
     for (const n of [0, 1]) {
       const manifest = manifests[n];
-      const manifestEntry = manifest[key]
+      const manifestEntry = manifest[value]
       if (!manifestEntry) {
         continue;
       }

package/plugin/loader/css-loader.ts

@@ -20,10 +20,8 @@ export async function initialize(data: { port: MessagePort }) {
 
 // CSS file tracking per page
 const cssFilesByPage = new Map<string, Set<string>>();
-let currentPage: string | null = null;
 
 export function setCurrentPage(page: string | null) {
-  currentPage = page;
   if (page && !cssFilesByPage.has(page)) {
     cssFilesByPage.set(page, new Set());
   }

package/plugin/loader/react-loader.ts

@@ -117,7 +117,7 @@ function transformServerModule(
   program: any,
   url: string,
   sourceMap: any,
-  loader: any,
+  _loader: any,
   port: MessagePort | undefined
 ) {
   const body = program.body; // This entry list needs to be in source location order.
@@ -934,7 +934,7 @@ export async function transformSource(
     const newSrc = await transformModuleIfNeeded(
       transformedSource,
       context.url,
-      (url: string, ctx: any, defaultLoad: any) =>
+      (url: string) =>
         loadClientImport(url, defaultTransformSource),
       context.data?.port!
     );

package/plugin/preserver/plugin.ts

@@ -1,10 +1,41 @@
 import type { Node } from "estree";
-import MagicString from "magic-string";
 import type { StreamPluginOptions } from "../types.js";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { basename } from "path";
 
 const REACT_DIRECTIVES = new Set(["use client", "use server"]);
 
+function createSourceMap(id: string, code: string, mappings: string) {
+  return {
+    version: 3,
+    file: basename(id),
+    sources: [id],
+    sourcesContent: [code],
+    names: [],
+    mappings,
+    sourceRoot: "",
+  };
+}
+
+function removeRanges(code: string, ranges: Array<{ start: number; end: number }>) {
+  // Sort ranges in reverse order to not affect positions
+  ranges.sort((a, b) => b.start - a.start);
+  
+  let result = code;
+  for (const range of ranges) {
+    result = result.slice(0, range.start) + result.slice(range.end);
+  }
+  return result;
+}
+
+function countLines(str: string): number {
+  let count = 1;
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '\n') count++;
+  }
+  return count;
+}
+
 export function reactPreservePlugin(_options: StreamPluginOptions): import("vite").Plugin {
   const meta: Record<string, Set<string>> = {};
 
@@ -35,8 +66,10 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
           return null;
         }
 
-        const magicString = new MagicString(code);
+        const rangesToRemove: Array<{ start: number; end: number }> = [];
         let hasChanged = false;
+        let lineCount = 1;
+        let mappings = "AAAA"; // Initial mapping for first line
 
         // Only look at top-level directives
         for (const node of ast.body) {
@@ -55,13 +88,20 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
             directive = node.expression.value;
           }
 
-          if (directive) {
+          if (directive && "start" in node && "end" in node) {
             meta[id] ||= new Set<string>();
             meta[id].add(directive);
-
-            if ("start" in node && "end" in node) {
-              magicString.remove(node.start as number, node.end as number);
-              hasChanged = true;
+            rangesToRemove.push({ 
+              start: node.start as number, 
+              end: node.end as number 
+            });
+            hasChanged = true;
+            
+            // Add mapping for each line removed
+            const removedLines = code.slice(node.start as number, node.end as number).split('\n').length - 1;
+            for (let i = 0; i < removedLines; i++) {
+              mappings += ";AACA";
+              lineCount++;
             }
           }
         }
@@ -70,9 +110,12 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
           return null;
         }
 
+        const newCode = removeRanges(code, rangesToRemove);
+        const sourceMap = createSourceMap(id, code, mappings);
+
         return {
-          code: magicString.toString(),
-          map: magicString.generateMap({ hires: true }),
+          code: newCode,
+          map: sourceMap,
           meta: {
             directives: Array.from(meta[id] || []),
           },
@@ -91,16 +134,20 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
       }
 
       if (chunkDirectives.size) {
-        const magicString = new MagicString(code);
-        magicString.prepend(
-          Array.from(chunkDirectives)
-            .map((d) => `"${d}";`)
-            .join("\n") + "\n"
-        );
+        const directivesCode = Array.from(chunkDirectives)
+          .map((d) => `"${d}";`)
+          .join("\n") + "\n";
+        
+        const newCode = directivesCode + code;
+
+        // Create source map for the prepended directives
+        const lineCount = countLines(directivesCode);
+        const mappings = "AAAA" + ";AACA".repeat(lineCount - 1);
+        const sourceMap = createSourceMap(chunk.fileName, code, mappings);
 
         return {
-          code: magicString.toString(),
-          map: magicString.generateMap({ hires: true }),
+          code: newCode,
+          map: sourceMap,
         };
       }