vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/helpers/serializeUserOptions.ts

@@ -0,0 +1,209 @@
+import type { ResolvedConfig, ViteDevServer } from "vite";
+import type {
+  AutoDiscoveredFiles,
+  ResolvedUserOptions,
+} from "../types.js";
+import { cleanObject } from "./cleanObject.js";
+
+// Common non-serializable functions in Vite's resolved config
+const VITE_NON_SERIALIZABLE_FUNCTIONS = new Set([
+  "renderChunk",
+  "buildStart",
+  "buildEnd",
+  "watchChange",
+  "resolveId",
+  "config",
+  "output[].entryFileNames",
+  "output[].chunkFileNames",
+  "output[].assetFileNames",
+  "transform",
+  "handler",
+  "configureServer",
+  "shouldTransformCachedModule",
+  "generateBundle",
+  "renderStart",
+  "writeBundle",
+  "hotUpdate",
+  "configResolved",
+  "configurePreviewServer",
+  "handleHotUpdate",
+  "load",
+  "augmentChunkHash",
+  "closeBundle",
+  "entryFileNames",
+  "assetFileNames",
+  "chunkFileNames",
+  "createEnvironment",
+  "sourcemapIgnoreList",
+  "assetsInclude",
+  "info",
+  "warn",
+  "warnOnce",
+  "error",
+  "clearScreen",
+  "hasErrorLogged",
+  "set",
+  "plugins",
+  "getSortedPlugins",
+  "getSortedPluginHooks",
+  "createResolver",
+  "fsDenyGlob",
+  // Nested plugin functions
+  "plugins[].renderChunk",
+  "plugins[].buildStart",
+  "plugins[].buildEnd",
+  "plugins[].watchChange",
+  "plugins[].resolveId",
+  "plugins[].config",
+  "plugins[].transform",
+  "plugins[].handler",
+  "plugins[].configureServer",
+  "plugins[].shouldTransformCachedModule",
+  "plugins[].generateBundle",
+  "plugins[].renderStart",
+  "plugins[].writeBundle",
+  "plugins[].hotUpdate",
+  "plugins[].configResolved",
+  "plugins[].configurePreviewServer",
+  "plugins[].handleHotUpdate",
+  "plugins[].load",
+  "plugins[].augmentChunkHash",
+  "plugins[].closeBundle",
+  "plugins[].entryFileNames",
+  "plugins[].assetFileNames",
+  "plugins[].chunkFileNames",
+  "plugins[].createEnvironment",
+  "plugins[].sourcemapIgnoreList",
+  "plugins[].assetsInclude",
+]);
+
+// Common non-serializable functions in our plugin's options
+const PLUGIN_NON_SERIALIZABLE_FUNCTIONS = new Set([
+  "Page",
+  "props",
+  "normalizer",
+  "CssCollector",
+  "Html",
+  "onEvent",
+  "onMetrics",
+  "build.entryFile",
+  "build.chunkFile",
+  "build.assetFile",
+  "build.pages",
+  "autoDiscover",
+]);
+
+// Helper function to serialize RegExp objects
+function serializeRegExp(regex: RegExp) {
+  return {
+    source: regex.source,
+    flags: regex.flags,
+    __isRegExp: true
+  };
+}
+
+// Helper function to deserialize RegExp objects
+export function deserializeRegExp(obj: any): any {
+  if (obj && obj.__isRegExp) {
+    return new RegExp(obj.source, obj.flags);
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(deserializeRegExp);
+  }
+  if (obj && typeof obj === 'object') {
+    const result: any = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = deserializeRegExp(value);
+    }
+    return result;
+  }
+  return obj;
+}
+
+// Helper function to recursively process objects for serialization
+export function processForSerialization(obj: any): any {
+  if (obj instanceof RegExp) {
+    return serializeRegExp(obj);
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(processForSerialization);
+  }
+  if (obj && typeof obj === 'object') {
+    const result: any = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = processForSerialization(value);
+    }
+    return result;
+  }
+  return obj;
+}
+
+export function serializeResolvedConfig<T extends ResolvedConfig>(
+  config: T,
+  knownNonSerializableFunctions: Set<string> = VITE_NON_SERIALIZABLE_FUNCTIONS
+) {
+  const {
+    getSortedPluginHooks,
+    getSortedPlugins,
+    assetsInclude,
+    // extract known vite function properties
+    ...handlerOptions
+  } = config;
+
+  // Clean the object to remove non-serializable properties and process RegExp objects
+  return processForSerialization(cleanObject(handlerOptions, knownNonSerializableFunctions));
+}
+
+// For Vite's config
+export const serializedDevServerConfig = <T extends ViteDevServer["config"]>(
+  config: T,
+  customNonSerializableFunctions: Set<string> = PLUGIN_NON_SERIALIZABLE_FUNCTIONS
+) => {
+  const {
+    getSortedPluginHooks,
+    getSortedPlugins,
+    assetsInclude,
+    build,
+    ...handlerOptions
+  } = config;
+  return processForSerialization(cleanObject(
+    handlerOptions,
+    customNonSerializableFunctions
+  ));
+};
+
+// For your own options (if you need custom non-serializable functions)
+export const serializedOptions = <T extends ResolvedUserOptions>(
+  userOptions: T,
+  autoDiscoveredFiles: AutoDiscoveredFiles,
+  customNonSerializableFunctions: Set<string> = PLUGIN_NON_SERIALIZABLE_FUNCTIONS
+) => {
+  const {
+    Page,
+    props,
+    normalizer,
+    CssCollector,
+    Html,
+    onEvent,
+    onMetrics,
+    build,
+    autoDiscover,
+    ...handlerOptions
+  } = userOptions;
+  const { entryFile, chunkFile, assetFile, pages, ...buildOptions } = build;
+  const result = {
+    ...handlerOptions,
+    build: {
+      ...buildOptions,
+      pages: autoDiscoveredFiles
+        ? Array.from(autoDiscoveredFiles.urlMap.keys())
+        : [],
+    },
+  };
+
+  // Clean the object to remove non-serializable properties and process RegExp objects
+  return processForSerialization(cleanObject(
+    result,
+    customNonSerializableFunctions
+  ));
+};

