Client APIs

/**
 * Creates RSC response from a fetch promise
 * @param promiseForResponse - Promise resolving to server response
 * @param options - Optional configuration for client behavior
 * @returns Thenable resolving to the server component
 */
function createFromFetch<T>(
  promiseForResponse: Promise<Response>,
  options?: ClientOptions
): Thenable<T>;

import { createFromFetch } from "react-server-dom-webpack/client.browser";

const ServerComponent = createFromFetch(
  fetch("/api/server-component", {
    headers: { "Accept": "text/x-component" }
  }),
  {
    callServer: async (id, args) => {
      const response = await fetch("/api/server-action", {
        method: "POST",
        body: JSON.stringify({ id, args })
      });
      return response.json();
    }
  }
);

/**
 * Creates RSC response from a readable stream
 * @param stream - ReadableStream containing server component data
 * @param options - Optional configuration for client behavior
 * @returns Thenable resolving to the server component
 */
function createFromReadableStream<T>(
  stream: ReadableStream,
  options?: ClientOptions
): Thenable<T>;

import { createFromReadableStream } from "react-server-dom-webpack/client.browser";

// Custom stream from WebSocket or other source
const customStream = new ReadableStream({
  start(controller) {
    // Stream server component data
    controller.enqueue(serverComponentChunk);
  }
});

const ServerComponent = createFromReadableStream(customStream, {
  environmentName: "development",
  replayConsoleLogs: true
});

/**
 * Creates RSC response from a Node.js readable stream
 * @param stream - Node.js Readable stream containing server component data
 * @param serverConsumerManifest - Manifest for module resolution
 * @param options - Optional configuration for Node.js client
 * @returns Thenable resolving to the server component
 */
function createFromNodeStream<T>(
  stream: Readable,
  serverConsumerManifest: ServerConsumerManifest,
  options?: NodeClientOptions
): Thenable<T>;

import { createFromNodeStream } from "react-server-dom-webpack/client.node";
import { createReadStream } from "fs";

// Load manifest for module resolution
const manifest = JSON.parse(fs.readFileSync("./react-ssr-manifest.json"));

const ServerComponent = createFromNodeStream(
  serverStream,
  manifest,
  {
    nonce: "security-nonce-123",
    encodeFormAction: (id, args) => ({ action: `/api/form/${id}` })
  }
);

/**
 * Encodes client data for server transmission
 * @param value - Value to encode for server communication
 * @param options - Optional encoding configuration
 * @returns Promise resolving to encoded data (string, URLSearchParams, or FormData)
 */
function encodeReply(
  value: ReactServerValue,
  options?: EncodeReplyOptions
): Promise<string | URLSearchParams | FormData>;

import { encodeReply } from "react-server-dom-webpack/client.browser";

// Encode complex data for server action
const formData = await encodeReply({
  action: "updateUser",
  data: { name: "John", email: "john@example.com" },
  files: [file1, file2]
}, {
  signal: abortController.signal
});

// Send to server
await fetch("/api/server-action", {
  method: "POST",
  body: formData
});

/**
 * Creates a reference to a server function
 * @param id - Unique identifier for the server function
 * @param callServer - Function to handle server communication
 * @returns Function that calls the server when invoked
 */
function createServerReference<A extends Iterable<any>, T>(
  id: any,
  callServer: CallServerCallback
): (...args: A) => Promise<T>;

/**
 * Registers a server function reference
 * @param reference - Function reference to register
 * @param id - Unique identifier for the server function
 * @param exportName - Export name of the function
 * @returns Registered reference
 */
function registerServerReference(
  reference: Function,
  id: string,
  exportName: string | null
): Function;

import { createServerReference } from "react-server-dom-webpack/client.browser";

// Create reference to server function
const serverAction = createServerReference(
  "user-actions#updateProfile",
  async (id, args) => {
    const response = await fetch(`/api/actions/${id}`, {
      method: "POST",
      body: JSON.stringify(args)
    });
    return response.json();
  }
);

// Use in component
async function handleSubmit(formData) {
  const result = await serverAction(formData);
  console.log("Server response:", result);
}

/**
 * Creates a set for tracking temporary references
 * @returns TemporaryReferenceSet for reference tracking
 */
function createTemporaryReferenceSet(): TemporaryReferenceSet;

import { createTemporaryReferenceSet, encodeReply } from "react-server-dom-webpack/client.browser";

// Create reference set for complex object serialization
const tempRefs = createTemporaryReferenceSet();

const encodedData = await encodeReply(complexObject, {
  temporaryReferences: tempRefs
});

interface ClientOptions {
  /** Function to handle server communication */
  callServer?: CallServerCallback;
  /** Set for tracking temporary object references */
  temporaryReferences?: TemporaryReferenceSet;
  /** Function to resolve source map URLs for debugging */
  findSourceMapURL?: FindSourceMapURLCallback;
  /** Whether to replay console logs from server */
  replayConsoleLogs?: boolean;
  /** Environment name for debugging */
  environmentName?: string;
}

interface NodeClientOptions {
  /** Nonce for security purposes */
  nonce?: string;
  /** Function to encode form actions */
  encodeFormAction?: EncodeFormActionCallback;
  /** Function to resolve source map URLs */
  findSourceMapURL?: FindSourceMapURLCallback;
  /** Whether to replay console logs from server */
  replayConsoleLogs?: boolean;
  /** Environment name for debugging */
  environmentName?: string;
}

interface EncodeReplyOptions {
  /** Set for tracking temporary references */
  temporaryReferences?: TemporaryReferenceSet;
  /** AbortSignal for cancelling encoding */
  signal?: AbortSignal;
}

interface ServerConsumerManifest {
  /** Mapping of modules for client consumption */
  moduleMap: ServerConsumerModuleMap;
  /** Module loading configuration */
  moduleLoading: ModuleLoading;
  /** Server-side module manifest */
  serverModuleMap: null | ServerManifest;
}

type CallServerCallback = <A, T>(id: string, args: A) => Promise<T>;
type EncodeFormActionCallback = (id: any, args: Promise<any>) => ReactCustomFormAction;
type FindSourceMapURLCallback = (fileName: string, sourceMapURL: string) => string;

type ReactServerValue = any;
type TemporaryReferenceSet = any;
type Thenable<T> = Promise<T> | { then(resolve: (value: T) => void, reject: (error: any) => void): void };