From 4d9f8f554c56a5aace684484c7532ca75ba51525 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 20 Oct 2025 19:32:17 +0000 Subject: [PATCH 1/4] feat(mdx): add TypeScript types for Content components prop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds proper TypeScript support for passing custom components to MDX Content component via the components prop. Changes: - Add MDXContentProps interface defining the components prop - Add MDXContent type that extends AstroComponentFactory with typed props - Update MDX render type to use MDXContent instead of plain function - Maintains link to base AstroComponentFactory type via intersection This addresses part of issue #14490 by providing TypeScript intellisense and type checking for the components prop when using await render(). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- packages/astro/src/types/public/content.ts | 27 +++++++++++++++++++ .../mdx/template/content-module-types.d.ts | 2 +- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/types/public/content.ts b/packages/astro/src/types/public/content.ts index 26331e60e796..73127d5037e7 100644 --- a/packages/astro/src/types/public/content.ts +++ b/packages/astro/src/types/public/content.ts @@ -33,6 +33,33 @@ 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'; + * 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']; From 2e2512cedda3a30878db824929ff1634a376446d Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 20 Oct 2025 19:43:22 +0000 Subject: [PATCH 2/4] chore: add changeset for MDX Content component types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds changeset documenting the new TypeScript support for the components prop on MDX Content component. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .changeset/mdx-content-component-types.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/mdx-content-component-types.md diff --git a/.changeset/mdx-content-component-types.md b/.changeset/mdx-content-component-types.md new file mode 100644 index 000000000000..290611772851 --- /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. From 28bc46b4ae5c8f7db22b3c009e246442f4a633c7 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Tue, 21 Oct 2025 08:01:30 -0400 Subject: [PATCH 3/4] Update .changeset/mdx-content-component-types.md Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> --- .changeset/mdx-content-component-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/mdx-content-component-types.md b/.changeset/mdx-content-component-types.md index 290611772851..d7498551d1df 100644 --- a/.changeset/mdx-content-component-types.md +++ b/.changeset/mdx-content-component-types.md @@ -3,4 +3,4 @@ '@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. +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. From f56dd3ad6d19b832d2382a5d40ccde5a3e34d2bd Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Tue, 21 Oct 2025 08:01:46 -0400 Subject: [PATCH 4/4] Update packages/astro/src/types/public/content.ts Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> --- packages/astro/src/types/public/content.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/astro/src/types/public/content.ts b/packages/astro/src/types/public/content.ts index 73127d5037e7..a4d1631e8cbc 100644 --- a/packages/astro/src/types/public/content.ts +++ b/packages/astro/src/types/public/content.ts @@ -41,6 +41,8 @@ export interface MDXInstance> * ```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); * ---