vite-plugin-react-server 1.1.20 → 1.2.0-alpha.1

package/plugin/helpers/serializeUserOptions.ts

@@ -2,8 +2,10 @@ import type { ResolvedConfig, ViteDevServer } from "vite";
 import type {
   AutoDiscoveredFiles,
   ResolvedUserOptions,
-  PagePropOpt,
-  InlineCssOpt,
+  SerializableRecord,
+  ResolvedUserConfig,
+  SerializedUserOptions,
+  Serializable,
 } from "../types.js";
 import { cleanObject } from "./cleanObject.js";
 
@@ -84,7 +86,7 @@ const PLUGIN_NON_SERIALIZABLE_FUNCTIONS = new Set([
   "Page",
   "props",
   "normalizer",
-  "CssCollector",
+  "Root",
   "Html",
   "onEvent",
   "onMetrics",
@@ -100,60 +102,129 @@ function serializeRegExp(regex: RegExp) {
   return {
     source: regex.source,
     flags: regex.flags,
-    __isRegExp: true
+    __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);
+export function deserializeRegExp<T>(obj: T): Extract<T, SerializableRecord> {
+  if (
+    obj &&
+    typeof obj === "object" &&
+    obj != null &&
+    "__isRegExp" in obj &&
+    typeof obj["__isRegExp"] === "boolean" &&
+    "source" in obj &&
+    typeof obj["source"] === "string" &&
+    "flags" in obj &&
+    typeof obj["flags"] === "string"
+  ) {
+    return new RegExp(obj["source"], obj["flags"]) as unknown as Extract<
+      T,
+      SerializableRecord
+    >;
   }
   if (Array.isArray(obj)) {
-    return obj.map(deserializeRegExp);
+    return obj.map(deserializeRegExp) as unknown as Extract<
+      T,
+      SerializableRecord
+    >;
   }
-  if (obj && typeof obj === 'object') {
-    const result: any = {};
+  if (obj && typeof obj === "object") {
+    const result: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(obj)) {
-      result[key] = deserializeRegExp(value);
+      result[key] = deserializeRegExp(value) as unknown as Extract<
+        T,
+        SerializableRecord
+      >[keyof T];
     }
-    return result;
+    return result as unknown as Extract<T, SerializableRecord>;
   }
-  return obj;
+  return obj as unknown as Extract<T, SerializableRecord>;
 }
 
 // Helper function to recursively process objects for serialization
-export function processForSerialization(obj: any): any {
+export function processForSerialization<T>(
+  obj: T
+): Extract<T, Serializable> {
   if (obj instanceof RegExp) {
-    return serializeRegExp(obj);
+    return serializeRegExp(obj) as unknown as Extract<T, Serializable>;
   }
   if (Array.isArray(obj)) {
-    return obj.map(processForSerialization);
+    return obj.map(processForSerialization) as unknown as Extract<
+      T,
+      Serializable
+    >;
   }
-  if (obj && typeof obj === 'object') {
-    const result: any = {};
+  if (obj && typeof obj === "object") {
+    const result: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(obj)) {
-      result[key] = processForSerialization(value);
+      result[key] = processForSerialization(value) as unknown as Extract<
+        T,
+        Serializable
+      >[keyof T];
     }
-    return result;
+    return result as unknown as Extract<T, Serializable>;
   }
-  return obj;
+  return obj as unknown as Extract<T, Serializable>;
 }
 
-export function serializeResolvedConfig<T extends ResolvedConfig>(
+export function serializeResolvedConfig<T extends ResolvedConfig = ResolvedConfig>(
   config: T,
   knownNonSerializableFunctions: Set<string> = VITE_NON_SERIALIZABLE_FUNCTIONS
 ) {
   const {
-    getSortedPluginHooks,
-    getSortedPlugins,
-    assetsInclude,
+    getSortedPluginHooks: _getSortedPluginHooks,
+    getSortedPlugins: _getSortedPlugins,
+    assetsInclude: _assetsInclude,
+    environments: _environments,
     // extract known vite function properties
     ...handlerOptions
   } = config;
 
+  // Preserve a minimal environments structure for CSS processing
+  const minimalEnvironments = _environments ? {
+    client: {
+      resolve: { conditions: ['browser', 'module', 'import'] },
+      consumer: 'client',
+      optimizeDeps: { include: [] },
+      dev: { optimizeDeps: { include: [] } },
+      build: { outDir: 'dist' },
+    },
+    ssr: {
+      resolve: { conditions: ['node', 'import'] },
+      consumer: 'server', 
+      optimizeDeps: { include: [] },
+      dev: { optimizeDeps: { include: [] } },
+      build: { outDir: 'dist' },
+    },
+  } : undefined;
+
   // Clean the object to remove non-serializable properties and process RegExp objects
-  return processForSerialization(cleanObject(handlerOptions, knownNonSerializableFunctions));
+  const cleaned = cleanObject(handlerOptions, knownNonSerializableFunctions) as any;
+  
+  // Add back the minimal environments if they existed
+  if (minimalEnvironments) {
+    cleaned.environments = minimalEnvironments;
+  }
+  
+  return processForSerialization(cleaned);
+}
+
+export function serializeResolvedUserConfig<T extends ResolvedUserConfig>(
+  config: T,
+  knownNonSerializableFunctions: Set<string> = VITE_NON_SERIALIZABLE_FUNCTIONS
+) {
+  const {
+    assetsInclude: _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
@@ -162,66 +233,116 @@ export const serializedDevServerConfig = <T extends ViteDevServer["config"]>(
   customNonSerializableFunctions: Set<string> = PLUGIN_NON_SERIALIZABLE_FUNCTIONS
 ) => {
   const {
-    getSortedPluginHooks,
-    getSortedPlugins,
-    assetsInclude,
-    build,
+    getSortedPluginHooks: _getSortedPluginHooks,
+    getSortedPlugins: _getSortedPlugins,
+    assetsInclude: _assetsInclude,
+    build: _build,
     ...handlerOptions
   } = config;
-  return processForSerialization(cleanObject(
-    handlerOptions,
-    customNonSerializableFunctions
-  ));
+  return processForSerialization(
+    cleanObject(handlerOptions, customNonSerializableFunctions)
+  );
 };
 
 // For your own options (if you need custom non-serializable functions)
-export const serializedOptions = <T extends PagePropOpt = PagePropOpt, InlineCSS extends InlineCssOpt = InlineCssOpt>(
-  userOptions: ResolvedUserOptions<T, InlineCSS>,
+export const serializedOptions = (
+  userOptions: ResolvedUserOptions,
   autoDiscoveredFiles: AutoDiscoveredFiles,
   customNonSerializableFunctions: Set<string> = PLUGIN_NON_SERIALIZABLE_FUNCTIONS
-) => {
+): SerializedUserOptions => {
   const {
-    Page,
-    props,
-    normalizer,
-    CssCollector,
-    Html,
-    onEvent,
-    onMetrics,
-    build,
-    autoDiscover,
+    Page: _Page,
+    props: _props,
+    normalizer: _normalizer,
+    Root: _Root,
+    Html: _Html,
+    onEvent: _onEvent,
+    onMetrics: _onMetrics,
+    build: _build,
+    loader: _loader,
+    autoDiscover: autoDiscover,
+    propsExportName: propsExportName,
+    pageExportName: pageExportName,
     ...handlerOptions
   } = userOptions;
-  const { entryFile, chunkFile, assetFile, pages, ...buildOptions } = build ?? {};
+  const {
+    entryFile: _entryFile,
+    chunkFile: _chunkFile,
+    assetFile: _assetFile,
+    pages: _pages,
+    ...buildOptions
+  } = _build ?? {};
+  const {
+    isServerFunctionCode: _isServerFunctionCode,
+    isClientComponentCode: _isClientComponentCode,
+    getDirectiveType: _getDirectiveType,
+    allowedDirectives: allowedDirectives,
+    ...loaderOptions
+  } = _loader ?? {};
+  const {
+    modulePattern: _modulePattern,
+    cssPattern: _cssPattern,
+    jsonPattern: _jsonPattern,
+    clientPattern: _clientPattern,
+    propsPattern: _propsPattern,
+    pagePattern: _pagePattern,
+    htmlPattern: _htmlPattern,
+    rscPattern: _rscPattern,
+    serverPattern: _serverPattern,
+    cssModulePattern: _cssModulePattern,
+    vendorPattern: _vendorPattern,
+    nodePattern: _nodePattern,
+    dotPattern: _dotPattern,
+    virtualPattern: _virtualPattern,
+    ...serializedAutoDiscover
+  } = autoDiscover;
   const result = {
     ...handlerOptions,
+    Page: typeof _Page === 'string' ? _Page : undefined,
+    Html: typeof _Html === 'string' ? _Html : undefined,
+    Root: typeof _Root === 'string' ? _Root : undefined,
+    normalizer: undefined,
+    onEvent: undefined,
+    onMetrics: undefined,
+    propsExportName: propsExportName,
+    pageExportName: pageExportName,
     build: {
       ...buildOptions,
       pages: autoDiscoveredFiles
         ? Array.from(autoDiscoveredFiles.urlMap.keys())
         : [],
     },
-  };
+    loader: {
+      directivePattern: {
+        config: {
+          validate: undefined,
+          ...allowedDirectives,
+        },
+      },
+      ...loaderOptions,
+    },
+    autoDiscover: {
+      modulePattern: serializeRegExp(_modulePattern),
+      serverPattern: serializeRegExp(_serverPattern),
+      clientPattern: serializeRegExp(_clientPattern),
+      pagePattern: serializeRegExp(_pagePattern),
+      propsPattern: serializeRegExp(_propsPattern),
+      cssPattern: serializeRegExp(_cssPattern),
+      jsonPattern: serializeRegExp(_jsonPattern),
+      htmlPattern: serializeRegExp(_htmlPattern),
+      cssModulePattern: serializeRegExp(_cssModulePattern),
+      vendorPattern: serializeRegExp(_vendorPattern),
+      nodePattern: serializeRegExp(_nodePattern),
+      dotPattern: serializeRegExp(_dotPattern),
+      virtualPattern: serializeRegExp(_virtualPattern),
+      rscPattern: serializeRegExp(_rscPattern),
+      ...serializedAutoDiscover,
+    },
+  } as const
 
   // Clean the object to remove non-serializable properties and process RegExp objects
-  return processForSerialization(cleanObject(
-    result,
-    customNonSerializableFunctions
-  ));
-};
-
-export function hydrateUserOptions(userOptions: any) {
-  if (!userOptions) return userOptions;
-  
-  // Restore RegExp objects
-  if (userOptions.autoDiscover) {
-    const { autoDiscover } = userOptions;
-    for (const key in autoDiscover) {
-      if (typeof autoDiscover[key] === 'string' && autoDiscover[key].startsWith('__REGEXP__')) {
-        autoDiscover[key] = deserializeRegExp(autoDiscover[key]);
-      }
-    }
-  }
-  
-  return userOptions;
-}
+  const finalResult = processForSerialization(
+    cleanObject(result, customNonSerializableFunctions)
+  );
+  return finalResult as never
+};

package/plugin/helpers/stashReturnValue.ts

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

package/plugin/helpers/tryManifest.ts

@@ -3,7 +3,7 @@ import { join, resolve } from "node:path";
 import type { Manifest } from "vite";
 import { readFile } from "node:fs/promises";
 
-type TryManifestOptions<SSR extends boolean = false> = {
+export type TryManifestOptions<SSR extends boolean = false> = {
   root: string;
   outDir: string;
   ssrManifest?: SSR;

package/plugin/loader/createDefaultLoader.ts

@@ -1,138 +1,138 @@
-import { readFileSync } from "fs";
-import * as esbuild from "esbuild";
 import type { LoaderContext } from "../types.js";
-import { transformModuleIfNeeded } from "./transformModuleIfNeeded.js";
-import { createMappingsSerializer } from "../source-map/createMappingsSerializer.js";
+import type { RawSourceMap } from "source-map";
+import type { LoadFnOutput, LoadHookContext } from "node:module";
+import type { LoadHook } from "node:module";
+import { transformWithEsbuild } from "vite";
+import { readFile } from "node:fs/promises";
 
-export interface LoaderResult {
+export type LoaderResult = {
   source: string;
-  map: any | null;
-}
+  map: RawSourceMap | null;
+};
+
+export type Loader = {
+  (
+    id: string,
+    context?: LoaderContext,
+    nextLoad?: (id: string) => Promise<LoaderResult>
+  ): LoaderResult;
+};
 
-export interface Loader {
-  (id: string, context?: LoaderContext, nextLoad?: any): LoaderResult;
-}
+
+const defaultNextLoad: Parameters<LoadHook>[2] = async (url) => {
+  const result = await transformWithEsbuild(await readFile(url, "utf-8"), url, {
+    loader: "tsx",
+    format: "esm",
+    sourcemap: "external",
+  });
+  return {
+    source: result.code,
+    format: "module",
+    map: result.map,
+  };
+};
 
 /**
- * Creates a default loader function that either uses provided source or reads from file
+ * Creates a loader function that transforms modules and handles source maps.
+ * This function can be used in two ways:
+ *
+ * 1. As a direct transformer:
+ *    - Takes source code and returns transformed code with source map attached
+ *    - Used by transformModuleIfNeeded
+ *
+ * 2. As a loader factory:
+ *    - Returns a loader function that takes a module ID and returns a LoaderResult
+ *    - Used by the plugin to create loaders for different environments
  */
-export function createDefaultLoader(source?: string): Loader {
-  if (typeof source === "string") {
-    return function load(id: string): LoaderResult {
-      // Use esbuild to transform the code
-      const result = esbuild.transformSync(source, {
-        loader: "tsx",
-        format: "esm",
-        target: "esnext",
-        sourcemap: true,
-        sourcefile: id,
-      });
+export function createDefaultLoader(
+  defaultSource: string,
+  defaultId = "index",
+  verbose = false
+): (
+  url: string,
+  context?: Partial<LoadHookContext>,
+  nextLoad?: (
+    url: string,
+    context?: Partial<LoadHookContext>
+  ) => LoadFnOutput | Promise<LoadFnOutput>
+) => Promise<LoadFnOutput> {
 
-      // Transform the code for RSC boundaries
-      const transformed = transformModuleIfNeeded(
-        result.code,
-        id,
-        null, // isServerFunction
-        null, // isClientComponent
-        true // isServerEnvironment
-      );
+  const defaultSourceNextLoad: Parameters<LoadHook>[2] =
+    typeof defaultSource === "string"
+      ? async (url = defaultId) => {
+          const result = await transformWithEsbuild(defaultSource, url, {
+            loader: "tsx",
+            format: "esm",
+            sourcemap: "external",
+          });
+          return {
+            source: result.code,
+            format: "module",
+            map: result.map,
+          };
+        }
+      : defaultNextLoad;
 
-      // Create a new source map with proper mappings
-      const map = result.map ? {
-        version: 3,
-        sources: [id],
-        sourcesContent: [transformed],
-        mappings: (() => {
-          const serializer = createMappingsSerializer();
-          let mappings = '';
-          
-          // Map each line of the transformed code to its corresponding line in the original source
-          const transformedLines = transformed.split('\n');
-          for (let i = 0; i < transformedLines.length; i++) {
-            if (i > 0) mappings += ';';
-            // For the import and registration lines, map to the first line of the original source
-            if (transformedLines[i].includes('import {') || transformedLines[i].includes('registerServerReference')) {
-              mappings += serializer(i + 1, 0, 0, 1, 0, 0);
-            } else {
-              // For the actual code, map to the corresponding line in the original source
-              const originalLine = Math.max(1, i - 1); // Adjust for the import line
-              mappings += serializer(i + 1, 0, 0, originalLine, 0, 0);
-            }
-          }
+  return async (
+    url = defaultId,
+    context = {
+      format: "module",
+      conditions: ["react-server"],
+      importAttributes: {},
+    },
+    nextLoad = defaultSourceNextLoad
+  ) => {
+    if (verbose) {
+      console.log("[createDefaultLoader] Loading:", url);
+      console.log("[createDefaultLoader] Context:", {
+        format: context.format,
+        conditions: context.conditions,
+      });
+    }
 
-          return mappings;
-        })()
-      } : null;
+    const { format } = context;
+    if (format === "module" || format === "module-typescript") {
+      if (verbose) {
+        console.log("[createDefaultLoader] Loading module:", url);
+      }
 
-      return {
-        source: transformed,
-        map
-      };
-    };
-  }
-  return function load(
-    id: string,
-    context?: LoaderContext,
-    nextLoad?: any
-  ): LoaderResult {
-    if (!nextLoad) {
-      nextLoad = (id: string) => {
-        const source = readFileSync(id, "utf-8");
-        // Use esbuild to transform the code
-        const result = esbuild.transformSync(source, {
-          loader: "tsx",
-          format: "esm",
-          target: "esnext",
-          sourcemap: true,
-          sourcefile: id,
+      const result = await nextLoad(url, context);
+      if (verbose) {
+        console.log("[createDefaultLoader] Next load result:", {
+          format: result.format,
+          shortCircuit: result.shortCircuit,
+          source: typeof result.source,
         });
+      }
 
-        // Transform the code for RSC boundaries
-        const transformed = transformModuleIfNeeded(
-          result.code,
-          id,
-          null, // isServerFunction
-          null, // isClientComponent
-          true // isServerEnvironment
-        );
+      const source =
+        typeof result.source === "string"
+          ? result.source
+          : result.source instanceof Uint8Array ||
+            result.source instanceof ArrayBuffer ||
+            result.source instanceof Uint8ClampedArray ||
+            result.source instanceof Uint16Array ||
+            result.source instanceof Uint32Array ||
+            result.source instanceof Int8Array ||
+            result.source instanceof Int16Array ||
+            result.source instanceof Int32Array ||
+            result.source instanceof Float32Array ||
+            result.source instanceof Float64Array ||
+            result.source instanceof BigUint64Array ||
+            result.source instanceof BigInt64Array
+          ? new TextDecoder().decode(result.source)
+          : defaultSource;
 
-        // Create a new source map with proper mappings
-        const map = result.map ? {
-          version: 3,
-          sources: [id],
-          sourcesContent: [transformed],
-          mappings: (() => {
-            const serializer = createMappingsSerializer();
-            let mappings = '';
-            
-            // Map each line of the transformed code to its corresponding line in the original source
-            const transformedLines = transformed.split('\n');
-            for (let i = 0; i < transformedLines.length; i++) {
-              if (i > 0) mappings += ';';
-              // For the import and registration lines, map to the first line of the original source
-              if (transformedLines[i].includes('import {') || transformedLines[i].includes('registerServerReference')) {
-                mappings += serializer(i + 1, 0, 0, 1, 0, 0);
-              } else {
-                // For the actual code, map to the corresponding line in the original source
-                const originalLine = Math.max(1, i - 1); // Adjust for the import line
-                mappings += serializer(i + 1, 0, 0, originalLine, 0, 0);
-              }
-            }
 
-            return mappings;
-          })()
-        } : null;
-
-        return {
-          source: transformed,
-          map
-        };
+      return {
+        ...result,
+        source: source,
       };
     }
-    const result = nextLoad(id, context);
-    return {
-      ...result,
-      map: "map" in result ? result.map : null,
-    };
+
+    if (verbose) {
+      console.log("[createDefaultLoader] Skipping non-module format:", format);
+    }
+    return nextLoad(url, context);
   };
 }