vite-plugin-react-server 1.2.0-alpha.1 → 1.2.0

package/plugin/dev-server/plugin.client.ts

@@ -0,0 +1,160 @@
+import type { VitePluginFn } from "../../types.js";
+import { configureReactServer } from "./configureReactServer.client.js";
+import { resolveOptions } from "../config/resolveOptions.js";
+import type { ConfigEnv } from "vite";
+
+
+/**
+ * Dev server plugin for client environment.
+ * Uses configureServer hook for proper dev server setup.
+ */
+export const vitePluginReactDevServer: VitePluginFn = function _vitePluginReactServerDevClient(options) {
+  if (options == null) {
+    throw new Error("options is required");
+  }
+
+  if (options.verbose) {
+  }
+  
+  const resolvedOptions = resolveOptions(options);
+  if (resolvedOptions.type === "error") {
+    if (resolvedOptions.error != null) {
+      throw resolvedOptions.error;
+    }
+    throw new Error("Failed to resolve options");
+  }
+  const userOptions = resolvedOptions.userOptions;
+  
+
+  let configEnv: ConfigEnv | undefined;
+  let hmrHandler: { restart: (() => Promise<void>) | null; sendHmrUpdate: (file: string, routes?: string[]) => void } | null = null;
+  let isProcessingHmr = false; // Prevent recursive HMR updates
+  let restartTimeout: NodeJS.Timeout | null = null; // Debounce worker restarts
+
+  return {
+    name: "vite-plugin-react-server:dev-server-client",
+    apply: "serve", // Only apply in dev server mode
+    // Note: Removed applyToEnvironment - handleHotUpdate needs to run regardless
+    // The plugin should apply to client environment, but handleHotUpdate is a dev server hook
+    // that should work regardless of environment filtering
+    config(_config, viteConfigEnv) {
+      configEnv = viteConfigEnv;
+  
+    },
+    configureServer(server) {      
+      // Log that plugin is being configured
+      server.config.logger.info(`[vite-plugin-react-server] Dev server plugin configured for client environment`);
+      
+      // Configure the React server for client environment (worker-based)
+      // This uses the existing configureReactServer.client.js implementation
+      hmrHandler = configureReactServer({
+        server,
+        autoDiscoveredFiles: {
+          propsMap: new Map(),
+          pageMap: new Map(),
+          rootMap: new Map(),
+          htmlMap: new Map(),
+          routeMap: new Map(),
+          urlMap: new Map(),
+          errors: [],
+          workerPaths: {},
+          serverEntry: null,
+          clientEntry: {},
+          clientInputs: {},
+          staticInputs: {},
+          serverInputs: {},
+          // staticManifest removed from AutoDiscoveredFiles
+          serverActions: {},
+        },
+        userOptions,
+        configEnv: configEnv!,
+        serverManifest: {}, 
+        resolvedConfig: server.config,
+      });
+    },
+    handleHotUpdate({ file, server }) {
+      // Prevent recursive HMR updates
+      if (isProcessingHmr) {
+        return undefined;
+      }
+      
+      // Handle server component file changes
+      const moduleBase = userOptions.moduleBase || "src";
+      const projectRoot = userOptions.projectRoot || server.config.root;
+      
+      // Normalize paths for comparison (handle both absolute and relative)
+      const normalizedFile = file.replace(projectRoot, '').replace(/^\/+/, '');
+      const isServerFile = normalizedFile.startsWith(moduleBase + '/') && 
+        (file.endsWith('.tsx') || file.endsWith('.ts') || file.endsWith('.jsx') || file.endsWith('.js'));
+      
+      // Always log for debugging
+      server.config.logger.info(`[vite-plugin-react-server] handleHotUpdate: file=${file}, normalized=${normalizedFile}, isServerFile=${isServerFile}, hasHandler=${!!hmrHandler}`);
+      
+      if (isServerFile && hmrHandler) {
+        isProcessingHmr = true;
+        
+        try {
+          server.config.logger.info(`[vite-plugin-react-server] File changed: ${file}, sending HMR update...`);
+          
+          // CRITICAL: Send HMR_UPDATE message to worker to invalidate modules
+          // This clears component caches, but Node.js's ES module cache persists
+          hmrHandler.sendHmrUpdate(file);
+          
+          // CRITICAL: Send custom HMR message to client via WebSocket
+          // Server components aren't in the client bundle, so vite:beforeUpdate doesn't fire
+          // We need to manually notify the client to refetch the RSC stream
+          server.ws.send({
+            type: 'custom',
+            event: 'vite-plugin-react-server:server-component-update',
+            data: {
+              file: normalizedFile,
+              path: file,
+            },
+          });
+          
+          // CRITICAL: Node.js caches ES modules, so we need to restart the worker
+          // to clear the module cache. Debounce restarts to prevent recursion.
+          if (hmrHandler.restart) {
+            // Clear any pending restart
+            if (restartTimeout) {
+              clearTimeout(restartTimeout);
+            }
+            
+            // Debounce worker restart to prevent recursion
+            // Wait 500ms after the last file change before restarting
+            restartTimeout = setTimeout(async () => {
+              try {
+                server.config.logger.info(`[vite-plugin-react-server] Restarting worker to clear Node.js module cache...`);
+                await hmrHandler!.restart!();
+                server.config.logger.info(`[vite-plugin-react-server] Worker restarted successfully`);
+              } catch (error) {
+                server.config.logger.error(`[vite-plugin-react-server] Failed to restart worker: ${error}`);
+              } finally {
+                restartTimeout = null;
+                // Reset flag after restart completes
+                setTimeout(() => {
+                  isProcessingHmr = false;
+                }, 100);
+              }
+            }, 500); // 500ms debounce
+          } else {
+            // No restart function available yet - worker hasn't been created
+            // This is expected if handleHotUpdate fires before the first request
+            server.config.logger.warn(`[vite-plugin-react-server] Restart function not available yet - worker will be created on next request`);
+            setTimeout(() => {
+              isProcessingHmr = false;
+            }, 100);
+          }
+        } catch (error) {
+          server.config.logger.error(`[vite-plugin-react-server] Error handling HMR update: ${error}`);
+          isProcessingHmr = false;
+        }
+      } else if (isServerFile && !hmrHandler) {
+        server.config.logger.warn(`[vite-plugin-react-server] Server file changed but HMR handler not available yet: ${file}`);
+      }
+      
+      // Return undefined to allow other plugins to handle the update
+      return undefined;
+    },
+  };
+};

