vite-plugin-react-server 1.1.3 → 1.1.5

package/plugin/react-client/server.ts

@@ -8,7 +8,6 @@ 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 {
@@ -17,6 +16,7 @@ import {
 } from "../helpers/serializeUserOptions.js";
 import { createWorker } from "../worker/createWorker.js";
 import { getRouteFiles } from "../helpers/getRouteFiles.js";
+import { requestToRoute } from "../helpers/requestToRoute.js";
 
 let currentWorker: NodeWorker | null = null;
 let isRestarting = false;
@@ -169,7 +169,7 @@ export function handleWorkerRscStream(
 export async function configureWorkerRequestHandler({
   server,
   autoDiscoveredFiles,
-  userOptions,
+  userOptions: _userOptions,
   hmrChannel,
 }: {
   server: ViteDevServer;
@@ -177,15 +177,30 @@ export async function configureWorkerRequestHandler({
   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;
-  }
+  let {
+    // remove these
+    moduleBaseURL: _moduleBaseURL,
+    projectRoot: _projectRoot,
+    ...handlerUserOptions
+  } = _userOptions;
+  const handlerOptions = Object.assign({}, handlerUserOptions, {
+    moduleBaseURL:
+      typeof server.config.server.host === "string"
+        ? `${server.config.server.https ? "https" : "http"}://${
+            server.config.server.host
+          }:${server.config.server.port}`
+        : "",
+    moduleBasePath:
+      server.config.base === "/"
+        ? ""
+        : server.config.base.endsWith("/")
+        ? server.config.base.slice(0, -1)
+        : server.config.base,
+    projectRoot: server.config.root,
+  });
 
   // Start the worker
-  await restartWorker(server, autoDiscoveredFiles, userOptions, hmrChannel);
+  await restartWorker(server, autoDiscoveredFiles, handlerOptions, hmrChannel);
 
   // Create the request handler
   const handler: RequestHandler = async (req, res, next) => {
@@ -197,18 +212,24 @@ export async function configureWorkerRequestHandler({
       }
 
       // Get the route from the request
-      let route = req.url;
-      if (!route || route === "") route = "/";
+      let route = requestToRoute(req, {
+        moduleBasePath: handlerOptions.moduleBasePath,
+        build: handlerOptions.build
+      });
+      if (!route) {
+        return next();
+      }
       // 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
+        handlerOptions
       );
       if (routeFiles.type === "error") {
-        server.config.logger.error("[react-client] Error getting route files", {
+        server.config.logger.error(routeFiles.error.message, {
           error: routeFiles.error,
+          timestamp: true,
         });
         return next();
       }
@@ -218,12 +239,8 @@ export async function configureWorkerRequestHandler({
       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,
+        handlerOptions,
         autoDiscoveredFiles
       );
       const stream = handleWorkerRscStream(currentWorker, {
@@ -234,37 +251,42 @@ export async function configureWorkerRequestHandler({
         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(),
       });
+      const writeStream = new WritableStream({
+        write(chunk) {
+          res.write(chunk);
+        },
 
-      // 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,
+            handlerOptions,
+            hmrChannel
+          );
+          res.end();
+        },
+      })
+      let timeout = setTimeout(() => {
+        server.config.logger.error("[react-client] RSC render timeout");
+        res.end();
+      }, 5000);
 
-          close() {
-            clearTimeout(timeout);
-            res.end();
-          },
-          abort() {
-            clearTimeout(timeout);
-            // Restart worker on error
-            restartWorker(server, autoDiscoveredFiles, userOptions, hmrChannel);
-            res.end();
-          },
-        })
-      );
+      // Pipe the stream to the response
+      stream.pipeTo(writeStream);
     } catch (error) {
       if (error instanceof Error) {
-        server.config.logger.error("[react-client] Error handling request", {
+        server.config.logger.error(error.message, {
           error,
         });
       }

package/plugin/react-server/server.ts

@@ -1,4 +1,4 @@
-import type {  Manifest, ViteDevServer } from "vite";
+import type { Manifest, ViteDevServer } from "vite";
 import type { ServerResponse } from "http";
 import type { AutoDiscoveredFiles, ResolvedUserOptions } from "../types.js";
 import { createEventHandler } from "../helpers/createEventHandler.js";
@@ -10,7 +10,7 @@ import React from "react";
 export async function configureReactServer({
   server,
   autoDiscoveredFiles,
-  userOptions,
+  userOptions: _userOptions,
   serverManifest,
 }: {
   server: ViteDevServer;
@@ -20,6 +20,31 @@ export async function configureReactServer({
 }) {
   const activeStreams = new Set<ServerResponse>();
 
+  const {
+    Html: _UserHtmlComponent,
+    onEvent,
+    // remove these
+    moduleBaseURL: _moduleBaseURL,
+    moduleBasePath: _moduleBasePath,
+    projectRoot: _projectRoot,
+    ...handlerUserOptions
+  } = _userOptions;
+
+  const handlerOptions = Object.assign({}, handlerUserOptions, {
+    moduleBaseURL:
+      typeof server.config.server.host === "string"
+        ? `${server.config.server.https ? "https" : "http"}://${
+            server.config.server.host
+          }:${server.config.server.port}`
+        : "",
+    moduleBasePath:
+      server.config.base === "/"
+        ? ""
+        : server.config.base.endsWith("/")
+        ? server.config.base.slice(0, -1)
+        : server.config.base,
+    projectRoot: server.config.root,
+  });
   // Handle Vite server restarts
   server.ws.on("restart", (path) => {
     console.log(
@@ -41,10 +66,21 @@ export async function configureReactServer({
   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, "");
+      let route = req.url?.replace("/" + handlerOptions.build.rscOutputPath, "");
+      if(!route?.startsWith(handlerOptions.moduleBasePath)) {
+        next();
+      } else {
+        route  = route.slice(handlerOptions.moduleBasePath.length);
+      }
+      if(typeof route !== "string" ) {
+        throw new Error("req.url is not a string");
+      }
       if (!route || route === "") {
         route = "/";
       }
+      if(!route.startsWith("/")) {
+        route = "/" + route;
+      }
       if (!autoDiscoveredFiles.urlMap.has(route)) {
         return next();
       }
@@ -52,26 +88,19 @@ export async function configureReactServer({
       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,
+        loader: (i) => server.ssrLoadModule(i, { fixStacktrace: true }),
+        // explicitly set for development server
+        moduleBaseURL: handlerOptions.moduleBaseURL,
+        moduleBasePath: handlerOptions.moduleBasePath,
+        moduleRootPath: handlerOptions.moduleRootPath,
+        projectRoot: handlerOptions.projectRoot,
+        css: handlerOptions.css,
         parentUrl: pagePath,
       });
       if (cssFilesResult.type === "skip") {
@@ -85,8 +114,8 @@ export async function configureReactServer({
         propsPath,
         route,
         loader: server.ssrLoadModule,
-        pageExportName: userOptions.pageExportName ?? "default",
-        propsExportName: userOptions.propsExportName ?? "default",
+        pageExportName: handlerOptions.pageExportName ?? "default",
+        propsExportName: handlerOptions.propsExportName ?? "default",
       });
       if (pageAndPropsResult.type === "error") {
         throw pageAndPropsResult.error;
@@ -95,9 +124,9 @@ export async function configureReactServer({
         return next();
       }
       const { PageComponent, pageProps } = pageAndPropsResult;
-      // Create the headless RSC stream directly
+      // Create the headless RSC stream directly;
       const rscResult = await createHandler({
-        ...handlerUserOptions,
+        ...handlerOptions,
         PageComponent: PageComponent,
         pageProps: pageProps,
         logger: server.config.logger,
@@ -110,8 +139,6 @@ export async function configureReactServer({
         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") {

package/plugin/react-static/plugin.ts

@@ -138,6 +138,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
       timing.renderStart = Date.now();
     },
 
+
     async writeBundle(options, bundle) {
       try {
         const bundleManifest = getBundleManifest<false>({
@@ -158,7 +159,11 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
 
         const clientManifestResult = await tryManifest({
           root: userOptions.projectRoot,
-          outDir: join(userOptions.build.outDir, userOptions.build.client),
+          outDir: join(
+            userOptions.build.outDir,
+            userOptions.build.client,
+            userOptions.moduleBasePath
+          ),
           ssrManifest: false,
         });
         if (clientManifestResult.type === "error") {
@@ -268,7 +273,16 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         const pipeableStreamOptions = {
           ...userOptions.pipeableStreamOptions,
           bootstrapModules: [
-            ...(indexHtml ? [new URL(indexHtml, userOptions.moduleBaseURL).href] : []),
+            ...(indexHtml
+              ? [
+                  userOptions.moduleBaseURL !== ""
+                    ? new URL(
+                        join(userOptions.moduleBasePath, indexHtml),
+                        userOptions.moduleBaseURL
+                      ).href
+                    : join(userOptions.moduleBasePath, indexHtml),
+                ]
+              : []),
             ...(userOptions.pipeableStreamOptions?.bootstrapModules ?? []),
           ],
         };
@@ -279,31 +293,37 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         );
         // Create worker
         if (!worker) {
+          const viteEnvPrefix = typeof resolvedConfig.envPrefix === 'string' ? resolvedConfig.envPrefix : Array.isArray(resolvedConfig.envPrefix) ? resolvedConfig.envPrefix[0] : 'VITE_'
           const workerResult = await createWorker({
             projectRoot: userOptions.projectRoot,
             workerPath: userOptions.htmlWorkerPath,
             currentCondition: "react-server",
             reverseCondition: "react-client",
+            envPrefix: viteEnvPrefix,
             workerData: {
               resolvedConfig: serializeResolvedConfig(resolvedConfig),
-              userOptions: serializedUserOptions,
+              userOptions: {
+                ...serializedUserOptions,
+              },
             },
           });
           if (workerResult.type === "error") {
             throw workerResult.error;
           } else if (workerResult.type === "skip") {
-            this.environment.logger.info("Worker not created, skipping static build");
+            this.environment.logger.info(
+              "Worker not created, skipping static build"
+            );
             return;
           } else {
             worker = workerResult.worker;
           }
         }
         // Render pages
-        const { onEvent, ...rest } = userOptions;
+        const { onEvent, ...handlerOptions } = userOptions;
         const renderPagesGenerator = renderPages(
           autoDiscoveredFiles!,
           {
-            ...rest,
+            ...handlerOptions,
             loader: buildLoader,
             worker: worker,
             logger: createLogger(),
@@ -329,7 +349,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
             },
             globalCss: globalCss,
           },
-          cssFilesByPage,
+          cssFilesByPage
         );
 
         // Process render results
@@ -344,11 +364,13 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         if (!finalResult) {
           throw new Error("No render result produced");
         }
-        finalResult.streamMetrics.duration = Math.round(performance.now() - finalResult.streamMetrics.startTime);
-        
-      this.environment.logger.info(`Rendered ${finalResult.completedRoutes.size} unique routes in ${
-        finalResult.streamMetrics.duration
-      }ms`);
+        finalResult.streamMetrics.duration = Math.round(
+          performance.now() - finalResult.streamMetrics.startTime
+        );
+
+        this.environment.logger.info(
+          `Rendered ${finalResult.completedRoutes.size} unique routes in ${finalResult.streamMetrics.duration}ms`
+        );
 
         // Update timing
         timing.render = Date.now() - (timing.renderStart ?? timing.start);

package/plugin/react-static/renderPage.ts

@@ -44,7 +44,6 @@ export async function* renderPage(
     } satisfies CreateHandlerOptions;
     // Create streams with CSS files
     const [rscFull, rscHeadless] = await renderStreams(newHandlerOptions);
-
     // Handle stream creation errors
     if (rscFull.type !== "success") {
       yield {

package/plugin/transformer/plugin.client.ts

@@ -37,6 +37,15 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
   if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
   userOptions = resolvedOptionsResult.userOptions;
   let staticManifest: Manifest;
+  const getID = (id: string) => {
+    if(userOptions.moduleBasePath !== '' && !id.startsWith(userOptions.moduleBasePath)) {
+      id = join(userOptions.moduleBasePath, id);
+    }
+    if(!id.startsWith('/')) {
+      id = '/' + id;
+    }
+    return id;
+  }
   return {
     name: "vite:react-server-action-transform",
     enforce: "pre",
@@ -73,13 +82,14 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
       }
       if (isServer && isBuild) {
         const [key] = userOptions.normalizer(id);
-        id = "/" + key + ".js";
+        id = key + ".js";
       }
-      const transformed = await transformModuleIfNeeded(code, id, null);
+      const finalID = getID(id);
+      const transformed = await transformModuleIfNeeded(code, finalID, null);
       if (!transformed) return null;
       return {
         code: transformed,
-        id: id,
+        id: finalID,
         map: null,
       };
     },

package/plugin/transformer/plugin.server.ts

@@ -38,6 +38,15 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
 
   let staticManifest: Manifest;
 
+  const getID = (id: string) => {
+    if(userOptions.moduleBasePath !== '' && !id.startsWith(userOptions.moduleBasePath)) {
+      id = join(userOptions.moduleBasePath, id);
+    }
+    if(!id.startsWith('/')) {
+      id = '/' + id;
+    }
+    return id;
+  }
   return {
     name: "vite:react-server-transform",
     enforce: "pre", // Run before Vite's transforms
@@ -59,12 +68,12 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
       if (!ssr) return null;
       if (!userOptions.autoDiscover.modulePattern(id)) return null;
       if (!code.match('"use client"')) return null;
-
+    
       if (isBuild) {
         const [key, value] = userOptions.normalizer(id);
         if (staticManifest) {
           if (value in staticManifest) {
-            id = '/' + staticManifest[value].file;
+            id = staticManifest[value].file
           } else {
             const hash = this.emitFile({
               id,
@@ -75,15 +84,16 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
             // get fileName from hash
 
             const fileName = this.getFileName(hash);
-            id = '/' + fileName;
+            id = fileName;
           }
         } else {
           throw new Error(`Client manifest not found.`);
         }
       }
+      const finalID = getID(id);
       const transformed = await transformModuleIfNeeded(
         code,
-        id,
+        finalID,
         // Pass null for nextLoad since we don't need module loading in the plugin
         null
       );

package/plugin/worker/createWorker.ts

@@ -1,7 +1,7 @@
 import {
   Worker,
   type ResourceLimits,
-  type TransferListItem
+  type TransferListItem,
 } from "node:worker_threads";
 import { getMode, getNodePath } from "../config/getPaths.js";
 import { getCondition } from "../config/getCondition.js";
@@ -14,6 +14,7 @@ export type CreateWorkerOptions = {
   currentCondition?: "react-server" | "react-client";
   nodePath?: string;
   nodeOptions?: string[];
+  envPrefix?: string;
   mode?: "production" | "development";
   reverseCondition?: string;
   maxListeners?: number;
@@ -50,6 +51,7 @@ export async function createWorker(
     projectRoot = process.cwd(),
     nodePath = getNodePath(projectRoot),
     currentCondition = getCondition(),
+    envPrefix = "VITE_",
     reverseCondition = currentCondition === "react-server"
       ? "react-client"
       : "react-server",
@@ -61,7 +63,7 @@ export async function createWorker(
       maxYoungGenerationSizeMb: 64,
     },
     htmlChunkSize = 8 * 1024,
-    transferList = []
+    transferList = [],
   } = options;
   let workerPathWithDefault =
     typeof workerPath === "string" ? workerPath : undefined;
@@ -78,20 +80,10 @@ export async function createWorker(
   // Ensure worker uses the same React version
   const workerData = {
     ...options.workerData,
-    importMeta: {
-      env: {
-        DEV: mode === 'development' ? 'true' : 'false',
-        MODE: mode,
-        PROD: mode === 'production' ? 'true' : 'false',
-        SSR: true,
-        BASE_URL: '/',
-      },
-    },
     reactVersion: React.version,
   };
 
   try {
-
     // Ensure consistent NODE_ENV between main thread and worker
     const isTestEnv =
       process.env["VITEST"] || process.env["NODE_ENV"] === "test";
@@ -99,12 +91,17 @@ export async function createWorker(
 
     const env = {
       ...process.env,
-      BASE_URL: '/',
-      VITE_DEV: mode === 'development' ? '1' : '0',
-      VITE_MODE: mode,
-      VITE_PROD: mode === 'production' ? '1' : '0',
-      VITE_SSR: 'true',
-      VITE_BASE_URL: '/',
+      [envPrefix + "DEV"]: mode === "development" ? "1" : "0",
+      [envPrefix + "MODE"]: mode,
+      [envPrefix + "PROD"]: mode === "production" ? "1" : "0",
+      [envPrefix + "SSR"]: "true",
+      [envPrefix + "BASE"]:
+        options.workerData.userOptions.moduleBasePath === "" ||
+        options.workerData.userOptions.moduleBasePath === "/"
+          ? "/"
+          : !options.workerData.userOptions.moduleBasePath.endsWith("/")
+          ? options.workerData.userOptions.moduleBasePath + "/"
+          : options.workerData.userOptions.moduleBasePath,
       NODE_ENV: nodeEnv,
       NODE_PATH: nodePath,
       NODE_OPTIONS: process.env["NODE_OPTIONS"]?.includes(reverseCondition)
@@ -140,10 +137,12 @@ export async function createWorker(
         worker.once("message", (msg) => {
           if (msg.type === "READY") {
             clearTimeout(timeout);
-            if(msg.env !== nodeEnv) {
+            if (msg.env !== nodeEnv) {
               reject({
                 type: "error",
-                error: new Error(`Worker environment mismatch: ${msg.env} !== ${nodeEnv}`),
+                error: new Error(
+                  `Worker environment mismatch: ${msg.env} !== ${nodeEnv}`
+                ),
                 workerPath: workerPathWithDefault,
               } satisfies CreateWorkerError);
             }
@@ -185,4 +184,3 @@ export async function createWorker(
     return error as CreateWorkerError;
   }
 }
-