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

package/plugin/plugin.client.ts

@@ -1,19 +1,46 @@
-import { reactPreservePlugin } from "./preserver/plugin.js";
-import type {
-  StreamPluginOptions,
-  InlineCssOpt,
-  PagePropOpt,
-} from "../types.js";
+import type { StreamPluginOptions } from "../types.js";
 import { reactClientPlugin } from "./react-client/plugin.js";
 import { envPlugin } from "./env/plugin.js";
+import type { Plugin } from "vite";
+import { reactTransformPlugin } from "./transformer/plugin.client.js";
 
-export function vitePluginReactServer<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
->(options = {} as StreamPluginOptions<T, InlineCSS>): import("vite").Plugin[] {
-  return [
-    envPlugin(),
-    reactClientPlugin(options),
-    reactPreservePlugin(options),
-  ];
-}
+export type VitePluginReactClientFn = <
+  Opt extends StreamPluginOptions = StreamPluginOptions
+>(
+  options: Opt
+) => Plugin[];
+
+/**
+ * Vite plugin for the React client, use same name to support dynamic import.
+ * Includes:
+ * - envPlugin
+ * - reactClientPlugin
+ * - reactPreservePlugin (handles directive removal/preservation)
+ * @param options
+ * @returns
+ */
+export const vitePluginReactServer: VitePluginReactClientFn =
+  function _vitePluginReactClient(options) {
+    if (options == null) {
+      throw new Error("options is required");
+    }
+    
+    const plugins = [
+      envPlugin(),
+      reactTransformPlugin(options),
+      reactClientPlugin(options),
+    ];
+    
+    return plugins;
+  };
+
+/**
+ * Vite plugin for the React client, use specific name to support static import (that doesn't conflict with vitePluginReactServer)
+ * Includes:
+ * - envPlugin
+ * - reactClientPlugin
+ * - reactPreservePlugin (handles directive removal/preservation)
+ * @param options
+ * @returns
+ */
+export const vitePluginReactClient = vitePluginReactServer;

package/plugin/plugin.server.ts

@@ -1,31 +1,51 @@
-import { reactPreservePlugin } from "./preserver/plugin.js";
 import { reactStaticPlugin } from "./react-static/plugin.js";
 import { reactTransformPlugin } from "./transformer/plugin.server.js";
-import type { StreamPluginOptions, PagePropOpt, InlineCssOpt } from "./types.js";
+import type {
+  StreamPluginOptions,
+} from "./types.js";
 import { reactServerPlugin } from "./react-server/plugin.js";
 import { envPlugin } from "./env/plugin.js";
+import type { Plugin } from "vite";
 
-
-export function vitePluginReactServer<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
+export type VitePluginReactServerFn = <
+  Opt extends StreamPluginOptions = StreamPluginOptions
 >(
-  options = {} as StreamPluginOptions<T, InlineCSS>
-): import("vite").Plugin[] {
-  if(!options.build?.pages || (Array.isArray(options.build.pages) && options.build.pages.length === 0)) {
-    // in this case we do not need the static plugin at all
-    return [
+  options: Opt
+) => Plugin[];
+
+/**
+ * Vite plugin for the React server, use same name to support dynamic import.
+ * Includes:
+ * - envPlugin
+ * - reactTransformPlugin
+ * - reactServerPlugin
+ * - reactStaticPlugin (if build.pages is not empty)
+ * - reactPreservePlugin (handles directive removal/preservation)
+ */
+export const vitePluginReactServer: VitePluginReactServerFn =
+  function _vitePluginReactServer(
+    options
+  ) {
+    if(options == null) {
+      throw new Error("options is required");
+    }
+    const basePlugins = [
       envPlugin(),
       reactTransformPlugin(options),
       reactServerPlugin(options),
-      reactPreservePlugin(options),
     ];
-  }
-  return [
-    envPlugin(),
-    reactTransformPlugin(options),
-    reactServerPlugin(options),
-    reactStaticPlugin(options),
-    reactPreservePlugin(options),
-  ];
-}
+
+    if (
+      !options.build?.pages ||
+      (Array.isArray(options.build.pages) && options.build.pages.length === 0)
+    ) {
+      // in this case we do not need the static plugin at all
+      return basePlugins;
+    }
+    
+    // Add static plugin for static builds
+    return [
+      ...basePlugins,
+      reactStaticPlugin(options),
+    ];
+  };

package/plugin/process-env.ts

