vitePluginMdx() — astro Function Reference

Architecture documentation for the vitePluginMdx() function in vite-plugin-mdx.ts from the astro codebase.

Function typescript CoreAstro RoutingSystem calls 1

Entity Profile

CoreAstro→ RoutingSystem→ vitePluginMdx() — astro Function Reference

Dependency Diagram

graph TD
  a37cee14_d6b8_5977_d857_ebfeda4309f8["vitePluginMdx()"]
  5053c6d5_f109_9970_dbe2_50bf2be7a473["vite-plugin-mdx.ts"]
  a37cee14_d6b8_5977_d857_ebfeda4309f8 -->|defined in| 5053c6d5_f109_9970_dbe2_50bf2be7a473
  1b9c6d96_7211_7bc5_3e8c_572614b93fd9["getMdxMeta()"]
  a37cee14_d6b8_5977_d857_ebfeda4309f8 -->|calls| 1b9c6d96_7211_7bc5_3e8c_572614b93fd9
  style a37cee14_d6b8_5977_d857_ebfeda4309f8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/mdx/src/vite-plugin-mdx.ts lines 15–100

export function vitePluginMdx(opts: VitePluginMdxOptions): Plugin {
	let processor: ReturnType<typeof createMdxProcessor> | undefined;
	let sourcemapEnabled: boolean;

	return {
		name: '@mdx-js/rollup',
		enforce: 'pre',
		buildEnd() {
			processor = undefined;
		},
		configResolved(resolved) {
			sourcemapEnabled = !!resolved.build.sourcemap;

			// HACK: Remove the `astro:jsx` plugin if defined as we handle the JSX transformation ourselves
			const jsxPluginIndex = resolved.plugins.findIndex((p) => p.name === 'astro:jsx');
			if (jsxPluginIndex !== -1) {
				// @ts-ignore-error ignore readonly annotation
				resolved.plugins.splice(jsxPluginIndex, 1);
			}
		},
		resolveId: {
			filter: {
				// Do not match sources that start with /
				id: /^[^/]/,
			},
			async handler(source, importer, options) {
				if (importer?.endsWith('.mdx')) {
					let resolved = await this.resolve(source, importer, options);
					if (!resolved) resolved = await this.resolve('./' + source, importer, options);
					return resolved;
				}
			},
		},
		// Override transform to alter code before MDX compilation
		// ex. inject layouts
		transform: {
			filter: {
				id: /\.mdx$/,
			},
			async handler(code, id) {
				const { frontmatter, content } = safeParseFrontmatter(code, id);

				const vfile = new VFile({
					value: content,
					path: id,
					data: {
						astro: {
							frontmatter,
						},
						applyFrontmatterExport: {
							srcDir: opts.srcDir,
						},
					},
				});

				// Lazily initialize the MDX processor
				if (!processor) {
					processor = createMdxProcessor(opts.mdxOptions, {
						sourcemap: sourcemapEnabled,
					});
				}

				try {
					const compiled = await processor.process(vfile);

					return {
						code: String(compiled.value),
						map: compiled.map,
						meta: getMdxMeta(vfile),
					};
				} catch (e: any) {
					const err: SSRError = e;

					// For some reason MDX puts the error location in the error's name, not very useful for us.
					err.name = 'MDXError';
					err.loc = { file: id, line: e.line, column: e.column };

					// For another some reason, MDX doesn't include a stack trace. Weird
					Error.captureStackTrace(err);

					throw err;