package/plugin/dev-server/plugin.server.ts

@@ -0,0 +1,133 @@
+import type { StreamPluginOptions } from "../../types.js";
+import { configureReactServer } from "./configureReactServer.server.js";
+import { resolveOptions } from "../config/resolveOptions.js";
+import type { Plugin, ViteDevServer } from "vite";
+
+/**
+ * Dev server plugin for server environment.
+ * Returns two plugins: one for HMR handling (all environments) and one for server config.
+ */
+export const vitePluginReactDevServer = function _vitePluginReactServerDevServer(options: StreamPluginOptions): Plugin[] {
+  if (options == null) {
+    throw new Error("options is required");
+  }
+
+  const resolvedOptions = resolveOptions(options);
+  if (resolvedOptions.type === "error") {
+    if (resolvedOptions.error != null) {
+      throw resolvedOptions.error;
+    }
+    throw new Error("Failed to resolve options");
+  }
+  const userOptions = resolvedOptions.userOptions;
+
+  // Separate plugin for HMR handling (must apply to all environments)
+  const hmrPlugin = {
+    name: "vite-plugin-react-server:server-hmr",
+    apply: "serve" as const,
+    // Server-level handleHotUpdate — sends custom WS event to client
+    handleHotUpdate({ file, server }: { file: string; server: ViteDevServer }) {
+      const moduleBase = userOptions.moduleBase || "src";
+      const projectRoot = userOptions.projectRoot || server.config.root;
+      const normalizedFile = file.replace(projectRoot, '').replace(/^\/+/, '');
+      const isServerFile = normalizedFile.startsWith(moduleBase + '/') && 
+        (file.endsWith('.tsx') || file.endsWith('.ts') || file.endsWith('.jsx') || file.endsWith('.js'));
+      
+      if (isServerFile) {
+        server.config.logger.info(`[vite-plugin-react-server] Server component changed: ${normalizedFile}`);
+        
+        // Send custom HMR event so client can refetch RSC stream
+        server.ws.send({
+          type: 'custom',
+          event: 'vite-plugin-react-server:server-component-update',
+          data: {
+            file: normalizedFile,
+            path: file,
+          },
+        });
+        
+        // Invalidate the server module so next request gets fresh content
+        const mod = server.environments['server']?.moduleGraph?.getModulesByFile(file);
+        if (mod) {
+          for (const m of mod) {
+            server.environments['server']?.moduleGraph?.invalidateModule(m);
+          }
+        }
+        
+        // Return empty array to prevent Vite's default full-page reload
+        // The client will refetch the RSC stream via the custom event
+        return [];
+      }
+    },
+  };
+
+  const serverPlugin = {
+    name: "vite-plugin-react-server:dev-server-server",
+    apply: "serve" as const,
+    applyToEnvironment(partialEnvironment: any) {
+      return partialEnvironment?.consumer === 'server';
+    },
+    configureServer(server: ViteDevServer) {
+      // Log that plugin is being configured
+      server.config.logger.info(`[vite-plugin-react-server] Dev server plugin configured for server environment (react-server condition)`);
+      
+      // Configure the React server for server environment (direct RSC processing)
+      // This uses the existing configureReactServer.server.js implementation
+      configureReactServer({
+        server,
+        autoDiscoveredFiles: {
+          propsMap: new Map(),
+          pageMap: new Map(),
+          rootMap: new Map(),
+          htmlMap: new Map(),
+          routeMap: new Map(),
+          urlMap: new Map(),
+          errors: [],
+          workerPaths: {},
+          serverEntry: null,
+          clientEntry: {},
+          clientInputs: {},
+          staticInputs: {},
+          serverInputs: {},
+          // staticManifest removed from AutoDiscoveredFiles
+          serverActions: {},
+        },
+        userOptions,
+        serverManifest: {},
+        resolvedConfig: server.config,
+      });
+    },
+  };
+
+  // Fix CJS named imports in server environment.
+  // Vite's esbuild JSX transform (and @vitejs/plugin-react if present) generates
+  // named imports like `import { useEffect } from "react"`. In the server environment,
+  // react's react-server export is CJS-only, and Node's ESM interop doesn't support
+  // named exports from CJS. This post-transform rewrites them.
+  const cjsFixPlugin: Plugin = {
+    name: "vite-plugin-react-server:server-cjs-fix",
+    apply: "serve" as const,
+    enforce: "post" as const,
+    applyToEnvironment(env: any) {
+      return env?.name === 'server';
+    },
+    transform(code: string, id: string) {
+      if (id.includes('node_modules')) return;
+      if (!id.match(/\.[jt]sx?$/)) return;
+      
+      const namedImportRe = /import\s*\{([^}]+)\}\s*from\s*["']react["']\s*;?/g;
+      if (!namedImportRe.test(code)) return;
+      
+      namedImportRe.lastIndex = 0;
+      let counter = 0;
+      const result = code.replace(namedImportRe, (_match, imports) => {
+        const alias = `__react_cjs_${counter++}`;
+        return `import ${alias} from "react"; const {${imports}} = ${alias};`;
+      });
+      
+      return { code: result, map: null };
+    },
+  };
+
+  return [hmrPlugin, cjsFixPlugin, serverPlugin];
+};