@@ -1,13 +1,34 @@
+import { DEFAULT_CONFIG } from "./config/defaults.js";
+import { getEnvKey } from "./env/getEnvKey.js";
+
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
-      VITE_BASE_URL: string;
-      VITE_DEV: string;
-      VITE_PROD: string;
-      VITE_SSR: string;
-      VITE_MODE: string;
-      VITE_PUBLIC_ORIGIN: string;
+      // Base environment variables (these use the configured prefix)
+      [key: string]: string | undefined;
     }
   }
 }
+
+/**
+ * Creates a type-safe environment variable accessor for a specific prefix
+ * @param prefix The environment prefix (e.g., "VITE_", "CUSTOM_")
+ * @returns Object with typed environment variable accessors
+ */
+export function createEnvAccessor(prefix: string = DEFAULT_CONFIG.ENV_PREFIX) {
+  return {
+    MODE: process.env[getEnvKey("MODE", prefix)],
+    DEV: process.env[getEnvKey("DEV", prefix)],
+    PROD: process.env[getEnvKey("PROD", prefix)],
+    SSR: process.env[getEnvKey("SSR", prefix)],
+    BASE_URL: process.env[getEnvKey("BASE_URL", prefix)],
+    PUBLIC_ORIGIN: process.env[getEnvKey("PUBLIC_ORIGIN", prefix)]
+  };
+}
+
+/**
+ * Type definition for environment variables with a specific prefix
+ */
+export type PrefixedEnv = ReturnType<typeof createEnvAccessor>;
+
 export {};

package/plugin/react-client/cleanupWorkerServerAction.ts

@@ -0,0 +1,33 @@
+import type { Logger } from "vite";
+import type { Worker } from "node:worker_threads";
+import { logError } from "../error/logError.js";
+import type { MessageHandler } from "../types.js";
+import type { ServerResponse } from "node:http";
+import type { RscChunkOutputMessage } from "../worker/rsc/types.js";
+import type { PassThrough } from "node:stream";
+
+/**
+ * Handles cleanup of worker server action resources
+ */
+export function cleanupWorkerServerAction(
+  passThrough: PassThrough,
+  worker: Worker,
+  messageHandler: MessageHandler<RscChunkOutputMessage>,
+  res: ServerResponse,
+  error?: unknown,
+  logger?: Logger
+) {
+  // Remove message handler first to prevent any new messages
+  worker.removeListener("message", messageHandler);
+
+  // End the pass-through stream
+  passThrough.end();
+
+  // Log error if provided
+  if (error && logger) {
+    logError(error, logger);
+  }
+
+  // End the response
+  res.end();
+}

package/plugin/react-client/configureWorkerRequestHandler.ts

@@ -1,24 +1,31 @@
 import type { ViteDevServer } from "vite";
 import type {
   AutoDiscoveredFiles,
-  InlineCssOpt,
-  PagePropOpt,
   RenderMetrics,
   RequestHandler,
   ResolvedUserOptions,
   StreamMetrics,
 } from "../types.js";
-import { MessageChannel, type Worker } from "node:worker_threads";
+import type { MessageChannel } from "node:worker_threads";
+import { type Worker } from "node:worker_threads";
 import { serializedOptions } from "../helpers/serializeUserOptions.js";
 import { requestInfo } from "../helpers/requestInfo.js";
 import { performance } from "node:perf_hooks";
 import { restartWorker } from "./restartWorker.js";
 import { handleWorkerRscStream } from "./handleWorkerRscStream.js";
 import { getRouteFiles } from "../helpers/getRouteFiles.js";
-import type { RscWorkerInputMessage } from "../worker/types.js";
+import type { RscWorkerInputMessage } from "../worker/rsc/types.js";
 import { Readable } from "node:stream";
 import type { ReadableStream } from "node:stream/web";
 import { handleWorkerServerAction } from "./handleWorkerServerAction.js";
+import { logError } from "../error/logError.js";
+
+export type ConfigureWorkerRequestHandlerFn = (props: {
+  server: ViteDevServer;
+  autoDiscoveredFiles: AutoDiscoveredFiles;
+  userOptions: ResolvedUserOptions;
+  hmrChannel: MessageChannel;
+}) => void;
 
 /**
  * Configures the worker request handler.
@@ -26,219 +33,217 @@ import { handleWorkerServerAction } from "./handleWorkerServerAction.js";
  * @param autoDiscoveredFiles - The auto discovered files
  * @param userOptions - The user options
  */
