vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/transformer/plugin.server.ts

@@ -1,9 +1,17 @@
 import { resolveOptions } from "../config/resolveOptions.js";
-import type { ResolvedUserOptions, StreamPluginOptions } from "../types.js";
+import type {
+  InlineCssOpt,
+  PagePropOpt,
+  ResolvedUserOptions,
+  StreamPluginOptions,
+} from "../types.js";
 import type { Manifest, Plugin } from "vite";
-import { transformModuleIfNeeded } from "../loader/react-loader.js";
 import { tryManifest } from "../helpers/tryManifest.js";
 import { join } from "node:path";
+import { setStashedResolve } from "../helpers/moduleResolver.js";
+import { transformModuleIfNeeded } from "../loader/transformModuleIfNeeded.js";
+import { logError } from "../error/toError.js";
+
 /**
  * Plugin for transforming React Client Components.
  *
@@ -29,9 +37,13 @@ import { join } from "node:path";
  * ```
  */
 let isBuild = true;
+let isSSR = false;
 
-export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
-  let userOptions: ResolvedUserOptions;
+export function reactTransformPlugin<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(options: StreamPluginOptions<T, InlineCSS>): Plugin {
+  let userOptions: ResolvedUserOptions<T, InlineCSS>;
   const resolvedOptionsResult = resolveOptions(options);
   if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
   userOptions = resolvedOptionsResult.userOptions;
@@ -40,10 +52,11 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
 
   return {
     name: "vite:react-server-transform",
-    enforce: "pre", // Run before Vite's transforms
-    async config(_config, configEnv) {
-      isBuild = configEnv.command !== "serve";
-      if (isBuild) {
+    enforce: "post", // Run after Vite's transforms
+    async configResolved(config) {
+      isBuild = config.command === "build";
+      isSSR = config.build?.ssr === true;
+      if (isBuild && isSSR) {
         const staticManifestResult = await tryManifest({
           root: userOptions.projectRoot,
           ssrManifest: false,
@@ -55,17 +68,44 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
         staticManifest = staticManifestResult.manifest;
       }
     },
+    async resolveId(
+      _id: string,
+      importer: string | undefined,
+      options: {
+        attributes: Record<string, string>;
+        custom?: any;
+        ssr?: boolean;
+        isEntry: boolean;
+      }
+    ) {
+      if (!options?.ssr) {
+        return null;
+      }
+      // Set stashedResolve before any transform operations
+      setStashedResolve(async (specifier: string) => {
+        try {
+          const resolved = await this.resolve(specifier, importer, {
+            custom: { conditions: ["react-server"] },
+          });
+          if (!resolved) return null;
+          return { id: resolved.id };
+        } catch (error) {
+          logError(error, this.environment.logger);
+          return null;
+        }
+      });
+      return null; // Let Vite handle the resolution
+    },
     async transform(code, id, options) {
-      const ssr = options?.ssr;
-      if (!ssr) return null;
-      if (!userOptions.autoDiscover.modulePattern(id)) return null;
-      if (!code.match('"use client"')) return null;
-
+      if (!options?.ssr || !userOptions.autoDiscover.modulePattern(id)) {
+        return null;
+      }
       const [key, value] = userOptions.normalizer(id);
+      let moduleID = value;
       if (isBuild) {
         if (staticManifest) {
           if (value in staticManifest) {
-            id = userOptions.moduleID(staticManifest[value].file);
+            moduleID = staticManifest[value].file;
           } else {
             const hash = this.emitFile({
               id,
@@ -73,27 +113,56 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
               fileName: key + ".js",
               name: value,
             });
-            // get fileName from hash
-
             const fileName = this.getFileName(hash);
-            id = userOptions.moduleID(fileName);
+            moduleID = fileName;
           }
         } else {
-          throw new Error(`Client manifest not found.`);
+          throw new Error(`Static manifest not found during dev build.`);
         }
       } else {
-        id = join(userOptions.moduleBasePath, value);
+        // For non-SSR builds, just use the normalized path
+        moduleID = join(userOptions.moduleBasePath, value);
       }
-      const transformed = await transformModuleIfNeeded(
+      let finalID = userOptions.moduleID(moduleID);
+      // Always transform in server context
+      const transformed = transformModuleIfNeeded(
         code,
-        id,
-        // Pass null for nextLoad since we don't need module loading in the plugin
-        null
+        finalID,
+        userOptions.autoDiscover.isServerFunction(code),
+        userOptions.autoDiscover.isClientComponent(code),
+        true
       );
-      if (!transformed) return null;
+      if (userOptions.verbose)
+        if (transformed !== code) {
+          if (id !== finalID) {
+            this.environment.logger.info(
+              "[react-server-transform] " +
+                id.split("/").pop() +
+                " -> " +
+                finalID
+            );
+          } else {
+            this.environment.logger.info(
+              "[react-server-transform] " +
+                id.split("/").pop() +
+                (code.startsWith('"use client"') ? " (client)" : "")
+            );
+          }
+          this.environment.logger.info(
+            "[react-server-transform] " + transformed
+          );
+        }
+      if (!transformed) {
+        return {
+          id: finalID,
+          code: "",
+          map: null,
+        };
+      }
+
       return {
+        id: finalID,
         code: transformed,
-        id: id,
         map: null,
       };
     },

package/plugin/types/react-server-dom-esm.d.ts

@@ -1,17 +1,135 @@
+declare module 'react-server-dom-esm/client' {
+  export interface Options {
+    callServer?: (id: string, args: any[]) => Promise<any>;
+    moduleBaseURL?: string;
+    temporaryReferences?: Map<any, any>;
+    signal?: AbortSignal;
+  }
+
+  export function createFromFetch(
+    promiseForResponse: Promise<Response>,
+    options?: Options
+  ): Promise<any>;
+
+  export function createFromReadableStream(
+    stream: ReadableStream,
+    options?: Options
+  ): Promise<any>;
+
+  export function createServerReference(
+    id: string,
+    callServer?: (id: string, args: any[]) => Promise<any>
+  ): (...args: any[]) => Promise<any>;
+
+  export function createTemporaryReferenceSet(): Map<any, any>;
+
+  export function encodeReply(
+    value: unknown,
+    options?: {
+      signal?: AbortSignal;
+      temporaryReferences?: Map<unknown, unknown>;
+    }
+  ): Promise<FormData>;
+
+  export function registerServerReference(
+    reference: (...args: any[]) => Promise<any>,
+    id: string
+  ): void;
+}
+
+declare module 'react-server-dom-esm/server' {
+  export interface Options {
+    callServer?: (id: string, args: any[]) => Promise<any>;
+    moduleBasePath?: string;
+  }
+
+  export function createTemporaryReferenceSet(): {
+    add: (value: any) => void;
+    has: (value: any) => boolean;
+  };
+
+  export function decodeAction(
+    body: Uint8Array | string,
+    serverManifest: any
+  ): Promise<any>;
+
+  export function decodeFormState(
+    actionResult: any,
+    body: Uint8Array | string,
+    serverManifest: any
+  ): Promise<any>;
+
+  export function decodeReply(
+    body: Uint8Array | string,
+    moduleBasePath: string,
+    options?: Options
+  ): Promise<any>;
+
+  export function decodeReplyFromBusboy(
+    busboy: any,
+    moduleBasePath: string,
+    options?: Options
+  ): Promise<any>;
+
+  export function registerClientReference(
+    reference: any,
+    id: string,
+    exportName?: string
+  ): void;
+
+  export function registerServerReference(
+    reference: any,
+    id: string,
+    exportName?: string
+  ): void;
+
+  export function renderToPipeableStream(
+    model: React.ReactNode,
+    moduleBasePath: string,
+    options?: Options
+  ): {
+    pipe: (writable: NodeJS.WritableStream) => void;
+    abort: () => void;
+  };
+
+  export function unstable_prerenderToNodeStream(
+    model: React.ReactNode,
+    moduleBasePath: string,
+    options?: Options
+  ): NodeJS.ReadableStream;
+}
+
+declare module 'react-server-dom-esm/client.browser' {
+  export function createFromFetch(
+    promiseForResponse: Promise<Response>,
+    options?: {
+      callServer?: (id: string, args: any[]) => Promise<any>;
+      moduleBaseURL?: string;
+    }
+  ): Promise<React.ReactNode>;
+
+  export function createFromReadableStream(
+    stream: ReadableStream,
+    options?: {
+      callServer?: (id: string, args: any[]) => Promise<any>;
+      moduleBaseURL?: string;
+    }
+  ): Promise<React.ReactNode>;
+
+  export function encodeReply(
+    value: unknown,
+    options?: {
+      signal?: AbortSignal;
+      temporaryReferences?: Map<unknown, unknown>;
+    }
+  ): Promise<FormData>;
+}
+
 declare module 'react-server-dom-esm/server.node' {
-  import { ReactElement, type Usable } from 'react';
-  import { Writable } from 'stream';
+  import { ReactElement } from 'react';
 
-  export function createTemporaryReferenceSet(): WeakMap<any, any>;
+  export function createTemporaryReferenceSet(): Set;
 
-  /* example
-         options ? options.onError : void 0,
-+          options ? options.identifierPrefix : void 0,
-+          options ? options.onPostpone : void 0,
-+          options ? options.temporaryReferences : void 0,
-+          options ? options.environmentName : void 0,
-+          options ? options.filterStackFrame : void 0,
-*/
   export interface ReactServerDomEsmRenderToPipeableStreamOptions {
     onError?: (error: Error, errorInfo: any) => void;
     identifierPrefix?: string;
@@ -22,25 +140,53 @@ declare module 'react-server-dom-esm/server.node' {
     importMap?: {
       imports?: Record<string, string>;
     };
+    callServer?: (id: string, args: any[]) => Promise<any>;
+    callClient?: (id: string, args: any[]) => Promise<any>;
   }
+
   export function renderToPipeableStream(
     element: ReactElement,
     moduleBasePath: string,
     options?: ReactServerDomEsmRenderToPipeableStreamOptions
-  ): PipeableStream;
-  export function decodeReplyFromBusboy(busboyStream: any): Promise<unknown>;
-  export function decodeReply(reply: string): Promise<unknown>;
-  export function decodeAction(action: string): Promise<unknown>;
-  export function decodeFormState(formState: string): Promise<unknown>;
-  export function registerServerReference(proxy: any, id: string): void;
-  export function registerClientReference(proxy: any, id: string): void;
+  ): {
+    pipe: (writable: NodeJS.WritableStream) => void;
+    abort: () => void;
+  };
 
+  export function decodeReply(
+    body: Uint8Array | string,
+    moduleBasePath: string,
+  ): Promise<any>;
 
-  export interface PipeableStream {
-    pipe: <Writable extends NodeJS.WritableStream>(destination: Writable) => Writable;
-    abort: () => void;
-  }
-} 
+  export function decodeAction(
+    body: Uint8Array | string,
+    serverManifest: any
+  ): Promise<any>;
+
+  export function decodeFormState(
+    actionResult: any,
+    body: Uint8Array | string,
+    serverManifest: any
+  ): Promise<any>;
+
+  export function decodeReplyFromBusboy(
+    busboy: any,
+    moduleBasePath: string,
+    options?: {
+      callServer?: (id: string, args: any[]) => Promise<any>;
+      callClient?: (id: string, args: any[]) => Promise<any>;
+    }
+  ): Promise<any>;
+
+  export function unstable_prerenderToNodeStream(
+    model: React.ReactNode,
+    moduleBasePath: string,
+    options?: {
+      callServer?: (id: string, args: any[]) => Promise<any>;
+      callClient?: (id: string, args: any[]) => Promise<any>;
+    }
+  ): NodeJS.ReadableStream;
+}
 
 declare module 'react-server-dom-esm/client.node' {
   import { ReactElement } from 'react';
@@ -49,6 +195,19 @@ declare module 'react-server-dom-esm/client.node' {
   export interface CreateFromNodeStreamOptions {
     nonce?: string;
     encodeFormAction?: (id: string, boundPromise: Promise<unknown>) => string;
+    callServer?: (id: string, args: unknown[]) => Promise<unknown>;
   }
-  export function createFromNodeStream(stream: NodeJS.ReadableStream, moduleRootPath: string, moduleBaseURL: string, options?: CreateFromNodeStreamOptions): Usable;
+  export function createFromNodeStream(
+    stream: NodeJS.ReadableStream,
+    options?: {
+      moduleMap?: Record<string, any>;
+      moduleLoading?: {
+        loadModule: (id: string) => Promise<any>;
+      };
+    }
+  ): Promise<any>;
+}
+
+declare module 'react-server-dom-esm/client' {
+  // No exports
 }

package/plugin/types/sourceMap.d.ts

@@ -0,0 +1,2 @@
+import type { SourceMapInput } from "vite";
+export type SourceMap = NonNullable<SourceMapInput>; 

package/plugin/types/webpack-sources.d.ts

@@ -0,0 +1,24 @@
+declare module 'webpack-sources/lib/helpers/readMappings.js' {
+  export default function readMappings(
+    mappings: string,
+    callback: (
+      generatedLine: number,
+      generatedColumn: number,
+      sourceIndex: number,
+      originalLine: number,
+      originalColumn: number,
+      nameIndex: number
+    ) => void
+  ): void;
+}
+
+declare module 'webpack-sources/lib/helpers/createMappingsSerializer.js' {
+  export default function createMappingsSerializer(): (
+    generatedLine: number,
+    generatedColumn: number,
+    sourceIndex: number,
+    originalLine: number,
+    originalColumn: number,
+    nameIndex: number
+  ) => string;
+}