Warning
This is an internal project, and is not intended for public use. No support or stability guarantees are provided.
The server-side function for synchronizing TypeScript type documentation to disk. This function coordinates type loading and markdown generation, updating the types.md file and optionally the parent index page.
syncTypes is the orchestration function that:
loadServerTypesMeta to load and format TypeScript typesgenerateTypesMarkdowntypes.md with the latest type documentationThis function is separated from the webpack loader to allow reuse in other contexts (e.g., API routes, scripts, or custom build tools).
Note: Type highlighting is handled separately by
loadServerTypes, which calls this function and then applieshighlightTypesandhighlightTypesMetato convert plain text types to syntax-highlighted HAST.
For details on the TypeScript processing pipeline (configuration loading, worker architecture, type formatting), see loadServerTypesMeta.
import { syncTypes } from '@mui/internal-docs-infra/pipeline/syncTypes';
// Sync the types (updates types.md and returns latest data)
const result = await syncTypes({
typesMarkdownPath: '/absolute/path/to/types.md',
rootContext: '/absolute/path/to/project',
variants: { Default: '@base-ui/react/checkbox' },
// Optional: watchSourceDirectly
formattingOptions: {
shortTypeUnionPrintWidth: 40,
defaultValueUnionPrintWidth: 40,
},
});
// Use the results
console.log(result.exports); // Record<string, { type: TypesMeta; additionalTypes: TypesMeta[] }>
console.log(result.additionalTypes); // TypesMeta[] for top-level types
console.log(result.allDependencies); // string[] - files to watch
const result = await syncTypes({
typesMarkdownPath: '/absolute/path/to/types.md',
rootContext: '/absolute/path/to/project',
variants: { Default: '@base-ui/react/checkbox' },
socketDir: '/tmp/my-custom-socket-dir', // For Windows compatibility
performanceLogging: true,
});
interface SyncTypesOptions {
/** Absolute path to the types.md file to generate */
typesMarkdownPath: string;
/** Root context directory (workspace root) */
rootContext: string;
/**
* Map of variant name to file path (relative or package path).
* For single component: { Default: './Component' }
* For multiple: { CssModules: './css-modules/Component', Tailwind: './tailwind/Component' }
*/
variants?: Record<string, string>;
/**
* When true, resolves library paths to their source files for watching.
* Useful during development to watch the original source rather than built files.
*/
watchSourceDirectly?: boolean;
/** Options for formatting types in tables */
formattingOptions?: FormatInlineTypeOptions;
/**
* Directory path for socket and lock files used for IPC between workers.
* Useful for Windows where the default temp directory may not support Unix domain sockets.
*/
socketDir?: string;
/** Enable performance logging */
performanceLogging?: boolean;
/**
* Options for updating the parent index page with component metadata.
* When provided, calls syncPageIndex to update the parent directory's page.mdx
* with props, dataAttributes, cssVariables, and parameters extracted from
* component and hook types.
*/
updateParentIndex?: {
/** Base directory to stop recursion at when updating parent indexes */
baseDir?: string;
/** Name of the index file to update. @default 'page.mdx' */
indexFileName?: string;
/** Only update existing indexes, don't create new ones. @default false */
onlyUpdateIndexes?: boolean;
/** Directory to write marker files when indexes are updated */
markerDir?: string;
/** Throw an error if the index is out of date or missing */
errorIfOutOfDate?: boolean;
};
}
Note: The
resourceName(for display in markdown) andrelativePath(for logging) are derived automatically fromtypesMarkdownPathandrootContext.
interface SyncTypesResult {
/** Export data where each export has a main type and related additional types */
exports: Record<string, { type: TypesMeta; additionalTypes: TypesMeta[] }>;
/** Top-level non-namespaced types like InputType */
additionalTypes: TypesMeta[];
/** All dependencies that should be watched for changes */
allDependencies: string[];
/** Type name map from variant processing */
typeNameMap?: Record<string, string>;
/**
* Maps variant names to the type names that originated from that variant.
* Used for namespace imports (e.g., `* as Types`) to filter additionalTypes
* to only show types from that specific module.
*/
variantTypeNames: Record<string, string[]>;
/** Whether the types.md file was updated (false if unchanged) */
updated: boolean;
/**
* External types discovered during formatting.
* Map from type name to its definition string.
*/
externalTypes: Record<string, string>;
}
Note: The result contains plain text type fields (
typeText,defaultText). UseloadServerTypesif you needEnhancedTypesMetawith syntax-highlighted HAST fields (type,shortType,detailedType,default).
For details on the TypesMeta union type and its variants (component, hook, function, class, raw), see loadServerTypesMeta TypesMeta Structure.
syncTypes coordinates a two-stage pipeline:
Delegates to loadServerTypesMeta:
const typesMetaResult = await loadServerTypesMeta({
typesMarkdownPath,
rootContext,
variants,
watchSourceDirectly,
formattingOptions,
socketDir,
externalTypesPattern,
});
This handles TypeScript configuration, worker processing, and type formatting. See loadServerTypesMeta Processing Pipeline for details.
Generates markdown documentation and writes to disk:
const markdown = await generateTypesMarkdown(
resourceName,
allTypes,
typeNameMap,
externalTypes,
variantData,
);
// Only write if changed
const existingMarkdown = await readFile(typesMarkdownPath, 'utf-8').catch(() => null);
if (existingMarkdown !== markdown) {
await writeFile(typesMarkdownPath, markdown, 'utf-8');
}
When updateParentIndex is configured, updates the parent directory's index page:
await syncPageIndex({
pagePath,
metadata: pageMetadata, // props, dataAttributes, cssVariables, parameters
baseDir: updateParentIndex.baseDir,
indexFileName: updateParentIndex.indexFileName,
// ...
});
For details on the worker-based architecture, socket-based IPC, and performance characteristics, see loadServerTypesMeta Worker Architecture.
loadServerTypesMeta - Core type loading and formatting (used internally)loadServerTypes - Server-side function that calls this and applies highlightingloadPrecomputedTypes - Webpack loader that uses this functionsyncPageIndex - Updates parent index pages with component metadataabstractCreateTypes - Create type documentation factoriestypescript-api-extractor - Underlying type extraction librarySyncs types for a component/hook/function.
This is separated from the webpack loader to allow reuse in other contexts.
| Parameter | Type | Description |
|---|---|---|
| options | { typesMarkdownPath: string; rootContext: string; variants?: Record<string, string>; watchSourceDirectly?: boolean; formattingOptions?: FormatInlineTypeOptions; socketDir?: string; performanceLogging?: boolean; updateParentIndex?: { baseDir?: string; onlyUpdateIndexes?: boolean; markerDir?: string; errorIfOutOfDate?: boolean; indexFileName?: string }; externalTypesPattern?: string } |
Promise<TypesSourceData>type ClassTypeMeta = {
name: string;
description?: HastRoot;
descriptionText?: string;
constructorParameters: Record<string, FormattedParameter>;
properties: Record<string, FormattedProperty>;
methods: Record<string, FormattedMethod>;
typeParameters?: string[];
};type ComponentTypeMeta = {
name: string;
description?: HastRoot;
descriptionText?: string;
props: Record<string, FormattedProperty>;
dataAttributes: Record<string, FormattedEnumMember>;
cssVariables: Record<string, FormattedEnumMember>;
};type FormattedEnumMember = { description?: Root; descriptionText?: string; type?: string };type FormattedParameter = {
typeText: string;
defaultText?: string;
optional?: true;
description?: Root;
descriptionText?: string;
example?: Root;
exampleText?: string;
see?: Root;
seeText?: string;
};type FormattedProperty = {
typeText: string;
defaultText?: string;
required?: true;
description?: Root;
descriptionText?: string;
example?: Root;
exampleText?: string;
see?: Root;
seeText?: string;
};type FunctionTypeMeta = {
name: string;
description?: HastRoot;
descriptionText?: string;
parameters: Record<string, FormattedParameter>;
returnValue: Record<string, FormattedProperty> | string;
returnValueText?: string;
returnValueDescription?: HastRoot;
returnValueDescriptionText?: string;
};type HookTypeMeta = {
name: string;
description?: HastRoot;
descriptionText?: string;
parameters: Record<string, FormattedParameter | FormattedProperty>;
returnValue: Record<string, FormattedProperty> | string;
returnValueText?: string;
returnValueDescription?: HastRoot;
returnValueDescriptionText?: string;
};type RawTypeMeta = {
name: string;
description?: HastRoot;
descriptionText?: string;
formattedCode: string;
enumMembers?: EnumMemberMeta[];
reExportOf?: ReExportInfo;
dataAttributesOf?: string;
cssVarsOf?: string;
};type ReExportInfo = {
name: string;
slug: string;
suffix: 'props' | 'css-variables' | 'data-attributes';
};type SyncTypesOptions = {
typesMarkdownPath: string;
rootContext: string;
variants?: Record<string, string>;
watchSourceDirectly?: boolean;
formattingOptions?: FormatInlineTypeOptions;
socketDir?: string;
performanceLogging?: boolean;
updateParentIndex?: {
baseDir?: string;
onlyUpdateIndexes?: boolean;
markerDir?: string;
errorIfOutOfDate?: boolean;
indexFileName?: string;
};
externalTypesPattern?: string;
};type TypesMeta =
| { type: 'class'; name: string; slug?: string; data: ClassTypeMeta }
| { type: 'component'; name: string; slug?: string; data: ComponentTypeMeta }
| { type: 'hook'; name: string; slug?: string; data: HookTypeMeta }
| { type: 'function'; name: string; slug?: string; data: FunctionTypeMeta }
| { type: 'raw'; name: string; slug?: string; data: RawTypeMeta };