vite-plugin-react-server 0.3.18 → 1.0.0

package/plugin/helpers/createHandler.ts

@@ -0,0 +1,135 @@
+import type { PipeableStream } from "react-dom/server";
+import { resolvePage } from "../resolvePage.js";
+import { resolveProps } from "../resolveProps.js";
+import type { CreateHandlerOptions, CssContent } from "../types.js";
+import { createRscStream } from "./createRscStream.js";
+type CreateHandlerResult =
+  | {
+      type: "success";
+      controller: AbortController;
+      stream: PipeableStream;
+      assets: any;
+      route: string;
+    }
+  | { type: "error"; error: Error }
+  | { type: "skip" };
+
+interface HandlerAssets {
+  css: (string | CssContent)[];
+  bootstrapModules: string[];
+}
+
+export async function createHandler<T>({
+  getCss,
+  root,
+  cssFiles = [],
+  cssModules = new Map<string, string | CssContent>(),
+  onCssFile,
+  logger,
+  loader,
+  Html,
+  CssCollector,
+  pagePath,
+  propsPath,
+  pageExportName,
+  propsExportName,
+  inlineCss,
+  moduleBase,
+  preserveModulesRoot: _preserveModulesRoot,
+  moduleBasePath,
+  moduleRootPath,
+  moduleBaseURL,
+  route,
+  pipableStreamOptions,
+}: CreateHandlerOptions<T>): Promise<CreateHandlerResult> {
+  const controller = new AbortController();
+
+  const loadWithCss = async (id: string) => {
+    try {
+      const mod = await loader(id);
+      const pageCss = await Promise.resolve(getCss(id));
+      Array.from(pageCss.entries()).forEach(([css, linkOrContent]) => {
+        cssModules.set(css, linkOrContent);
+        // Notify about new CSS file if callback exists
+        if (typeof onCssFile === "function") {
+          onCssFile(css, id);
+        }
+      });
+      return mod as Record<string, any>;
+    } catch (e: any) {
+      if (e.message?.includes("module runner has been closed")) {
+        return { type: "skip" } as Record<string, any>;
+      } else {
+        return { type: "error", error: e } as Record<string, any>;
+      }
+    }
+  };
+
+  const PropsModule = await resolveProps({
+    propsModule: propsPath
+      ? await loadWithCss(propsPath)
+      : { [propsExportName]: (url: string) => ({url}) },
+    path: String(propsPath),
+    exportName: propsExportName,
+    url: route,
+  });
+  if (PropsModule.type !== "success") {
+    return PropsModule;
+  }
+  const PageModule = await resolvePage({
+    pageModule: pagePath
+      ? await loadWithCss(pagePath)
+      : { [pageExportName]: () => null },
+    path: String(pagePath),
+    exportName: pageExportName,
+    url: route,
+  });
+  if (PageModule.type !== "success") {
+    return PageModule;
+  }
+
+  // Add any additional CSS files
+  if (cssFiles) {
+    cssFiles.forEach((css) => cssModules.set(typeof css === "string" ? css : css.path, css));
+    cssFiles = Array.from(cssModules.values());
+  }
+  const url =
+    typeof moduleBaseURL === "string" && moduleBaseURL !== ""
+      ? new URL(route, moduleBaseURL).href
+      : route;
+  const stream = createRscStream({
+    Html: Html,
+    CssCollector: CssCollector,
+    Page: PageModule[pageExportName as keyof typeof PageModule],
+    props: PropsModule[propsExportName as keyof typeof PropsModule],
+    moduleBase: moduleBase,
+    moduleRootPath: moduleRootPath,
+    moduleBasePath: moduleBasePath,
+    moduleBaseURL: moduleBaseURL,
+    logger: logger,
+    cssFiles: Array.from(cssModules.values()),
+    route,
+    url,
+    pipableStreamOptions: pipableStreamOptions,
+    htmlProps: {},
+    root: root,
+    loader: loader,
+    inlineCss: inlineCss,
+  });
+
+  if (!stream) {
+    return { type: "skip" as const };
+  }
+
+  const assets: HandlerAssets = {
+    css: cssFiles,
+    bootstrapModules: pipableStreamOptions?.bootstrapModules ?? [],
+  };
+  return {
+    type: "success",
+    controller,
+    stream,
+    assets,
+    route: route,
+  };
+}

