diff --git a/.changeset/thin-houses-play.md b/.changeset/thin-houses-play.md new file mode 100644 index 000000000000..86d6ef2adadd --- /dev/null +++ b/.changeset/thin-houses-play.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': minor +--- + +Remove `frontmatterOptions` from MDX config diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index d4ad1f39d382..d7d27d039f93 100644 --- a/packages/integrations/mdx/README.md +++ b/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. diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json index 7d610777eb8a..81423b3eaa4c 100644 --- a/packages/integrations/mdx/package.json +++ b/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", diff --git a/packages/integrations/mdx/src/astro-data-utils.ts b/packages/integrations/mdx/src/astro-data-utils.ts index 3300c7b55fa7..7c7f6119bce3 100644 --- a/packages/integrations/mdx/src/astro-data-utils.ts +++ b/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, - exportName = 'frontmatter' -) { +const EXPORT_NAME = 'frontmatter'; + +export function rehypeApplyFrontmatterExport(pageFrontmatter: Record) { 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); }; } diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 2c72472371e1..d88e67016bcb 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/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 | { extends: T }; type MdxOptions = { remarkPlugins?: WithExtends; rehypePlugins?: WithExtends; - /** - * 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), ], }); diff --git a/packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js b/packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js deleted file mode 100644 index 2f8155ada9af..000000000000 --- a/packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js +++ /dev/null @@ -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), - }) - } -} diff --git a/packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx deleted file mode 100644 index e3c78914990d..000000000000 --- a/packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 'Using YAML frontmatter' -illThrowIfIDontExist: "Oh no, that's scary!" ---- - -# {customFrontmatter.illThrowIfIDontExist} diff --git a/packages/integrations/mdx/test/mdx-frontmatter.test.js b/packages/integrations/mdx/test/mdx-frontmatter.test.js index 5f0316986f87..e69919bd51b9 100644 --- a/packages/integrations/mdx/test/mdx-frontmatter.test.js +++ b/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'); - }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cae292be0e93..3663eda68650 100644 --- a/pnpm-lock.yaml +++ b/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'}