vite-plugin-react-server 0.3.17 → 0.3.19

package/plugin/react-client/plugin.ts

@@ -12,20 +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 { MIME_TYPES } from "../config/mimeTypes.js";
+
 
-const log = createLogger("react-client");
 let userOptions: ResolvedUserOptions;
 let userConfig: ResolvedUserConfig;
 let clientManifest: Manifest = {};
@@ -43,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",
@@ -63,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,
         });
       }
@@ -105,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,
@@ -146,67 +141,22 @@ 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);
-            }
-            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();
+          : 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;
           }
-        } else {
+          next();
+        } catch (error) {
+          console.log("Error serving static file:", error);
           next();
         }
       });
@@ -217,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,
@@ -306,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;
@@ -360,7 +307,6 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
               cssFiles: []
             } satisfies RscRenderMessage);
           } catch (error) {
-            log.error("Middleware error:", error);
             res.statusCode = 500;
             res.end(error instanceof Error ? error.message : String(error));
           }

package/plugin/react-server/index.ts

@@ -1,4 +1,5 @@
 import { reactPreservePlugin } from "../preserver/plugin.js";
+import { reactStaticPlugin } from "../react-static/plugin.js";
 import { reactTransformPlugin } from "../transformer/plugin.js";
 import type { StreamPluginOptions } from "../types.js";
 import { reactServerPlugin } from "./plugin.js";
@@ -7,6 +8,7 @@ export function vitePluginReactServer(options = {} as StreamPluginOptions): impo
     return [
       reactTransformPlugin(options),
       reactServerPlugin(options),
+      reactStaticPlugin(options),
       reactPreservePlugin(options),
     ];
   } 

package/plugin/react-server/plugin.ts

@@ -1,6 +1,5 @@
-import { join, resolve, dirname } from "node:path";
+import { join, dirname } from "node:path";
 import { performance } from "node:perf_hooks";