package/plugin/dev-server/restartWorker.client.ts

@@ -0,0 +1,155 @@
+import { createWorker } from "../worker/createWorker.js";
+import { cleanupWorker } from "../helpers/workerCleanup.js";
+import { serializedDevServerConfig } from "../helpers/serializeUserOptions.js";
+import { MessageChannel, type Worker } from "node:worker_threads";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { React } from "../vendor/vendor.client.js";
+import type { RestartWorkerFn } from "../react-client/types.js";
+import { getNodeEnv } from "../config/getNodeEnv.js";
+import { handleError } from "../error/handleError.js";
+import { setMaxListenersOnPort, unrefPort } from "../stream/setMaxListeners.js";
+
+let currentWorker: Worker | null = null;
+let isRestarting = false;
+let currentHmrChannel: MessageChannel | null = null;
+let currentMessageHandler: ((event: Event) => void) | null = null;
+let currentErrorHandler: ((error: any) => void) | null = null;
+
+export const restartWorker: RestartWorkerFn = async function _restartWorker({
+  server,
+  autoDiscoveredFiles,
+  userOptions,
+  configEnv,
+  hmrChannel,
+}) {
+  if (isRestarting) {
+    // Wait for the current restart to complete
+    while (isRestarting) {
+      await new Promise(resolve => setTimeout(resolve, 10));
+    }
+    return currentWorker;
+  }
+  isRestarting = true;
+
+  try {
+    // Terminate the current worker if it exists
+    cleanupWorker(currentWorker);
+    currentWorker = null;
+
+    // Clean up any existing HMR channel
+    if (currentHmrChannel) {
+      currentHmrChannel.port1.close();
+      currentHmrChannel.port2.close();
+      currentHmrChannel = null;
+    }
+
+    // Clean up any existing event listeners on the main HMR channel
+    if (currentMessageHandler) {
+      hmrChannel.port1.removeEventListener("message", currentMessageHandler);
+      currentMessageHandler = null;
+    }
+    if (currentErrorHandler) {
+      hmrChannel.port1.removeEventListener("messageerror", currentErrorHandler);
+      currentErrorHandler = null;
+    }
+
+    const routeCount = autoDiscoveredFiles.urlMap.size;
+    const hmrBuffer = 20; // Buffer for HMR and other operations
+    const maxListeners = routeCount + hmrBuffer;
+
+    // Create a new MessageChannel for this worker
+    const workerHmrChannel = new MessageChannel();
+    currentHmrChannel = workerHmrChannel;
+    
+    // Increase max listeners to prevent warnings during development
+    setMaxListenersOnPort(workerHmrChannel.port1, maxListeners);
+    setMaxListenersOnPort(workerHmrChannel.port2, maxListeners);
+    unrefPort(workerHmrChannel.port1);
+    unrefPort(workerHmrChannel.port2);
+
+    // Forward messages from the plugin's HMR channel to the worker's channel
+    const messageHandler = (event: Event) => {
+      try {
+        workerHmrChannel.port1.postMessage((event as MessageEvent).data);
+      } catch (error) {
+        // Ignore HMR errors for now to avoid DataCloneError
+        if (userOptions.verbose) {
+          server.config.logger.info(`[restartWorker] HMR message error: ${error}`);
+        }
+      }
+    };
+
+    // Handle HMR channel errors
+    const errorHandler = (error: any) => {
+      if (userOptions.verbose) {
+        server.config.logger.warn(`[restartWorker] HMR message error: ${error}`);
+      }
+    };
+
+        // Store handlers for cleanup
+        currentMessageHandler = messageHandler;
+        currentErrorHandler = errorHandler;
+
+        // Increase max listeners to prevent warnings during development
+        // This is a targeted fix for the memory leak warnings
+        setMaxListenersOnPort(hmrChannel.port1, maxListeners);
+
+        hmrChannel.port1.addEventListener("message", messageHandler);
+        hmrChannel.port1.addEventListener("messageerror", errorHandler);
+
+    if (userOptions.verbose) {
+      server.config.logger.info(`[restartWorker] userOptions.projectRoot: ${userOptions.projectRoot}`);
+      server.config.logger.info(`[restartWorker] server.config.root: ${server.config.root}`);
+      server.config.logger.info(`[restartWorker] Using projectRoot: ${userOptions.projectRoot || server.config.root}`);
+      server.config.logger.info(`[restartWorker] configEnv.command: ${configEnv?.command}`);
+      server.config.logger.info(`[restartWorker] configEnv.mode: ${configEnv?.mode}`);
+    }
+
+    const workerResult = await createWorker({
+      projectRoot: userOptions.projectRoot || server.config.root,
+      workerPath: userOptions.rscWorkerPath,
+      reverseCondition: "react-server",
+      currentCondition: "react-client",
+      maxListeners: maxListeners,
+      envPrefix:
+        typeof server.config.envPrefix === "string"
+          ? server.config.envPrefix
+          : Array.isArray(server.config.envPrefix)
+          ? server.config.envPrefix[0]
+          : DEFAULT_CONFIG.ENV_PREFIX,
+      workerData: {
+        userOptions: userOptions,
+        resolvedConfig: serializedDevServerConfig(server.config),
+        configEnv: configEnv,
+        reactVersion: React.version,
+        id: "worker/rsc",
+        serverManifest: {}, // staticManifest removed from AutoDiscoveredFiles
+      },
+      transferList: [workerHmrChannel.port2], // Transfer the port properly
+    });
+    
+    if (workerResult.type === "success") {
+      currentWorker = workerResult.worker;
+      if (userOptions.verbose)
+        server.config.logger.info(
+          `[react-client] Set max listeners to ${maxListeners} for ${routeCount} routes`
+        );
+    } else if (workerResult.type === "error") {
+      const panicError = handleError({
+        error: workerResult.error,
+        logger: server.config.customLogger || server.config.logger,
+        mode: getNodeEnv(server.config.mode),
+        panicThreshold: userOptions.panicThreshold,
+        critical: false,
+        context: "restartWorker",
+      });
+      if (panicError != null) {
+        throw panicError;
+      }
+    }
+  } finally {
+    isRestarting = false;
+  }
+
+  return currentWorker;
+};

