[MDX] Remove frontmatterOptions (#4204)

* feat: remove frontmatterOptions config

* test: remove custom frontmatter suite

* deps: remove remark-mdx-frontmatter

* docs: remove `frontmatterOptions` config

* chore: changeset

.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(
+const EXPORT_NAME = 'frontmatter';
-	pageFrontmatter: Record<string, any>,
+
-	exportName = '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[] = [];
+		const exportNodes = [jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)];
-		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)};`)];
-		}
 		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),
-												rehypeApplyFrontmatterExport(
-													frontmatter,
-													mdxOptions.frontmatterOptions?.name
-												),
 										],
 									});
 

packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js

@@ -1,9 +0,0 @@
-export async function get() {
-	const mdxPages = await import.meta.glob('./*.mdx', { eager: true });
-
-	return {
-		body: JSON.stringify({
-			titles: Object.values(mdxPages ?? {}).map(v => v?.customFrontmatter?.title),
-		})
-	}
-}

packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx

@@ -1,6 +0,0 @@
----
-title: 'Using YAML frontmatter'
-illThrowIfIDontExist: "Oh no, that's scary!"
----
-
-# {customFrontmatter.illThrowIfIDontExist}

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');
-	});
 });

pnpm-lock.yaml

@@ -2209,7 +2209,6 @@ importers:
       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
       remark-toc: ^8.0.1
@@ -2217,7 +2216,7 @@ importers:
       unist-util-visit: ^4.1.0
       vfile: ^5.3.2
     dependencies:
-      '@astrojs/prism': link:../../astro-prism
+      '@astrojs/prism': 0.7.0
       '@mdx-js/mdx': 2.1.2
       '@mdx-js/rollup': 2.1.2
       acorn: 8.8.0
@@ -2227,7 +2226,6 @@ importers:
       rehype-raw: 6.1.1
       remark-frontmatter: 4.0.1
       remark-gfm: 3.0.1
-      remark-mdx-frontmatter: 2.0.3
       remark-shiki-twoslash: 3.1.0
       remark-smartypants: 2.0.0
       shiki: 0.10.1
@@ -3085,6 +3083,13 @@ packages:
       vfile-message: 3.1.2
     dev: false
 
+  /@astrojs/prism/0.7.0:
+    resolution: {integrity: sha512-5gh4BL9BlgCKBru0crQI3Y7GQCCC389wLBy+0yPnfss/pA0rVgCupRnGcs3oinsRopymOlNblEDfJXdTbCWEtg==}
+    engines: {node: ^14.18.0 || >=16.12.0}
+    dependencies:
+      prismjs: 1.28.0
+    dev: false
+
   /@babel/code-frame/7.18.6:
     resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
     engines: {node: '>=6.9.0'}
@@ -11115,13 +11120,6 @@ packages:
     resolution: {integrity: sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==}
     dev: false
 
-  /estree-util-value-to-estree/1.3.0:
-    resolution: {integrity: sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      is-plain-obj: 3.0.0
-    dev: false
-
   /estree-util-visit/1.2.0:
     resolution: {integrity: sha512-wdsoqhWueuJKsh5hqLw3j8lwFqNStm92VcwtAOAny8g/KS/l5Y8RISjR4k5W6skCj3Nirag/WUCMS0Nfy3sgsg==}
     dependencies:
@@ -12219,11 +12217,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /is-plain-obj/3.0.0:
-    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
-    engines: {node: '>=10'}
-    dev: false
-
   /is-plain-obj/4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -14962,18 +14955,6 @@ packages:
       - supports-color
     dev: false
 
-  /remark-mdx-frontmatter/2.0.3:
-    resolution: {integrity: sha512-R2H8k+KGS8phDwq6bR/tqD6MFytNcT3qSuBdCdv5+5bViNawVzWNRRI1XSaNB4WUcjoZDYJQUzmfw/5Y5vvB+Q==}
-    engines: {node: '>=14.0.0'}
-    dependencies:
-      '@types/mdast': 3.0.10
-      estree-util-is-identifier-name: 2.0.1
-      estree-util-value-to-estree: 1.3.0
-      toml: 3.0.0
-      unified: 10.1.2
-      yaml: 2.1.1
-    dev: false
-
   /remark-mdx/2.1.2:
     resolution: {integrity: sha512-npQagPdczPAv0xN9F8GSi5hJfAe/z6nBjylyfOfjLOmz086ahWrIjlk4BulRfNhA+asutqWxyuT3DFVsxiTVHA==}
     dependencies:
@@ -16003,10 +15984,6 @@ packages:
     engines: {node: '>=0.6'}
     dev: true
 
-  /toml/3.0.0:
-    resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
-    dev: false
-
   /totalist/1.1.0:
     resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==}
     engines: {node: '>=6'}
@@ -17153,11 +17130,6 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  /yaml/2.1.1:
-    resolution: {integrity: sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==}
-    engines: {node: '>= 14'}
-    dev: false
-
   /yargs-parser/18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}