package/plugin/helpers/stashReturnValue.ts

@@ -0,0 +1,16 @@
+const stashedReturnValue = new Map<string, any>();
+export const stashReturnValue = <FN extends (...args: any[]) => unknown>(
+  fn: FN
+): FN => {
+  return ((...args: Parameters<FN>): ReturnType<FN> => {
+    const id = args
+      .map((arg) =>!arg ? '' : typeof arg === "string" ? arg : typeof arg === "object" && 'id' in arg ? arg.id : '')
+      .join("_");
+    if (stashedReturnValue.has(id)) {
+      return stashedReturnValue.get(id);
+    }
+    const result = fn(...args);
+    stashedReturnValue.set(id, result);
+    return result as never;
+  }) as FN;
+};

package/plugin/helpers/tryManifest.ts

@@ -1,39 +1,56 @@
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
+import { join, resolve } from "node:path";
+
 import type { Manifest } from "vite";
+import { readFile } from "node:fs/promises";
 
-type TryManifestOptions<SSR extends boolean> = {
+type TryManifestOptions<SSR extends boolean = false> = {
   root: string;
   outDir: string;
   ssrManifest?: SSR;
+  preserveModulesRoot?: string;
+  manifestPath?: string | undefined;
 };
 
-export function tryManifest<SSR extends boolean>(options: TryManifestOptions<SSR>): {
-  type: "success";
-  manifest: SSR extends true ? Record<string, string[]> : Manifest;
-  error?:never
-} | {
-  type: "error";
-  error: Error;
-  manifest?:never
-} {
+const stashedManifests: Map<string, any> = new Map();
+
+export async function tryManifest<SSR extends boolean>(
+  options: TryManifestOptions<SSR>
+): Promise<
+  | {
+      type: "success";
+      manifest: SSR extends true ? Record<string, string[]> : Manifest;
+      error?: never;
+    }
+  | {
+      type: "error";
+      error: Error;
+      manifest?: never;
+    }> {
+  if (stashedManifests.has(options.outDir)) {
+    return {
+      type: "success",
+      manifest: stashedManifests.get(options.outDir),
+    };
+  }
+  const localSsrManifestPath = !options.ssrManifest ? undefined : options.manifestPath ? options.manifestPath : join('.vite', 'ssr-manifest.json');
+  const localManifestPath = options.ssrManifest ? undefined : options.manifestPath ? options.manifestPath : join('.vite', 'manifest.json');
   const manifestPath = resolve(
     options.root,
     options.outDir,
-    ".vite",
-    options.ssrManifest ? "ssr-manifest.json" : "manifest.json"
+    options.ssrManifest ? localSsrManifestPath as string : localManifestPath as string
   );
   try {
-    const result=  JSON.parse(readFileSync(manifestPath, "utf-8"));
+    const result = JSON.parse(await readFile(manifestPath, "utf-8"));
+    stashedManifests.set(options.outDir, result);
     return {
       type: "success",
       manifest: result,
-    }
+    };
   } catch (e) {
-    console.log("No manifest found", manifestPath);
+    console.trace("No manifest found", manifestPath);
     return {
       type: "error",
       error: e as Error,
-    }
+    };
   }
 }

