michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[MDX] Remove frontmatterOptions (#4204)

Browse source 
* feat: remove frontmatterOptions config

* test: remove custom frontmatter suite

* deps: remove remark-mdx-frontmatter

* docs: remove `frontmatterOptions` config

* chore: changeset
This commit is contained in:
Ben Holmes 2022-08-08 17:33:35 -05:00 committed by GitHub
parent 36cb503c8a
commit 4c2ca5352d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 19 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/thin-houses-play.md Normal file
View file

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

29
packages/integrations/mdx/README.md
View file

@ -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.

1
packages/integrations/mdx/package.json
View file

@ -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",

32
packages/integrations/mdx/src/astro-data-utils.ts
View file

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

13
packages/integrations/mdx/src/index.ts
View file

@ -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),
],
});

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

@ -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),
})
}
}

6
packages/integrations/mdx/test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx vendored
View file

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

17
packages/integrations/mdx/test/mdx-frontmatter.test.js
View file

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

44
pnpm-lock.yaml
View file

@ -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'}