vite-plugin-react-server 1.1.4 → 1.1.6

package/plugin/config/resolveUrlOption.ts

@@ -1,29 +1,38 @@
-import type { ResolvedUserOptions } from '../types.js';
+import type { ResolvedUserOptions } from "../types.js";
 
 type ResolvePageAndPropsOptionsSuccess<T extends "Page" | "props"> = {
   [optionName in T]: string;
-} & {type: "success"; error?:never}
+} & { type: "success"; error?: never };
 
 type ResolvePageAndPropsOptionsError<T extends "Page" | "props"> = {
   [optionName in T]?: never;
-} & { type: "error"; error: Error }
+} & { type: "error"; error: Error };
 
 export async function resolveUrlOption<T extends "Page" | "props">(
-  options: Pick<ResolvedUserOptions, T>,
+  options: Pick<ResolvedUserOptions, T | "moduleBasePath">,
   optionName: T,
   url: string
-): Promise<ResolvePageAndPropsOptionsSuccess<T> | ResolvePageAndPropsOptionsError<T>> {
+): Promise<
+  ResolvePageAndPropsOptionsSuccess<T> | ResolvePageAndPropsOptionsError<T>
+> {
   try {
     switch (typeof options[optionName]) {
       case "function":
-        const result = options[optionName](url);
-        if(typeof result === "string") {
+        const result = options[optionName](
+          // quick normalization to make it easier to work with dynamic moduleBasePaths (so that you don't have to change the Page/props function)
+          options.moduleBasePath !== "" &&
+            options.moduleBasePath !== "/" &&
+            url.startsWith(options.moduleBasePath)
+            ? url.slice(options.moduleBasePath.length)
+            : url
+        );
+        if (typeof result === "string") {
           return { type: "success", [optionName]: result };
         }
-        if(result instanceof Promise) {
+        if (result instanceof Promise) {
           try {
             const promiseResult = await result;
-            if(typeof promiseResult === "string") {
+            if (typeof promiseResult === "string") {
               return { type: "success", [optionName]: promiseResult };
             }
           } catch (error) {
@@ -40,4 +49,4 @@ export async function resolveUrlOption<T extends "Page" | "props">(
   } catch (error) {
     return { type: "error", error: error as Error };
   }
-} 
+}

package/plugin/config/resolveUserConfig.ts

@@ -101,6 +101,7 @@ export function resolveUserConfig({
       ...config,
       root: root,
       mode: mode,
+      base: userOptions.moduleBasePath,
       resolve: {
         ...config.resolve,
         external: config.resolve?.external ?? [
@@ -160,15 +161,32 @@ export function resolveUserConfig({
       ...config,
       root: root,
       mode: mode,
+      base: userOptions.moduleBasePath,
       resolve: {
         ...config.resolve,
         externalConditions: config.resolve?.externalConditions ?? [
           "react-server",
         ],
       },
+      define: {
+        ...config.define,
+        "process.env.VITE_SSR": `"1"`,
+        "process.env.VITE_DEV": `"${mode === "development" ? "1" : "0"}"`,
+        "process.env.VITE_PROD": `"${mode === "production" ? "1" : "0"}"`,
+        "process.env.VITE_MODE": `"${mode}"`,
+        "process.env.VITE_BASE": `"${
+          userOptions.moduleBasePath === "" ||
+          userOptions.moduleBasePath === "/"
+            ? "/"
+            : !userOptions.moduleBasePath.endsWith("/")
+            ? userOptions.moduleBasePath + "/"
+            : userOptions.moduleBasePath
+        }"`,
+      },
       ssr: {
         ...config.ssr,
         target: config.ssr?.target ?? "node",
+
         resolve: {
           ...config.ssr?.resolve,
           externalConditions: config.ssr?.resolve?.externalConditions ?? [

package/plugin/helpers/createRscStream.tsx

@@ -1,6 +1,6 @@
 import { React, ReactDOMServer } from "../vendor.server.js";
 import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
-
+import { join } from "node:path";
 export function createRscStream<
   T,
   C extends React.ComponentType<T>,
@@ -45,7 +45,7 @@ export function createRscStream<
   const startTime = performance.now()
   const htmlIsFragment = Html == React.Fragment;
   const url =
-    moduleBaseURL !== "" ? new URL(route, moduleBaseURL).toString() : route;
+    moduleBaseURL !== "" ? new URL(join(route, moduleBasePath), moduleBaseURL).toString() : route;
   let errorCount = 0;
   let streamError: Error | null = null;
 

package/plugin/helpers/requestToRoute.ts

@@ -0,0 +1,23 @@
+import type { CreateHandlerOptions } from "../types.js";
+
+export function requestToRoute(
+  req: {url?: string},
+  handlerOptions: Pick<CreateHandlerOptions, "moduleBasePath" | "build">
+) {
+  let route = req.url?.replace("/" + handlerOptions.build.rscOutputPath, "");
+  if (typeof route !== "string") {
+    return route;
+  }
+  if (
+    route.startsWith(handlerOptions.moduleBasePath)
+  ) {
+    route = route.slice(handlerOptions.moduleBasePath.length);
+  }
+  if (!route || route === "") {
+    route = "/";
+  }
+  if (!route.startsWith("/")) {
+    route = "/" + route;
+  }
+  return route;
+}

package/plugin/html.tsx

@@ -6,9 +6,11 @@ export const Html = ({
   CssCollector,
   cssFiles,
   globalCss,
+  moduleBasePath,
 }: React.PropsWithChildren<HtmlProps>) => (
   <html>
     <head>
+      {moduleBasePath !== "" && <base href={moduleBasePath} />}
       <CssCollectorElements cssFiles={globalCss} />
     </head>
     <body>

package/plugin/react-client/plugin.ts

@@ -76,6 +76,7 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
     async configureServer(server) {
       // Create HMR message channel
       hmrChannel = new MessageChannel();
+
       await configureWorkerRequestHandler({
         server,
         autoDiscoveredFiles,

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,27 +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 moduleBasePathForDevServer = "/" + userOptions.moduleBase;
       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: moduleBasePathForDevServer,
-        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") {
@@ -86,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;
@@ -96,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,
@@ -111,9 +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: "",
-        moduleBasePath: "",
         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,10 @@ 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
+          ),
           ssrManifest: false,
         });
         if (clientManifestResult.type === "error") {
@@ -268,7 +272,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,34 +292,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,
-                moduleBasePath: '',
               },
             },
           });
           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(),
@@ -321,7 +337,6 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
             },
             pipeableStreamOptions: pipeableStreamOptions,
             manifest: serverManifest ?? {},
-            moduleBasePath: '',
             build: {
               htmlOutputPath: userOptions.build.htmlOutputPath,
               rscOutputPath: userOptions.build.rscOutputPath,
@@ -333,7 +348,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
             },
             globalCss: globalCss,
           },
-          cssFilesByPage,
+          cssFilesByPage
         );
 
         // Process render results
@@ -348,11 +363,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
       );