package/plugin/dev-server/restartWorker.server.ts

@@ -0,0 +1,108 @@
+import { createWorker } from "../worker/createWorker.js";
+import { cleanupWorker } from "../helpers/workerCleanup.js";
+import { serializedDevServerConfig } from "../helpers/serializeUserOptions.js";
+import { MessageChannel, type Worker } from "node:worker_threads";
+import { React } from "../vendor/vendor.server.js";
+import type { RestartWorkerFn } from "../react-client/types.js";
+import { getNodeEnv } from "../config/getNodeEnv.js";
+import { handleError } from "../error/handleError.js";
+import { envPrefixFromConfig } from "../config/envPrefixFromConfig.js";
+import { setMaxListenersOnPort, unrefPort } from "../stream/setMaxListeners.js";
+
+let currentWorker: Worker | null = null;
+let isRestarting = false;
+let currentHmrChannel: MessageChannel | null = null;
+
+export const restartWorker: RestartWorkerFn = async function _restartWorker({
+  server,
+  autoDiscoveredFiles,
+  userOptions,
+  configEnv,
+  hmrChannel,
+}) {
+  if (isRestarting) {
+    // Wait for the current restart to complete
+    while (isRestarting) {
+      await new Promise(resolve => setTimeout(resolve, 10));
+    }
+    return currentWorker;
+  }
+  isRestarting = true;
+
+  try {
+    // Terminate the current worker if it exists
+    cleanupWorker(currentWorker);
+    currentWorker = null;
+
+    // Clean up any existing HMR channel
+    if (currentHmrChannel) {
+      currentHmrChannel.port1.close();
+      currentHmrChannel.port2.close();
+      currentHmrChannel = null;
+    }
+
+    const routeCount = autoDiscoveredFiles.urlMap.size;
+    const hmrBuffer = 20; // Buffer for HMR and other operations
+    const maxListeners = routeCount + hmrBuffer;
+
+    // Create a new MessageChannel for this worker
+    const workerHmrChannel = new MessageChannel();
+    currentHmrChannel = workerHmrChannel;
+    
+    // Increase max listeners to prevent warnings during development
+    setMaxListenersOnPort(workerHmrChannel.port1, maxListeners);
+    setMaxListenersOnPort(workerHmrChannel.port2, maxListeners);
+    unrefPort(workerHmrChannel.port1);
+    unrefPort(workerHmrChannel.port2);
+    
+
+    // Forward messages from the plugin's HMR channel to the worker's channel
+    const messageHandler = (event: Event) => {
+      workerHmrChannel.port1.postMessage((event as MessageEvent).data);
+    };
+    
+    hmrChannel.port1.addEventListener("message", messageHandler);
+
+    const workerResult = await createWorker({
+      projectRoot: server.config.root,
+      workerPath: userOptions.htmlWorkerPath,
+      reverseCondition: "react-client",
+      currentCondition: "react-server",
+      maxListeners: maxListeners,
+      envPrefix: envPrefixFromConfig(server.config),
+      workerData: {
+        userOptions: userOptions,
+        resolvedConfig: serializedDevServerConfig(server.config),
+        configEnv: configEnv,
+        reactVersion: React.version,
+        id: "worker/html",
+        serverManifest: {}, // staticManifest removed from AutoDiscoveredFiles
+      },
+      transferList: [workerHmrChannel.port2],
+    });
+    
+    if (workerResult.type === "success") {
+      currentWorker = workerResult.worker;
+      if (userOptions.verbose)
+        server.config.logger.info(
+          `[react-client] Set max listeners to ${maxListeners} for ${routeCount} routes`
+        );
+    } else if (workerResult.type === "error") {
+      const panicError = handleError({
+        error: workerResult.error,
+        logger: server.config.customLogger || server.config.logger,
+        mode: getNodeEnv(server.config.mode),
+        panicThreshold: userOptions.panicThreshold,
+        critical: false,
+        context: "restartWorker",
+      });
+      if (panicError != null) {
+        throw panicError;
+      }
+    }
+  } finally {
+    isRestarting = false;
+  }
+
+  return currentWorker;
+};