package/plugin/html.tsx

@@ -1,9 +1,20 @@
 import React from "react";
-export const Html = ({ children }: { children: any }) => (
+import type { HtmlProps } from "./types.js";
+import { CssCollectorElements } from "./css-collector-elements.js";
+export const Html = ({
+  children,
+  CssCollector,
+  cssFiles,
+  globalCss,
+}: React.PropsWithChildren<HtmlProps>) => (
   <html>
-    <head></head>
+    <head>
+      <CssCollectorElements cssFiles={globalCss} />
+    </head>
     <body>
-      <div id="root">{children}</div>
+      <CssCollector as={"div"} id="root" cssFiles={cssFiles}>
+        {children}
+      </CssCollector>
     </body>
   </html>
 );

package/plugin/index.ts

@@ -1,2 +1,5 @@
-export * from './plugin.js';
-export type * from './types.js';
+import { getCondition } from './config/getCondition.js';
+
+const condition = getCondition('');
+
+export const { vitePluginReactServer } = await import(`./plugin.${condition}.js`);

package/plugin/loader/createBuildLoader.ts

@@ -1,67 +1,172 @@
 import { join } from "node:path";
-import type { PluginContext } from "rollup";
 import type { ResolvedUserConfig, ResolvedUserOptions } from "../../server.js";
 import type { Manifest } from "vite";
-import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+import { getModuleRef } from "../moduleRefs.js";
+import { readFile } from "node:fs/promises";
+import type { OutputBundle } from "rollup";
+import { temporaryReferences } from "./temporaryReferences.js";
 
 export interface BuildLoaderOptions {
-  root: string;
-  pluginContext: PluginContext;
   userConfig: ResolvedUserConfig;
   userOptions: ResolvedUserOptions;
   serverManifest: Manifest;
   clientManifest: Manifest;
+  staticManifest: Manifest;
 }
 
-export function createBuildLoader({
-  root,
-  userConfig: _userConfig,
-  userOptions,
-  pluginContext: _pluginContext,
-  serverManifest,
-  clientManifest,
-}: BuildLoaderOptions) {
-  const normalizer = createInputNormalizer({
-    root,
-    preserveModulesRoot: userOptions.build.preserveModulesRoot === true ? userOptions.moduleBase : undefined,
-    removeExtension: true,
-  });
+/**
+ * Creates a loader function for handling module resolution during build.
+ *
+ * The loader handles the following strategy:
+ *  - Just load any file from any manifest we can find in the order of client, server, static
+ *  - Ideally the buildLoader is only used form loading pages, props and inline css modules
+ *  -
+ *
+ * During build:
+ * - We use the manifest information to get module exports
+ * - The manifest contains the transformed modules with their exports
+ * - We store the module in temporaryReferences for later use
+ *
+ * @param options.root - The project root directory
+ * @param options.pluginContext - The Rollup plugin context
+ * @param options.userConfig - Resolved user configuration
+ * @param options.userOptions - Resolved user options
+ * @param options.serverManifest - Vite server manifest
+ * @param options.clientManifest - Vite client manifest
+ * @param options.options - Additional options including temporaryReferences
+ *
+ * @returns A loader function that resolves module paths to their exports
+ */
+export async function createBuildLoader(
+  {
+    userOptions,
+    serverManifest,
+    clientManifest,
+    staticManifest,
+  }: BuildLoaderOptions,
+  bundle: OutputBundle
+) {
+  const manifestKeys = Object.keys(serverManifest);
+  if (!manifestKeys.length) {
+    throw new Error("Server manifest is empty");
+  }
   return async function buildLoader(id: string) {
-    const [key, value] = normalizer(id);
-    if(value !== id){
-      console.warn(`[vite-plugin-react-server] Mismatch in build loader for ${id} !== ${value} (${key})`);
+    const [withoutQuery, query] = id.split("?", 2);
+    const [, normalizedValue] = userOptions.normalizer(withoutQuery);
+    const moduleRef = getModuleRef(id);
+    // Check if we have a temporary reference (cached module)
+    if (temporaryReferences?.has(moduleRef)) {
+      const mod = temporaryReferences.get(moduleRef);
+      if (typeof mod === "object" && mod !== null && "error" in mod) {
+        // ignore it
+      } else {
+        return mod;
+      }
     }
-    // Remove leading slash if present
-    const distDir = userOptions.build.outDir;
-    const manifests = [clientManifest, serverManifest];
-    // Try to find the module in the manifest
-    for (const n of [0, 1]) {
-      const manifest = manifests[n];
-      const manifestEntry = manifest[value]
-      if (!manifestEntry) {
-        continue;
+
+    try {
+      // For inline modules, handle them directly
+      if (query === "inline") {
+        // Then check server manifest
+        const serverChunk =
+          bundle[serverManifest[normalizedValue]?.file] ??
+          bundle[staticManifest[normalizedValue]?.file] ??
+          bundle[clientManifest[normalizedValue]?.file] ??
+          bundle[withoutQuery];
+        if (serverChunk) {
+          if (serverChunk.type === "asset") {
+            return { default: serverChunk.source };
+          } else if ("code" in serverChunk) {
+            return { default: serverChunk.code };
+          }
+        }
+
+        // If not found in either manifest, try reading the file directly
+        const module = {
+          default: await readFile(
+            join(
+              userOptions.projectRoot,
+              userOptions.build.outDir,
+              userOptions.build.static,
+              normalizedValue
+            ),
+            "utf-8"
+          ),
+        };
+        temporaryReferences?.set(moduleRef, module);
+        return module;
+      }
+      const clientEntry = clientManifest[normalizedValue];
+      if (clientEntry) {
+        const module = await import(
+          join(
+            userOptions.projectRoot,
+            userOptions.build.outDir,
+            userOptions.build.client,
+            clientEntry.file
+          )
+        );
+        console.warn(
+          "client module used in buildLoader, consider making this available in the server manifest",
+          module
+        );
+        temporaryReferences?.set(moduleRef, module);
+        return module;
       }
-      const isClient = userOptions.autoDiscover.clientComponents(id);
-      const isServer = userOptions.autoDiscover.serverFunctions(id);
-      const outDir = isClient
-        ? userOptions.build.client
-        : isServer
-        ? userOptions.build.server
-        : n === 0
-        ? userOptions.build.client
-        : userOptions.build.server;
-      if (manifestEntry.file.startsWith(`${root}/${distDir}/${outDir}/`)) {
-        return import(manifestEntry.file);
+      const bundleEntry = bundle[withoutQuery];
+      if (bundleEntry) {
+        // Load the module
+        const module = await import(
+          join(
+            userOptions.projectRoot,
+            userOptions.build.outDir,
+            userOptions.build.server,
+            bundleEntry.fileName
+          )
+        );
+        temporaryReferences?.set(moduleRef, module);
       }
-      if (manifestEntry.file.startsWith(`${distDir}/`)) {
-        return import(join(root, manifestEntry.file));
+      // Try to resolve the module using Vite's resolution
+      const serverEntry = serverManifest[normalizedValue];
+      if (serverEntry) {
+        // Load the module
+        const module = await import(
+          join(
+            userOptions.projectRoot,
+            userOptions.build.outDir,
+            userOptions.build.server,
+            serverEntry.file
+          )
+        );
+        temporaryReferences?.set(moduleRef, module);
+        return module;
       }
-      if (manifestEntry.file.startsWith(`${outDir}/`)) {
-        return import(join(root, distDir, outDir, manifestEntry.file));
+      // try static manifest
+      const staticEntry = staticManifest[normalizedValue];
+      if (staticEntry) {
+        const module = await import(
+          join(
+            userOptions.projectRoot,
+            userOptions.build.outDir,
+            userOptions.build.static,
+            staticEntry.file
+          )
+        );
+        console.warn(
+          "static module used in buildLoader, consider making this available in the server manifest",
+          module
+        );
+        temporaryReferences?.set(moduleRef, module);
+        return module;
       }
-      // Load the module
-      return import(join(root, distDir, outDir, manifestEntry.file));
+      throw new Error(`Module ${normalizedValue} not found`);
+    } catch (error) {
+      const emptyExports = {
+        error: error instanceof Error ? error : new Error(String(error)),
+        id: id,
+      };
+      temporaryReferences?.set(moduleRef, emptyExports);
+      return emptyExports;
     }
-    throw new Error(`Module not found: ${id}`);
   };
 }