diff options
author | 2022-08-08 17:33:35 -0500 | |
---|---|---|
committer | 2022-08-08 17:33:35 -0500 | |
commit | 4c2ca5352d0c4119ed2a9e5e0b78ce71eb1b414a (patch) | |
tree | 9d7cc9c2f8fe13f5aa52294f79d67f4a68e3a86b /packages/integrations | |
parent | 36cb503c8a8ea7c312ac408ceac27ab279104a25 (diff) | |
download | astro-4c2ca5352d0c4119ed2a9e5e0b78ce71eb1b414a.tar.gz astro-4c2ca5352d0c4119ed2a9e5e0b78ce71eb1b414a.tar.zst astro-4c2ca5352d0c4119ed2a9e5e0b78ce71eb1b414a.zip |
[MDX] Remove `frontmatterOptions` (#4204)
* feat: remove frontmatterOptions config
* test: remove custom frontmatter suite
* deps: remove remark-mdx-frontmatter
* docs: remove `frontmatterOptions` config
* chore: changeset
Diffstat (limited to 'packages/integrations')
7 files changed, 6 insertions, 101 deletions
diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index d4ad1f39d..d7d27d039 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 7d610777e..81423b3ea 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 3300c7b55..7c7f6119b 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<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); }; } diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 2c7247237..d88e67016 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> = 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), ], }); 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 2f8155ada..000000000 --- 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 e3c789149..000000000 --- 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 5f0316986..e69919bd5 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'); - }); }); |