@tanstack/react-start-rsc 0.0.0

package/dist/esm/src/ServerComponentTypes.d.ts

@@ -0,0 +1,99 @@
+import { Constrain, LooseAsyncReturnType, LooseReturnType, ValidateSerializable } from '@tanstack/router-core';
+import { ComponentProps, ComponentType } from 'react';
+export interface ServerComponentStream {
+    createReplayStream: () => ReadableStream<Uint8Array>;
+}
+export declare const SERVER_COMPONENT_STREAM: unique symbol;
+export declare const SERVER_COMPONENT_CSS_HREFS: unique symbol;
+export declare const SERVER_COMPONENT_JS_PRELOADS: unique symbol;
+export declare const RSC_PROXY_PATH: unique symbol;
+export declare const RSC_PROXY_GET_TREE: unique symbol;
+export declare const RENDERABLE_RSC: unique symbol;
+export declare const RSC_SLOT_USAGES: unique symbol;
+export declare const RSC_SLOT_USAGES_STREAM: unique symbol;
+export type RscSlotUsageEvent = {
+    slot: string;
+    args?: Array<any>;
+};
+/**
+ * Type guard to check if a value is a ServerComponent (Proxy with attached stream).
+ * The value can be either an object (proxy target) or a function (stub for server functions).
+ */
+export declare function isServerComponent(value: unknown): value is AnyCompositeComponent;
+/**
+ * Type guard to check if a value is a RenderableRsc (renderable proxy from renderServerComponent).
+ * The value can be either an object (proxy target) or a function (stub for server functions).
+ */
+export declare function isRenderableRsc(value: unknown): boolean;
+export type ValidateCompositeComponent<TComp> = Constrain<TComp, (props: ValidateCompositeComponentProps<TComp>) => ValidateCompositeComponentReturnType<TComp>>;
+export type ValidateCompositeComponentProps<TComp> = unknown extends TComp ? TComp : ValidateCompositeComponentPropsObject<CompositeComponentProps<TComp>>;
+export type ValidateCompositeComponentPropsObject<TProps> = unknown extends TProps ? TProps : {
+    [TKey in keyof TProps]: ValidateCompositeComponentProp<TProps[TKey]>;
+};
+export type CompositeComponentProps<TComp> = TComp extends (props: infer TProps) => any ? TProps : unknown;
+export type ValidateCompositeComponentProp<TProp> = TProp extends (...args: Array<any>) => any ? (...args: ValidateReactSerializable<Parameters<TProp>>) => React.ReactNode : TProp extends ComponentType<any> ? ComponentType<ValidateReactSerializable<ComponentProps<TProp>>> : TProp extends React.ReactNode ? TProp : React.ReactNode;
+export type ValidateReactSerializable<T> = ValidateSerializable<T, ReactSerializable>;
+export type ReactSerializable = number | string | bigint | boolean | null | undefined | React.ReactNode;
+export type ValidateCompositeComponentReturnType<TComp> = unknown extends TComp ? React.ReactNode : ValidateCompositeComponentResult<LooseReturnType<TComp>>;
+export type ValidateCompositeComponentResult<TNode> = ValidateServerComponentResult<TNode>;
+export type ValidateServerComponentResult<TNode> = TNode extends Promise<any> ? ValidateCompositeComponentPromiseResult<TNode> : TNode extends React.ReactNode ? TNode : TNode extends (...args: Array<any>) => any ? React.ReactNode : TNode extends object ? ValidateCompositeComponentObjectResult<TNode> : React.ReactNode;
+export type ValidateCompositeComponentPromiseResult<TPromise> = TPromise extends Promise<infer T> ? Promise<ValidateCompositeComponentResult<T>> : never;
+export type ValidateCompositeComponentObjectResult<TObject> = {
+    [TKey in keyof TObject]: ValidateCompositeComponentResult<TObject[TKey]>;
+};
+export type CompositeComponentResult<TComp> = CompositeComponentBuilder<TComp, LooseAsyncReturnType<TComp>>;
+export type CompositeComponentBuilder<TComp, TReturn> = TReturn extends React.ReactNode ? CompositeComponent<TComp, TReturn> : {
+    [TKey in keyof TReturn]: CompositeComponentBuilder<TComp, TReturn[TKey]>;
+};
+export interface CompositeComponent<in out TComp, in out TReturn> {
+    '~types': {
+        props: CompositeComponentProps<TComp>;
+        return: TReturn;
+    };
+    [SERVER_COMPONENT_STREAM]?: ServerComponentStream;
+    /**
+     * Root decoded tree getter.
+     */
+    [RSC_PROXY_GET_TREE]?: () => unknown;
+    /**
+     * Nested selection path (eg ['content','Stats']).
+     * Used by <CompositeComponent/> to render a sub-tree.
+     */
+    [RSC_PROXY_PATH]?: Array<string>;
+    /**
+     * CSS hrefs collected from the RSC stream.
+     * Can be used for preloading in <head> or emitting 103 Early Hints.
+     */
+    [SERVER_COMPONENT_CSS_HREFS]?: ReadonlySet<string>;
+    /**
+     * JS hrefs collected from the RSC stream.
+     * Emitted as modulepreload links only if the decoded tree is rendered in SSR.
+     */
+    [SERVER_COMPONENT_JS_PRELOADS]?: ReadonlySet<string>;
+    /**
+     * Dev-only: async stream of slot usage preview events.
+     * Used by devtools to show slot names and previewed call args without
+     * buffering/draining the Flight stream.
+     */
+    [RSC_SLOT_USAGES_STREAM]?: ReadableStream<RscSlotUsageEvent>;
+}
+export type ValidateRenderableServerComponent<TNode> = ValidateServerComponentResult<TNode>;
+export type RenderableServerComponentBuilder<T> = T extends React.ReactNode ? RenderableServerComponent<T> : {
+    [TKey in keyof T]: RenderableServerComponentBuilder<T[TKey]>;
+};
+export type RenderableServerComponent<TNode extends React.ReactNode> = TNode & RenderableServerComponentAttributes<TNode>;
+export interface RenderableServerComponentAttributes<TNode> {
+    '~types': {
+        node: TNode;
+    };
+    [SERVER_COMPONENT_STREAM]: ServerComponentStream;
+    [RENDERABLE_RSC]: true;
+}
+declare module '@tanstack/router-core' {
+    interface SerializableExtensions {
+        CompositeComponent: AnyCompositeComponent;
+        RenderableServerComponent: AnyRenderableServerComponent;
+    }
+}
+export type AnyCompositeComponent = CompositeComponent<any, any>;
+export type AnyRenderableServerComponent = RenderableServerComponentAttributes<any>;

