vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/helpers/collectBundleManifestCss.ts

@@ -0,0 +1,160 @@
+import type { CreateHandlerOptions, CssContent } from "../types.js";
+import { createCssProps } from "./createCssProps.js";
+import { join } from "node:path";
+import { readFile } from "node:fs/promises";
+
+type CssCollectionOptions = Pick<
+  CreateHandlerOptions<unknown, React.ComponentType<unknown>>,
+  | "projectRoot"
+  | "build"
+  | "moduleBaseURL"
+  | "moduleBasePath"
+  | "moduleRootPath"
+  | "css"
+  | "cssFiles"
+  | "manifest"
+>
+
+/**
+ * Recursively collects CSS files from a bundle manifest
+ */
+async function collectCssFromModule(
+  moduleKey: string,
+  manifest: Record<string, any>,
+  cssMap: Map<string, CssContent>,
+  options: CssCollectionOptions
+): Promise<void> {
+  const mod = manifest[moduleKey];
+  if (!mod) return;
+
+  // Handle CSS imports
+  if (mod.imports) {
+    for (const importPath of mod.imports) {
+      if (importPath === moduleKey) continue;
+      if (importPath) {
+        const cssEntry = manifest[importPath];
+        // Handle CSS array
+        if (Array.isArray(cssEntry.css)) {
+          for (const cssFile of cssEntry.css) {
+            if (cssMap.has(cssFile)) continue;
+            const file = join(
+              options.projectRoot,
+              options.build.outDir,
+              options.build.static,
+              cssFile
+            );
+            const code =
+              "source" in cssEntry && typeof cssEntry.source === "string"
+                ? cssEntry.source
+                : await readFile(file, "utf-8");
+            cssMap.set(
+              importPath,
+              createCssProps({
+                id: cssFile,
+                css: options.css,
+                code,
+                moduleBaseURL: options.moduleBaseURL,
+                moduleBasePath: options.moduleBasePath,
+                moduleRootPath: options.moduleRootPath,
+                projectRoot: options.projectRoot,
+              })
+            );
+          }
+        }
+      }
+      // Recursively process non-CSS imports
+      await collectCssFromModule(importPath, manifest, cssMap, options);
+    }
+  }
+
+  // Handle direct CSS files
+  if (mod.css) {
+    for (const cssFile of mod.css) {
+      if (cssMap.has(cssFile)) {
+        continue
+      }
+      try {
+        const file = join(
+          options.projectRoot,
+          options.build.outDir,
+          options.build.server,
+          cssFile
+        );
+        const code =
+          "code" in manifest[cssFile] &&
+          typeof manifest[cssFile].code === "string"
+            ? manifest[cssFile].code
+            : await readFile(file, "utf-8");
+        cssMap.set(
+          moduleKey,
+          createCssProps({
+            id: cssFile,
+            css: options.css,
+            code,
+            moduleBaseURL: options.moduleBaseURL,
+            moduleBasePath: options.moduleBasePath,
+            moduleRootPath: options.moduleRootPath,
+            projectRoot: options.projectRoot,
+          })
+        );
+      } catch {
+        continue;
+      }
+    }
+  }
+}
+
+/**
+ * Collects CSS files from a bundle manifest using async generators
+ */
+export async function collectBundleManifestCss(
+  pages: string[] | string,  
+  options: CssCollectionOptions,
+  _bundleManifest: Record<string, any>
+): Promise<Map<string, CssContent>> {
+  const cssMap = new Map<string, CssContent>();
+  if (options.cssFiles) {
+    for (const [key, value] of options.cssFiles.entries()) {
+      if (typeof value !== "string") {
+        cssMap.set(key, value);
+        continue;
+      }
+      const file = join(
+        options.projectRoot,
+        options.build.outDir,
+        options.build.server,
+        value
+      );
+      const code =
+        options.manifest != null &&
+        value in options.manifest &&
+        "code" in options.manifest[value] &&
+        typeof options.manifest[value].code === "string"
+          ? options.manifest[value].code
+          : await readFile(file, "utf-8");
+      cssMap.set(
+        file,
+        createCssProps({
+          id: file,
+          code: code,
+          css: options.css,
+          moduleBaseURL: options.moduleBaseURL,
+          moduleBasePath: options.moduleBasePath,
+          moduleRootPath: options.moduleRootPath,
+          projectRoot: options.projectRoot,
+        })
+      );
+    }
+  }
+
+  // Process page and props modules
+  if (typeof pages === "string") {
+    await collectCssFromModule(pages, options.manifest, cssMap, options);
+  } else if (Array.isArray(pages)) {
+    for (const _id of pages) {
+      await collectCssFromModule(_id, options.manifest, cssMap, options);
+    }
+  }
+
+  return cssMap;
+}

