Load Server Code Source

The loadServerCodeSource utility reads source files from the local filesystem and analyzes their dependencies. It is a thin Node.js wrapper around createLoadIsomorphicCodeSource that wires the platform-independent loader to fs/promises and to a filesystem-backed module resolver.

For everything the loader does — import parsing, storeAt modes, comment processing, return shape, examples — see Load Isomorphic Code Source. This page only covers what loadServerCodeSource adds on top.

import { loadServerCodeSource } from '@mui/internal-docs-infra/pipeline/loadServerCodeSource';

const result = await loadServerCodeSource('file:///app/components/button/Component.tsx');

The default export is pre-configured for the common case. To customize options (storeAt, comment prefixes, etc.), use the factory:

import { createLoadServerCodeSource } from '@mui/internal-docs-infra/pipeline/loadServerCodeSource';

const customLoadSource = createLoadServerCodeSource({
  storeAt: 'canonical',
  removeCommentsWithPrefix: ['@internal'],
  notableCommentsPrefix: ['@highlight'],
});

All options are forwarded verbatim to createLoadIsomorphicCodeSource, with two values pinned to Node.js implementations.

URLs are read with readFile. file:// URLs (including Windows drive letters) are converted via fileURLToPath; plain absolute paths are accepted directly. No URL scheme other than file:// is supported — for HTTP or virtual sources, use createLoadIsomorphicCodeSource directly.

Imports are resolved through resolveImportResultWithFs (from @mui/internal-docs-infra/pipeline/loaderUtils), which walks the real filesystem to mirror Node/TypeScript module resolution: extension probing (.ts, .tsx, .js, .jsx, .css, ...), index.* lookup inside directories, and absolute-URL output suitable for recursive loading.

Use loadServerCodeSource when you need to:

• Implement server-side code loading for CodeHighlighter in React Server Components
• Build demo processing pipelines that need automatic dependency resolution from disk
• Analyze import dependencies in source files for documentation generation
• Load code with its dependencies at request time (e.g., dynamic routes like app/components/[component].tsx)

Tip

For build-time optimization, use the Precompute Loader instead, which calls loadServerCodeSource during webpack compilation and caches the results.

string

Promise<{ source: string; extraFiles?: VariantExtraFiles; extraDependencies?: string[]; externals?: Externals; comments?: SourceComments }>

• createLoadIsomorphicCodeSource - The platform-independent factory underneath this wrapper
• loadServerCodeMeta - For loading demo metadata from index.ts files
• loadIsomorphicCodeVariant - For recursively loading code with dependencies