vite-plugin-react-server 1.1.19 → 1.2.0-alpha.0

package/plugin/helpers/collectViteModuleGraphCss.ts

@@ -1,5 +1,13 @@
-import type { EnvironmentModuleGraph, ModuleGraph } from "vite";
-import type { CreateHandlerOptions, CssContent,  InlineCssOpt,  PagePropOpt } from "../types.js";
+import type {
+  EnvironmentModuleGraph,
+  EnvironmentModuleNode,
+  ModuleGraph,
+  ModuleNode,
+} from "vite";
+import type {
+  CreateHandlerOptions,
+  CssContent,
+} from "../types.js";
 import { createCssProps } from "./createCssProps.js";
 
 type CollectViteModuleGraphCssResult =
@@ -28,143 +36,155 @@ type CollectViteModuleGraphCssResult =
       metrics?: never;
     };
 
-export async function collectViteModuleGraphCss<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
->({
-  moduleGraph,
-  onCss,
-  parentUrl,
-  handlerOptions,
-}: {
+export type CollectViteModuleGraphCssOptions = Pick<
+  CreateHandlerOptions,
+  | "pagePath"
+  | "moduleBaseURL"
+  | "moduleBasePath"
+  | "moduleRootPath"
+  | "projectRoot"
+  | "css"
+  | "loader"
+  | "normalizer"
+  | "moduleID"
+  | "publicOrigin"
+>;
+
+export type CollectViteModuleGraphCssFn = <
+  Opt extends CollectViteModuleGraphCssOptions = CollectViteModuleGraphCssOptions
+>(options: {
   moduleGraph: ModuleGraph | EnvironmentModuleGraph;
   onCss?: (cssContent: CssContent, parentUrl: string) => void;
   parentUrl?: string;
-  handlerOptions: Pick<
-    CreateHandlerOptions<T, InlineCSS>,
-    | "pagePath"
-    | "moduleBaseURL"
-    | "moduleBasePath"
-    | "moduleRootPath"
-    | "projectRoot"
-    | "css"
-    | "loader"
-    | "normalizer"
-    | "moduleID"
-    | "publicOrigin"
-  >;
-}): Promise<CollectViteModuleGraphCssResult> {
-  const {
-    pagePath,
-    moduleBaseURL,
-    moduleBasePath,
-    moduleRootPath,
-    projectRoot,
-    publicOrigin,
-    css,
-    loader,
-    normalizer,
-    moduleID,
-  } = handlerOptions;
-  if (!pagePath) return { type: "skip" };
-
-  const cssFiles = new Map<string, CssContent>();
-  const pageModule = await moduleGraph.getModuleByUrl(pagePath, true);
-  if (!pageModule) {
-    return { type: "skip" };
-  }
+  handlerOptions: Opt;
+}) => Promise<CollectViteModuleGraphCssResult>;
 
-  const seen = new Set<string>();
-  const processing = new Set<string>();
+export const collectViteModuleGraphCss: CollectViteModuleGraphCssFn =
+  async function _collectViteModuleGraphCss({
+    moduleGraph,
+    onCss,
+    parentUrl,
+    handlerOptions,
+  }) {
+    const {
+      pagePath,
+      moduleBaseURL,
+      moduleBasePath,
+      moduleRootPath,
+      projectRoot,
+      publicOrigin,
+      css,
+      loader,
+      normalizer,
+      moduleID,
+    } = handlerOptions;
+    if (!pagePath) return { type: "skip" };
 
-  const walkModule = async (mod: any) => {
-    if (!mod?.id) {
-      // Module has no id
-      return;
+    const cssFiles = new Map<string, CssContent>();
+    const pageModule = await moduleGraph.getModuleByUrl(pagePath, true);
+    if (!pageModule) {
+      return { type: "skip" };
     }
 
-    if (seen.has(mod.id)) {
-      // Already processed module
-      return;
-    }
+    const seen = new Set<string>();
+    const processing = new Set<string>();
 
-    if (processing.has(mod.id)) {
-      // Circular dependency detected for module
-      return;
-    }
+    const walkModule = async (mod: ModuleNode | EnvironmentModuleNode) => {
+      if (!mod?.id) {
+        // Module has no id
+        return;
+      }
 
-    processing.add(mod.id);
-    // Processing module
-    if (mod.id.endsWith(".css")) {
-      const string = await loader(mod.id + "?inline").then(
-        (m) => m?.["default"] ?? ""
-      );
-      if (typeof string !== "string") {
-        throw new Error(`CSS module ${mod.id}?inline did not return a string`);
-      } else if (string === "") {
-        throw new Error(`CSS module ${mod.id}?inline returned an empty string`);
+      if (seen.has(mod.id)) {
+        // Already processed module
+        return;
+      }
+
+      if (processing.has(mod.id)) {
+        // Circular dependency detected for module
+        return;
       }
-      const cssContent = createCssProps({
-        id: mod?.url,
-        code: string,
-        userOptions: {
-          moduleBaseURL: moduleBaseURL,
-          moduleBasePath: moduleBasePath,
-          moduleRootPath: moduleRootPath,
-          projectRoot: projectRoot,
-          css: css,
-          normalizer: normalizer,
-          moduleID: moduleID,
-          publicOrigin: publicOrigin,
-        },
-      });
-      cssFiles.set(mod?.url, cssContent);
-      onCss?.(cssContent, parentUrl ?? pagePath);
-    }
 
-    if (mod.importedModules) {
-      // Processing imports for module
-      const importedModules = Array.from(mod.importedModules);
-      // Found imported modules
-      for (const importedMod of importedModules) {
-        if (typeof importedMod === "object" && importedMod != null) {
-          if (
-            "id" in importedMod &&
-            importedMod.id &&
-            typeof importedMod.id === "string"
-          ) {
-            await walkModule(importedMod);
+      processing.add(mod.id);
+      // Processing module
+      if (mod.id.endsWith(".css")) {
+        const string = await loader(`${mod.id}?inline`).then(
+          (m) => m?.["default"] ?? ""
+        );
+        if (typeof string !== "string") {
+          throw new Error(
+            `CSS module ${mod.id}?inline did not return a string`
+          );
+        } else if (string === "") {
+          throw new Error(
+            `CSS module ${mod.id}?inline returned an empty string`
+          );
+        }
+        const cssContent = createCssProps({
+          id: mod?.id,
+          code: string,
+          userOptions: {
+            moduleBaseURL: moduleBaseURL,
+            moduleBasePath: moduleBasePath,
+            moduleRootPath: moduleRootPath,
+            projectRoot: projectRoot,
+            css: css,
+            normalizer: normalizer,
+            moduleID: moduleID,
+            publicOrigin: publicOrigin,
+          },
+        });
+        cssFiles.set(mod?.id, cssContent);
+        onCss?.(cssContent, parentUrl ?? pagePath);
+      }
+
+      if (mod.importedModules) {
+        // Processing imports for module
+        const importedModules = Array.from(
+          mod.importedModules?.values() as Iterable<
+            ModuleNode | EnvironmentModuleNode
+          >
+        );
+        // Found imported modules
+        for (const importedMod of importedModules) {
+          if (typeof importedMod === "object" && importedMod != null) {
+            if (
+              "id" in importedMod &&
+              importedMod.id &&
+              typeof importedMod.id === "string"
+            ) {
+              await walkModule(importedMod);
+            } else {
+              throw new Error(`Imported module has no id`);
+            }
           } else {
-            throw new Error(`Imported module has no id`);
+            throw new Error(`Imported module is not an object`);
           }
-        } else {
-          throw new Error(`Imported module is not an object`);
         }
       }
-    }
 
-    processing.delete(mod.id);
-    seen.add(mod.id);
-  };
+      processing.delete(mod.id);
+      seen.add(mod.id);
+    };
 
-  try {
-    await walkModule(pageModule);
-  } catch (error) {
+    try {
+      await walkModule(pageModule);
+    } catch (error) {
+      return {
+        type: "error",
+        error: error as Error,
+        metrics: {
+          cssFiles: cssFiles.size,
+          processing: processing.size,
+        },
+      };
+    }
     return {
-      type: "error",
-      error: error as Error,
+      type: "success",
+      cssFiles,
       metrics: {
         cssFiles: cssFiles.size,
         processing: processing.size,
       },
     };
-  }
-  return {
-    type: "success",
-    cssFiles,
-    metrics: {
-      cssFiles: cssFiles.size,
-      processing: processing.size,
-    },
   };
-}

package/plugin/helpers/createCssProps.tsx

@@ -1,7 +1,7 @@
 import type { ResolvedUserOptions, CssContent } from "../types.js";
-import type { InlineCssOpt, PagePropOpt } from "../../server.js";
 import { join } from "node:path";
 import { deserializeRegExp } from "./serializeUserOptions.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
 
 /**
  * Creates a CssContent object for a given path and css options
@@ -22,10 +22,7 @@ import { deserializeRegExp } from "./serializeUserOptions.js";
  * @param css - The css options
  * @returns A CssContent object
  */
-export const createCssProps = <
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
->({
+export const createCssProps = ({
   id,
   code,
   userOptions,
@@ -33,7 +30,7 @@ export const createCssProps = <
   id: string;
   code: string;
   userOptions: Pick<
-    ResolvedUserOptions<T, InlineCSS>,
+    ResolvedUserOptions,
     | "css"
     | "moduleBaseURL"
     | "moduleBasePath"
@@ -43,13 +40,16 @@ export const createCssProps = <
     | "moduleID"
     | "publicOrigin"
   >;
-}): CssContent<InlineCSS> => {
+}): CssContent<boolean> => {
   const { css, moduleRootPath } = userOptions;
   // If we don't have a bundle entry, create a linked CSS file
-  let inline = typeof code === "string" && code.length > css.inlineThreshold;
+  let inline =
+    css?.inlineCss !== false &&
+    typeof code === "string" &&
+    code.length > (css?.inlineThreshold ?? DEFAULT_CONFIG.CSS.inlineThreshold);
   // Normalize the ID to be relative to src/
   const [, value] = userOptions.normalizer(id);
-  const moduleID = userOptions.moduleID(value);
+  const moduleID = userOptions?.moduleID?.(value) ?? value;
   if (css.inlinePatterns?.length) {
     // Deserialize RegExp patterns if they exist
     const inlinePatterns = css.inlinePatterns;
@@ -76,21 +76,27 @@ export const createCssProps = <
             "data-vite-dev-id": join(moduleRootPath, moduleID),
           }
         : {}),
-    } as CssContent<InlineCSS>;
+    } as CssContent<boolean>;
   }
   const processEnv = process.env || {};
-  const hasEnv= typeof processEnv.VITE_PUBLIC_ORIGIN === "string" &&
-      processEnv.VITE_PUBLIC_ORIGIN !== "";
+  const hasEnv =
+    typeof processEnv.VITE_PUBLIC_ORIGIN === "string" &&
+    processEnv.VITE_PUBLIC_ORIGIN !== "";
   const importMeta = import.meta || {};
-  const hasMetaEnv = 'env' in importMeta && typeof importMeta.env.PUBLIC_ORIGIN === "string" &&
-      importMeta.env.PUBLIC_ORIGIN !== "";
+  const hasMetaEnv =
+    "env" in importMeta &&
+    typeof importMeta.env.PUBLIC_ORIGIN === "string" &&
+    importMeta.env.PUBLIC_ORIGIN !== "";
   // final public origin check
-  if((hasEnv || hasMetaEnv) && userOptions.publicOrigin) {
+  if ((hasEnv || hasMetaEnv) && userOptions.publicOrigin) {
     // change the public origin to the one from the env
-    if(hasEnv && userOptions.publicOrigin !== processEnv.VITE_PUBLIC_ORIGIN) {
+    if (hasEnv && userOptions.publicOrigin !== processEnv.VITE_PUBLIC_ORIGIN) {
       // prefer potentially dynamic process.env
       userOptions.publicOrigin = processEnv.VITE_PUBLIC_ORIGIN;
-    } else if(hasMetaEnv && userOptions.publicOrigin !== import.meta.env.PUBLIC_ORIGIN) {
+    } else if (
+      hasMetaEnv &&
+      userOptions.publicOrigin !== import.meta.env.PUBLIC_ORIGIN
+    ) {
       // static import.meta.env
       userOptions.publicOrigin = import.meta.env.PUBLIC_ORIGIN;
     }
@@ -101,9 +107,24 @@ export const createCssProps = <
     as: "link",
     rel: "stylesheet",
     href:
-    userOptions.publicOrigin !== ""
-        ? new URL(moduleID, userOptions.publicOrigin).href
+      userOptions.publicOrigin !== ""
+        ? new URL(
+            userOptions.moduleBaseURL +
+              moduleID.slice(
+                Number(
+                  moduleID.startsWith("/") &&
+                    userOptions.moduleBaseURL.endsWith("/")
+                )
+              ),
+            userOptions.publicOrigin +
+              userOptions.moduleBaseURL.slice(
+                Number(
+                  userOptions.publicOrigin.endsWith("/") &&
+                    userOptions.moduleBaseURL.startsWith("/")
+                )
+              )
+          ).href
         : moduleID,
     precedence: "high",
-  } as CssContent<InlineCSS>;
+  } as CssContent<boolean>;
 };

package/plugin/helpers/createEventHandler.ts

@@ -8,7 +8,7 @@ import type { PluginEvent } from "../types.js";
  * @param options Options for the event handler
  * @returns A function that handles both React stream events and plugin events
  */
-export interface EventHandlerOptions {
+export type EventHandlerOptions = {
   onEvent?: (event: PluginEvent) => void | Promise<void>;
 }
 

package/plugin/helpers/createHandler.ts

@@ -1,16 +1,39 @@
-import type { CreateHandlerOptions, InlineCssOpt } from "../types.js";
-import type { PagePropOpt } from "../../server.js";
+import type {
+  ReactStreamHandlerFn,
+} from "../types.js";
 import { createRscStream } from "./createRscStream.js";
+import type { ErrorInfo } from "react";
+import { toError } from "../error/toError.js";
+import type { PassThrough } from "node:stream";
+import { routeToURL } from "../utils/routeToURL.js";
 
-export function createHandler<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
->(handlerOptions: CreateHandlerOptions<T, InlineCSS>) {
+export type CreateHandlerReturn =
+  | {
+      type: "success";
+      stream: PassThrough;
+      error?: never;
+    }
+  | {
+      type: "error";
+      error: Error;
+      stream?: never;
+    };
+
+export type CreateHandlerFn = ReactStreamHandlerFn<CreateHandlerReturn>
+
+export const createHandler: CreateHandlerFn = ((handlerOptions) => {
   if (!handlerOptions.PageComponent) {
     throw new Error("PageComponent is required");
   }
   try {
-    const adaptedOnEvent = (event: "error" | "postpone", data: any) => {
+    const adaptedOnEvent = (
+      event: "error" | "postpone",
+      data: {
+        error?: Error | null;
+        errorInfo?: ErrorInfo;
+        reason?: string | null;
+      }
+    ) => {
       if (event === "error") {
         handlerOptions.onEvent?.({
           type: "route.error",
@@ -24,17 +47,21 @@ export function createHandler<
           type: "route.postpone",
           data: {
             route: handlerOptions.route,
+            reason: data.reason,
             ...data,
           },
         });
       }
     };
 
+    const url = routeToURL(handlerOptions.route, handlerOptions.moduleBaseURL, handlerOptions.build.rscOutputPath);
+
     const streamResult = createRscStream({
       ...handlerOptions,
+      url,
       onEvent: adaptedOnEvent,
-      cssFiles: handlerOptions.cssFiles,
-      PageComponent: handlerOptions.PageComponent as any,
+      cssFiles: handlerOptions.cssFiles,  
+      PageComponent: handlerOptions.PageComponent,
       pageProps: handlerOptions.pageProps,
     });
 
@@ -54,16 +81,17 @@ export function createHandler<
       stream: streamResult.stream,
     };
   } catch (error) {
+    const err = toError(error);
     handlerOptions.onEvent?.({
       type: "route.error",
       data: {
         route: handlerOptions.route,
-        error,
+        error: err,
       },
     });
     return {
       type: "error",
-      error: error as Error,
+      error: err,
     };
   }
-}
+})