vite-plugin-react-server 0.3.11 → 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/react-client/index.ts

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

package/plugin/react-client/plugin.ts

@@ -1,5 +1,6 @@
 import { type Manifest, type Plugin, type ResolvedConfig } from "vite";
 import type {
+  CheckFilesExistReturn,
   ResolvedUserConfig,
   ResolvedUserOptions,
   StreamPluginOptions,
@@ -7,16 +8,34 @@ import type {
 import { resolveOptions } from "../config/resolveOptions.js";
 import { resolveUserConfig } from "../config/resolveUserConfig.js";
 import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
-import { dirname, join, resolve } from "node:path";
+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 loader: (id: string) => Promise<Record<string, any>> = (id: string) =>
+  import(id);
+let worker: Worker;
+let files: CheckFilesExistReturn;
+
 export function reactClientPlugin(options: StreamPluginOptions): Plugin {
   const resolvedOptions = resolveOptions(options, true);
   if (resolvedOptions.type === "error") {
@@ -24,40 +43,54 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
   }
   userOptions = resolvedOptions.userOptions;
   root = userOptions.projectRoot;
+  const rscWorkerPath = join(getPluginRoot(), DEFAULT_CONFIG.RSC_WORKER_PATH);
 
-  console.log("[vite:react-client] Initial setup:", {
-    projectRoot: userOptions.projectRoot,
-    root: root,
-    clientEntry: userOptions.clientEntry
-  });
+  log.info("RSC worker path:" + rscWorkerPath);
 
   return {
     name: "vite:react-client",
 
     async config(config, configEnv) {
-
-      if(typeof config.root === "string" &&
+      if (
+        typeof config.root === "string" &&
         config.root !== root &&
         config.root !== process.cwd() &&
-        config.root !== "") {
+        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") {
+      if (pages.type === "error") {
         throw pages.error;
       }
 
-      const files = await checkFilesExist(pages.pages, userOptions, root);
-
+      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({
         isClient: true,
         config,
         configEnv,
         userOptions,
-        files
+        files,
       });
 
       if (resolvedConfig.type === "error") {
@@ -74,13 +107,18 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
 
     async generateBundle(options, bundle) {
       // Create manifest entries for each chunk
-      clientManifest = getBundleManifest(this, bundle, undefined);
+      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
+        resolvedConfig.environments["client"].build.outDir as string,
+        resolvedConfig.environments["client"].build.manifest as string
       );
       await mkdir(dirname(manifestPath), { recursive: true });
 
@@ -89,27 +127,83 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
         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) => {
-        console.log('req.url', req.url);
-        if (req.url && req.url.endsWith('.js')) {
-          const nodeRoot = process.env['NODE_PATH'] ?? process.cwd();
-          
+        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(req.url);
+            const stats = await stat(join(fileRoot, value));
             if (stats.isFile()) {
-              const content = await readFile(req.url, 'utf-8');
-              res.setHeader('Content-Type', 'application/javascript');
+              const content = await readFile(join(fileRoot, value), "utf-8");
+              res.setHeader("Content-Type", "application/javascript");
               res.end(content);
+              return;
             } else {
               next();
             }
           } catch (error) {
-            console.error('error', 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 {
@@ -122,27 +216,158 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
       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) => {
-        console.log('req.url', req.url);
-        if (req.url && req.url.endsWith('.js')) {
-          const filePath = join(root, req.url);
+        if (!req.url) {
+          next();
+          return;
+        }
+        if (
+          req.url.endsWith(".rsc") ||
+          req.headers.accept?.includes("text/x-component")
+        ) {
           try {
-            const stats = await stat(filePath);
-            if (stats.isFile()) {
-              const content = await readFile(filePath, 'utf-8');
-              res.setHeader('Content-Type', 'application/javascript');
-              res.end(content);
+            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 {
-              next();
+              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) {
-            next();
+            log.error("Middleware error:", error);
+            res.statusCode = 500;
+            res.end(error instanceof Error ? error.message : String(error));
           }
-        } else if(req.url && req.url.endsWith('.rsc')) {
-          // stream the rsc stream
-          throw new Error('Not implemented');
+        } else {
+          next();
         }
       });
-    }
+    },
   };
 }

package/plugin/react-server/createHandler.ts

@@ -29,9 +29,9 @@ export async function createHandler<T>(
 
   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;
@@ -63,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")) {
@@ -120,7 +126,6 @@ export async function createHandler<T>(
   if (streamOptions.cssFiles) {
     streamOptions.cssFiles.forEach((css) => cssModules.add(css));
   }
-
   const stream = createRscStream({
     Html: Html,
     Page: Page,
@@ -139,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,61 +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,
-        })
-      )
-    : [];
+
+// 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;
-  console.log("[vite:plugin-react-server] Creating RSC stream with options:", {
-    moduleBasePath,
-    importMap: pipableStreamOptions?.importMap,
-    moduleRootPath: moduleBasePath // Make sure this matches client component paths
-  });
-  return renderToPipeableStream(
-    React.createElement(
-      Html,
+  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,
       {
-        key: "html",
-        ...(htmlIsFragment ? {} : htmlProps)
-      },
-      React.createElement(Page, { key: "page", ...props }),
-      ...css
-    ),
-    moduleBasePath,
-    {
-      onError: logger?.error ?? console.error,
-      onPostpone: logger?.info ?? console.info,
-      environmentName: "Server",
-      importMap: {
-        imports: {
-          ...pipableStreamOptions?.importMap?.imports,
-          // Make sure paths are absolute and match module resolution
-          '/': moduleBasePath
-        }
-      },
-      ...pipableStreamOptions
-    }
-  );
+        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;
+  }
 }