package/plugin/helpers/createRscStream.ts

@@ -0,0 +1,109 @@
+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 type {
+  CreateHandlerOptions,
+  CssCollectorProps,
+  CssContent,
+  InlineCssCollectorProps,
+} from "../types.js";
+
+export function createRscStream<InlineCSS extends boolean = true>({
+  Html,
+  Page,
+  props,
+  loader = (id) => import(id).then((m) => m.default),
+  moduleRootPath,
+  moduleBasePath,
+  moduleBaseURL,
+  logger,
+  cssFiles = [],
+  route,
+  url,
+  pipableStreamOptions,
+  htmlProps,
+  inlineCss = true as InlineCSS,
+  CssCollector,
+  root,
+}: {
+  Html: CreateHandlerOptions["Html"];
+  Page: React.ComponentType<any>;
+  loader: (id: string) => Promise<any>;
+  props: any;
+  moduleBase: string;
+  moduleRootPath: string;
+  moduleBasePath: string;
+  moduleBaseURL: string;
+  logger: Logger;
+  route: string;
+  url: string;
+  pipableStreamOptions?: PipeableStreamOptions;
+  htmlProps?: any;
+  root: string;
+  inlineCss?: InlineCSS;
+  cssFiles?: (string | CssContent)[];
+} & (InlineCSS extends true
+  ? {
+      CssCollector: React.FC<InlineCssCollectorProps>;
+    }
+  : {
+      CssCollector: React.FC<CssCollectorProps>;
+    })) {
+  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 (!("moduleRootPath" in htmlProps)) {
+      htmlProps["moduleRootPath"] = moduleRootPath;
+    }
+    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 as any,
+    (inlineCss === true
+      ? {
+          cssFiles: cssFiles,
+          route,
+          moduleBaseURL,
+          moduleBasePath,
+          moduleRootPath,
+          root,
+          loader,
+        }
+      : { cssFiles: cssFiles, route, moduleBaseURL }) as any,
+    React.createElement(Page, props)
+  );
+  // Otherwise wrap with Html component
+  const content = htmlIsFragment
+    ? withCss
+    : React.createElement(Html, htmlProps, withCss);
+  try {
+    return renderToPipeableStream(
+      content,
+      moduleBasePath,
+      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/html.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+export const Html = ({ children }: { children: any }) => (
+  <html>
+    <head></head>
+    <body>
+      <div id="root">{children}</div>
+    </body>
+  </html>
+);

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,
         };
       }
 

package/plugin/react-client/plugin.ts

@@ -12,21 +12,18 @@ import { dirname, join } from "node:path";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import { checkFilesExist } from "../checkFilesExist.js";
 import { resolvePages } from "../config/resolvePages.js";
-import { tryManifest } from "../helpers/tryManifest.js";
 import { createInputNormalizer } from "../helpers/inputNormalizer.js";
 import { createWorker } from "../worker/createWorker.js";
 import type { Worker } from "node:worker_threads";
-import { getPluginRoot } from "../config/getPaths.js";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 import type {
   RscRenderMessage,
   RscWorkerMessage,
   RscWorkerResponse,
 } from "../worker/types.js";
-import { createLogger } from "../utils/logger.js";
-import { readFileSync } from "node:fs";
+import { MIME_TYPES } from "../config/mimeTypes.js";
+
 
-const log = createLogger("react-client");
 let userOptions: ResolvedUserOptions;
 let userConfig: ResolvedUserConfig;
 let clientManifest: Manifest = {};
@@ -44,9 +41,6 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
   }
   userOptions = resolvedOptions.userOptions;
   root = userOptions.projectRoot;
-  const rscWorkerPath = join(getPluginRoot(), DEFAULT_CONFIG.RSC_WORKER_PATH);
-
-  log.info("RSC worker path:" + rscWorkerPath);
 
   return {
     name: "vite:react-client",
@@ -64,7 +58,7 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
       if (configEnv.command === "serve" && !configEnv.isPreview && !worker) {
         worker = await createWorker({
           projectRoot: root,
-          workerPath: rscWorkerPath,
+          workerPath: userOptions.rscWorkerPath,
           reverseCondition: true,
         });
       }
@@ -106,7 +100,7 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
       resolvedConfig = config;
     },
 
