Nauseating Pumpkin Mush

    remark-mdx-frontmatter-alt
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    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.

    Install

    npm i remark-mdx-frontmatter-alt

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    7.21 kB

    Total Files

    5

    Last publish

    Collaborators

    • guoyunhe