vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/react-static/collectHtmlWorkerContent.ts

@@ -10,7 +10,12 @@
  */
 
 import { PassThrough, Transform } from "node:stream";
-import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
+import type {
+  CreateHandlerOptions,
+  StreamMetrics,
+  PagePropOpt,
+  InlineCssOpt,
+} from "../types.js";
 import { createStreamMetrics } from "../helpers/metrics.js";
 import { createRscToHtmlStream } from "./rscToHtmlStream.js";
 import { fileWriter } from "./fileWriter.js";
@@ -21,9 +26,12 @@ import { fileWriter } from "./fileWriter.js";
  * @param rscFull The stream containing the RSC content
  * @returns A promise that resolves with the complete RSC content
  */
-export async function collectHtmlWorkerContent(
+export async function collectHtmlWorkerContent<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(
   rscStream: PassThrough,
-  handlerOptions: CreateHandlerOptions
+  handlerOptions: CreateHandlerOptions<T, InlineCSS>
 ): Promise<{ stream: PassThrough; metrics: StreamMetrics }> {
   if (!handlerOptions.worker) {
     throw new Error("Worker is not a valid worker");

package/plugin/react-static/collectRscContent.ts

@@ -1,8 +1,8 @@
 /**
  * rscHandler.ts
- * 
+ *
  * PURPOSE: Handles collecting RSC content from the rscHeadless stream
- * 
+ *
  * This module:
  * 1. Collects RSC content from the rscHeadless stream
  * 2. Returns the complete RSC content when the stream is done
@@ -12,20 +12,28 @@
 import { PassThrough, Transform } from "node:stream";
 import { dirname, join } from "node:path";
 import { mkdir } from "node:fs/promises";
-import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
+import type {
+  CreateHandlerOptions,
+  StreamMetrics,
+  PagePropOpt,
+  InlineCssOpt,
+} from "../types.js";
 import { createStreamMetrics } from "../helpers/metrics.js";
 import { fileWriter } from "./fileWriter.js";
 
 /**
  * Collects RSC content from the rscHeadless stream
- * 
+ *
  * @param rscStream The stream containing the RSC content
  * @param handlerOptions The options for the handler
  * @returns A promise that resolves with the complete RSC content and metrics
  */
-export async function collectRscContent(
+export async function collectRscContent<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(
   rscStream: PassThrough,
-  handlerOptions: CreateHandlerOptions
+  handlerOptions: CreateHandlerOptions<T, InlineCSS>
 ): Promise<{ stream: PassThrough; metrics: StreamMetrics }> {
   const metrics = createStreamMetrics();
   const startTime = performance.now();
@@ -51,7 +59,7 @@ export async function collectRscContent(
     flush(callback) {
       metrics.duration = performance.now() - startTime;
       callback();
-    }
+    },
   });
 
   try {
@@ -63,7 +71,7 @@ export async function collectRscContent(
 
     // Wait for stream to complete
     await new Promise<void>((resolve) => {
-      metricsTransform.on('end', resolve);
+      metricsTransform.on("end", resolve);
     });
 
     // Wait for file writing to complete
@@ -74,4 +82,4 @@ export async function collectRscContent(
     metricsTransform.destroy();
     throw error;
   }
-} 
+}

package/plugin/react-static/configurePreviewServer.ts

@@ -1,5 +1,9 @@
 import type { PreviewServer } from "vite";
-import type { ResolvedUserOptions } from "../types.js";
+import type {
+  ResolvedUserOptions,
+  PagePropOpt,
+  InlineCssOpt,
+} from "../types.js";
 import { join } from "node:path";
 import { createReadStream } from "node:fs";
 import { stat } from "node:fs/promises";
@@ -10,12 +14,15 @@ interface StreamError extends Error {
   code?: string;
 }
 
-export async function configurePreviewServer({
+export async function configurePreviewServer<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>({
   server,
   userOptions,
 }: {
   server: PreviewServer;
-  userOptions: ResolvedUserOptions;
+  userOptions: ResolvedUserOptions<T, InlineCSS>;
 }) {
   const staticHostDir = join(
     userOptions.projectRoot,
@@ -26,15 +33,20 @@ export async function configurePreviewServer({
     if (!req.url) {
       return next();
     }
-    const { contentType, filePath } = requestInfo(req, userOptions, staticHostDir);
-    
+    const { contentType, filePath } = requestInfo(
+      req,
+      userOptions,
+      staticHostDir,
+      server.config.logger
+    );
+
     // Handle static files including CSS
     if (filePath) {
       try {
         const stats = await stat(filePath);
         if (stats.isFile()) {
           res.setHeader("Content-Type", contentType);
-          
+
           // Create abort controller for the stream
           const controller = new AbortController();
           const { signal } = controller;
@@ -48,7 +60,7 @@ export async function configurePreviewServer({
 
           try {
             const readStream = createReadStream(filePath);
-            readStream.on('error', () => {
+            readStream.on("error", () => {
               if (!res.writable) {
                 controller.abort();
               }
@@ -57,25 +69,33 @@ export async function configurePreviewServer({
           } catch (error) {
             const streamError = error as StreamError;
             // Handle different error cases
-            if (streamError.code === 'ERR_STREAM_PREMATURE_CLOSE' || 
-                streamError.name === 'AbortError') {
+            if (
+              streamError.code === "ERR_STREAM_PREMATURE_CLOSE" ||
+              streamError.name === "AbortError"
+            ) {
               // Client closed the connection
               if (res.writable) {
                 res.statusCode = 499;
                 res.end("Client closed request");
               }
-            } else if (streamError.code === 'ENOENT') {
+            } else if (streamError.code === "ENOENT") {
               // File not found
               res.statusCode = 404;
-              server.config.logger.error(`File not found: ${filePath}. ${streamError.message}`, {
-                error: streamError,
-              });
+              server.config.logger.error(
+                `File not found: ${filePath}. ${streamError.message}`,
+                {
+                  error: streamError,
+                }
+              );
               res.end("File not found");
             } else {
               // Server error
-              server.config.logger.error(`Error loading file: ${filePath}. ${streamError.message}`, {
-                error: streamError,
-              });
+              server.config.logger.error(
+                `Error loading file: ${filePath}. ${streamError.message}`,
+                {
+                  error: streamError,
+                }
+              );
               res.statusCode = 500;
               res.end("Internal server error");
             }
@@ -86,7 +106,7 @@ export async function configurePreviewServer({
       } catch (error) {
         const err = error as Error;
         // Handle file system errors
-        if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+        if ((err as NodeJS.ErrnoException).code === "ENOENT") {
           res.statusCode = 404;
           res.end("File not found");
         } else {

package/plugin/react-static/plugin.ts

@@ -34,6 +34,8 @@ import type {
   RenderPagesResult,
   AutoDiscoveredFiles,
   CssContent,
+  PagePropOpt,
+  InlineCssOpt,
 } from "../types.js";
 import { type StreamPluginOptions } from "../types.js";
 import { renderPages } from "./renderPages.js";
@@ -51,6 +53,7 @@ import { tryManifest } from "../helpers/tryManifest.js";
 import { performance } from "node:perf_hooks";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { baseURL } from "../utils/envUrls.node.js";
+import { readFile } from "node:fs/promises";
 
 if (getCondition() !== "react-server") {
   throw new Error(
@@ -59,16 +62,21 @@ if (getCondition() !== "react-server") {
   );
 }
 
-let worker: Worker;
-let userConfig: ResolvedUserConfig;
-let resolvedConfig: ResolvedConfig;
-let userOptions: ResolvedUserOptions;
-let autoDiscoveredFiles: AutoDiscoveredFiles | null = null;
-let serverManifest: Manifest | undefined = undefined;
-let buildLoader: Awaited<ReturnType<typeof createBuildLoader>> | undefined;
-export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
+export function reactStaticPlugin<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(
+  options: StreamPluginOptions<T, InlineCSS>
+): VitePlugin<{
   meta: ReactStreamPluginMeta;
 }> {
+  let worker: Worker;
+  let userConfig: ResolvedUserConfig;
+  let resolvedConfig: ResolvedConfig;
+  let userOptions: ResolvedUserOptions<T, InlineCSS>;
+  let autoDiscoveredFiles: AutoDiscoveredFiles | null = null;
+  let serverManifest: Manifest | undefined = undefined;
+  let buildLoader: Awaited<ReturnType<typeof createBuildLoader>> | undefined;
   const timing: BuildTiming = {
     start: Date.now(),
     configResolved: 0,
@@ -93,6 +101,10 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
       if (config.root && config.root !== userOptions.projectRoot) {
         userOptions.projectRoot = config.root;
       }
+      if(configEnv.command !== "build") {
+        return;
+      }
+      // Initialize autoDiscoveredFiles for both server and client builds
       const autoDiscoverResult = await resolveAutoDiscover({
         config,
         configEnv,
@@ -134,7 +146,6 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
     },
 
     async renderStart() {
-      
       timing.renderStart = Date.now();
     },
 
@@ -165,7 +176,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         if (!serverManifest) {
           throw new Error("Failed to parse server manifest");
         }
-
+        
         const clientManifestResult = await tryManifest({
           root: userOptions.projectRoot,
           outDir: join(userOptions.build.outDir, userOptions.build.client),
@@ -175,11 +186,11 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
           throw clientManifestResult.error;
         }
         const clientManifest = clientManifestResult.manifest;
-        
-        buildLoader = await createBuildLoader(
+
+        buildLoader = await createBuildLoader<T, InlineCSS>(
           {
             userConfig,
-            userOptions,
+            userOptions: userOptions as ResolvedUserOptions<T, InlineCSS>,
             serverManifest: serverManifest ?? {},
             staticManifest: autoDiscoveredFiles?.staticManifest ?? {},
             clientManifest: clientManifest ?? {},
@@ -197,7 +208,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
           userOptions
         );
 
-        const globalCss: Map<string, CssContent> = new Map();
+        const globalCss: Map<string, CssContent<InlineCSS>> = new Map();
         // Collect CSS files for each page and its props
         for (const [url, { page, props }] of autoDiscoveredFiles?.urlMap ??
           []) {
@@ -226,17 +237,25 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
           const pageCssMap: Map<string, CssContent> = new Map();
           // Add global styles if they exist
           if (Object.keys(globalCssInputs).length > 0) {
-            for (const [, value] of Object.entries(globalCssInputs)) {
-              const cssContent = await buildLoader(value + "?inline").then(
-                (r) => String(r.default)
+            for (const [key, value] of Object.entries(globalCssInputs)) {
+              let cssContent = await buildLoader(value + "?inline").then((r) =>
+                String(r.default)
               );
-              if (cssContent === "undefined") {
-                throw new Error(`CSS content is undefined for ${value}`);
+              if (cssContent === "undefined" || !cssContent) {
+                cssContent = await readFile(
+                  join(
+                    userOptions.projectRoot,
+                    userOptions.build.outDir,
+                    userOptions.build.static,
+                    key + ".css"
+                  ),
+                  "utf-8"
+                ) ?? ""
               }
               if (cssContent) {
                 globalCss.set(
                   value,
-                  createCssProps({
+                  createCssProps<T, InlineCSS>({
                     id: value,
                     code: cssContent,
                     userOptions: userOptions,
@@ -355,6 +374,10 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
               client: userOptions.build.client,
             },
             globalCss: globalCss,
+            css: {
+              ...handlerOptions.css,
+              inlineCss: handlerOptions.css?.inlineCss ?? true,
+            },
           },
           cssFilesByPage
         );
@@ -378,9 +401,9 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         this.environment.logger.info(
           `Rendered ${finalResult.completedRoutes.size} unique routes in ${finalResult.streamMetrics.duration}ms`
         );
-        if(process.env['NODE_ENV'] !== 'production') {
+        if (process.env["NODE_ENV"] !== "production") {
           this.environment.logger.warn(
-            `THIS IS BUILD IS NOT INTENDED FOR PRODUCTION (${process.env['NODE_ENV']})`
+            `THIS IS BUILD IS NOT INTENDED FOR PRODUCTION (${process.env["NODE_ENV"]})`
           );
         }
 

package/plugin/react-static/renderPage.ts

@@ -1,12 +1,18 @@
 import { createRenderMetrics } from "../helpers/metrics.js";
 import { resolvePageAndProps } from "../helpers/resolvePageAndProps.js";
-import type { CreateHandlerOptions, RenderPageResult } from "../types.js";
+import type {
+  CreateHandlerOptions,
+  RenderPageResult,
+  PagePropOpt,
+} from "../types.js";
 import { renderStreams } from "./renderStreams.js";
 import { collectHtmlWorkerContent } from "./collectHtmlWorkerContent.js";
 import { collectRscContent } from "./collectRscContent.js";
 
-export async function* renderPage(
-  handlerOptions: CreateHandlerOptions<unknown, React.ComponentType<unknown>>
+export async function* renderPage<
+  T extends PagePropOpt = PagePropOpt
+>(
+  handlerOptions: CreateHandlerOptions<T>
 ): AsyncGenerator<RenderPageResult, void, unknown> {
   if (!handlerOptions.pagePath) {
     yield {
@@ -39,9 +45,9 @@ export async function* renderPage(
 
     const newHandlerOptions = {
       ...handlerOptions,
-      PageComponent: PageComponent,
-      pageProps: pageProps,
-    } satisfies CreateHandlerOptions;
+      PageComponent,
+      pageProps,
+    } as CreateHandlerOptions<T>;
     // Create streams with CSS files
     const [rscFull, rscHeadless] = await renderStreams(newHandlerOptions);
     // Handle stream creation errors

package/plugin/react-static/renderPages.ts

@@ -12,12 +12,23 @@
 import { createRenderMetrics } from "../helpers/metrics.js";
 import { renderPage } from "./renderPage.js";
 import { PassThrough } from "node:stream";
-import type { StreamMetrics, RenderPagesResult, AutoDiscoveredFiles, CssContent, MultiPageHandlerOptions } from "../types.js";
+import type {
+  StreamMetrics,
+  RenderPagesResult,
+  AutoDiscoveredFiles,
+  CssContent,
+  MultiPageHandlerOptions,
+  PagePropOpt,
+  InlineCssOpt,
+} from "../types.js";
 
-export async function* renderPages(
+export async function* renderPages<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(
   autoDiscoveredFiles: AutoDiscoveredFiles,
-  handlerOptions: MultiPageHandlerOptions,
-  cssFilesByPage: Map<string, Map<string, CssContent>>,
+  handlerOptions: MultiPageHandlerOptions<T>,
+  cssFilesByPage: Map<string, Map<string, CssContent<InlineCSS>>>
 ): AsyncGenerator<RenderPagesResult, RenderPagesResult, unknown> {
   const routes = Array.from(autoDiscoveredFiles.urlMap.keys());
   const completedRoutes = new Set<string>();

package/plugin/react-static/renderStreams.ts

@@ -1,8 +1,8 @@
 /**
  * renderStreams.ts
- * 
+ *
  * PURPOSE: Creates specialized streams for React Server Components (RSC) rendering
- * 
+ *
  * This module:
  * 1. Creates RSC stream (React.Fragment wrapper) for client-side navigation
  *    - This stream is saved to .rsc files and used when navigating between pages
@@ -17,32 +17,33 @@
 import { createHandler } from "../helpers/createHandler.js";
 import type {
   CreateHandlerOptions,
+  PagePropOpt
 } from "../types.js";
 import React from "react";
 
 /**
  * Creates handlers for both document and RSC streams
- * 
+ *
  * @param handler The handler options for creating streams
  * @param options The render options
  * @returns A tuple containing the document worker result and RSC direct result
  */
-export function renderStreams(
-  handler: CreateHandlerOptions,
-) {
+export function renderStreams<
+  T extends PagePropOpt = PagePropOpt
+>(handler: CreateHandlerOptions<T>) {
   return Promise.all([
     /**
-     * This stream goes to the document worker for client side rendering with full HTML structure, 
-     * links are already bubbled up in the static document which required us 
+     * This stream goes to the document worker for client side rendering with full HTML structure,
+     * links are already bubbled up in the static document which required us
      * to include the head in the stream as well
      */
     createHandler(handler),
-    
+
     /**
-     * This stream is saved to index.rsc file (if configured) and can be used 
-     * for navigating to pages (without the Html wrapper, but does contain 
+     * This stream is saved to index.rsc file (if configured) and can be used
+     * for navigating to pages (without the Html wrapper, but does contain
      * css/head information that can bubble up to the browser's dom)
      */
-    createHandler({...handler, Html: React.Fragment}),
+    createHandler({ ...handler, Html: React.Fragment }),
   ]);
 }

package/plugin/source-map/createMappingsSerializer.ts

@@ -0,0 +1,182 @@
+// alternative to webpack-sources/lib/helpers/createMappingsSerializer.js
+// unused for now, but it's a dependency of react-server-dom-esm and you may or may not want to download webpack-sources
+export function createMappingsSerializer() {
+    let generatedLine = 1;
+    let generatedColumn = 0;
+    let sourceIndex = 0;
+    let originalLine = 1;
+    let originalColumn = 0;
+    let nameIndex = 0;
+    let mappings = "";
+  
+    return function serializeMapping(
+      newGeneratedLine: number,
+      newGeneratedColumn: number,
+      newSourceIndex: number,
+      newOriginalLine: number,
+      newOriginalColumn: number,
+      newNameIndex: number
+    ) {
+      if (newGeneratedLine !== generatedLine) {
+        generatedLine = newGeneratedLine;
+        generatedColumn = newGeneratedColumn;
+        if (mappings) {
+          mappings += ";";
+        }
+      } else if (mappings) {
+        mappings += ",";
+      }
+  
+      // Encode the generated column.
+      let value = newGeneratedColumn - generatedColumn;
+      generatedColumn = newGeneratedColumn;
+      let isNegative = value < 0;
+      if (isNegative) {
+        value = -value;
+      }
+      value = value << 1;
+      if (isNegative) {
+        value = value | 1;
+      }
+      while (value > 0) {
+        let digit = value & 63;
+        value = value >>> 6;
+        if (value > 0) {
+          digit = digit | 64;
+        }
+        mappings += String.fromCharCode(
+          digit < 26
+            ? digit + 65
+            : digit < 52
+            ? digit + 97 - 26
+            : digit < 62
+            ? digit + 48 - 52
+            : digit === 62
+            ? 43
+            : 47
+        );
+      }
+  
+      // Encode the source index.
+      value = newSourceIndex - sourceIndex;
+      sourceIndex = newSourceIndex;
+      isNegative = value < 0;
+      if (isNegative) {
+        value = -value;
+      }
+      value = value << 1;
+      if (isNegative) {
+        value = value | 1;
+      }
+      while (value > 0) {
+        let digit = value & 63;
+        value = value >>> 6;
+        if (value > 0) {
+          digit = digit | 64;
+        }
+        mappings += String.fromCharCode(
+          digit < 26
+            ? digit + 65
+            : digit < 52
+            ? digit + 97 - 26
+            : digit < 62
+            ? digit + 48 - 52
+            : digit === 62
+            ? 43
+            : 47
+        );
+      }
+  
+      // Encode the original line.
+      value = newOriginalLine - originalLine;
+      originalLine = newOriginalLine;
+      isNegative = value < 0;
+      if (isNegative) {
+        value = -value;
+      }
+      value = value << 1;
+      if (isNegative) {
+        value = value | 1;
+      }
+      while (value > 0) {
+        let digit = value & 63;
+        value = value >>> 6;
+        if (value > 0) {
+          digit = digit | 64;
+        }
+        mappings += String.fromCharCode(
+          digit < 26
+            ? digit + 65
+            : digit < 52
+            ? digit + 97 - 26
+            : digit < 62
+            ? digit + 48 - 52
+            : digit === 62
+            ? 43
+            : 47
+        );
+      }
+  
+      // Encode the original column.
+      value = newOriginalColumn - originalColumn;
+      originalColumn = newOriginalColumn;
+      isNegative = value < 0;
+      if (isNegative) {
+        value = -value;
+      }
+      value = value << 1;
+      if (isNegative) {
+        value = value | 1;
+      }
+      while (value > 0) {
+        let digit = value & 63;
+        value = value >>> 6;
+        if (value > 0) {
+          digit = digit | 64;
+        }
+        mappings += String.fromCharCode(
+          digit < 26
+            ? digit + 65
+            : digit < 52
+            ? digit + 97 - 26
+            : digit < 62
+            ? digit + 48 - 52
+            : digit === 62
+            ? 43
+            : 47
+        );
+      }
+  
+      // Encode the name index.
+      value = newNameIndex - nameIndex;
+      nameIndex = newNameIndex;
+      isNegative = value < 0;
+      if (isNegative) {
+        value = -value;
+      }
+      value = value << 1;
+      if (isNegative) {
+        value = value | 1;
+      }
+      while (value > 0) {
+        let digit = value & 63;
+        value = value >>> 6;
+        if (value > 0) {
+          digit = digit | 64;
+        }
+        mappings += String.fromCharCode(
+          digit < 26
+            ? digit + 65
+            : digit < 52
+            ? digit + 97 - 26
+            : digit < 62
+            ? digit + 48 - 52
+            : digit === 62
+            ? 43
+            : 47
+        );
+      }
+  
+      return mappings;
+    };
+  }