package/plugin/dev-server/restartWorker.ts

@@ -0,0 +1,8 @@
+import { getCondition } from "../config/getCondition.js";
+
+const dir = new URL("./", import.meta.url).pathname.replace(/\/$/, "");
+const condition = getCondition("");
+
+export const { restartWorker } = (await import(`${dir}/restartWorker.${condition}.js`)) as {
+  restartWorker: any;
+}; 

package/plugin/dev-server/types.ts

@@ -0,0 +1,78 @@
+import type { Manifest, ViteDevServer, Logger, ResolvedConfig, ConfigEnv } from "vite";
+import type {
+  AutoDiscoveredFiles,
+  CreateHandlerOptions,
+  ResolvedUserOptions,
+} from "../types.js";
+import type { IncomingMessage, ServerResponse } from "http";
+import type { MessageChannel, Worker } from "node:worker_threads";
+import type { PassThrough } from "node:stream";
+import type { RscChunkOutputMessage } from "../worker/rsc/types.js";
+import type { MessageHandler } from "../types.js";
+
+
+export type ConfigureRequestHandlerFn = (
+  req: IncomingMessage,
+  res: ServerResponse,
+  worker: Worker,
+  logger: ViteDevServer["config"]["logger"]
+) => Promise<void>;
+
+/**
+ * React Worker Server - configures worker-based rendering infrastructure
+ * Similar to configureReactServer but for worker-based rendering
+ */
+export type CreateReactWorkerServerFn = (props: {
+  server: ViteDevServer;
+  autoDiscoveredFiles: AutoDiscoveredFiles;
+  userOptions: ResolvedUserOptions;
+  configEnv: ConfigEnv;
+  hmrChannel?: MessageChannel;
+  serverManifest: Manifest;
+  resolvedConfig: ResolvedConfig;
+  onWorkerCreated?: (worker: any, restart?: () => Promise<void>) => void;
+}) => {
+  restart: (() => Promise<void>) | null;
+  sendHmrUpdate: (file: string, routes?: string[]) => void;
+} | null;
+
+export type HandleServerActionFn = (
+  req: IncomingMessage,
+  res: ServerResponse,
+  server: ViteDevServer,
+  handlerOptions: Pick<
+    CreateHandlerOptions,
+    "verbose" | "moduleBasePath" | "projectRoot" | "loader"
+  >
+) => Promise<void>;
+
+export type ConfigureReactServerFn = (options: {
+  server: ViteDevServer;
+  autoDiscoveredFiles: AutoDiscoveredFiles;
+  userOptions: ResolvedUserOptions;
+  serverManifest: Manifest;
+  resolvedConfig: ResolvedConfig;
+  hmrChannel?: MessageChannel;
+  onWorkerCreated?: (worker: Worker, restart?: () => Promise<void>) => void;
+}) => void;
+
+
+export type CleanupWorkerServerActionFn = (
+  passThrough: PassThrough,
+  worker: Worker,
+  messageHandler: MessageHandler<RscChunkOutputMessage>,
+  res: ServerResponse,
+  error?: unknown,
+  logger?: Logger
+) => void;
+
+
+
+export type CleanupServerActionFn = (
+  passThrough: PassThrough,
+  worker: Worker,
+  messageHandler: MessageHandler<RscChunkOutputMessage>,
+  res: ServerResponse,
+  error?: unknown,
+  logger?: Logger
+) => void;