vite-plugin-react-server 0.3.18 → 1.0.0

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,43 +7,35 @@ 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,
+  CssContent,
   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 { cssFiles } from "../worker/rsc/state.js";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+import { MIME_TYPES } from "../config/mimeTypes.js";
+import { InlineCssCollector } from "../css-collector-inline.js";
+import { CssCollector } from "../css-collector.js";
+import { collectModuleGraphCss } from "../collect-manifest-client-files.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;
 }> {
@@ -55,39 +46,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;
   }
@@ -105,6 +71,7 @@ export function reactServerPlugin(
       root
     );
   }
+
   return {
     name: "vite:react-stream-server",
     enforce: "post",
@@ -122,11 +89,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
@@ -147,7 +109,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;
@@ -186,35 +186,63 @@ 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;
         }
+        let route = req.url?.replace("/index.rsc", "");
+        if (!route || route === "") {
+          route = "/";
+        }
         try {
-          const handler = await createHandler(
-            req.url ?? "",
-            {
-              ...userOptions,
-              // we'll leave the Html generation for later
-              Html: React.Fragment,
-              projectRoot: root,
+          const handler = await createHandler({
+            root: root,
+            url:
+              typeof userOptions.moduleBaseURL === "string" &&
+              userOptions.moduleBaseURL !== ""
+                ? new URL(route, userOptions.moduleBaseURL).href
+                : route,
+            route: route,
+            getCss: async (id) => {
+              const cssFiles = await collectModuleGraphCss({
+                moduleGraph: server.moduleGraph,
+                pagePath: id,
+                onCss: undefined,
+              })
+              if (userOptions.inlineCss) {
+                const InlineMap = new Map<string, CssContent>();
+                await Promise.all(Array.from(cssFiles.entries()).map(async ([file, fileUrl]) => {
+                  const content = await server.ssrLoadModule(fileUrl + "?inline");
+                  if (content) {
+                    InlineMap.set(file,  {
+                      content: content['default'],
+                      path: file,
+                      type: "text/css",
+                    });
+                  }
+                }));
+                return InlineMap;
+              }
+              return cssFiles;
             },
-            {
-              cssFiles: [],
-              logger: createLogger(),
-              loader,
-              moduleGraph: server.moduleGraph,
-            }
-          );
+            cssFiles: [],
+            logger: createLogger(),
+            loader,
+            moduleBase: userOptions.moduleBase,
+            moduleBasePath: userOptions.moduleBasePath,
+            moduleBaseURL: userOptions.moduleBaseURL,
+            moduleRootPath: root,
+            pipableStreamOptions: userOptions.pipableStreamOptions,
+            Html: React.Fragment,
+            CssCollector: userOptions.inlineCss ? InlineCssCollector as any : CssCollector as any,
+            onCssFile: undefined,
+            inlineCss: userOptions.inlineCss,
+            propsPath: files.urlMap.get(route)?.props ?? route,
+            pagePath: files.urlMap.get(route)?.page ?? route,
+            pageExportName: userOptions.pageExportName,
+            propsExportName: userOptions.propsExportName,
+          });
           if (handler.type === "success") {
             handler.stream?.pipe(res);
           }
@@ -240,12 +268,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,
@@ -259,7 +287,6 @@ export function reactServerPlugin(
         throw resolvedConfig.error;
       }
 
-      userConfig = resolvedConfig.userConfig;
       return resolvedConfig.userConfig;
     },
     async buildStart() {
@@ -269,234 +296,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: files.urlMap.size,
-          clientComponents: clientComponents.size,
-          cssFiles: cssFiles.size,
-          totalRoutes: files.urlMap.size,
-          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(`🎨 Included ${buildCssFiles.size} CSS files`);
-        console.log(`🛣️  Total routes: ${files.urlMap.size}`);
-        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";