vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/react-server/plugin.ts

@@ -1,74 +1,61 @@
-import { join, dirname } from "node:path";
 import { performance } from "node:perf_hooks";
-import React from "react";
 import {
-  createLogger,
   type ResolvedConfig,
   type UserConfig,
   type ViteDevServer,
   type Manifest,
   type Plugin as VitePlugin,
 } from "vite";
-import { checkFilesExist } from "../checkFilesExist.js";
 import { resolveOptions } from "../config/resolveOptions.js";
-import { resolvePages } from "../config/resolvePages.js";
 import { resolveUserConfig } from "../config/resolveUserConfig.js";
 import type {
+  AutoDiscoveredFiles,
   BuildTiming,
-  CheckFilesExistReturn,
-  CssContent,
   ReactStreamPluginMeta,
   ResolvedUserOptions,
 } from "../types.js";
 import { type StreamPluginOptions } from "../types.js";
-import { createHandler } from "../helpers/createHandler.js";
-import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
+import {
+  resolveAutoDiscover
+} from "../config/resolveAutoDiscover.js";
+import { getCondition } from "../config/getCondition.js";
+import { configureReactServer } from "./server.js";
+import { configurePreviewServer } from "../react-static/configurePreviewServer.js";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
-import type { ServerResponse } from "node:http";
-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 loader: ((id: string) => Promise<Record<string, any>>) | null = null;
+let cwd: string;
 
+if (getCondition() !== "react-server") {
+  throw new Error(
+    "Condition mismatch, should be react-server but got " +
+      process.env["NODE_OPTIONS"]
+  );
+}
 export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
   meta: ReactStreamPluginMeta;
-  addCssFile: (path: string) => void;
 }> {
   const timing: BuildTiming = {
     start: performance.now(),
   };
 
-  let files: CheckFilesExistReturn;
-  // let env: Awaited<ReturnType<typeof getEnv>>;
-  let cssModules = new Set<string>();
-  // let define: Record<string, string>;
-  let buildCssFiles = new Set<string>();
-  let root: string = process.cwd();
+  let autoDiscoveredFiles: AutoDiscoveredFiles;
   let userOptions: ResolvedUserOptions;
-  let resolvedPages: string[];
   let serverManifest: Manifest = {};
 
-  const resolvedOptions = resolveOptions(options, false);
+  const resolvedOptions = resolveOptions(options);
   if (resolvedOptions.type === "error") {
     throw resolvedOptions.error;
   }
   userOptions = resolvedOptions.userOptions;
+  cwd = process.cwd();
   if (
-    userOptions.projectRoot != root &&
+    userOptions.projectRoot != cwd &&
     typeof userOptions.projectRoot === "string" &&
-    userOptions.projectRoot !== process.cwd() &&
     userOptions.projectRoot !== ""
   ) {
-    root = userOptions.projectRoot;
-    console.log(
-      "[vite:plugin-react-server] Root dir changed in plugin",
-      userOptions.projectRoot,
-      root
+    throw new Error(
+      "[RSC] Project root is not the current working directory, please set projectRoot in your config"
     );
   }
 
@@ -77,24 +64,15 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
     enforce: "post",
     api: {
       meta: { timing },
-      addCssFile(path: string) {
-        buildCssFiles.add(path);
-      },
     },
     configResolved(_resolvedConfig) {
       resolvedConfig = _resolvedConfig;
-
-      serverManifestPath = join(
-        userOptions.build.outDir,
-        userOptions.build.server,
-        ".vite/manifest.json"
-      );
       timing.configResolved = performance.now();
 
       // Verify transformer runs first, preserver runs last
       const plugins = resolvedConfig.plugins;
       const transformerIndex = plugins.findIndex(
-        (p) => p.name === "vite:react-transform"
+        (p) => p.name === "vite:react-server-transform"
       );
       const preserverIndex = plugins.findIndex(
         (p) => p.name === "vite-plugin-react-server:preserve-directives"
@@ -111,179 +89,44 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
     },
 
     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();
-        }
+      await configurePreviewServer({
+        server,
+        userOptions,
       });
     },
     async configureServer(server: ViteDevServer) {
-      if (typeof loader !== "function") {
-        loader = server.ssrLoadModule;
-      }
-      if (
-        server.config.root !== root &&
-        typeof server.config.root === "string" &&
-        server.config.root !== process.cwd() &&
-        server.config.root !== ""
-      ) {
-        console.log(
-          "[vite:plugin-react-server] Root dir changed in configureServer hook",
-          server.config.root,
-          root
-        );
-        root = server.config.root;
-      }
-
-      const activeStreams = new Set<ServerResponse>();
-
-      // Handle Vite server restarts
-      server.ws.on("restart", (path) => {
-        console.log(
-          "[vite-plugin-react-server] 🔧 Plugin changed, preparing for restart:",
-          path
-        );
-
-        // Close streams with restart message
-        for (const res of activeStreams) {
-          res.writeHead(503, {
-            "Content-Type": "text/x-component",
-            "Retry-After": "1",
-          });
-          res.end('{"error":"Server restarting..."}');
-        }
-        activeStreams.clear();
-      });
-
-      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({
-            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,
-            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);
-          }
-          activeStreams.add(res);
-        } finally {
-          res.on("close", () => {
-            activeStreams.delete(res);
-          });
-        }
+      configureReactServer({
+        server,
+        autoDiscoveredFiles,
+        userOptions,
+        serverManifest,
       });
     },
     async config(config, configEnv): Promise<UserConfig> {
-      if (
-        typeof config.root === "string" &&
-        config.root !== root &&
-        config.root !== process.cwd() &&
-        config.root !== ""
-      ) {
-        console.log(
-          "[vite:plugin-react-server] Root dir changed in config hook",
-          config.root,
-          root
-        );
-        root = config.root;
-      }
-      const resolvedPagesResult = await resolvePages(userOptions.build.pages);
-      if (resolvedPagesResult.type === "error") {
-        throw resolvedPagesResult.error;
+      const autoDiscoverResult = await resolveAutoDiscover({
+        config,
+        configEnv,
+        userOptions,
+        condition: "react-server",
+      });
+      if (autoDiscoverResult.type === "error") {
+        throw autoDiscoverResult.error;
       }
-      resolvedPages = resolvedPagesResult.pages;
-      files = await checkFilesExist(resolvedPages, userOptions, root);
+      autoDiscoveredFiles = autoDiscoverResult.autoDiscoveredFiles;
 
       const resolvedConfig = resolveUserConfig({
-        isClient: false,
+        condition: "react-server",
         config,
         configEnv,
         userOptions,
-        files,
+        autoDiscoveredFiles,
       });
 
       if (resolvedConfig.type === "error") {
+        console.error(
+          "[react-server-plugin] Failed to resolve config:",
+          resolvedConfig.error
+        );
         throw resolvedConfig.error;
       }
 
@@ -296,29 +139,35 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
         console.log("Build already started");
       }
     },
