remark-mdx-frontmatter-alt
v1.1.2
Published
A remark plugin for converting frontmatter metadata into MDX exports
Downloads
3
Maintainers
Readme
remark-mdx-frontmatter-alt
Alternative implementation of remark-frontmatter for MDX, that is more compatible with React Refresh.
The original implementation, remark-mdx-frontmatter, transforms Markdown code:
---
hello: frontmatter
---
Rest of document
To JavaScript with named exports:
export const hello = 'frontmatter';
export default function MDXContent() {
return <p>Rest of document</p>;
}
Looks fine. But React Refresh, the official React HMR plugin doesn't support non-component exports along with component in the same file. The result is that Webpack/Vite will reloade the page (slow, 1~3s) when you modifying the MDX file, instead of a hot module replacement (fast, 50~200ms).
In this implementation, we export ONLY the component. All frontmatter data will be assigned to the component as static attributes:
export default function MDXContent() {
return <p>Rest of document</p>;
}
MDXContent.hello = 'frontmatter';
See this issue and this discussion for more details.