vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/react-client/plugin.ts

@@ -1,41 +1,25 @@
-import { type Manifest, type Plugin, type ResolvedConfig } from "vite";
+import {  type Plugin } from "vite";
 import type {
-  CheckFilesExistReturn,
+  AutoDiscoveredFiles,
   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 { createInputNormalizer } from "../helpers/inputNormalizer.js";
-import { createWorker } from "../worker/createWorker.js";
-import type { Worker } from "node:worker_threads";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
-import type {
-  RscRenderMessage,
-  RscWorkerMessage,
-  RscWorkerResponse,
-} from "../worker/types.js";
-import { MIME_TYPES } from "../config/mimeTypes.js";
-
+import { resolveAutoDiscover } from "../config/resolveAutoDiscover.js";
+import { configureWorkerRequestHandler } from "./server.js";
+import { configurePreviewServer } from "../react-static/configurePreviewServer.js";
+import { MessageChannel } from "node:worker_threads";
 
 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;
+let autoDiscoveredFiles: AutoDiscoveredFiles;
+let hmrChannel: MessageChannel | null = null;
 
 export function reactClientPlugin(options: StreamPluginOptions): Plugin {
-  const resolvedOptions = resolveOptions(options, true);
+  const resolvedOptions = resolveOptions(options);
   if (resolvedOptions.type === "error") {
     throw resolvedOptions.error;
   }
@@ -53,39 +37,25 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
         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: userOptions.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 autoDiscoverResult = await resolveAutoDiscover({
+        config,
+        configEnv,
+        userOptions,
+        condition: "react-client",
+      });
+      if (autoDiscoverResult.type === "error") {
+        throw autoDiscoverResult.error;
       }
+      autoDiscoveredFiles = autoDiscoverResult.autoDiscoveredFiles;
 
       const resolvedConfig = resolveUserConfig({
-        isClient: true,
+        condition: "react-client",
         config,
         configEnv,
         userOptions,
-        files,
+        autoDiscoveredFiles,
       });
 
       if (resolvedConfig.type === "error") {
@@ -96,225 +66,66 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
       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.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,
       });
     },
     // setup dev server
     async configureServer(server) {
-      if (typeof loader !== "function") {
-        loader = server.ssrLoadModule;
-      }
-      if (!worker) {
-        worker = await createWorker({
-          projectRoot: root,
-          workerPath: userOptions.rscWorkerPath,
-          condition: "react-client",
-        });
-      }
-      const normalize = createInputNormalizer({
-        root,
-        removeExtension: false,
-        preserveModulesRoot: userOptions.build.preserveModulesRoot
-          ? userOptions.moduleBase
-          : undefined,
+      // Create HMR message channel
+      hmrChannel = new MessageChannel();
+      await configureWorkerRequestHandler({
+        server,
+        autoDiscoveredFiles,
+        userOptions,
+        hmrChannel,
       });
-      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);
-                    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);
+    async handleHotUpdate({ file, server, read, timestamp, ...ctx }) {
+      try {
+        // Check if the file is a page or props file
+        const isPageFile = userOptions.autoDiscover.modulePattern(file);
+        if (!isPageFile) return;
+
+        // Get the route for this file
+        const [, value] = userOptions.normalizer(file);
+        
+        // Find all routes affected by this file change
+        const affectedRoutes = autoDiscoveredFiles.routeMap.get(value) || [];
+
+        // Send HMR update directly to worker through MessageChannel
+        if (hmrChannel?.port1) {
+          hmrChannel.port1.postMessage({
+            type: 'HMR_UPDATE',
+            path: file,
+            timestamp,
+            routes: affectedRoutes
+          });
+
+          // Trigger a full page refresh for affected routes
+          for (const route of affectedRoutes) {
+            server.ws.send({
+              type: 'full-reload',
+              path: route
             });
-            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: userOptions.moduleBaseURL,
-              moduleBasePath: userOptions.moduleBasePath,
-              moduleBase: userOptions.moduleBase,
-              pipableStreamOptions: userOptions.pipableStreamOptions,
-              cssFiles: []
-            } satisfies RscRenderMessage);
-          } catch (error) {
-            res.statusCode = 500;
-            res.end(error instanceof Error ? error.message : String(error));
           }
-        } else {
-          next();
         }
-      });
+
+        // Let Vite handle the HMR update
+        return ctx.modules;
+      } catch (error) {
+        if (hmrChannel?.port1) {
+          hmrChannel.port1.postMessage({
+            type: 'HMR_ERROR',
+            path: file,
+            error: error instanceof Error ? error.message : String(error)
+          });
+        }
+        return ctx.modules;
+      }
     },
   };
 }