-    handleHotUpdate({ file }) {
-      if (file.endsWith(".css")) {
-        cssModules.add(file);
-      }
-    },
     async generateBundle(_options, bundle) {
-      if (!resolvedConfig) {
-        throw new Error("Resolved config not found");
-      }
-
       // Create manifest entries for each chunk
-      serverManifest = getBundleManifest({
-        pluginContext: this,
+      serverManifest = getBundleManifest<false>({
         bundle,
-        moduleBase: userOptions.moduleBase,
-        preserveModulesRoot: userOptions.build.preserveModulesRoot,
+        normalizer: userOptions.normalizer,
       });
-      if (serverManifestPath) {
-        await mkdir(dirname(serverManifestPath), { recursive: true });
-        await writeFile(
-          serverManifestPath,
-          JSON.stringify(serverManifest, null, 2)
-        );
+    },
+    async handleHotUpdate({ file, server, read, timestamp, ...ctx }) {
+      try {
+        // Invalidate the module in Vite's cache for both client and SSR
+        if (server.moduleGraph) {
+          const mod = server.moduleGraph.getModuleById(file);
+          if (mod) {
+            // Invalidate the parent module which will handle both client and SSR
+            server.moduleGraph.invalidateModule(mod);
+            
+            // Force a reload of the module
+            const newMod = await server.moduleGraph.ensureEntryFromUrl(file, false);
+            if (newMod) {
+              server.moduleGraph.invalidateModule(newMod);
+            }
+          }
+        }
+        
+        // Let Vite handle the HMR update
+        return ctx.modules;
+      } catch (error) {
+        console.error("[react-server] HMR Error:", error);
+        return ctx.modules;
       }
     },
   };

package/plugin/react-server/server.ts

@@ -0,0 +1,128 @@
+import type {  Manifest, ViteDevServer } from "vite";
+import type { ServerResponse } from "http";
+import type { AutoDiscoveredFiles, ResolvedUserOptions } from "../types.js";
+import { createEventHandler } from "../helpers/createEventHandler.js";
+import { collectViteModuleGraphCss } from "../helpers/collectViteModuleGraphCss.js";
+import { resolvePageAndProps } from "../helpers/resolvePageAndProps.js";
+import { createHandler } from "../helpers/createHandler.js";
+import React from "react";
+
+export async function configureReactServer({
+  server,
+  autoDiscoveredFiles,
+  userOptions,
+  serverManifest,
+}: {
+  server: ViteDevServer;
+  autoDiscoveredFiles: AutoDiscoveredFiles;
+  userOptions: ResolvedUserOptions;
+  serverManifest: Manifest;
+}) {
+  const activeStreams = new Set<ServerResponse>();
+
+  // Handle Vite server restarts
+  server.ws.on("restart", (path) => {
+    console.log(
+      "[vite-plugin-react-server] 🔧 Plugin changed, preparing for restart:",
+      path
+    );
+
+    // Close streams with restart message
+    for (const res of activeStreams) {
+      res.writeHead(503, {
+        "Content-Type": "text/x-component",
+        "Retry-After": "1",
+      });
+      res.end('{"error":"Server restarting..."}');
+    }
+    activeStreams.clear();
+  });
+
+  server.middlewares.use(async (req, res, next) => {
+    try {
+      if (req.headers.accept !== "text/x-component") return next();
+      let route = req.url?.replace('/'+userOptions.build.rscOutputPath, "");
+      if (!route || route === "") {
+        route = "/";
+      }
+      if (!autoDiscoveredFiles.urlMap.has(route)) {
+        return next();
+      }
+      const routeFiles = autoDiscoveredFiles.urlMap.get(route)!;
+      const pagePath = routeFiles.page;
+      const propsPath = routeFiles.props;
+
+      const {
+        Html: _UserHtmlComponent,
+        onEvent,
+        // remove these
+        moduleBaseURL,
+        ...handlerUserOptions
+      } = userOptions;
+      // Create a unified event handler
+      await server.warmupRequest(pagePath);
+      const eventHandler = createEventHandler(onEvent);
+      const cssFilesResult = await collectViteModuleGraphCss({
+        moduleGraph: server.moduleGraph,
+        pagePath,
+        loader: (i)=>server.ssrLoadModule(i, {fixStacktrace: true}),
+        // explicitly set to empty string, because we let vite handle the resolving during development
+        moduleBaseURL: "",
+        moduleBasePath: userOptions.moduleBasePath,
+        moduleRootPath: userOptions.moduleRootPath,
+        projectRoot: userOptions.projectRoot,
+        css: userOptions.css,
+        parentUrl: pagePath,
+      });
+      if (cssFilesResult.type === "skip") {
+        return next();
+      }
+      if (cssFilesResult.type === "error") {
+        throw cssFilesResult.error;
+      }
+      const pageAndPropsResult = await resolvePageAndProps({
+        pagePath,
+        propsPath,
+        route,
+        loader: server.ssrLoadModule,
+        pageExportName: userOptions.pageExportName ?? "default",
+        propsExportName: userOptions.propsExportName ?? "default",
+      });
+      if (pageAndPropsResult.type === "error") {
+        throw pageAndPropsResult.error;
+      }
+      if (pageAndPropsResult.type === "skip") {
+        return next();
+      }
+      const { PageComponent, pageProps } = pageAndPropsResult;
+      // Create the headless RSC stream directly
+      const rscResult = await createHandler({
+        ...handlerUserOptions,
+        PageComponent: PageComponent,
+        pageProps: pageProps,
+        logger: server.config.logger,
+        loader: server.ssrLoadModule,
+        Html: React.Fragment,
+        onEvent: eventHandler,
+        manifest: serverManifest,
+        worker: server as any,
+        route,
+        pagePath,
+        propsPath,
+        cssFiles: cssFilesResult.cssFiles ?? new Map(),
+        // explicitly set to empty string, because we let vite handle the resolving during development
+        moduleBaseURL: "",
+        globalCss: new Map(),
+      });
+      if (rscResult.type === "success") {
+        rscResult.stream!.pipe(res);
+      }
+      activeStreams.add(res);
+      res.on("close", () => {
+        activeStreams.delete(res);
+      });
+    } catch (error) {
+      res.end();
+    }
+  });
+}

package/plugin/react-static/collectHtmlWorkerContent.ts

@@ -0,0 +1,120 @@
+/**
+ * rscHandler.ts
+ *
+ * PURPOSE: Handles collecting HTML content from the htmlCompact stream
+ *
+ * This module:
+ * 1. Collects HTML content from the rscFull stream (which includes <html> and <body> tags)
+ * 2. Returns the complete HTML content when the stream is done
+ * 3. Provides a clean interface for HTML handling
+ */
+
+import { PassThrough, Transform } from "node:stream";
+import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
+import { createStreamMetrics } from "../helpers/metrics.js";
+import { createRscToHtmlStream } from "./rscToHtmlStream.js";
+import { fileWriter } from "./fileWriter.js";
+
+/**
+ * Collects RSC content from the rscFull stream
+ *
+ * @param rscFull The stream containing the RSC content
+ * @returns A promise that resolves with the complete RSC content
+ */
+export async function collectHtmlWorkerContent(
+  rscStream: PassThrough,
+  handlerOptions: CreateHandlerOptions
+): Promise<{ stream: PassThrough; metrics: StreamMetrics }> {
+  const metrics = createStreamMetrics();
+  const startTime = performance.now();
+
+  // Create RSC to HTML transform stream
+  const rscToHtmlStream = createRscToHtmlStream({
+    worker: handlerOptions.worker,
+    route: handlerOptions.route,
+    moduleRootPath: handlerOptions.moduleRootPath,
+    moduleBaseURL: handlerOptions.moduleBaseURL,
+    pipeableStreamOptions: handlerOptions.pipeableStreamOptions,
+    build: handlerOptions.build,
+    cssFiles: handlerOptions.cssFiles,
+    projectRoot: handlerOptions.projectRoot,
+  });
+
+  // Create transform stream to handle HTML chunks and file writing
+  const htmlTransform = new Transform({
+    transform(chunk, _encoding, callback) {
+      metrics.chunks++;
+      callback(null, chunk);
+    },
+    flush(callback) {
+      metrics.duration = Date.now() - startTime;
+      callback();
+    },
+  });
+
+  let isComplete = false;
+
+  // Create a promise that resolves when the route is complete
+  const routeComplete = new Promise<void>((resolve, reject) => {
+    const messageHandler = (msg: any) => {
+      switch (msg.type) {
+        case "HTML_CHUNK":
+          if (!isComplete) {
+            htmlTransform.write(msg.chunk);
+          }
+          break;
+        case "HTML_COMPLETE":
+          isComplete = true;
+          // End the transform stream
+          htmlTransform.end();
+          // Send cleanup message to worker
+          handlerOptions.worker.postMessage({
+            type: "CLEANUP",
+            id: handlerOptions.route,
+          });
+          break;
+        case "CLEANUP_COMPLETE":
+          resolve();
+          break;
+        case "ERROR":
+          handlerOptions.worker.removeListener("message", messageHandler);
+          reject(msg.error);
+          break;
+      }
+    };
+    handlerOptions.worker.on("message", messageHandler);
+  });
+
+  try {
+    // Set up event handler to capture content length
+    if (handlerOptions.onEvent) {
+      const originalOnEvent = handlerOptions.onEvent;
+      handlerOptions.onEvent = (event) => {
+        if (event.type === "file.write.done" && event.data.fileType === "html") {
+          metrics.bytes = event.data.content.length;
+        }
+        originalOnEvent(event);
+      };
+    }
+
+    // Pipe RSC through transform to HTML
+    rscStream.pipe(rscToHtmlStream);
+
+    // Set up file writing using fileWriter
+    const writePromise = fileWriter(htmlTransform, "html", handlerOptions);
+
+    // Wait for route to complete
+    await routeComplete;
+
+    // Wait for file writing to complete
+    await writePromise;
+
+    rscToHtmlStream.destroy();
+
+    return { stream: rscStream, metrics };
+  } catch (error) {
+    // Clean up streams on error
+    rscToHtmlStream.destroy();
+    throw error;
+  }
+}