mdx() — astro Function Reference

Architecture documentation for the mdx() function in index.ts from the astro codebase.

Function typescript CoreAstro RoutingSystem calls 2

Entity Profile

CoreAstro→ RoutingSystem→ mdx() — astro Function Reference

Dependency Diagram

graph TD
  aef657f7_9b71_45fd_7b87_12fa8dd2957b["mdx()"]
  4dbca764_76ba_1a5b_79ab_f6ddff0cb420["index.ts"]
  aef657f7_9b71_45fd_7b87_12fa8dd2957b -->|defined in| 4dbca764_76ba_1a5b_79ab_f6ddff0cb420
  9ef42195_d8f1_03e4_bc9e_abd0bd77fc8b["applyDefaultOptions()"]
  aef657f7_9b71_45fd_7b87_12fa8dd2957b -->|calls| 9ef42195_d8f1_03e4_bc9e_abd0bd77fc8b
  81841b8b_a997_1c8a_59c0_74abf2698aa0["markdownConfigToMdxOptions()"]
  aef657f7_9b71_45fd_7b87_12fa8dd2957b -->|calls| 81841b8b_a997_1c8a_59c0_74abf2698aa0
  style aef657f7_9b71_45fd_7b87_12fa8dd2957b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/mdx/src/index.ts lines 43–111

export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroIntegration {
	// @ts-expect-error Temporarily assign an empty object here, which will be re-assigned by the
	// `astro:config:done` hook later. This is so that `vitePluginMdx` can get hold of a reference earlier.
	let vitePluginMdxOptions: VitePluginMdxOptions = {};

	return {
		name: '@astrojs/mdx',
		hooks: {
			'astro:config:setup': async (params) => {
				const { updateConfig, config, addPageExtension, addContentEntryType, addRenderer } =
					params as SetupHookParams;

				addRenderer({
					name: 'astro:jsx',
					serverEntrypoint: new URL('../dist/server.js', import.meta.url),
				});
				addPageExtension('.mdx');
				addContentEntryType({
					extensions: ['.mdx'],
					async getEntryInfo({ fileUrl, contents }: { fileUrl: URL; contents: string }) {
						const parsed = safeParseFrontmatter(contents, fileURLToPath(fileUrl));
						return {
							data: parsed.frontmatter,
							body: parsed.content.trim(),
							slug: parsed.frontmatter.slug,
							rawData: parsed.rawFrontmatter,
						};
					},
					contentModuleTypes: await fs.readFile(
						new URL('../template/content-module-types.d.ts', import.meta.url),
						'utf-8',
					),
					// MDX can import scripts and styles,
					// so wrap all MDX files with script / style propagation checks
					handlePropagation: true,
				});

				updateConfig({
					vite: {
						plugins: [vitePluginMdx(vitePluginMdxOptions), vitePluginMdxPostprocess(config)],
					},
				});
			},
			'astro:config:done': ({ config, logger }) => {
				// We resolve the final MDX options here so that other integrations have a chance to modify
				// `config.markdown` before we access it
				const extendMarkdownConfig =
					partialMdxOptions.extendMarkdownConfig ?? defaultMdxOptions.extendMarkdownConfig;

				const resolvedMdxOptions = applyDefaultOptions({
					options: partialMdxOptions,
					defaults: markdownConfigToMdxOptions(
						extendMarkdownConfig ? config.markdown : markdownConfigDefaults,
						logger,
					),
				});

				// Mutate `mdxOptions` so that `vitePluginMdx` can reference the actual options
				Object.assign(vitePluginMdxOptions, {
					mdxOptions: resolvedMdxOptions,
					srcDir: config.srcDir,
				});
				// @ts-expect-error After we assign, we don't need to reference `mdxOptions` in this context anymore.
				// Re-assign it so that the garbage can be collected later.
				vitePluginMdxOptions = {};
			},
		},
	};
}