package/plugin/helpers/collectManifestCss.ts

@@ -0,0 +1,61 @@
+import type { Manifest } from "vite";
+import type { ResolvedUserOptions } from "../types.js";
+
+/**
+ * Collects CSS file paths from a manifest by walking through imports starting from a given file
+ */
+export function collectManifestCss(
+  manifest: Manifest,
+  startFile: string | string[],
+  userOptions: Pick<ResolvedUserOptions, "normalizer">
+): Record<string, string> {
+  const cssInputs: Record<string, string> = {};
+  const visited = new Set<string>();
+  
+  // Convert startFile to array and ensure we have valid file paths
+  const toVisit = Array.isArray(startFile) ? startFile : [startFile];
+
+  
+  while (toVisit.length > 0) {
+    const currentFile = toVisit.pop()!;
+    if (visited.has(currentFile)) continue;
+    visited.add(currentFile);
+    
+    const fileInfo = manifest[currentFile];
+    if (!fileInfo) {
+      continue;
+    }
+
+    // Add CSS files from the css property
+    if (fileInfo.css) {
+      for (const cssFile of fileInfo.css) {
+        const [keyNormalized, valueNormalized] = userOptions.normalizer(cssFile);
+        cssInputs[keyNormalized] = valueNormalized;
+      }
+    }
+
+    // Add imports to visit
+    if (fileInfo.imports) {
+      for (const importPath of fileInfo.imports) {
+        // Skip if we've already visited this import
+        if (visited.has(importPath)) {
+          continue;
+        }
+        
+        // Add the import to visit
+        toVisit.push(importPath);
+        
+        // Check if the imported file has CSS
+        const importedFile = manifest[importPath];
+        if (importedFile?.css) {
+          for (const cssFile of importedFile.css) {
+            const [keyNormalized, valueNormalized] = userOptions.normalizer(cssFile);
+            cssInputs[keyNormalized] = valueNormalized;
+          }
+        }
+      }
+    }
+  }
+
+  return cssInputs;
+} 

package/plugin/helpers/collectViteModuleGraphCss.ts