package/dist/esm/src/SlotContext.d.ts

@@ -0,0 +1,21 @@
+import { SlotImplementations } from './types.js';
+export interface SlotContextValue {
+    implementations: SlotImplementations;
+    strict: boolean;
+}
+/**
+ * Hook to access slot implementations from within ClientSlot.
+ */
+export declare function useSlotContext(): SlotContextValue | null;
+export interface SlotProviderProps {
+    implementations: SlotImplementations;
+    strict?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * SlotProvider - makes slot implementations available to ClientSlot components.
+ *
+ * Must wrap the decoded RSC content so that ClientSlot components can
+ * access their slot implementations via React Context.
+ */
+export declare function SlotProvider({ implementations, strict, children, }: SlotProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/awaitLazyElements.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Optional callback for collecting CSS hrefs during tree traversal.
+ * Only called server-side when processing <link rel="stylesheet" data-rsc-css-href>
+ */
+export type CssHrefCollector = (href: string) => void;
+/**
+ * Wait for all lazy elements in a tree to be resolved.
+ * This ensures client component chunks are fully loaded before rendering,
+ * preventing Suspense boundaries from flashing during SWR navigation.
+ *
+ * Also collects CSS hrefs from <link rel="stylesheet" data-rsc-css-href>
+ * elements for preloading in <head>.
+ *
+ * @param tree - The tree to process
+ * @param cssCollector - Optional callback to collect CSS hrefs (server-only)
+ */
+export declare function awaitLazyElements(tree: unknown, cssCollector?: CssHrefCollector): Promise<void>;

package/dist/esm/src/createCompositeComponent.d.ts

@@ -0,0 +1,32 @@
+import { CompositeComponentResult, ValidateCompositeComponent } from './ServerComponentTypes.js';
+/**
+ * Creates a composite server component with slot support.
+ *
+ * Supports returning:
+ * - A ReactNode directly
+ * - An object structure with ReactNodes: accessed as `src.Foo`
+ * - Nested structures: accessed as `src.x.Bar`
+ *
+ * Props that are functions become slots - they render as ClientSlot placeholders
+ * in the RSC output, filled in by the consumer with actual implementations.
+ *
+ * The returned value is NOT directly renderable. Use `<CompositeComponent src={...} />`.
+ *
+ * @example
+ * ```tsx
+ * const src = await createCompositeComponent((props) => (
+ *   <div>
+ *     <header>{props.header('Dashboard')}</header>
+ *     <main>{props.children}</main>
+ *   </div>
+ * ))
+ *
+ * // In route component
+ * return (
+ *   <CompositeComponent src={src} header={(title) => <h1>{title}</h1>}>
+ *     <p>Main content</p>
+ *   </CompositeComponent>
+ * )
+ * ```
+ */
+export declare function createCompositeComponent<TComp>(component: ValidateCompositeComponent<TComp>): Promise<CompositeComponentResult<TComp>>;

package/dist/esm/src/createCompositeComponent.stub.d.ts

@@ -0,0 +1,9 @@
+import { CompositeComponentResult, ValidateCompositeComponent } from './ServerComponentTypes.js';
+/**
+ * Client stub for createCompositeComponent.
+ *
+ * This function should never be called at runtime on the client.
+ * It exists only to satisfy bundler imports in client bundles.
+ * The real implementation only runs inside server functions.
+ */
+export declare function createCompositeComponent<TComp>(_component: ValidateCompositeComponent<TComp>): Promise<CompositeComponentResult<TComp>>;

package/dist/esm/src/createRscProxy.d.ts

@@ -0,0 +1,18 @@
+import { RscSlotUsageEvent } from './ServerComponentTypes.js';
+export interface RscProxyOptions {
+    stream?: unknown;
+    cssHrefs?: ReadonlySet<string>;
+    jsPreloads?: ReadonlySet<string>;
+    renderable?: boolean;
+    slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+}
+/**
+ * Creates a recursive Proxy for RSC data.
+ *
+ * If `renderable: true`, returns a React element that can be rendered as `{data}`.
+ * The element also has proxy-like behavior for nested access like `data.foo.bar`.
+ *
+ * If `renderable: false` (default), the proxy is NOT directly renderable and
+ * must be used with `<CompositeComponent src={...} />`.
+ */
+export declare function createRscProxy<T>(getTree: () => T, options?: RscProxyOptions): any;

package/dist/esm/src/createServerComponentFromStream.d.ts

@@ -0,0 +1,24 @@
+import { AnyCompositeComponent, RscSlotUsageEvent } from './ServerComponentTypes.js';
+/**
+ * Creates a renderable RSC proxy from a raw Flight stream.
+ * Client-side only - used by the client serialization adapter for `renderServerComponent`.
+ *
+ * Returns a Proxy that:
+ * - Can be rendered directly as `{data}` in JSX
+ * - Supports nested access: `{data.foo.bar}`
+ * - Masquerades as a React element
+ */
+export declare function createRenderableFromStream(stream: ReadableStream<Uint8Array>): any;
+/**
+ * Creates a composite RSC proxy from a raw Flight stream.
+ * Client-side only - used by the client serialization adapter for `createCompositeComponent`.
+ *
+ * Returns a Proxy that:
+ * - NOT directly renderable
+ * - Supports nested access: `src.foo.bar`
+ * - Must be rendered via `<CompositeComponent src={...} />`
+ */
+export declare function createCompositeFromStream(stream: ReadableStream<Uint8Array>, options?: {
+    slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+}): AnyCompositeComponent;
+export declare const createServerComponentFromStream: typeof createCompositeFromStream;

package/dist/esm/src/entry/rsc.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export { getServerFnById } from '#tanstack-start-server-fn-resolver';
+/**
+ * Renders a React node to an RSC Flight stream.
+ * Used internally for streaming server component output.
+ */
+export declare function render(node: React.ReactNode): ReadableStream<Uint8Array>;

package/dist/esm/src/flight.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Low-level Flight stream APIs for decoding RSC streams.
+ *
+ * These functions provide direct access to RSC Flight stream decoding,
+ * allowing advanced use cases like:
+ * - Server functions returning raw Flight Response
+ * - API routes streaming Flight payloads
+ * - Custom Flight stream handling via RawStream
+ *
+ * `createFromReadableStream` works in both SSR and browser contexts.
+ * `createFromFetch` is browser-only.
+ *
+ * NOTE: Dynamic imports keep decode initialisation runtime-specific. The
+ * concrete implementation comes from bundler-owned virtual modules.
+ */
+/**
+ * Decode a Flight stream into React elements.
+ * Works in both SSR and browser contexts.
+ *
+ * @example
+ * ```tsx
+ * const rawStream = await getRscRawStream()
+ * const tree = await createFromReadableStream(rawStream)
+ * return <>{tree}</>
+ * ```
+ */
+export declare const createFromReadableStream: import('@tanstack/start-fn-stubs').IsomorphicFn<[stream: ReadableStream<Uint8Array<ArrayBufferLike>>], Promise<import('react').ReactNode>, Promise<import('react').ReactNode>>;
+/**
+ * Decode a Flight stream from a fetch Response.
+ * Browser only - will throw if called on the server.
+ *
+ * @example
+ * ```tsx
+ * // From server function returning raw Response
+ * const tree = await createFromFetch(getFlightResponse())
+ *
+ * // From API route
+ * const tree = await createFromFetch(fetch('/api/rsc-flight'))
+ * ```
+ */
+export declare const createFromFetch: (fetchPromise: Promise<Response>) => Promise<React.ReactNode>;

package/dist/esm/src/flight.rsc.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Low-level Flight stream API for RSC (React Server Components) environment.
+ *
+ * This exports renderToReadableStream which generates a Flight stream from
+ * React elements. Only available in RSC context (react-server condition).
+ *
+ * @example
+ * ```tsx
+ * import { renderToReadableStream } from '@tanstack/react-start/rsc'
+ *
+ * const stream = renderToReadableStream(<MyServerComponent />)
+ * return new Response(stream, {
+ *   headers: { 'Content-Type': 'text/x-component' }
+ * })
+ * ```
+ */
+export { renderToReadableStream } from 'virtual:tanstack-rsc-runtime';

package/dist/esm/src/flight.stub.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Client stub for renderToReadableStream.
+ *
+ * This function should never be called at runtime on the client.
+ * It exists only to provide types for bundler imports in client bundles.
+ * The real implementation only runs inside RSC context (server functions).
+ */
+export declare function renderToReadableStream(_node: React.ReactNode): ReadableStream<Uint8Array>;

package/dist/esm/src/index.d.ts

@@ -0,0 +1,7 @@
+export type { AnyCompositeComponent } from './ServerComponentTypes.js';
+export { SERVER_COMPONENT_CSS_HREFS } from './ServerComponentTypes.js';
+export { renderServerComponent } from './renderServerComponent.stub.js';
+export { createCompositeComponent } from './createCompositeComponent.stub.js';
+export { CompositeComponent } from './CompositeComponent.js';
+export { createFromReadableStream, createFromFetch } from './flight.js';
+export { renderToReadableStream } from './flight.stub.js';

package/dist/esm/src/index.rsc.d.ts

@@ -0,0 +1,6 @@
+export type { AnyCompositeComponent } from './ServerComponentTypes.js';
+export { renderServerComponent } from './renderServerComponent.js';
+export { createCompositeComponent } from './createCompositeComponent.js';
+export { CompositeComponent } from './CompositeComponent.js';
+export { renderToReadableStream } from './flight.rsc.js';
+export { createFromReadableStream, createFromFetch } from './flight.js';

package/dist/esm/src/plugin/vite.d.ts

@@ -0,0 +1,9 @@
+import { TanStackStartVitePluginCoreOptions } from '@tanstack/start-plugin-core/vite/types';
+import { PluginOption } from 'vite';
+export declare function configureRsc(): {
+    envName: string;
+    providerEnvironmentName: TanStackStartVitePluginCoreOptions['providerEnvironmentName'];
+    ssrResolverStrategy: TanStackStartVitePluginCoreOptions['ssrResolverStrategy'];
+    serializationAdapters: TanStackStartVitePluginCoreOptions['serializationAdapters'];
+};
+export declare function reactStartRscVitePlugin(): PluginOption;

package/dist/esm/src/reactSymbols.d.ts

@@ -0,0 +1,3 @@
+export declare const ReactElement: unique symbol;
+export declare const ReactLazy: unique symbol;
+export declare const ReactSuspense: unique symbol;

package/dist/esm/src/renderServerComponent.d.ts

@@ -0,0 +1,33 @@
+import { AnyRenderableServerComponent, RenderableServerComponentBuilder, ValidateRenderableServerComponent } from './ServerComponentTypes.js';
+export type { RscSsrHandler, RscDecodeResult } from './rscSsrHandler.js';
+/**
+ * Renderable RSC handle type - used for serialization detection.
+ */
+/**
+ * Type guard for renderable RSC handle.
+ */
+export declare function isRenderableRscHandle(value: unknown): value is AnyRenderableServerComponent;
+/**
+ * Renders a React element to an RSC Flight stream.
+ *
+ * Returns a "renderable proxy" that can be:
+ * - Rendered directly as `{data}` in JSX
+ * - Accessed for nested selections: `{data.foo.bar.Hello}`
+ *
+ * No slot support - for slots use `createCompositeComponent`.
+ *
+ * @example
+ * ```tsx
+ * // In a loader or server function
+ * const data = await renderServerComponent(<MyServerComponent foo="bar" />)
+ *
+ * // In the route component
+ * return (
+ *   <div>
+ *     {data}
+ *     {data.sidebar.Menu}
+ *   </div>
+ * )
+ * ```
+ */
+export declare function renderServerComponent<TNode>(node: ValidateRenderableServerComponent<TNode>): Promise<RenderableServerComponentBuilder<TNode>>;

package/dist/esm/src/renderServerComponent.stub.d.ts

@@ -0,0 +1,9 @@
+import { RenderableServerComponentBuilder, ValidateRenderableServerComponent } from './ServerComponentTypes.js';
+/**
+ * Client stub for renderServerComponent.
+ *
+ * This function should never be called at runtime on the client.
+ * It exists only to satisfy bundler imports in client bundles.
+ * The real implementation only runs inside server functions.
+ */
+export declare function renderServerComponent<TNode>(_node: ValidateRenderableServerComponent<TNode>): Promise<RenderableServerComponentBuilder<TNode>>;

package/dist/esm/src/rscSsrHandler.d.ts

@@ -0,0 +1,24 @@
+import { RscSlotUsageEvent, ServerComponentStream } from './ServerComponentTypes.js';
+/**
+ * Result from decoding an RSC stream for SSR.
+ */
+export interface RscDecodeResult {
+    tree: unknown;
+    cssHrefs?: Set<string>;
+    jsPreloads?: Set<string>;
+}
+/**
+ * SSR handler interface - registered by serialization.server.ts in SSR environment.
+ * Supports both renderable and composite proxy creation.
+ */
+export interface RscSsrHandler {
+    /** Pre-decode the stream for synchronous SSR rendering */
+    decode: (stream: ServerComponentStream) => Promise<RscDecodeResult>;
+    /** Create a renderable proxy (for renderServerComponent) */
+    createRenderableProxy: (stream: ServerComponentStream, decoded: RscDecodeResult) => any;
+    /** Create a composite proxy (for createCompositeComponent) */
+    createCompositeProxy: (stream: ServerComponentStream, decoded: RscDecodeResult, slotUsagesStream?: ReadableStream<RscSlotUsageEvent>) => any;
+}
+declare global {
+    var __RSC_SSR__: RscSsrHandler | undefined;
+}

package/dist/esm/src/serialization.client.d.ts

@@ -0,0 +1,11 @@
+import { AnyCompositeComponent, RscSlotUsageEvent } from './ServerComponentTypes.js';
+/**
+ * Client-side serialization adapter for RSC (renderable + composite).
+ */
+type SerializedRsc = {
+    kind: 'renderable' | 'composite';
+    stream: ReadableStream<Uint8Array>;
+    slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+};
+export declare const rscSerializationAdapter: () => import('@tanstack/router-core').SerializationAdapter<AnyCompositeComponent, SerializedRsc, never>[];
+export {};

package/dist/esm/src/serialization.server.d.ts

@@ -0,0 +1,10 @@
+import { RawStream } from '@tanstack/router-core';
+import { AnyCompositeComponent } from './ServerComponentTypes.js';
+/**
+ * Factory function for server-side RSC serialization adapter.
+ */
+export declare const rscSerializationAdapter: () => import('@tanstack/router-core').SerializationAdapter<AnyCompositeComponent, {
+    kind: string;
+    stream: RawStream;
+    slotUsagesStream: ReadableStream<any> | undefined;
+}, never>[];

package/dist/esm/src/slotUsageSanitizer.d.ts

@@ -0,0 +1 @@
+export declare function sanitizeSlotArgs(args: Array<any>): Array<any>;

package/dist/esm/src/types.d.ts

@@ -0,0 +1,13 @@
+import { ServerComponentStream } from './ServerComponentTypes.js';
+/**
+ * Handle returned by RSC helpers.
+ * Contains the RSC Flight stream that can be consumed by SSR and/or Client.
+ */
+export interface ServerComponentHandle {
+    readonly stream: ServerComponentStream;
+}
+/**
+ * Slot implementations provided to ServerComponentRenderer.
+ * Keys are slot names, values are either React nodes (for children) or render functions.
+ */
+export type SlotImplementations = Record<string, unknown>;

package/dist/plugin/entry/rsc.tsx

@@ -0,0 +1,23 @@
+/**
+ * Shared RSC (React Server Components) entry point.
+ *
+ * This file exports the functions needed for the active RSC environment:
+ * - getServerFnById: Resolves server functions by their encoded ID
+ * - render: Renders a React node to an RSC Flight stream
+ */
+
+import { renderToReadableStream } from 'virtual:tanstack-rsc-runtime'
+import type React from 'react'
+
+// Re-export getServerFnById from the virtual module which handles both dev and production
+// In dev: dynamic import with base64url-decoded file path
+// In production: manifest-based lookup with bundled chunks
+export { getServerFnById } from '#tanstack-start-server-fn-resolver'
+
+/**
+ * Renders a React node to an RSC Flight stream.
+ * Used internally for streaming server component output.
+ */
+export function render(node: React.ReactNode): ReadableStream<Uint8Array> {
+  return renderToReadableStream(node)
+}

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@tanstack/react-start-rsc",
+  "version": "0.0.0",
+  "description": "React Server Components support for TanStack Start",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/router.git",
+    "directory": "packages/react-start-rsc"
+  },
+  "homepage": "https://tanstack.com/start",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "react",
+    "rsc",
+    "server components",
+    "router",
+    "routing",
+    "typescript"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test": "pnpm test:eslint && pnpm test:types && pnpm test:build && pnpm test:unit",
+    "test:unit": "vitest",
+    "test:unit:dev": "vitest --watch",
+    "test:eslint": "eslint ./src",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
+    "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js",
+    "test:types:ts60": "tsc",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "vite build"
+  },
+  "type": "module",
+  "types": "dist/esm/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-server": {
+        "types": "./dist/esm/src/index.rsc.d.ts",
+        "default": "./dist/esm/index.rsc.js"
+      },
+      "import": {
+        "types": "./dist/esm/src/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./serialization.client": {
+      "import": {
+        "types": "./dist/esm/src/serialization.client.d.ts",
+        "default": "./dist/esm/serialization.client.js"
+      }
+    },
+    "./serialization.server": {
+      "import": {
+        "types": "./dist/esm/src/serialization.server.d.ts",
+        "default": "./dist/esm/serialization.server.js"
+      }
+    },
+    "./plugin/vite": {
+      "import": {
+        "types": "./dist/esm/src/plugin/vite.d.ts",
+        "default": "./dist/esm/plugin/vite.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "dependencies": {
+    "@tanstack/router-core": "workspace:*",
+    "@tanstack/react-router": "workspace:*",
+    "@tanstack/react-start-server": "workspace:*",
+    "@tanstack/start-client-core": "workspace:*",
+    "@tanstack/start-fn-stubs": "workspace:*",
+    "@tanstack/start-server-core": "workspace:*",
+    "@tanstack/start-storage-context": "workspace:*",
+    "pathe": "^2.0.3",
+    "@tanstack/start-plugin-core": "workspace:*",
+    "@tanstack/router-utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-rsc": "^0.5.20"
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-rsc": ">=0.5.20",
+    "react": ">=18.0.0 || >=19.0.0",
+    "react-dom": ">=18.0.0 || >=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vitejs/plugin-rsc": {
+      "optional": true
+    }
+  }
+}

package/src/ClientSlot.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useSlotContext } from './SlotContext'
+
+export interface ClientSlotProps {
+  slot: string
+  args: Array<unknown>
+}
+
+export function ClientSlot({ slot, args }: ClientSlotProps) {
+  const ctx = useSlotContext()
+
+  if (!ctx) {
+    throw new Error('ClientSlot must be rendered within SlotProvider')
+  }
+
+  const impl = ctx.implementations[slot]
+
+  // No implementation provided
+  if (impl === undefined) {
+    if (ctx.strict) {
+      throw new Error(`Missing slot implementation for "${slot}"`)
+    }
+    return null
+  }
+
+  // For children slot or any non-function value, render directly
+  if (typeof impl !== 'function') {
+    return <>{impl}</>
+  }
+
+  // Render function with args
+  return <>{impl(...args)}</>
+}