package/plugin/react-client/server.ts

@@ -0,0 +1,276 @@
+import type { ViteDevServer } from "vite";
+import type {
+  AutoDiscoveredFiles,
+  RequestHandler,
+  ResolvedUserOptions,
+} from "../types.js";
+import type {
+  RscWorkerOutputMessage,
+  RscRenderMessage,
+} from "../worker/types.js";
+import { join } from "node:path";
+import type { Worker as NodeWorker } from "node:worker_threads";
+import { MessageChannel } from "node:worker_threads";
+import {
+  serializedDevServerConfig,
+  serializedOptions,
+} from "../helpers/serializeUserOptions.js";
+import { createWorker } from "../worker/createWorker.js";
+import { getRouteFiles } from "../helpers/getRouteFiles.js";
+
+let currentWorker: NodeWorker | null = null;
+let isRestarting = false;
+
+async function restartWorker(
+  server: ViteDevServer,
+  autoDiscoveredFiles: AutoDiscoveredFiles,
+  userOptions: ResolvedUserOptions,
+  hmrChannel: MessageChannel
+) {
+  if (isRestarting) return;
+  isRestarting = true;
+
+  try {
+    // Terminate the current worker if it exists
+    if (currentWorker) {
+      currentWorker.terminate();
+      currentWorker = null;
+    }
+
+    const workerResult = await createWorker({
+      projectRoot: server.config.root,
+      workerPath: userOptions.rscWorkerPath,
+      reverseCondition: "react-server",
+      currentCondition: "react-client",
+      workerData: {
+        hmrPort: hmrChannel.port2,
+        resolvedConfig: serializedDevServerConfig(server.config),
+        userOptions: serializedOptions(userOptions, autoDiscoveredFiles),
+      },
+      transferList: [hmrChannel.port2],
+    });
+
+    if (workerResult.type === "success") {
+      currentWorker = workerResult.worker;
+    } else if (workerResult.type === "error") {
+      server.config.logger.error("Failed to start rsc-worker", {
+        error: workerResult.error,
+      });
+    }
+  } finally {
+    isRestarting = false;
+  }
+}
+
+/**
+ * Creates an async generator that yields RSC chunks from the worker.
+ * Handles both module requests and RSC streaming.
+ *
+ * @param worker - The worker thread
+ * @param server - The Vite dev server
+ * @param message - The RSC render message
+ * @param rscWorkerLoaderPort - Optional loader port for module loading
+ * @returns An async generator that yields RSC chunks
+ */
+async function* createWorkerStream(
+  worker: NodeWorker,
+  message: Omit<RscRenderMessage, "type" | "id">
+): AsyncGenerator<Uint8Array, void, unknown> {
+  let messageHandler: (message: RscWorkerOutputMessage) => void;
+  let cleanup: () => void = () => {};
+
+  // First yield: wait for initial message and handle module requests
+  yield await new Promise<Uint8Array>((resolve) => {
+    messageHandler = (message: RscWorkerOutputMessage) => {
+      if (message.type === "RSC_CHUNK") {
+        resolve(message.chunk);
+      }
+      if (message.type === "ERROR") {
+        resolve(new Uint8Array());
+      }
+    };
+
+    cleanup = () => {
+      worker.off("message", messageHandler);
+    };
+
+    worker.on("message", messageHandler);
+
+    // Send the render message to start the RSC stream
+    worker.postMessage({
+      type: "RSC_RENDER",
+      id: message.route,
+      ...message,
+    });
+  });
+
+  // Subsequent yields: handle RSC chunks until stream ends
+  while (true) {
+    const chunk = await new Promise<Uint8Array>((resolve) => {
+      messageHandler = (message: RscWorkerOutputMessage) => {
+        if (message.type === "RSC_END") {
+          cleanup();
+          resolve(new Uint8Array());
+          return;
+        }
+        if (message.type === "RSC_CHUNK") {
+          resolve(message.chunk);
+        }
+        if (message.type === "ERROR") {
+          cleanup();
+          resolve(new Uint8Array());
+          return;
+        }
+      };
+      worker.once("message", messageHandler);
+    });
+
+    if (chunk.length === 0) {
+      break;
+    }
+    yield chunk;
+  }
+}
+
+/**
+ * Handles the RSC stream from the worker.
+ * Creates a ReadableStream that pipes RSC chunks to the response.
+ *
+ * @param worker - The worker thread
+ * @param message - The RSC render message
+ * @returns A ReadableStream that yields RSC chunks
+ */
+export function handleWorkerRscStream(
+  worker: NodeWorker,
+  message: Omit<RscRenderMessage, "type" | "id">
+): ReadableStream<Uint8Array> {
+  // Create a ReadableStream from the async generator
+  return new ReadableStream<Uint8Array>({
+    async start(controller) {
+      try {
+        for await (const chunk of createWorkerStream(worker, message)) {
+          controller.enqueue(chunk);
+        }
+      } catch (error) {
+        controller.error(error);
+      } finally {
+        controller.close();
+      }
+    },
+  });
+}
+
+/**
+ * Configures the worker request handler.
+ * @param server - The Vite dev server
+ * @param autoDiscoveredFiles - The auto discovered files
+ * @param userOptions - The user options
+ */
+export async function configureWorkerRequestHandler({
+  server,
+  autoDiscoveredFiles,
+  userOptions,
+  hmrChannel,
+}: {
+  server: ViteDevServer;
+  autoDiscoveredFiles: AutoDiscoveredFiles;
+  userOptions: ResolvedUserOptions;
+  hmrChannel: MessageChannel;
+}) {
+  if(server.config.root !== userOptions.projectRoot) {
+    server.config.logger.error("[react-client] Project root mismatch", {
+      error: new Error(`Server root ${server.config.root} does not match user options root ${userOptions.projectRoot}`)
+    });
+    return;
+  }
+
+  // Start the worker
+  await restartWorker(server, autoDiscoveredFiles, userOptions, hmrChannel);
+
+  // Create the request handler
+  const handler: RequestHandler = async (req, res, next) => {
+    if (!req.url || req.headers.accept !== "text/x-component") return next();
+    try {
+      if (!currentWorker) {
+        server.config.logger.error("[react-client] No worker available");
+        return next();
+      }
+
+      // Get the route from the request
+      let route = req.url;
+      if (!route || route === "") route = "/";
+      // in the case of the no build.pages and a async Page and or props userOption, we need to await those
+      // if they are already autoDiscovered then the promise will resolve immediately
+      const routeFiles = await getRouteFiles(
+        route,
+        autoDiscoveredFiles,
+        userOptions
+      );
+      if (routeFiles.type === "error") {
+        server.config.logger.error("[react-client] Error getting route files", {
+          error: routeFiles.error,
+        });
+        return next();
+      }
+      const { page, props } = routeFiles;
+
+      // Set up response headers for streaming
+      res.setHeader("Content-Type", "text/x-component; charset=utf-8");
+      res.setHeader("Transfer-Encoding", "chunked");
+      res.setHeader("Connection", "keep-alive");
+      let timeout = setTimeout(() => {
+        server.config.logger.error("[react-client] RSC render timeout");
+        res.end();
+      }, 5000);
+      const serializedUserOptions = serializedOptions(
+        userOptions,
+        autoDiscoveredFiles
+      );
+      const stream = handleWorkerRscStream(currentWorker, {
+        ...serializedUserOptions,
+        // we make the worker stream aware of the route, pagePath, propsPath
+        route,
+        pagePath: page,
+        propsPath: props,
+        // override these at all times to ensure the settings will work for the dev server
+        projectRoot: server.config.root,
+        moduleRootPath: join(server.config.root, userOptions.moduleBase),
+        moduleBaseURL: "",
+        moduleBasePath: "",
+        build: serializedUserOptions.build,
+        manifest: autoDiscoveredFiles.staticManifest,
+        cssFiles: new Map(),
+        globalCss: new Map(),
+      });
+
+      // Pipe the stream to the response
+      stream.pipeTo(
+        new WritableStream({
+          write(chunk) {
+            res.write(chunk);
+          },
+
+          close() {
+            clearTimeout(timeout);
+            res.end();
+          },
+          abort() {
+            clearTimeout(timeout);
+            // Restart worker on error
+            restartWorker(server, autoDiscoveredFiles, userOptions, hmrChannel);
+            res.end();
+          },
+        })
+      );
+    } catch (error) {
+      if (error instanceof Error) {
+        server.config.logger.error("[react-client] Error handling request", {
+          error,
+        });
+      }
+    }
+  };
+  // attach handler to the server
+  server.middlewares.use(handler);
+  // done
+}

package/plugin/react-server/index.ts

@@ -1,14 +1 @@
-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";
-
-export function vitePluginReactServer(options = {} as StreamPluginOptions): import("vite").Plugin[] {
-    return [
-      reactTransformPlugin(options),
-      reactServerPlugin(options),
-      reactStaticPlugin(options),
-      reactPreservePlugin(options),
-    ];
-  } 
+export { reactServerPlugin } from "./plugin.js";