@@ -0,0 +1,158 @@
+import type { EnvironmentModuleGraph, ModuleGraph } from "vite";
+import type { CreateHandlerOptions, CssContent } from "../types.js";
+import { createCssProps } from "./createCssProps.js";
+
+type CollectViteModuleGraphCssResult =
+  | {
+      type: "success";
+      cssFiles: Map<string, CssContent>;
+      error?: never;
+      metrics: {
+        cssFiles: number;
+        processing: number;
+      };
+    }
+  | {
+      type: "error";
+      error: Error;
+      cssFiles?: never;
+      metrics: {
+        cssFiles: number;
+        processing: number;
+      };
+    }
+  | {
+      type: "skip";
+      cssFiles?: never;
+      error?: never;
+      metrics?: never;
+    };
+
+export async function collectViteModuleGraphCss<
+  InlineCSS extends boolean | undefined = undefined
+>({
+  moduleGraph,
+  pagePath,
+  onCss,
+  loader,
+  parentUrl,
+  moduleBaseURL,
+  moduleBasePath,
+  moduleRootPath,
+  projectRoot,
+  css,
+}: Pick<
+  CreateHandlerOptions<InlineCSS>,
+  | "pagePath"
+  | "moduleBaseURL"
+  | "moduleBasePath"
+  | "moduleRootPath"
+  | "projectRoot"
+  | "css"
+  | "loader"
+> & {
+  moduleGraph: ModuleGraph | EnvironmentModuleGraph;
+  onCss?: (cssContent: CssContent, parentUrl: string) => void;
+  parentUrl?: string;
+}): Promise<CollectViteModuleGraphCssResult> {
+  if (!pagePath) return { type: "skip" };
+
+  const cssFiles = new Map<string, CssContent>();
+  const pageModule = await moduleGraph.getModuleByUrl(pagePath, true);
+  if (!pageModule) {
+    return { type: "skip" };
+  }
+
+  const seen = new Set<string>();
+  const processing = new Set<string>();
+
+  const walkModule = async (mod: any) => {
+    if (!mod?.id) {
+      // Module has no id
+      return;
+    }
+
+    if (seen.has(mod.id)) {
+      // Already processed module
+      return;
+    }
+
+    if (processing.has(mod.id)) {
+      // Circular dependency detected for module
+      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`);
+      }
+      const cssContent = createCssProps({
+        id: mod?.url,
+        code: string,
+        moduleBaseURL: moduleBaseURL,
+        moduleBasePath: moduleBasePath,
+        moduleRootPath: moduleRootPath,
+        projectRoot: projectRoot,
+        css: css,
+      });
+      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);
+          } else {
+            throw new Error(
+              `Imported module has no id`
+            );
+          }
+        } else {
+          throw new Error(
+            `Imported module is not an object`
+          );
+        }
+      }
+    }
+
+    processing.delete(mod.id);
+    seen.add(mod.id);
+  };
+
+  try {
+    await walkModule(pageModule);
+  } catch (error) {
+    return {
+      type: "error",
+      error: error as Error,
+      metrics: {
+        cssFiles: cssFiles.size,
+        processing: processing.size,
+      },
+    };
+  }
+  return {
+    type: "success",
+    cssFiles,
+    metrics: {
+      cssFiles: cssFiles.size,
+      processing: processing.size,
+    },
+  };
+}

package/plugin/helpers/createCssProps.tsx

@@ -0,0 +1,85 @@
+import type { ResolvedUserOptions, CssContent } from "../types.js";
+import { join, relative } from "node:path";
+import { deserializeRegExp } from "./serializeUserOptions.js";
+
+/**
+ * Creates a CssContent object for a given path and css options
+ *
+ * Requirements:
+ * - path is a string
+ * - css is an object with the following properties:
+ *   - inlineCss: boolean
+ *   - purgeCss: boolean
+ *   - inlineThreshold: number
+ *   - inlinePatterns: RegExp[]
+ *   - linkPatterns: RegExp[]
+ * based on the bundle, we retrieve the css content and check if it should be inlined or linked
+ * inlined tags get the as:style and the children are the css content
+ * linked tags get the as:link and the href is the path
+ *
+ * @param path - The path to the css file
+ * @param css - The css options
+ * @returns A CssContent object
+ */
+export const createCssProps = ({
+  id,
+  css,
+  code,
+  projectRoot,
+  moduleBaseURL,
+  moduleBasePath,
+  moduleRootPath,
+}: {
+  id: string;
+  code: string;
+} & Pick<
+  ResolvedUserOptions,
+  "css" | "moduleBaseURL" | "moduleBasePath" | "moduleRootPath" | "projectRoot"
+>): CssContent => {
+  // If we don't have a bundle entry, create a linked CSS file
+  let inline = typeof code === "string" && code.length > css.inlineThreshold;
+  // Normalize the ID to be relative to src/
+  const normalizedId = id.startsWith(projectRoot)
+    ? relative(projectRoot, id)
+    : id;
+
+  if (css.inlinePatterns?.length) {
+    // Deserialize RegExp patterns if they exist
+    const inlinePatterns = css.inlinePatterns?.map((pattern) =>
+      typeof pattern === "string" ? deserializeRegExp(pattern) : pattern
+    );
+    if (inlinePatterns.some((pattern) => pattern.test?.(normalizedId))) {
+      inline = true;
+    }
+  }
+  if (css.linkPatterns?.length) {
+    const linkPatterns = css.linkPatterns?.map((pattern) =>
+      typeof pattern === "string" ? deserializeRegExp(pattern) : pattern
+    );
+    if (linkPatterns.some((pattern) => pattern.test?.(normalizedId))) {
+      inline = false;
+    }
+  }
+  if (inline) {
+    return {
+      type: "text/css",
+      id: normalizedId,
+      as: "style",
+      children: code.trim(),
+      ...(process.env["NODE_ENV"] !== "production"
+        ? {
+            "data-vite-dev-id": join(projectRoot, moduleRootPath, normalizedId),
+          }
+        : {}),
+    } as CssContent<true>;
+  }
+
+  // Default case
+  return {
+    id: normalizedId,
+    as: "link",
+    rel: "stylesheet",
+    href: join(moduleBaseURL, moduleBasePath, normalizedId),
+    precedence: "high",
+  } as CssContent<false>;
+};

package/plugin/helpers/createEventHandler.ts

@@ -0,0 +1,44 @@
+import type { PluginEvent } from "../types.js";
+
+/**
+ * Creates a unified event handler that can be used by both static and server plugins.
+ * This handler converts React stream events into plugin events and provides a consistent
+ * interface for event handling across the codebase.
+ * 
+ * @param options Options for the event handler
+ * @returns A function that handles both React stream events and plugin events
+ */
+export interface EventHandlerOptions {
+  onEvent?: (event: PluginEvent) => void | Promise<void>;
+}
+
+export function createEventHandler(onEvent : EventHandlerOptions['onEvent']) {
+  return async function handleEvent(event: PluginEvent) {
+    // Call the user's event handler if provided
+    if (onEvent) {
+      const result = onEvent(event);
+      if (!result) {
+        return {
+          type: "success",
+          data: undefined,
+        };
+      }
+      if (result instanceof Promise) {
+        try {
+          const awaited = await result;
+          return {
+            type: "success",
+            data: awaited,
+          };
+        } catch (error) {
+          return {
+            type: "error",
+            error: error as Error,
+          };
+        }
+      }
+    }
+
+    return event;
+  };
+} 

package/plugin/helpers/createHandler.ts

@@ -1,135 +1,66 @@
-import type { PipeableStream } from "react-dom/server";
-import { resolvePage } from "../resolvePage.js";
-import { resolveProps } from "../resolveProps.js";
-import type { CreateHandlerOptions, CssContent } from "../types.js";
+import type { CreateHandlerOptions } from "../types.js";
 import { createRscStream } from "./createRscStream.js";
-type CreateHandlerResult =
-  | {
-      type: "success";
-      controller: AbortController;
-      stream: PipeableStream;
-      assets: any;
-      route: string;
-    }
-  | { type: "error"; error: Error }
-  | { type: "skip" };
-
-interface HandlerAssets {
-  css: (string | CssContent)[];
-  bootstrapModules: string[];
-}
 
-export async function createHandler<T>({
-  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 loadWithCss = async (id: string) => {
-    try {
-      const mod = await loader(id);
-      const pageCss = await Promise.resolve(getCss(id));
-      Array.from(pageCss.entries()).forEach(([css, linkOrContent]) => {
-        cssModules.set(css, linkOrContent);
-        // Notify about new CSS file if callback exists
-        if (typeof onCssFile === "function") {
-          onCssFile(css, id);
-        }
-      });
-      return mod as Record<string, any>;
-    } catch (e: any) {
-      if (e.message?.includes("module runner has been closed")) {
-        return { type: "skip" } as Record<string, any>;
-      } else {
-        return { type: "error", error: e } as Record<string, any>;
+export async function createHandler(handlerOptions: CreateHandlerOptions) {
+  if(!handlerOptions.PageComponent) {
+    throw new Error("PageComponent is required");
+  }
+  try {
+    const adaptedOnEvent = (event: "error" | "postpone", data: any) => {
+      if (event === "error") {
+        handlerOptions.onEvent?.({
+          type: "route.error",
+          data: {
+            route: handlerOptions.route,
+            ...data,
+          },
+        });
+      } else if (event === "postpone") {
+        handlerOptions.onEvent?.({
+          type: "route.postpone",
+          data: {
+            route: handlerOptions.route,
+            ...data,
+          },
+        });
       }
-    }
-  };
+    };
 
-  const PropsModule = await resolveProps({
-    propsModule: propsPath
-      ? await loadWithCss(propsPath)
-      : { [propsExportName]: (url: string) => ({url}) },
-    path: String(propsPath),
-    exportName: propsExportName,
-    url: route,
-  });
-  if (PropsModule.type !== "success") {
-    return PropsModule;
-  }
-  const PageModule = await resolvePage({
-    pageModule: pagePath
-      ? await loadWithCss(pagePath)
-      : { [pageExportName]: () => null },
-    path: String(pagePath),
-    exportName: pageExportName,
-    url: route,
-  });
-  if (PageModule.type !== "success") {
-    return PageModule;
-  }
+    const streamResult = createRscStream({
+      ...handlerOptions,
+      onEvent: adaptedOnEvent,
+      cssFiles: handlerOptions.cssFiles,
+      PageComponent: handlerOptions.PageComponent as any,
+      pageProps: handlerOptions.pageProps,
+    });
 
-  // Add any additional CSS files
-  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],
-    moduleBase: moduleBase,
-    moduleRootPath: moduleRootPath,
-    moduleBasePath: moduleBasePath,
-    moduleBaseURL: moduleBaseURL,
-    logger: logger,
-    cssFiles: Array.from(cssModules.values()),
-    route,
-    url,
-    pipableStreamOptions: pipableStreamOptions,
-    htmlProps: {},
-    root: root,
-    loader: loader,
-    inlineCss: inlineCss,
-  });
+    if (streamResult.type === "error") {
+      handlerOptions.onEvent?.({
+        type: "route.error",
+        data: {
+          route: handlerOptions.route,
+          error: streamResult.error,
+        },
+      });
+      throw streamResult.error;
+    }
 
-  if (!stream) {
-    return { type: "skip" as const };
+    return {
+      type: "success",
+      stream: streamResult.stream,
+    };
+  } catch (error) {
+    handlerOptions.onEvent?.({
+      type: "route.error",
+      data: {
+        route: handlerOptions.route,
+        error,
+      },
+    });
+    return {
+      type: "error",
+      error: error as Error,
+    };
   }
-
-  const assets: HandlerAssets = {
-    css: cssFiles,
-    bootstrapModules: pipableStreamOptions?.bootstrapModules ?? [],
-  };
-  return {
-    type: "success",
-    controller,
-    stream,
-    assets,
-    route: route,
-  };
 }