[MDX] Remove frontmatterOptions

.changeset/thin-houses-play.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': minor
+---
+
+Remove `frontmatterOptions` from MDX config

packages/integrations/mdx/README.md

@@ -121,7 +121,7 @@ A function that returns an array of all headings (i.e. `h1 -> h6` elements) in t
 
 ### Frontmatter
 
-Astro also supports YAML-based frontmatter out-of-the-box. By default, all variables declared in a frontmatter fence (`---`) will be accessible via the `frontmatter` export. See the `frontmatterOptions` configuration to customize this behavior.
+Astro also supports YAML-based frontmatter out-of-the-box. By default, all variables declared in a frontmatter fence (`---`) will be accessible via the `frontmatter` export.
 
 For example, we can add a `title` and `publishDate` to an MDX page or component like so:
 
@@ -342,33 +342,6 @@ export default {
 }
 ```
 
-### frontmatterOptions
-
-**Default:** `'frontmatter'`
-
-We parse all [YAML](https://yaml.org/) frontmatter found in code fences `---` to a named export. This is `frontmatter` by default, but can be customized using `frontmatterOptions.name`.
-
-For example, say you want to access frontmatter as root-level variables without a nested `frontmatter` object. You can override the [`name` configuration option](https://github.com/remcohaszing/remark-mdx-frontmatter#name) like so:
-
-```js
-// astro.config.mjs
-export default {
-  integrations: [mdx({
-    frontmatterOptions: {
-      name: '',
-    }
-  })],
-}
-```
-
-```mdx
----
-title: I'm just a variable now!
----
-
-# {title}
-```
-
 ## Examples
 
 - The [Astro MDX example](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.

packages/integrations/mdx/package.json

@@ -39,7 +39,6 @@
     "rehype-raw": "^6.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "remark-mdx-frontmatter": "^2.0.2",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.10.1",

packages/integrations/mdx/src/astro-data-utils.ts

@@ -1,6 +1,4 @@
 import type { MarkdownAstroData } from 'astro';
-import { name as isValidIdentifierName } from 'estree-util-is-identifier-name';
-import type { MdxjsEsm } from 'mdast-util-mdx';
 import type { Data, VFile } from 'vfile';
 import { jsToTreeNode } from './utils.js';
 
@@ -12,35 +10,13 @@ export function remarkInitializeAstroData() {
 	};
 }
 
-export function rehypeApplyFrontmatterExport(
-	pageFrontmatter: Record<string, any>,
-	exportName = 'frontmatter'
-) {
+const EXPORT_NAME = 'frontmatter';
+
+export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>) {
 	return function (tree: any, vfile: VFile) {
-		if (!isValidIdentifierName(exportName)) {
-			throw new Error(
-				`[MDX] ${JSON.stringify(
-					exportName
-				)} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
-			);
-		}
 		const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
 		const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
-		let exportNodes: MdxjsEsm[] = [];
-		if (!exportName) {
-			exportNodes = Object.entries(frontmatter).map(([k, v]) => {
-				if (!isValidIdentifierName(k)) {
-					throw new Error(
-						`[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
-							k
-						)} as a top-level export, which is not a valid export name.`
-					);
-				}
-				return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
-			});
-		} else {
-			exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
-		}
+		const exportNodes = [jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)];
 		tree.children = exportNodes.concat(tree.children);
 	};
 }

packages/integrations/mdx/src/index.ts

@@ -4,7 +4,6 @@ import type { AstroConfig, AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
-import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
 import remarkShikiTwoslash from 'remark-shiki-twoslash';
 import remarkSmartypants from 'remark-smartypants';
 import { VFile } from 'vfile';
@@ -19,12 +18,6 @@ type WithExtends<T> = T | { extends: T };
 type MdxOptions = {
 	remarkPlugins?: WithExtends<MdxRollupPluginOptions['remarkPlugins']>;
 	rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
-	/**
-	 * Configure the remark-mdx-frontmatter plugin
-	 * @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
-	 * @default {{ name: 'frontmatter' }}
-	 */
-	frontmatterOptions?: RemarkMdxFrontmatterOptions;
 };
 
 const DEFAULT_REMARK_PLUGINS: MdxRollupPluginOptions['remarkPlugins'] = [
@@ -119,11 +112,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 										...mdxPluginOpts,
 										rehypePlugins: [
 											...(mdxPluginOpts.rehypePlugins ?? []),
-											() =>
-												rehypeApplyFrontmatterExport(
-													frontmatter,
-													mdxOptions.frontmatterOptions?.name
-												),
+											() => rehypeApplyFrontmatterExport(frontmatter),
 										],
 									});
 

packages/integrations/mdx/test/mdx-frontmatter.test.js

@@ -56,21 +56,4 @@ describe('MDX frontmatter', () => {
 		expect(headingSlugs).to.contain('section-1');
 		expect(headingSlugs).to.contain('section-2');
 	});
-
-	it('extracts frontmatter to "customFrontmatter" export when configured', async () => {
-		const customFixture = await loadFixture({
-			root: new URL('./fixtures/mdx-custom-frontmatter-name/', import.meta.url),
-			integrations: [
-				mdx({
-					frontmatterOptions: {
-						name: 'customFrontmatter',
-					},
-				}),
-			],
-		});
-		await customFixture.build();
-
-		const { titles } = JSON.parse(await customFixture.readFile('/glob.json'));
-		expect(titles).to.include('Using YAML frontmatter');
-	});
 });