MUI Docs Infra

Warning

This is an internal project, and is not intended for public use. No support or stability guarantees are provided.

Abstract Create Stream

abstractCreateStream is the factory behind chunked content, mirroring abstractCreateDemo. Bind the chunk config once with createStreamFactory, then call the resulting createStream(url, meta) per chunk — the Built Factories pattern applied to the Coordinated Lazy layer.

Usage

// One factory for your app:
export const createStream = createStreamFactory({
  ChunkContent,
  ChunkLoading,
  source: { mode: 'stream', stream: streamChartPoints },
});

// One call per chunk, identified by import.meta.url:
export default createStream(import.meta.url);

A build-time loader detects the create* call (parseCreateFactoryCall matches it generically) and injects a precompute object into meta; at runtime the chunk renders directly from precompute, falling back to the config's loaders when it is absent.

Dynamically-imported loaders

All loader functions passed to the factory are expected to be dynamic imports, so they can be bundled but never called on the client. Add import 'server-only' to a loader module to keep a sensitive loader off the client entirely. A ClientProvider option (e.g. a ChunkProvider or PreloadProvider) wraps the chunk for client-side loading and preload dedup.

Reference

abstractCreateStream

Factory-factory for chunked objects, mirroring abstractCreateDemo. Binds the chunk config and produces a component that renders the chunk with the build- time precompute (from meta) injected as its preloaded data — so a precomputed chunk renders directly, and a non-precomputed one falls back to the config’s loaders.

The url is the call-site identity (from import.meta.url) used by the build-time loader to inject precompute; it is not needed at runtime.

ParameterTypeDescription
options
AbstractCreateStreamOptions<{}, P, O>
url
string
meta
CreateStreamMeta<P, O> | undefined
Return Type
React.ComponentType<{}>

createStreamFactory

Bind chunk options once and get a createStream(url, meta?) entry point (mirrors createDemoFactory -> createDemo).

PropertyTypeDescription
ClientProvider
| React.ComponentType<{ children: React.ReactNode }>
| undefined

Client provider wrapped around the chunk (loaders, preload dedup, etc.).

ChunkContent
React.ComponentType<ChunkContentProps<{}, P>>

The full content component.

ChunkLoading
| React.ComponentType<ChunkLoadingProps<{}, P>>
| undefined

The loading placeholder. Defaults to a component that renders null.

isLoaded
IsLoaded<P> | undefined

Whether the preloaded value suffices for the full content.

isInitial
IsInitial<P> | undefined

Whether the preloaded value suffices for the initial state.

source
StreamSource<P, O> | undefined

Data source (discriminated by mode). Its loader functions run on the server only — a data-mode source is executed by ChunkServerLoader (source.load for the full content, source.initial for a quick streamed paint) and never serialized into a Client Component. To load on the client, supply the source through a ChunkProvider (which lazily imports it) rather than this field. (Calling useChunk directly inside your own client component with a source is still fine — no server/client boundary is crossed there.)

Loader
| LazyComponentImport<ChunkContentProps<{}, P>>
| undefined

Server component rendered (under Suspense) to produce the full content. Always dynamically imported, and only imported when the render decision routes to it — so it never reaches the client bundle.

InitialLoader
| LazyComponentImport<ChunkContentProps<{}, P>>
| undefined

Server component rendered (under Suspense) to produce the initial state.

swap
ChunkSwapConfig | undefined

Swap timing forwarded to CoordinatedLazy.

loaderOptions
O | undefined

Default options passed to the source loaders.

contentManagesSwap
boolean | undefined

The ChunkContent component performs its own client-side loading and fallback->content swap. When set, the client-driven render modes render ChunkContent directly (with loading: true) instead of wrapping it in the framework’s useChunk+swap (CoordinatedLazyClient) — so a self-managing content (e.g. one already built on useCoordinatedSwap) is not double-swapped. Server and content/content-initial modes are unaffected.

revalidateOnIdle
boolean | undefined

