vite-plugin-react-server 0.3.10 → 0.3.12

package/plugin/loader/rsc/messageHandler.tsx

@@ -0,0 +1 @@
+ 

package/plugin/loader/rsc/rsc-worker.development.ts

@@ -0,0 +1 @@
+ 

package/plugin/plugin.ts

@@ -1,4 +1,4 @@
-import "./assertServerCondition.js";
+import { assertServerCondition } from "./assertServerCondition.js";
 export { reactServerPlugin } from "./react-server/plugin.js";
 export { reactClientPlugin } from "./react-client/plugin.js";
 export { reactTransformPlugin } from "./transformer/plugin.js";
@@ -6,3 +6,4 @@ export { reactPreservePlugin } from "./preserver/plugin.js";
 export { vitePluginReactServer } from "./react-server/index.js";
 // the main plugin is version is the server version, if you want the client version, use the `vite-plugin-react-server/client` import
 // this is because the workflow assumes main thread = react server condition
+assertServerCondition(process);

package/plugin/preserver/plugin.ts

@@ -1,6 +1,7 @@
 import type { Node } from "estree";
 import MagicString from "magic-string";
 import type { StreamPluginOptions } from "../types.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
 
 const REACT_DIRECTIVES = new Set(["use client", "use server"]);
 
@@ -15,7 +16,7 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
       order: "post", // Ensure this runs last in transform phase
       handler(code: string, id: string) {
         // Skip node_modules and vite files
-        if (id.includes("node_modules") || id.includes("vite/dist")) {
+        if (id.includes("node_modules") || id.includes("vite/dist") || !id.match(DEFAULT_CONFIG.FILE_REGEX)) {
           return null;
         }
 

package/plugin/react-client/index.ts

@@ -1 +1,12 @@
-export { reactClientPlugin } from "./plugin.js";
+import { reactPreservePlugin } from "../plugin.js";
+import { reactTransformPlugin } from "../transformer/plugin.js";
+import type { StreamPluginOptions } from "../types.js";
+import { reactClientPlugin } from "./plugin.js";
+
+export function vitePluginReactClient(options = {} as StreamPluginOptions): import("vite").Plugin[] {
+    return [
+      reactClientPlugin(options),
+      reactTransformPlugin(options),
+      reactPreservePlugin(options),
+    ];
+  } 

package/plugin/react-client/plugin.ts

@@ -1,33 +1,373 @@
-import type { Plugin as VitePlugin, UserConfig } from "vite";
-
-import type { ResolvedUserOptions, StreamPluginOptions } from "../types.js";
+import { type Manifest, type Plugin, type ResolvedConfig } from "vite";
+import type {
+  CheckFilesExistReturn,
+  ResolvedUserConfig,
+  ResolvedUserOptions,
+  StreamPluginOptions,
+} from "../types.js";
 import { resolveOptions } from "../config/resolveOptions.js";
 import { resolveUserConfig } from "../config/resolveUserConfig.js";
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
+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";
 
+const log = createLogger("react-client");
 let userOptions: ResolvedUserOptions;
+let userConfig: ResolvedUserConfig;
+let clientManifest: Manifest = {};
+let resolvedConfig: ResolvedConfig;
+let root: string;
+let loader: (id: string) => Promise<Record<string, any>> = (id: string) =>
+  import(id);
+let worker: Worker;
+let files: CheckFilesExistReturn;
 
-export function reactClientPlugin(options: StreamPluginOptions): VitePlugin {
-  const resolvedOptions = resolveOptions(options);
+export function reactClientPlugin(options: StreamPluginOptions): Plugin {
+  const resolvedOptions = resolveOptions(options, true);
   if (resolvedOptions.type === "error") {
     throw resolvedOptions.error;
   }
   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-stream-client",
-    async config(config): Promise<UserConfig> {
+    name: "vite:react-client",
+
+    async config(config, configEnv) {
+      if (
+        typeof config.root === "string" &&
+        config.root !== root &&
+        config.root !== process.cwd() &&
+        config.root !== ""
+      ) {
+        root = config.root;
+        console.log("[vite:react-client] Root updated:", root);
+      }
+      if (configEnv.command === "serve" && !configEnv.isPreview && !worker) {
+        worker = await createWorker({
+          projectRoot: root,
+          workerPath: rscWorkerPath,
+          reverseCondition: true,
+        });
+      }
+      const pages = await resolvePages(userOptions.build.pages);
+      if (pages.type === "error") {
+        throw pages.error;
+      }
+
+      if (pages.pages.length > 0) {
+        files = await checkFilesExist(pages.pages, userOptions, root);
+      } else {
+        files = {
+          pageMap: new Map(),
+          propsMap: new Map(),
+          propsSet: new Set(),
+          pageSet: new Set(),
+          urlMap: new Map(),
+          errors: [],
+        };
+      }
+
       const resolvedConfig = resolveUserConfig({
-        condition: "react-client",
+        isClient: true,
         config,
-        configEnv: { command: "build", mode: "production" },
+        configEnv,
         userOptions,
+        files,
       });
 
       if (resolvedConfig.type === "error") {
         throw resolvedConfig.error;
       }
 
-      return resolvedConfig.userConfig;
-    }
+      userConfig = resolvedConfig.userConfig;
+      return userConfig;
+    },
+
+    configResolved(config) {
+      resolvedConfig = config;
+    },
+
+    async generateBundle(options, bundle) {
+      // Create manifest entries for each chunk
+      clientManifest = getBundleManifest({
+        pluginContext: this,
+        bundle,
+        moduleBase: userOptions.moduleBase,
+        preserveModulesRoot: userOptions.build.preserveModulesRoot,
+      });
+
+      // Write manifest immediately after generation
+      const manifestPath = join(
+        root,
+        resolvedConfig.environments["client"].build.outDir as string,
+        resolvedConfig.environments["client"].build.manifest as string
+      );
+      await mkdir(dirname(manifestPath), { recursive: true });
+
+      return await writeFile(
+        manifestPath,
+        JSON.stringify(clientManifest, null, 2)
+      );
+    },
+
+    async configurePreviewServer(server) {
+      if (root !== server.config.root) {
+        root = server.config.root;
+      }
+      if (typeof loader !== "function") {
+        loader = (id: string) => import(id);
+      }
+      const normalize = createInputNormalizer({
+        root,
+        removeExtension: false,
+        preserveModulesRoot: userOptions.build.preserveModulesRoot
+          ? userOptions.moduleBase
+          : undefined,
+      });
+      server.middlewares.use(async (req, res, next) => {
+        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);
+            }
+            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 {
+          next();
+        }
+      });
+    },
+    // setup dev server
+    async configureServer(server) {
+      if (typeof loader !== "function") {
+        loader = server.ssrLoadModule;
+      }
+      if (!worker) {
+        log.info("Creating RSC worker...");
+        worker = await createWorker({
+          projectRoot: root,
+          workerPath: rscWorkerPath,
+          condition: "react-client",
+        });
+        log.info("RSC worker created");
+      }
+      const normalize = createInputNormalizer({
+        root,
+        removeExtension: false,
+        preserveModulesRoot: userOptions.build.preserveModulesRoot
+          ? userOptions.moduleBase
+          : undefined,
+      });
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) {
+          next();
+          return;
+        }
+        if (
+          req.url.endsWith(".rsc") ||
+          req.headers.accept?.includes("text/x-component")
+        ) {
+          try {
+            const path = req.url?.includes("index.rsc")
+              ? req.url.replace("index.rsc", "")
+              : req.url?.replace(".rsc", "");
+            let [key, value] = normalize(path);
+
+            let pageImport = DEFAULT_CONFIG.PAGE as string;
+            let propsImport = DEFAULT_CONFIG.PROPS as string;
+            // PAGE
+            // no trailing slash
+            const pathNoTrailing = path?.replace(/\/$/, '');
+            if (files.urlMap.has(req.url)) {
+              pageImport = files.urlMap.get(req.url)!.page;
+              propsImport = files.urlMap.get(req.url)!.props;
+            } else if (files.urlMap.has(pathNoTrailing)) {
+              pageImport = files.urlMap.get(pathNoTrailing)!.page;
+              propsImport = files.urlMap.get(pathNoTrailing)!.props;
+            } else if (files.urlMap.has(path)) {
+              pageImport = files.urlMap.get(path)!.page;
+              propsImport = files.urlMap.get(path)!.props;
+            } else if (files.urlMap.has(value)) {
+              pageImport = files.urlMap.get(value)!.page;
+              propsImport = files.urlMap.get(value)!.props;
+            } else if (files.urlMap.has(key)) {
+              pageImport = files.urlMap.get(key)!.page;
+              propsImport = files.urlMap.get(key)!.props;
+            } else {
+              console.warn(`Page/props import not found for any of the following (in order of priority): ${[req.url, pathNoTrailing, path, value, key].filter(Boolean).join(', ')} available pages:${Array.from(files.urlMap.keys()).join(', ')}`);
+            }
+            // Set headers early
+            res.setHeader("Content-Type", "text/x-component");
+            res.setHeader("Transfer-Encoding", "chunked");
+            res.setHeader("Connection", "keep-alive");
+
+            let hasError = false;
+            const timeout = setTimeout(() => {
+              if (!hasError) {
+                hasError = true;
+                res.statusCode = 500;
+                res.end("RSC render timeout");
+              }
+            }, 5000);
+
+            const messageHandler = (
+              message: RscWorkerMessage | RscWorkerResponse
+            ) => {
+              try {
+                switch (message.type) {
+                  case "RSC_CHUNK":
+                    // Write chunk directly to response
+                    if (!hasError) {
+                      res.write(message.chunk);
+                    }
+                    break;
+
+                  case "RSC_END":
+                    clearTimeout(timeout);
+                    if (!hasError) {
+                      res.end();
+                    }
+                    worker.off("message", messageHandler);
+                    break;
+
+                  case "ERROR":
+                    clearTimeout(timeout);
+                    log.error("Render error", message);
+                    if (!hasError) {
+                      hasError = true;
+                      res.statusCode = 500;
+                      res.end(message.error);
+                    }
+                    worker.off("message", messageHandler);
+                    break;
+                }
+              } catch (error) {
+                clearTimeout(timeout);
+                if (!hasError) {
+                  hasError = true;
+                  res.statusCode = 500;
+                  res.end(
+                    error instanceof Error ? error.message : String(error)
+                  );
+                }
+                worker.off("message", messageHandler);
+              }
+            };
+
+            worker.on("message", messageHandler);
+            worker.once("error", (error) => {
+              clearTimeout(timeout);
+              if (!hasError) {
+                hasError = true;
+                res.statusCode = 500;
+                res.end(error instanceof Error ? error.message : String(error));
+              }
+              worker.off("message", messageHandler);
+            });
+            worker.postMessage({
+              type: "RSC_RENDER",
+              id: value,
+              pageImport,
+              propsImport,
+              url: req.url ?? "/",
+              pageExportName:
+                userOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT_NAME,
+              propsExportName:
+                userOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT_NAME,
+              outDir: userOptions.build.outDir,
+              projectRoot: root,
+              moduleRootPath:
+                userOptions.build.preserveModulesRoot === true
+                  ? userOptions.moduleBase
+                  : "",
+              moduleBaseURL: ``,
+              moduleBasePath: '/',
+              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));
+          }
+        } else {
+          next();
+        }
+      });
+    },
   };
 }