-import { Worker } from "node:worker_threads";
 import React from "react";
 import {
   createLogger,
@@ -8,42 +7,31 @@ import {
   type UserConfig,
   type ViteDevServer,
   type Manifest,
-  build,
+  type Plugin as VitePlugin,
 } from "vite";
 import { checkFilesExist } from "../checkFilesExist.js";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
-import { getPluginRoot } from "../config/getPaths.js";
 import { resolveOptions } from "../config/resolveOptions.js";
 import { resolvePages } from "../config/resolvePages.js";
 import { resolveUserConfig } from "../config/resolveUserConfig.js";
-import { tryManifest } from "../helpers/tryManifest.js";
-import { createBuildLoader } from "../loader/createBuildLoader.js";
 import type {
   BuildTiming,
   CheckFilesExistReturn,
   ReactStreamPluginMeta,
-  ResolvedUserConfig,
   ResolvedUserOptions,
 } from "../types.js";
 import { type StreamPluginOptions } from "../types.js";
-import { createWorker } from "../worker/createWorker.js";
-import { renderPages } from "../worker/html/renderPages.js";
-import { createHandler } from "./createHandler.js";
-import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { createHandler } from "../helpers/createHandler.js";
+import { mkdir,  readFile,  stat,  writeFile } from "node:fs/promises";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import type { ServerResponse } from "node:http";
-import { collectManifestCss } from "../collect-css-manifest.js";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+import { MIME_TYPES } from "../config/mimeTypes.js";
 
 let resolvedConfig: ResolvedConfig | null = null;
 let serverManifestPath: string | null = null;
-let clientManifestPath: string | null = null;
-let outpuptBundle: any;
-let outputOptions: any;
 let loader: ((id: string) => Promise<Record<string, any>>) | null = null;
-let worker: Worker;
-export function reactServerPlugin(
-  options: StreamPluginOptions
-): import("vite").Plugin<{
+
+export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
   meta: ReactStreamPluginMeta;
   addCssFile: (path: string) => void;
 }> {
@@ -54,39 +42,14 @@ export function reactServerPlugin(
   let files: CheckFilesExistReturn;
   // let env: Awaited<ReturnType<typeof getEnv>>;
   let cssModules = new Set<string>();
-  let clientComponents = new Map<string, string>();
   // let define: Record<string, string>;
   let buildCssFiles = new Set<string>();
   let root: string = process.cwd();
-  let userConfig: ResolvedUserConfig;
   let userOptions: ResolvedUserOptions;
-  let moduleGraph: Record<
-    string,
-    {
-      file: string;
-      src: string;
-      name: string;
-      isEntry: boolean;
-      imports: string[];
-      dynamicImports: string[];
-    }
-  > = {};
+  let resolvedPages: string[];
   let serverManifest: Manifest = {};
 
-  interface BuildStats {
-    htmlFiles: number;
-    clientComponents: number;
-    cssFiles: number;
-    totalRoutes: number;
-    timing: {
-      config: number;
-      build: number;
-      render: number;
-      total: number;
-    };
-  }
-
-  const resolvedOptions = resolveOptions(options);
+  const resolvedOptions = resolveOptions(options, false);
   if (resolvedOptions.type === "error") {
     throw resolvedOptions.error;
   }
@@ -104,6 +67,7 @@ export function reactServerPlugin(
       root
     );
   }
+
   return {
     name: "vite:react-stream-server",
     enforce: "post",
@@ -121,11 +85,6 @@ export function reactServerPlugin(
         userOptions.build.server,
         ".vite/manifest.json"
       );
-      clientManifestPath = join(
-        resolvedConfig.build.outDir,
-        userOptions.build.client,
-        ".vite/manifest.json"
-      );
       timing.configResolved = performance.now();
 
       // Verify transformer runs first, preserver runs last
@@ -146,7 +105,45 @@ export function reactServerPlugin(
         );
       }
     },
-    async configurePreviewServer(server) {},
+    
+    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.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();
+        }
+      });
+    },
     async configureServer(server: ViteDevServer) {
       if (typeof loader !== "function") {
         loader = server.ssrLoadModule;
@@ -185,35 +182,31 @@ export function reactServerPlugin(
         activeStreams.clear();
       });
 
-      // server.ws.on("connection", (_socket, _req) => {
-      //   console.log("[vite-plugin-react-server] hooking up ws connection");
-      // });
-
-      // server.ws.on("listening", () => {
-      //   console.log("[vite-plugin-react-server] hooking up ws listening");
-      // });
-
       server.middlewares.use(async (req, res, next) => {
         if (req.headers.accept !== "text/x-component") return next();
         if (typeof loader !== "function") {
           loader = server.ssrLoadModule;
         }
+        const route = req.url?.replace('/index.rsc', '');
         try {
-          const handler = await createHandler(
-            req.url ?? "",
-            {
+          const handler = await createHandler({
+            url: !route || route === "" ? "/" : route,
+            urlMap: files.urlMap,
+            pluginOptions: {
               ...userOptions,
               // we'll leave the Html generation for later
               Html: React.Fragment,
               projectRoot: root,
             },
-            {
+            streamOptions: {
               cssFiles: [],
               logger: createLogger(),
               loader,
               moduleGraph: server.moduleGraph,
+              moduleBasePath: '',
+              moduleBaseURL: '',
             }
-          );
+          });
           if (handler.type === "success") {
             handler.stream?.pipe(res);
           }
@@ -239,12 +232,12 @@ export function reactServerPlugin(
         );
         root = config.root;
       }
-      const resolvedPages = await resolvePages(userOptions.build.pages);
-      if (resolvedPages.type === "error") {
-        throw resolvedPages.error;
+      const resolvedPagesResult = await resolvePages(userOptions.build.pages);
+      if (resolvedPagesResult.type === "error") {
+        throw resolvedPagesResult.error;
       }
-
-      files = await checkFilesExist(resolvedPages.pages, userOptions, root);
+      resolvedPages = resolvedPagesResult.pages;
+      files = await checkFilesExist(resolvedPages, userOptions, root);
 
       const resolvedConfig = resolveUserConfig({
         isClient: false,
@@ -258,7 +251,6 @@ export function reactServerPlugin(
         throw resolvedConfig.error;
       }
 
-      userConfig = resolvedConfig.userConfig;
       return resolvedConfig.userConfig;
     },
     async buildStart() {
@@ -268,240 +260,16 @@ export function reactServerPlugin(
         console.log("Build already started");
       }
     },
-    async closeBundle() {
-      if (!userConfig || resolvedConfig?.command !== "build") return;
-      try {
-        timing.renderStart = performance.now();
-
-        // Get the client manifest
-        const clientManifestResult = tryManifest({
-          root: root,
-          outDir: join(userOptions.build.outDir, userOptions.build.client),
-          ssrManifest: false,
-        });
-
-        if (clientManifestResult.type === "error") {
-          throw clientManifestResult.error;
-        }
-
-        const clientManifest = clientManifestResult.manifest;
-
-
-        worker = await createWorker({
-          projectRoot: root,
-          workerPath: userOptions.htmlWorkerPath,
-          condition: 'react-server',
-          reverseCondition: true,
-          mode: (resolvedConfig?.mode ?? "production") as
-            | "production"
-            | "development",
-          nodeOptions: "--conditions=react-client",
-        });
-
-        // Create the loader
-        if (typeof loader !== "function") {
-          if (!Object.keys(serverManifest).length) {
-            console.warn(
-              "[vite-plugin-react-server] No server manifest found, the plugin will try to use the plugin context - it may differ from vite's manifest."
-            );
-            serverManifest = getBundleManifest({
-              pluginContext: this,
-              bundle: outpuptBundle,
-              moduleBase: userOptions.moduleBase,
-              preserveModulesRoot: userOptions.build.preserveModulesRoot,
-            });
-            if (!Object.keys(serverManifest).length) {
-              console.warn(
-                "[vite-plugin-react-server] That didn't work, retrying to read manifest."
-              );
-              const resolvedServerManifest = tryManifest({
-                root: root,
-                outDir: join(
-                  userOptions.build.outDir,
-                  userOptions.build.server
-                ),
-                ssrManifest: false,
-              });
-              if (resolvedServerManifest.type === "error") {
-                // dont build the static files without a server manifest
-                console.error(
-                  "[vite-plugin-react-server] Failed to read manifest, aborting build."
-                );
-                return;
-              }
-              serverManifest = resolvedServerManifest.manifest;
-            }
-          }
-          loader = createBuildLoader({
-            root: root,
-            userConfig,
-            userOptions,
-            pluginContext: this,
-            serverManifest,
-            clientManifest,
-          });
-        }
-        const resolvedPages = await resolvePages(userOptions.build.pages);
-        if (resolvedPages.type === "error") {
-          throw resolvedPages.error;
-        }
-
-        const onCssFile = async (path: string, parentUrl: string) => {
-          if (buildCssFiles && path.endsWith(".css")) {
-            buildCssFiles.add(path);
-            if (parentUrl.endsWith(userOptions.build.client)) {
-              // copy the file to the client build dir
-              const serverPath = join(
-                userOptions.build.outDir,
-                userOptions.build.server,
-                path
-              );
-              await writeFile(
-                serverPath,
-                await readFile(
-                  join(
-                    root,
-                    userOptions.build.outDir,
-                    userOptions.build.client,
-                    path
-                  )
-                )
-              );
-            } else {
-              // copy the file to the client build dir, assume it's in server build dir
-              const clientPath = join(
-                userOptions.build.outDir,
-                userOptions.build.client,
-                path
-              );
-              await mkdir(dirname(clientPath), { recursive: true });
-              await writeFile(
-                clientPath,
-                await readFile(
-                  join(
-                    root,
-                    userOptions.build.outDir,
-                    userOptions.build.server,
-                    path
-                  )
-                )
-              );
-            }
-          }
-        };
-
-        const { failedRoutes, completedRoutes } = await renderPages(
-          this,
-          resolvedPages.pages,
-          files,
-          {
-            pipableStreamOptions: {
-              bootstrapModules: clientManifest["index.html"]?.file
-                ? [clientManifest["index.html"].file.startsWith('/') ? clientManifest["index.html"].file : '/' + clientManifest["index.html"].file]
-                : [],
-            },
-            moduleBasePath: "",
-            moduleBaseURL: "",
-            clientCss: clientManifest["index.html"]?.css
-              ? clientManifest["index.html"].css.map(css => css.startsWith('/') ? css : '/' + css)
-              : [],
-            userConfig,
-            pluginOptions: userOptions,
-            worker: worker,
-            clientManifest: clientManifest,
-            serverManifest: serverManifest,
-            loader,
-            onCssFile: onCssFile,
-          }
-        );
-
-        if (failedRoutes.size) {
-          console.error(
-            "[vite-plugin-react-server] Failed to render routes:",
-            failedRoutes
-          );
-        }
-        if (worker) await worker.terminate();
-
-        timing.renderEnd = performance.now();
-        timing.total = (timing.renderEnd - timing.start) / 1000;
-
-        // Update stats to include CSS and client components
-        const stats: BuildStats = {
-          htmlFiles: userOptions.build.pages.length,
-          clientComponents: Object.keys(clientManifest).filter(
-            userOptions.autoDiscover.clientComponents
-          ).length,
-          cssFiles: Object.keys(clientManifest)
-            .flatMap(userOptions.autoDiscover.cssPattern)
-            .filter(Boolean).length,
-          totalRoutes: userOptions.build.pages.length,
-          timing: {
-            config: ((timing.configResolved ?? 0) - timing.start) / 1000,
-            build:
-              ((timing.buildStart ?? 0) - (timing.configResolved ?? 0)) / 1000,
-            render:
-              ((timing.renderEnd ?? 0) - (timing.renderStart ?? 0)) / 1000,
-            total: (timing.renderEnd ?? 0 - timing.start) / 1000,
-          },
-        };
-
-        // Format duration helper
-        const formatDuration = (seconds: number) => {
-          if (seconds < 0.001) {
-            return `${(seconds * 1000000).toFixed(0)}μs`;
-          }
-          if (seconds < 1) {
-            return `${(seconds * 1000).toFixed(0)}ms`;
-          }
-          return `${seconds.toFixed(2)}s`;
-        };
-
-        console.log("\n[vite-plugin-react-server] Build Summary:");
-        console.log("─".repeat(50));
-        console.log(`�� Generated ${stats.htmlFiles} HTML files`);
-        console.log(`🎯 Processed ${stats.clientComponents} client components`);
-        console.log(`🎨 Included ${stats.cssFiles} CSS files`);
-        console.log(`🛣️  Total routes: ${stats.totalRoutes}`);
-        console.log("─".repeat(50));
-        console.log("⏱️  Timing:");
-        console.log(`  Config:  ${formatDuration(stats.timing.config)}`);
-        console.log(`  Build:   ${formatDuration(stats.timing.build)}`);
-        console.log(`  Render:  ${formatDuration(stats.timing.render)}`);
-        console.log("  ".repeat(12));
-        console.log(`  Total:   ${formatDuration(stats.timing.total)}`);
-        console.log("─".repeat(50));
-
-        // Ensure worker is terminated
-        if (worker) {
-          await worker.terminate();
-          worker = null as any;
-        }
-      } catch (error) {
-        console.error("[vite-plugin-react-server] Build failed:", error);
-        // Make sure to terminate worker even on error
-        if (worker) await worker.terminate();
-        worker = null as any;
-        throw error;
-      }
-    },
-    async buildEnd(error) {
-      if (error) {
-        console.error("[vite-plugin-react-server] Build error:", error);
-        return;
-      }
-    },
     handleHotUpdate({ file }) {
       if (file.endsWith(".css")) {
         cssModules.add(file);
       }
     },
-    async generateBundle(options, bundle) {
+    async generateBundle(_options, bundle) {
       if (!resolvedConfig) {
         throw new Error("Resolved config not found");
       }
-      outpuptBundle = bundle;
-      outputOptions = options;
+
       // Create manifest entries for each chunk
       serverManifest = getBundleManifest({
         pluginContext: this,

package/plugin/react-static/index.ts

@@ -0,0 +1 @@
+export { reactStaticPlugin } from "./plugin.js";