-export async function configureWorkerRequestHandler<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
->({
-  server,
-  autoDiscoveredFiles,
-  userOptions: _userOptions,
-  hmrChannel,
-  onMetrics,
-}: {
-  server: ViteDevServer;
-  autoDiscoveredFiles: AutoDiscoveredFiles;
-  userOptions: ResolvedUserOptions<T, InlineCSS>;
-  hmrChannel: MessageChannel;
-  onMetrics?: (metrics: RenderMetrics) => void;
-}) {
-  let {
-    // remove these
-    projectRoot: _projectRoot,
-    moduleBaseURL: _moduleBaseURL,
-    ...handlerUserOptions
-  } = _userOptions;
-  const handlerOptions = Object.assign({}, handlerUserOptions, {
-    moduleBaseURL: server.config.base,
-    moduleBasePath: server.config.base,
-    projectRoot: server.config.root,
-  });
+export const configureWorkerRequestHandler: ConfigureWorkerRequestHandlerFn =
+  async function _configureWorkerRequestHandler({
+    server,
+    autoDiscoveredFiles,
+    userOptions: _userOptions,
+    hmrChannel,
+  }) {
+    const logger = server.config.customLogger || server.config.logger;
+    const {
+      // remove these
+      projectRoot: _projectRoot,
+      moduleBaseURL: _moduleBaseURL,
+      ...handlerUserOptions
+    } = _userOptions;
+    const handlerOptions = Object.assign({}, handlerUserOptions, {
+      moduleBaseURL: server.config.base,
+      projectRoot: server.config.root,
+      logger: logger,
+    });
 
-  // Start the worker
-  let currentWorker: Worker | null = null;
-  const logger = server.config.logger;
+    // Start the worker
+    let currentWorker: Worker | null = null;
 
-  // Handle server restarts
-  server.ws.on("restart", async () => {
-    logger.info("[react-client] Server restarting, shutting down worker...");
-    if (currentWorker) {
-      currentWorker.postMessage({
-        type: "SHUTDOWN",
-        id: "*",
-      } satisfies RscWorkerInputMessage);
-      await new Promise((resolve, reject) => {
-        currentWorker?.on("message", (message) => {
-          if (message.type === "SHUTDOWN_COMPLETE") {
-            resolve(true);
-          } else {
-            reject("Did not receive SHUTDOWN_COMPLETE");
-          }
+    // Handle server restarts
+    server.ws.on("restart", async () => {
+      logger.info("[react-client] Server restarting, shutting down worker...");
+      if (currentWorker) {
+        currentWorker.postMessage({
+          type: "SHUTDOWN",
+          id: "*",
+        } satisfies RscWorkerInputMessage);
+        await new Promise((resolve, reject) => {
+          currentWorker?.on("message", (message) => {
+            if (message.type === "SHUTDOWN_COMPLETE") {
+              resolve(true);
+            } else {
+              reject("Did not receive SHUTDOWN_COMPLETE");
+            }
+          });
         });
-      });
-      currentWorker.removeAllListeners();
-      currentWorker = null;
-    }
-  });
+        currentWorker.removeAllListeners();
+        currentWorker = null;
+      }
+    });
 
-  // Create the request handler
-  const handler: RequestHandler = async (req, res, next) => {
-    if (!req.url) return next();
+    // Create the request handler
+    const handler: RequestHandler = async (req, res, next) => {
+      if (!req.url) return next();
 
-    const info = requestInfo(req, handlerOptions, "", server.config.logger);
+      const info = requestInfo(req, handlerOptions, "");
 
-    // Serialize user options for worker
-    const serializedUserOptions = serializedOptions<T, InlineCSS>(
-      handlerOptions,
-      autoDiscoveredFiles
-    );
+      // Serialize user options for worker
+      const serializedUserOptions = serializedOptions(
+        handlerOptions,
+        autoDiscoveredFiles
+      );
 
-    // Handle server action requests
-    if (info.isServerActionRequest) {
-      if (!currentWorker) {
-        currentWorker = await restartWorker({
-          server,
-          autoDiscoveredFiles,
-          userOptions: serializedUserOptions,
-          hmrChannel,
-        });
-      }
-      if (!currentWorker) {
-        throw new Error("Failed to start worker");
+      // Handle server action requests
+      if (info.isServerActionRequest) {
+        if (!currentWorker) {
+          currentWorker = await restartWorker({
+            server,
+            autoDiscoveredFiles,
+            userOptions: serializedUserOptions,
+            hmrChannel,
+          });
+        }
+        if (!currentWorker) {
+          throw new Error("Failed to start worker");
+        }
+        return handleWorkerServerAction(req, res, currentWorker, logger);
       }
-      return handleWorkerServerAction(req, res, currentWorker, server.config.logger);
-    }
-
-    // Handle RSC requests
-    if (!info.isRscRequest) {
-      return next();
-    }
 
-    const routeFiles = await getRouteFiles(
-      info.route,
-      autoDiscoveredFiles,
-      handlerOptions
-    );
-    if (routeFiles.type === "error") {
-      logger.error(routeFiles.error.message);
-      return next();
-    }
-    const pagePath = routeFiles.page;
-    const propsPath = routeFiles.props;
-    try {
-      // Set up response headers for streaming
-      res.setHeader("Content-Type", info.contentType);
-      res.setHeader("Transfer-Encoding", "chunked");
-      res.setHeader("Connection", "keep-alive");
+      // Handle RSC requests
+      if (!info.isRscRequest) {
+        return next();
+      }
 
-      const userOnMetrics =
-        typeof onMetrics === "function"
-          ? (metrics: StreamMetrics) => {
-              const elapsedTime = performance.now() - startTime;
-              const formattedMetrics = {
-                route: info.route,
-                htmlSize: 0,
-                rscSize: metrics.bytes,
-                processingTime: elapsedTime,
-                chunks: metrics.chunks,
-                chunkRate: metrics.chunks / (elapsedTime / 1000),
-                memoryUsage: process.memoryUsage(),
-                streamMetrics: {
-                  ...metrics,
-                  duration: elapsedTime,
-                },
-                htmlSizes: new Map(),
-                rscSizes: new Map([[info.route, metrics.bytes]]),
-              } satisfies RenderMetrics;
-              onMetrics(formattedMetrics);
-            }
-          : () => {};
-      const startTime = performance.now();
-      if (!currentWorker) {
-        currentWorker = await restartWorker({
-          server,
-          autoDiscoveredFiles,
-          userOptions: serializedUserOptions,
-          hmrChannel,
-        });
+      const routeFiles = await getRouteFiles(
+        info.route,
+        autoDiscoveredFiles,
+        handlerOptions,
+        logger
+      );
+      if (routeFiles.type === "error") {
+        logError(routeFiles.error, logger);
+        return next();
       }
-      const stream = handleWorkerRscStream({
-        worker: currentWorker!,
-        message: {
-          ...serializedUserOptions,
-          id: info.route,
-          type: "RSC_RENDER",
-          // we make the worker stream aware of the route, pagePath, propsPath
-          route: info.route,
-          pagePath: pagePath,
-          propsPath: propsPath,
-          // override these at all times to ensure the settings will work for the dev server
-          projectRoot: server.config.root,
-          build: serializedUserOptions.build,
-          manifest: autoDiscoveredFiles.staticManifest,
-          cssFiles: new Map(),
-          globalCss: new Map(),
-        },
-        logger,
-        handlers: {
-          onMetrics: (id, metrics) => {
-            metrics.route = id;
-            userOnMetrics(metrics);
-          },
-          onHmrAccept: () => {
-            // TODO: implement
-            // console.log("onHmrAccept", routes);
+      const pagePath = routeFiles.page;
+      const propsPath = routeFiles.props;
+      const rootPath = routeFiles.root;
+      const htmlPath = routeFiles.html;
+      try {
+        // Set up response headers for streaming
+        res.setHeader("Content-Type", info.contentType);
+        res.setHeader("Transfer-Encoding", "chunked");
+        res.setHeader("Connection", "keep-alive");
+
+        const userOnMetrics =
+          typeof handlerOptions.onMetrics === "function"
+            ? (metrics: StreamMetrics) => {
+                const elapsedTime = performance.now() - startTime;
+                const formattedMetrics = {
+                  route: info.route,
+                  htmlSize: 0,
+                  rscSize: metrics.bytes,
+                  processingTime: elapsedTime,
+                  chunks: metrics.chunks,
+                  chunkRate: metrics.chunks / (elapsedTime / 1000),
+                  memoryUsage: process.memoryUsage(),
+                  streamMetrics: {
+                    ...metrics,
+                    duration: elapsedTime,
+                  },
+                  htmlSizes: new Map(),
+                  rscSizes: new Map([[info.route, metrics.bytes]]),
+                } satisfies RenderMetrics;
+                handlerOptions.onMetrics(formattedMetrics);
+              }
+            : () => {};
+        const startTime = performance.now();
+        if (!currentWorker) {
+          currentWorker = await restartWorker({
+            server,
+            autoDiscoveredFiles,
+            userOptions: serializedUserOptions,
+            hmrChannel,
+          });
+        }
+        const stream = handleWorkerRscStream({
+          worker: currentWorker!,
+          message: {
+            ...serializedUserOptions,
+            id: info.route,
+            type: "RSC_RENDER",
+            // we make the worker stream aware of the route, pagePath, propsPath, rootPath, htmlPath
+            route: info.route,
+            pagePath: pagePath,
+            propsPath: propsPath,
+            rootPath: rootPath,
+            htmlPath: htmlPath,
+            // override these at all times to ensure the settings will work for the dev server
+            projectRoot: server.config.root,
+            build: {
+              ...(serializedUserOptions.build || {}),
+              pages: Array.isArray(serializedUserOptions.build?.pages)
+                ? serializedUserOptions.build.pages
+                : [],
+            },
+            manifest: autoDiscoveredFiles.staticManifest,
+            cssFiles: new Map(),
+            globalCss: new Map(),
           },
-          onHmrUpdate: () => {
-            // TODO: implement
-            // console.log("onHmrUpdate", routes);
+          logger,
+          handlers: {
+            onMetrics: (id, metrics) => {
+              metrics.route = id;
+              userOnMetrics(metrics);
+            },
+            onHmrAccept: () => {
+              // TODO: implement
+              // console.log("onHmrAccept", routes);
+            },
+            onHmrUpdate: () => {
+              // TODO: implement
+              // console.log("onHmrUpdate", routes);
+            },
           },
-        },
-        verbose: handlerOptions.verbose,
-      });
+          verbose: handlerOptions.verbose,
+          rscTimeout: handlerOptions.rscTimeout,
+        });
 
-      // Pipe the stream to the response
-      if (res.writable) {
-        Readable.fromWeb(stream as unknown as ReadableStream).pipe(res);
+        // Pipe the stream to the response
+        if (res.writable) {
+          Readable.fromWeb(stream as unknown as ReadableStream).pipe(res);
+        }
+        // wait for timeout
+      } catch (error) {
+        logError(error, logger);
       }
-      // wait for timeout
-    } catch (error) {
-      if (error instanceof Error) {
-        server.config.logger.error(error.message + (error.stack ?? ""), {
-          error,
+      let timeout: NodeJS.Timeout;
+      try {
+        await new Promise((reject) => {
+          timeout = setTimeout(() => {
+            clearTimeout(timeout);
+            reject(new Error("RSC Render timeout"));
+          }, handlerOptions.rscTimeout);
         });
-      }
-    }
-    let timeout: NodeJS.Timeout;
-    try {
-      await new Promise((reject) => {
-        timeout = setTimeout(() => {
-          clearTimeout(timeout);
-          reject(new Error("RSC Render timeout"));
-        }, 5000);
-      });
-    } catch {
-      if (currentWorker) {
-        currentWorker.postMessage({
-          type: "SHUTDOWN",
-          id: "*",
-        } satisfies RscWorkerInputMessage);
-        await new Promise((resolve, reject) => {
-          currentWorker?.on("message", (message) => {
-            if (message.type === "SHUTDOWN_COMPLETE") {
-              resolve(true);
-            } else {
-              reject("Dit not receive SHUTDOWN_COMPLETE");
-            }
+      } catch {
+        if (currentWorker) {
+          currentWorker.postMessage({
+            type: "SHUTDOWN",
+            id: "*",
+          } satisfies RscWorkerInputMessage);
+          await new Promise((resolve, reject) => {
+            currentWorker?.on("message", (message) => {
+              if (message.type === "SHUTDOWN_COMPLETE") {
+                resolve(true);
+              } else {
+                reject("Did not receive SHUTDOWN_COMPLETE");
+              }
+            });
           });
-        });
-        currentWorker.removeAllListeners();
+          currentWorker.removeAllListeners();
+        }
+        logger.error("RSC render timeout.");
+        clearTimeout(timeout!);
+        res.end();
       }
-      server.config.logger.error("RSC render timeout.");
-      clearTimeout(timeout!);
-      res.end();
-    }
+    };
+    // attach handler to the server
+    server.middlewares.use(handler);
+    // port check, should be handled by strictPort
   };
-  // attach handler to the server
-  server.middlewares.use(handler);
-  // port check, should be handled by strictPort
-}