-    async generateBundle(options, bundle) {
+    async generateBundle(_options, bundle) {
       // Create manifest entries for each chunk
       clientManifest = getBundleManifest({
         pluginContext: this,
@@ -147,84 +141,23 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
         const [key, value] = normalize(req.url);
         const fileRoot = key.startsWith("node_modules")
           ? root
-          : join(root, userOptions.build.outDir, userOptions.build.client);
-        if (value.endsWith(".js")) {
-          try {
-            const stats = await stat(join(fileRoot, value));
-            if (stats.isFile()) {
-              const content = await readFile(join(fileRoot, value), "utf-8");
-              res.setHeader("Content-Type", "application/javascript");
-              res.end(content);
-              return;
-            } else {
-              next();
-            }
-          } catch (error) {
-            const { manifest: clientManifest } = tryManifest({
-              root,
-              outDir: join(userOptions.build.outDir, userOptions.build.client),
-            });
-            const { manifest: serverManifest } = tryManifest({
-              root,
-              outDir: join(userOptions.build.outDir, userOptions.build.server),
-            });
-            if (clientManifest && value in clientManifest) {
-              res.setHeader("Content-Type", "application/javascript");
-              res.end(clientManifest[value]);
-              return;
-            } else if (serverManifest && value in serverManifest) {
-              res.setHeader("Content-Type", "application/javascript");
-              res.end(serverManifest[value]);
-              return;
-            }
-            const foundClient =
-              clientManifest &&
-              Object.entries(clientManifest).find(
-                ([key, value]) =>
-                  value === key ||
-                  value === value.file ||
-                  value === value.src ||
-                  value === value.name
-              );
-            if (foundClient) {
-              res.setHeader("Content-Type", "application/javascript");
-              res.end(foundClient);
-              return;
-            }
-            const foundServer =
-              serverManifest &&
-              Object.entries(serverManifest).find(
-                ([key, value]) =>
-                  value === key ||
-                  value === value.file ||
-                  value === value.src ||
-                  value === value.name
-              );
-
-            if (foundServer) {
-              res.setHeader("Content-Type", "application/javascript");
-              res.end(foundServer);
-              return;
-            }
-            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) {
-            
+          : join(root, userOptions.build.outDir, userOptions.build.static);
+        try {
+          const filePath = join(fileRoot, value);
+          const stats = await stat(filePath);
+          
+          if (stats.isFile()) {
+            const ext = value.slice(value.lastIndexOf('.'));
+            const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+            res.setHeader('Content-Type', contentType);
+            const content = await readFile(filePath);
+            res.end(content);
+            return;
           }
           next();
+        } catch (error) {
+          console.log("Error serving static file:", error);
+          next();
         }
       });
     },
@@ -234,13 +167,11 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
         loader = server.ssrLoadModule;
       }
       if (!worker) {
-        log.info("Creating RSC worker...");
         worker = await createWorker({
           projectRoot: root,
-          workerPath: rscWorkerPath,
+          workerPath: userOptions.rscWorkerPath,
           condition: "react-client",
         });
-        log.info("RSC worker created");
       }
       const normalize = createInputNormalizer({
         root,
@@ -323,7 +254,6 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
 
                   case "ERROR":
                     clearTimeout(timeout);
-                    log.error("Render error", message);
                     if (!hasError) {
                       hasError = true;
                       res.statusCode = 500;
@@ -371,13 +301,13 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
                 userOptions.build.preserveModulesRoot === true
                   ? userOptions.moduleBase
                   : "",
-              moduleBaseURL: ``,
-              moduleBasePath: '/',
+              moduleBaseURL: userOptions.moduleBaseURL,
+              moduleBasePath: userOptions.moduleBasePath,
+              moduleBase: userOptions.moduleBase,
               pipableStreamOptions: userOptions.pipableStreamOptions,
               cssFiles: []
             } satisfies RscRenderMessage);
           } catch (error) {
-            log.error("Middleware error:", error);
             res.statusCode = 500;
             res.end(error instanceof Error ? error.message : String(error));
           }