diff --git a/.changeset/mdx-content-component-types.md b/.changeset/mdx-content-component-types.md new file mode 100644 index 000000000000..d7498551d1df --- /dev/null +++ b/.changeset/mdx-content-component-types.md @@ -0,0 +1,6 @@ +--- +'astro': patch +'@astrojs/mdx': patch +--- + +Adds TypeScript support for the `components` prop on MDX `Content` component when using `await render()`. Developers now get proper IntelliSense and type checking when passing custom components to override default MDX element rendering. diff --git a/packages/astro/src/types/public/content.ts b/packages/astro/src/types/public/content.ts index 26331e60e796..a4d1631e8cbc 100644 --- a/packages/astro/src/types/public/content.ts +++ b/packages/astro/src/types/public/content.ts @@ -33,6 +33,35 @@ export interface MDXInstance> components: Record | undefined; } +/** + * Props accepted by the MDX `Content` component when using `await render()`. + * Allows passing custom components to override default MDX element rendering. + * + * @example + * ```astro + * --- + * import { getEntry, render } from 'astro:content'; + * import MyCustomH1 from '../components/CustomHeading.astro'; + * import MyImage from '../images/MyImage.jpg'; + * const entry = await getEntry('blog', 'post'); + * const { Content } = await render(entry); + * --- + * + * ``` + */ +export interface MDXContentProps { + /** Custom components to use for MDX elements (e.g., h1, h2, img, a, etc.) */ + components?: Record; + /** Any additional props to pass to the MDX content */ + [key: string]: any; +} + +/** + * The MDX `Content` component returned from `await render()`. + * Extends `AstroComponentFactory` with typed props for better developer experience. + */ +export type MDXContent = AstroComponentFactory & ((props?: MDXContentProps) => any); + export interface MarkdownLayoutProps> { frontmatter: { file: MarkdownInstance['file']; diff --git a/packages/integrations/mdx/template/content-module-types.d.ts b/packages/integrations/mdx/template/content-module-types.d.ts index 848289f01e58..5bf546e83aa5 100644 --- a/packages/integrations/mdx/template/content-module-types.d.ts +++ b/packages/integrations/mdx/template/content-module-types.d.ts @@ -1,7 +1,7 @@ declare module 'astro:content' { interface Render { '.mdx': Promise<{ - Content: import('astro').MarkdownInstance<{}>['Content']; + Content: import('astro').MDXContent; headings: import('astro').MarkdownHeading[]; remarkPluginFrontmatter: Record; components: import('astro').MDXInstance<{}>['components'];