vite-plugin-react-server 0.3.19 → 1.0.0

package/plugin/helpers/createHandler.ts

@@ -1,79 +1,58 @@
 import type { PipeableStream } from "react-dom/server";
-import { createLogger } from "vite";
-import {
-  collectManifestClientFiles,
-  collectModuleGraphCss,
-} from "../collect-manifest-client-files.js";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { resolvePage } from "../resolvePage.js";
 import { resolveProps } from "../resolveProps.js";
-import type { CheckFilesExistReturn, CreateHandlerOptions, ResolvedUserOptions } from "../types.js";
+import type { CreateHandlerOptions, CssContent } from "../types.js";
 import { createRscStream } from "./createRscStream.js";
-
-type CreateHandlerResult = 
-  | { type: "success"; controller: AbortController; stream: PipeableStream; assets: any; clientPath: string }
+type CreateHandlerResult =
+  | {
+      type: "success";
+      controller: AbortController;
+      stream: PipeableStream;
+      assets: any;
+      route: string;
+    }
   | { type: "error"; error: Error }
   | { type: "skip" };
 
 interface HandlerAssets {
-  css: string[];
+  css: (string | CssContent)[];
   bootstrapModules: string[];
 }
 
 export async function createHandler<T>({
-  url,
-  urlMap,
-  pluginOptions,
-  streamOptions,
-}: {
-  url: string,
-  urlMap: CheckFilesExistReturn['urlMap'],
-  pluginOptions: ResolvedUserOptions,
-  streamOptions: CreateHandlerOptions<T>
-}): Promise<CreateHandlerResult> {
-  const root = pluginOptions.projectRoot ?? process.cwd();
-
-  const Html = pluginOptions.Html ?? DEFAULT_CONFIG.HTML;
-  const pageExportName =
-    pluginOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT_NAME;
-  const propsExportName =
-    pluginOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT_NAME;
+  getCss,
+  root,
+  cssFiles = [],
+  cssModules = new Map<string, string | CssContent>(),
+  onCssFile,
+  logger,
+  loader,
+  Html,
+  CssCollector,
+  pagePath,
+  propsPath,
+  pageExportName,
+  propsExportName,
+  inlineCss,
+  moduleBase,
+  preserveModulesRoot: _preserveModulesRoot,
+  moduleBasePath,
+  moduleRootPath,
+  moduleBaseURL,
+  route,
+  pipableStreamOptions,
+}: CreateHandlerOptions<T>): Promise<CreateHandlerResult> {
   const controller = new AbortController();
 
-  const cssFiles = streamOptions.cssFiles;
-
-
-  const cssModules = streamOptions.cssModules ?? new Set<string>();
-
-  if (!(streamOptions.serverManifest || streamOptions.moduleGraph))
-    throw new Error("Missing server manifest or moduleGraph, pass it to options.");
-
-  const getCss = streamOptions.serverManifest
-    ? (id: string) =>
-        collectManifestClientFiles({
-          manifest: streamOptions.serverManifest!,
-          root: root,
-          pagePath: id,
-          onCss: streamOptions.onCssFile,
-          moduleBase: pluginOptions.moduleBase,
-          preserveModulesRoot: pluginOptions.build.preserveModulesRoot,
-        }).cssFiles
-    : (id: string) =>
-        collectModuleGraphCss({
-          moduleGraph: streamOptions.moduleGraph!,
-          pagePath: id,
-          onCss: streamOptions.onCssFile,
-        });
-
-  const loadWithCss = async (id: string, parentUrl: string) => {
+  const loadWithCss = async (id: string) => {
     try {
-      const mod = await streamOptions.loader(id);
+      const mod = await loader(id);
       const pageCss = await Promise.resolve(getCss(id));
-      Array.from(pageCss.keys()).forEach((css) => {
-        cssModules.add(css);
+      Array.from(pageCss.entries()).forEach(([css, linkOrContent]) => {
+        cssModules.set(css, linkOrContent);
         // Notify about new CSS file if callback exists
-        if (streamOptions.onCssFile) {
-          streamOptions.onCssFile(css, parentUrl);
+        if (typeof onCssFile === "function") {
+          onCssFile(css, id);
         }
       });
       return mod as Record<string, any>;
@@ -87,44 +66,55 @@ export async function createHandler<T>({
   };
 
   const PropsModule = await resolveProps({
-    propsModule: await loadWithCss(urlMap.get(url)?.props ?? url, url),
-    path: String(urlMap.get(url)?.props ?? url),
+    propsModule: propsPath
+      ? await loadWithCss(propsPath)
+      : { [propsExportName]: (url: string) => ({url}) },
+    path: String(propsPath),
     exportName: propsExportName,
-    url,
+    url: route,
   });
   if (PropsModule.type !== "success") {
-    return PropsModule
+    return PropsModule;
   }
   const PageModule = await resolvePage({
-    pageModule: await loadWithCss(urlMap.get(url)?.page ?? url, url),
-    path: String(urlMap.get(url)?.page ?? url),
+    pageModule: pagePath
+      ? await loadWithCss(pagePath)
+      : { [pageExportName]: () => null },
+    path: String(pagePath),
     exportName: pageExportName,
-    url,
+    url: route,
   });
   if (PageModule.type !== "success") {
-    return PageModule
+    return PageModule;
   }
 
   // Add any additional CSS files
-  if (streamOptions.cssFiles) {
-    streamOptions.cssFiles.forEach((css) => cssModules.add(css));
+  if (cssFiles) {
+    cssFiles.forEach((css) => cssModules.set(typeof css === "string" ? css : css.path, css));
+    cssFiles = Array.from(cssModules.values());
   }
+  const url =
+    typeof moduleBaseURL === "string" && moduleBaseURL !== ""
+      ? new URL(route, moduleBaseURL).href
+      : route;
   const stream = createRscStream({
     Html: Html,
+    CssCollector: CssCollector,
     Page: PageModule[pageExportName as keyof typeof PageModule],
     props: PropsModule[propsExportName as keyof typeof PropsModule],
-    moduleBasePath: streamOptions.moduleBasePath,
-    moduleBaseURL: streamOptions.moduleBaseURL,
-    logger: streamOptions.logger ?? createLogger(),
-    cssFiles: Array.from(cssModules),
-    route: url,
+    moduleBase: moduleBase,
+    moduleRootPath: moduleRootPath,
+    moduleBasePath: moduleBasePath,
+    moduleBaseURL: moduleBaseURL,
+    logger: logger,
+    cssFiles: Array.from(cssModules.values()),
+    route,
     url,
-    pipableStreamOptions: streamOptions.pipableStreamOptions,
-    htmlProps: {
-      pageProps: PropsModule[propsExportName as keyof typeof PropsModule],
-      route: url,
-      url: url,
-    },
+    pipableStreamOptions: pipableStreamOptions,
+    htmlProps: {},
+    root: root,
+    loader: loader,
+    inlineCss: inlineCss,
   });
 
   if (!stream) {
@@ -132,14 +122,14 @@ export async function createHandler<T>({
   }
 
   const assets: HandlerAssets = {
-    css: Array.from(cssModules).concat(cssFiles ?? []),
-    bootstrapModules: streamOptions.pipableStreamOptions?.bootstrapModules ?? [],
+    css: cssFiles,
+    bootstrapModules: pipableStreamOptions?.bootstrapModules ?? [],
   };
   return {
     type: "success",
     controller,
     stream,
     assets,
-    clientPath: urlMap.get(url)?.page ?? '',
+    route: route,
   };
 }

package/plugin/helpers/createRscStream.ts

@@ -3,12 +3,19 @@ import * as React from "react";
 import { renderToPipeableStream } from "react-server-dom-esm/server.node";
 import type { PipeableStreamOptions } from "../worker/types.js";
 import type { Logger } from "vite";
-import { CssCollector } from "../components.js";
+import type {
+  CreateHandlerOptions,
+  CssCollectorProps,
+  CssContent,
+  InlineCssCollectorProps,
+} from "../types.js";
 
-export function createRscStream({
+export function createRscStream<InlineCSS extends boolean = true>({
   Html,
   Page,
   props,
+  loader = (id) => import(id).then((m) => m.default),
+  moduleRootPath,
   moduleBasePath,
   moduleBaseURL,
   logger,
@@ -17,30 +24,47 @@ export function createRscStream({
   url,
   pipableStreamOptions,
   htmlProps,
+  inlineCss = true as InlineCSS,
+  CssCollector,
+  root,
 }: {
-  Html: React.ComponentType<any>;
+  Html: CreateHandlerOptions["Html"];
   Page: React.ComponentType<any>;
+  loader: (id: string) => Promise<any>;
   props: any;
+  moduleBase: string;
+  moduleRootPath: string;
   moduleBasePath: string;
   moduleBaseURL: string;
   logger: Logger;
-  cssFiles?: string[];
   route: string;
   url: string;
   pipableStreamOptions?: PipeableStreamOptions;
   htmlProps?: any;
-}) {
+  root: string;
+  inlineCss?: InlineCSS;
+  cssFiles?: (string | CssContent)[];
+} & (InlineCSS extends true
+  ? {
+      CssCollector: React.FC<InlineCssCollectorProps>;
+    }
+  : {
+      CssCollector: React.FC<CssCollectorProps>;
+    })) {
   const htmlIsFragment = Html == React.Fragment;
   if (!htmlIsFragment) {
     if (!htmlProps) {
       htmlProps = {};
     }
-    if(!("moduleBaseUrl" in htmlProps)) {
-      htmlProps["moduleBaseUrl"] = moduleBaseURL;
+    if (!("moduleBaseURL" in htmlProps)) {
+      htmlProps["moduleBaseURL"] = moduleBaseURL;
     }
-    if(!("moduleBasePath" in htmlProps)) {
+    if (!("moduleBasePath" in htmlProps)) {
       htmlProps["moduleBasePath"] = moduleBasePath;
     }
+    if (!("moduleRootPath" in htmlProps)) {
+      htmlProps["moduleRootPath"] = moduleRootPath;
+    }
     if (!("url" in htmlProps)) {
       htmlProps["url"] = url;
     }
@@ -52,8 +76,18 @@ export function createRscStream({
     }
   }
   const withCss = React.createElement(
-    CssCollector,
-    { cssFiles, route, moduleBaseUrl: moduleBaseURL },
+    CssCollector as any,
+    (inlineCss === true
+      ? {
+          cssFiles: cssFiles,
+          route,
+          moduleBaseURL,
+          moduleBasePath,
+          moduleRootPath,
+          root,
+          loader,
+        }
+      : { cssFiles: cssFiles, route, moduleBaseURL }) as any,
     React.createElement(Page, props)
   );
   // Otherwise wrap with Html component
@@ -61,17 +95,11 @@ export function createRscStream({
     ? withCss
     : React.createElement(Html, htmlProps, withCss);
   try {
-    return renderToPipeableStream(content, moduleBaseURL, {
-      onError: (error: Error) => {
-        if (process.env["NODE_ENV"] === "development") {
-          console.trace(error);
-        }
-        logger.error(`Stream error at ${route}.`, { error });
-      },
-      onPostpone: logger.info ?? console.info,
-      environmentName: "Server",
-      ...pipableStreamOptions,
-    });
+    return renderToPipeableStream(
+      content,
+      moduleBasePath,
+      pipableStreamOptions
+    );
   } catch (error) {
     logger.error(`Failed to create stream for ${route}.`, {
       error: error as Error,

package/plugin/html.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+export const Html = ({ children }: { children: any }) => (
+  <html>
+    <head></head>
+    <body>
+      <div id="root">{children}</div>
+    </body>
+  </html>
+);

package/plugin/react-client/plugin.ts

@@ -301,8 +301,9 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
                 userOptions.build.preserveModulesRoot === true
                   ? userOptions.moduleBase
                   : "",
-              moduleBaseURL: ``,
-              moduleBasePath: '/',
+              moduleBaseURL: userOptions.moduleBaseURL,
+              moduleBasePath: userOptions.moduleBasePath,
+              moduleBase: userOptions.moduleBase,
               pipableStreamOptions: userOptions.pipableStreamOptions,
               cssFiles: []
             } satisfies RscRenderMessage);

package/plugin/react-server/plugin.ts

@@ -16,16 +16,20 @@ import { resolveUserConfig } from "../config/resolveUserConfig.js";
 import type {
   BuildTiming,
   CheckFilesExistReturn,
+  CssContent,
   ReactStreamPluginMeta,
   ResolvedUserOptions,
 } from "../types.js";
 import { type StreamPluginOptions } from "../types.js";
 import { createHandler } from "../helpers/createHandler.js";
-import { mkdir,  readFile,  stat,  writeFile } from "node:fs/promises";
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import type { ServerResponse } from "node:http";
 import { createInputNormalizer } from "../helpers/inputNormalizer.js";
 import { MIME_TYPES } from "../config/mimeTypes.js";
+import { InlineCssCollector } from "../css-collector-inline.js";
+import { CssCollector } from "../css-collector.js";
+import { collectModuleGraphCss } from "../collect-manifest-client-files.js";
 
 let resolvedConfig: ResolvedConfig | null = null;
 let serverManifestPath: string | null = null;
@@ -105,7 +109,7 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
         );
       }
     },
-    
+
     async configurePreviewServer(server) {
       if (root !== server.config.root) {
         root = server.config.root;
@@ -128,11 +132,11 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
         try {
           const filePath = join(fileRoot, value);
           const stats = await stat(filePath);
-          
+
           if (stats.isFile()) {
-            const ext = value.slice(value.lastIndexOf('.'));
-            const contentType = MIME_TYPES[ext] || 'application/octet-stream';
-            res.setHeader('Content-Type', contentType);
+            const ext = value.slice(value.lastIndexOf("."));
+            const contentType = MIME_TYPES[ext] || "application/octet-stream";
+            res.setHeader("Content-Type", contentType);
             const content = await readFile(filePath);
             res.end(content);
             return;
@@ -187,25 +191,57 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
         if (typeof loader !== "function") {
           loader = server.ssrLoadModule;
         }
-        const route = req.url?.replace('/index.rsc', '');
+        let route = req.url?.replace("/index.rsc", "");
+        if (!route || route === "") {
+          route = "/";
+        }
         try {
           const handler = await createHandler({
-            url: !route || route === "" ? "/" : route,
-            urlMap: files.urlMap,
-            pluginOptions: {
-              ...userOptions,
-              // we'll leave the Html generation for later
-              Html: React.Fragment,
-              projectRoot: root,
+            root: root,
+            url:
+              typeof userOptions.moduleBaseURL === "string" &&
+              userOptions.moduleBaseURL !== ""
+                ? new URL(route, userOptions.moduleBaseURL).href
+                : route,
+            route: route,
+            getCss: async (id) => {
+              const cssFiles = await collectModuleGraphCss({
+                moduleGraph: server.moduleGraph,
+                pagePath: id,
+                onCss: undefined,
+              })
+              if (userOptions.inlineCss) {
+                const InlineMap = new Map<string, CssContent>();
+                await Promise.all(Array.from(cssFiles.entries()).map(async ([file, fileUrl]) => {
+                  const content = await server.ssrLoadModule(fileUrl + "?inline");
+                  if (content) {
+                    InlineMap.set(file,  {
+                      content: content['default'],
+                      path: file,
+                      type: "text/css",
+                    });
+                  }
+                }));
+                return InlineMap;
+              }
+              return cssFiles;
             },
-            streamOptions: {
-              cssFiles: [],
-              logger: createLogger(),
-              loader,
-              moduleGraph: server.moduleGraph,
-              moduleBasePath: '',
-              moduleBaseURL: '',
-            }
+            cssFiles: [],
+            logger: createLogger(),
+            loader,
+            moduleBase: userOptions.moduleBase,
+            moduleBasePath: userOptions.moduleBasePath,
+            moduleBaseURL: userOptions.moduleBaseURL,
+            moduleRootPath: root,
+            pipableStreamOptions: userOptions.pipableStreamOptions,
+            Html: React.Fragment,
+            CssCollector: userOptions.inlineCss ? InlineCssCollector as any : CssCollector as any,
+            onCssFile: undefined,
+            inlineCss: userOptions.inlineCss,
+            propsPath: files.urlMap.get(route)?.props ?? route,
+            pagePath: files.urlMap.get(route)?.page ?? route,
+            pageExportName: userOptions.pageExportName,
+            propsExportName: userOptions.propsExportName,
           });
           if (handler.type === "success") {
             handler.stream?.pipe(res);

package/plugin/react-static/plugin.ts

@@ -6,6 +6,7 @@ import {
   type Manifest,
   type IndexHtmlTransformHook,
   type Plugin as VitePlugin,
+  createLogger,
 } from "vite";
 import { checkFilesExist } from "../checkFilesExist.js";
 import { resolveOptions } from "../config/resolveOptions.js";
@@ -45,7 +46,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
   let root: string = process.cwd();
   let userConfig: ResolvedUserConfig;
   let userOptions: ResolvedUserOptions;
-  let resolvedPages: string[];
+  let pages: string[];
   let serverManifest: Manifest = {};
   let clientManifest: Manifest = {};
 
@@ -83,12 +84,12 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
       ) {
         root = config.root;
       }
-      const resolvedPagesResult = await resolvePages(userOptions.build.pages);
-      if (resolvedPagesResult.type === "error") {
-        throw resolvedPagesResult.error;
+      const resolvePagesResult = await resolvePages(userOptions.build.pages);
+      if (resolvePagesResult.type === "error") {
+        throw resolvePagesResult.error;
       }
-      resolvedPages = resolvedPagesResult.pages;
-      files = await checkFilesExist(resolvedPages, userOptions, root);
+      pages = resolvePagesResult.pages;
+      files = await checkFilesExist(pages, userOptions, root);
 
       const resolvedConfig = resolveUserConfig({
         isStatic: true,
@@ -176,7 +177,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
       indexCss.forEach((css) => globalCss.add(css));
 
       // Add CSS for each route's page component - use server manifest
-      for (const route of resolvedPages) {
+      for (const route of pages) {
         const routeFiles = files.urlMap.get(route);
         if (routeFiles) {
           const pageCss = collectManifestClientFiles({
@@ -205,18 +206,26 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
       : [];
       
       const { failedRoutes, completedRoutes} = await renderPages(
-        resolvedPages,
+        pages,
         files,
         {
+          root: root,
           outDir: userOptions.build.outDir,
           htmlOutputPath: join( userOptions.build.outDir, userOptions.build.static, "index.html"),
           pipableStreamOptions: {
             bootstrapModules: bootstrapModules,
           },
-          moduleBasePath: join(root, userOptions.build.outDir, userOptions.build.client),
+          moduleRootPath: join(root, userOptions.build.outDir, userOptions.build.static, userOptions.moduleBasePath),
+          moduleBasePath: userOptions.moduleBasePath,
           moduleBaseURL: userOptions.moduleBaseURL,
-          userConfig,
-          pluginOptions: userOptions,
+          inlineCss: userOptions.inlineCss,
+          pageExportName: userOptions.pageExportName,
+          propsExportName: userOptions.propsExportName,
+          Html: userOptions.Html,
+          CssCollector: userOptions.CssCollector,
+          cssFiles: [],
+          logger: createLogger(),
+          moduleBase: userOptions.moduleBase,
           worker,
           clientManifest,
           serverManifest,

package/plugin/react-static/types.ts

@@ -0,0 +1,3 @@
+export type ReactStaticPluginOptions = {
+  
+};

package/plugin/types.ts

@@ -65,7 +65,7 @@ export interface StreamPluginOptionsClient {
   cssFiles?: AliasOptions;
 }
 
-export type ResolvedUserOptions = Required<
+export type ResolvedUserOptions<InlineCSS extends boolean = boolean> = Required<
   Pick<
     StreamPluginOptions,
     | "moduleBase"
@@ -76,10 +76,12 @@ export type ResolvedUserOptions = Required<
     | "Page"
     | "props"
     | "Html"
+    | "CssCollector"
     | "pageExportName"
     | "propsExportName"
     | "collectCss"
     | "collectAssets"
+    | "inlineCss"
     | "htmlWorkerPath"
     | "rscWorkerPath"
     | "loaderPath"
@@ -89,7 +91,7 @@ export type ResolvedUserOptions = Required<
     | "pipableStreamOptions"
   >
 > & {
-  build: NonNullable<Required<StreamPluginOptions["build"]>>;
+  build: NonNullable<Required<StreamPluginOptions<InlineCSS>["build"]>>;
   autoDiscover: {
     modulePattern: (path: string) => boolean;
     cssPattern: (path: string) => boolean;
@@ -116,7 +118,7 @@ export type createBuildConfigFn<C extends "react-client" | "react-server"> =
     ? Promise<InlineConfig>
     : Promise<InlineConfig>;
 
-export interface StreamPluginOptions {
+export interface StreamPluginOptions<InlineCSS extends boolean = boolean> {
   projectRoot?: string;
   moduleBase: string;
   moduleBasePath?: string;
@@ -164,25 +166,38 @@ export interface StreamPluginOptions {
     url: string;
     children: React.ReactNode;
   }>;
+  CssCollector?: InlineCSS extends true ? React.FC<React.PropsWithChildren<InlineCssCollectorProps>> : React.FC<React.PropsWithChildren<CssCollectorProps>>;
   collectCss?: boolean;
   collectAssets?: boolean;
+  inlineCss?: InlineCSS;
   build?: BuildConfig;
   moduleBaseExceptions?: string[];
   pipableStreamOptions?: PipeableStreamOptions;
 }
 
-export interface CreateHandlerOptions<T = any> {
+export interface CreateHandlerOptions<T = any, InlineCSS extends boolean = boolean> {
+  root: string;
+  url: string;
+  route: string;
+  getCss: (id: string) => Promise<Map<string, string | CssContent>> | Map<string, string | CssContent>;
   loader: (id: string) => Promise<T>;
-  clientManifest?: import("vite").Manifest;
-  serverManifest?: import("vite").Manifest;
+  Html: NonNullable<StreamPluginOptions['Html']>
+  CssCollector: InlineCSS extends true ? React.FC<React.PropsWithChildren<InlineCssCollectorProps>> : React.FC<React.PropsWithChildren<CssCollectorProps>>;
+  inlineCss: InlineCSS;
+  propsPath?: string;
+  pagePath?: string;
+  pageExportName: string
+  propsExportName: string
+  moduleBase: string
+  preserveModulesRoot?: boolean | undefined
   moduleBasePath: string;
+  moduleRootPath: string;
   moduleBaseURL: string;
-  moduleGraph?: import("vite").ModuleGraph;
-  cssFiles?: string[];
-  cssModules?: Set<string>;
+  cssFiles: (string | CssContent)[];
+  cssModules?: Map<string, string | CssContent> | undefined;
   onCssFile?: (path: string, parentUrl: string) => void;
-  logger?: import("vite").Logger;
-  pipableStreamOptions?: PipeableStreamOptions;
+  logger: import("vite").Logger;
+  pipableStreamOptions: PipeableStreamOptions;
 }
 
 export type ModuleLoader = (
@@ -378,3 +393,30 @@ export interface PageData {
     modules: Array<[string, string]>; // [modulePath, exportName]
   };
 }
+
+export interface CssContent {
+  type?: string;
+  content: string;
+  key?: string;
+  path: string;
+}
+
+export interface InlineCssCollectorProps {
+  cssFiles: CssContent[];
+  root: string;
+  moduleBaseURL: string;
+  moduleBasePath: string;
+  moduleRootPath: string;
+  route: string;
+  children?: React.ReactNode;
+}
+
+export interface CssCollectorProps {
+  cssFiles: CssContent[];
+  root: string;
+  moduleBaseURL: string;
+  moduleBasePath: string;
+  moduleRootPath: string;
+  route: string;
+  children?: React.ReactNode;
+}