Opt into stale-while-revalidate: once the chunk has loaded, automatically re-run the loader once on the first idle period (via requestIdleCallback) to refresh potentially-stale data in the background. Client-only. The chunk keeps showing its current data while the refresh is in flight.

Return Type
((url: string, meta?: CreateStreamMeta<P, O>) => React.ComponentType<{}>)
AbstractCreateStreamOptions

Options bound by createStreamFactory. Extends the chunk config with an optional client provider (e.g. a ChunkProvider supplying client loaders, or a PreloadProvider) wrapped around the chunk.

All loader functions on the config are expected to be dynamically imported by the caller’s module, so they can be bundled (and never called) on the client; add import 'server-only' to a loader module to keep a sensitive loader off the client entirely.

type AbstractCreateStreamOptions<T extends {} = {}, P = unknown, O = unknown> = {
  /** Client provider wrapped around the chunk (loaders, preload dedup, etc.). */
  ClientProvider?: React.ComponentType<{ children: React.ReactNode }>;
  /** The full content component. */
  ChunkContent: React.ComponentType<ChunkContentProps<T, P>>;
  /** The loading placeholder. Defaults to a component that renders `null`. */
  ChunkLoading?: React.ComponentType<ChunkLoadingProps<T, P>>;
  /** Whether the preloaded value suffices for the full content. */
  isLoaded?: ((preloaded: unknown | undefined) => boolean)<P>;
  /** Whether the preloaded value suffices for the initial state. */
  isInitial?: ((preloaded: unknown | undefined) => boolean)<P>;
  /**
   * Data source (discriminated by `mode`). Its loader functions run **on the
   * server only** - a `data`-mode source is executed by `ChunkServerLoader`
   * (`source.load` for the full content, `source.initial` for a quick streamed
   * paint) and never serialized into a Client Component. To load on the *client*,
   * supply the source through a `ChunkProvider` (which lazily imports it)
   * rather than this field. (Calling `useChunk` directly inside your own client
   * component with a `source` is still fine - no server/client boundary is
   * crossed there.)
   */
  source?: StreamSource<P, O>;
  /**
   * Server component rendered (under Suspense) to produce the full content.
   * Always dynamically imported, and only imported when the render decision
   * routes to it - so it never reaches the client bundle.
   */
  Loader?: (() => Promise)<ChunkContentProps<T, P>>;
  /** Server component rendered (under Suspense) to produce the initial state. */
  InitialLoader?: (() => Promise)<ChunkContentProps<T, P>>;
  /** Swap timing forwarded to `CoordinatedLazy`. */
  swap?: ChunkSwapConfig;
  /** Default options passed to the source loaders. */
  loaderOptions?: O;
  /**
   * The `ChunkContent` component performs its own client-side loading and
   * fallback->content swap. When set, the client-driven render modes render
   * `ChunkContent` directly (with `loading: true`) instead of wrapping it in the
   * framework's `useChunk`+swap (`CoordinatedLazyClient`) - so a
   * self-managing content (e.g. one already built on `useCoordinatedSwap`) is not
   * double-swapped. Server and content/`content-initial` modes are unaffected.
   */
  contentManagesSwap?: boolean;
  /**
   * Opt into stale-while-revalidate: once the chunk has loaded, automatically
   * re-run the loader once on the first idle period (via `requestIdleCallback`)
   * to refresh potentially-stale data in the background. Client-only. The chunk
   * keeps showing its current data while the refresh is in flight.
   */
  revalidateOnIdle?: boolean;
}
CreateStreamMeta

Per-call metadata, injected by the build-time loader (mirrors CreateDemoMeta). precompute is the chunk’s build-time data, rendered directly without a client fetch.

type CreateStreamMeta<P = unknown, O = unknown> = {
  name?: string;
  slug?: string;
  displayName?: string;
  /** Skip build-time precomputation for this call. */
  skipPrecompute?: boolean;
  /** Build-time precomputed value, rendered as the chunk's data. */
  precompute?: P;
  /** Default loader options for this call. */
  loaderOptions?: O;
}

Benchmarking

For performance benchmarks of abstractCreateStream, see the Benchmarking abstractCreateStream page.