package/plugin/react-server/createHandler.ts

@@ -7,7 +7,7 @@ import {
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { resolvePage } from "../resolvePage.js";
 import { resolveProps } from "../resolveProps.js";
-import type { CreateHandlerOptions, StreamPluginOptions } from "../types.js";
+import type { CreateHandlerOptions, ResolvedUserOptions } from "../types.js";
 import { createRscStream } from "./createRscStream.js";
 
 type CreateHandlerResult = 
@@ -22,22 +22,16 @@ interface HandlerAssets {
 
 export async function createHandler<T>(
   url: string,
-  pluginOptions: Pick<
-    StreamPluginOptions,
-    "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName"
-  > &
-    Required<
-      Pick<StreamPluginOptions, "moduleBase" | "moduleBasePath" | "projectRoot">
-    >,
+  pluginOptions: ResolvedUserOptions,
   streamOptions: CreateHandlerOptions<T>
 ): Promise<CreateHandlerResult> {
   const root = pluginOptions.projectRoot ?? process.cwd();
 
   const Html = pluginOptions.Html ?? DEFAULT_CONFIG.HTML;
   const pageExportName =
-    pluginOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT;
+    pluginOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT_NAME;
   const propsExportName =
-    pluginOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT;
+    pluginOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT_NAME;
   const controller = new AbortController();
 
   const cssFiles = streamOptions.cssFiles;
@@ -52,13 +46,13 @@ export async function createHandler<T>(
 
   const cssModules = new Set<string>();
 
-  if (!(streamOptions.manifest || streamOptions.moduleGraph))
-    throw new Error("Missing manifest or moduleGraph, pass it to options.");
+  if (!(streamOptions.serverManifest || streamOptions.moduleGraph))
+    throw new Error("Missing server manifest or moduleGraph, pass it to options.");
 
-  const getCss = streamOptions.manifest
+  const getCss = streamOptions.serverManifest
     ? (id: string) =>
         collectManifestCss(
-          streamOptions.manifest!,
+          streamOptions.serverManifest!,
           root,
           id,
           streamOptions.onCssFile
@@ -69,7 +63,13 @@ export async function createHandler<T>(
     try {
       const mod = await streamOptions.loader(id);
       const pageCss = await Promise.resolve(getCss(id));
-      Array.from(pageCss.keys()).forEach((css) => cssModules.add(css));
+      Array.from(pageCss.keys()).forEach((css) => {
+        cssModules.add(css);
+        // Notify about new CSS file if callback exists
+        if (streamOptions.onCssFile) {
+          streamOptions.onCssFile(css);
+        }
+      });
       return mod as Record<string, any>;
     } catch (e: any) {
       if (e.message?.includes("module runner has been closed")) {
@@ -126,12 +126,11 @@ export async function createHandler<T>(
   if (streamOptions.cssFiles) {
     streamOptions.cssFiles.forEach((css) => cssModules.add(css));
   }
-
   const stream = createRscStream({
     Html: Html,
     Page: Page,
     props: props,
-    moduleBasePath: pluginOptions.moduleBasePath,
+    moduleBasePath: '',
     logger: streamOptions.logger ?? createLogger(),
     cssFiles: Array.from(cssModules),
     route: url,
@@ -145,7 +144,6 @@ export async function createHandler<T>(
   });
 
   if (!stream) {
-    console.log("[createHandler] No stream created for route:", url);
     return { type: "skip" as const };
   }
 

package/plugin/react-server/createRscStream.ts

@@ -1,49 +1,82 @@
 import * as React from "react";
-import type { PipeableStream } from "react-dom/server";
 // @ts-ignore
 import { renderToPipeableStream } from "react-server-dom-esm/server.node";
-import { CssCollector } from "../components.js";
-import type { RscStreamOptions } from "../types.js";
+import type { PipeableStreamOptions } from "../worker/types.js";
+import type { Logger } from "vite";
 
-export function createRscStream(
-  streamOptions: RscStreamOptions
-): PipeableStream {
-  const {
-    Html,
-    Page,
-    props,
-    logger,
-    cssFiles,
-    moduleBasePath,
-    pipableStreamOptions,
-    htmlProps,
-  } = streamOptions;
 
-  const css = Array.isArray(cssFiles)
-    ? cssFiles.map((css, index) =>
-        React.createElement(CssCollector, {
-          key: `css-${index}`,
-          url: css.startsWith("/") ? css : `/${css}`,
-          moduleBasePath,
-        })
-      )
-    : [];
-  return renderToPipeableStream(
-    React.createElement(
-      Html,
-      {
-        key: "html",
-        ...htmlProps
-      },
-      React.createElement(Page, { key: "page", ...props }),
-      ...css
-    ),
-    moduleBasePath,
-    {
-      onError: logger?.error ?? console.error,
-      onPostpone: logger?.info ?? console.info,
-      environmentName: "Server",
-      ...pipableStreamOptions
-    }
+// CSS collector component
+function CssCollector({
+  children,
+  cssFiles,
+}: {
+  children?: React.ReactNode;
+  cssFiles: string[];
+}) {
+  return React.createElement(
+    React.Fragment,
+    null,
+    ...cssFiles.map((css) => {
+      const url = css.startsWith('/') || css.startsWith('http') || css.startsWith('./') ? css : '/'+css
+      return React.createElement('link', {
+        key: css,
+        rel: 'stylesheet',
+        href: url
+      })
+    }),
+    children
   );
 }
+
+export function createRscStream({
+  Html,
+  Page,
+  props,
+  moduleBasePath,
+  logger,
+  cssFiles = [],
+  route,
+  url,
+  pipableStreamOptions,
+  htmlProps,
+}: {
+  Html: React.ComponentType<any>;
+  Page: React.ComponentType<any>;
+  props: any;
+  moduleBasePath: string;
+  logger: Logger;
+  cssFiles?: string[];
+  route: string;
+  url: string;
+  pipableStreamOptions?: PipeableStreamOptions;
+  htmlProps?: any;
+}) {
+  
+  const htmlIsFragment = Html == React.Fragment;
+  const withCss = React.createElement(
+    CssCollector,
+    { cssFiles },
+    React.createElement(Page, props)
+  )
+  // Otherwise wrap with Html component
+  const content = htmlIsFragment 
+    ? withCss
+    : React.createElement(Html, htmlProps, withCss);
+  try {
+    return renderToPipeableStream(
+      content,
+      moduleBasePath,
+      {
+        onError: (error: 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;
+  }
+}