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, 13s) when you modifying the MDX file, instead of a hot module replacement (fast, 50200ms).

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.