MDX Export Example Patterns

[yordis]

Recently I learned about how to combine rehype or remark plugins with mdx for example: https://github.com/stefanprobst/rehype-extract-toc/blob/main/src/mdx.js

There is a pattern so far that I am following:

import { name as isIdentifierName } from 'estree-util-is-identifier-name'
import { valueToEstree } from 'estree-util-value-to-estree'

export default function rehypeMdxPluginname({
  name = 'variableSomething',
  vfileDataKeyName = 'vfileDataKeyName'
} = {}) {
  if (!isIdentifierName(name)) {
    throw new Error(
      `The name should be a valid identifier name, got: ${JSON.stringify(
        name,
      )}`,
    )
  }

  return function transformer(tree, vfile) {
    const value = vfile.data[vfileDataKeyName];

    tree.children.unshift({
      type: 'mdxjsEsm',
      data: {
        estree: {
          type: 'Program',
          sourceType: 'module',
          body: [
            {
              type: 'ExportNamedDeclaration',
              source: null,
              specifiers: [],
              declaration: {
                type: 'VariableDeclaration',
                kind: 'const',
                declarations: [
                  {
                    type: 'VariableDeclarator',
                    id: { type: 'Identifier', name },
                    init: valueToEstree(value),
                  },
                ],
              },
            },
          ],
        },
      },
    })
  }
}

Would it be helpful to document how to do this somewhere? Must plugins that do the vfile.data mutation could potentially end up doing the same for mdx, so I see a lot of value in teaching others how to do it.

Especially that this seems to be a copy-paste thing and change the configuration for the most part.

Lastly, align in terms of how to publish things, I have been doing the following:

import rehypeMyPlugin from 'rehype-my-plugin';
import rehypeMdxMyPlugin from 'rehype-my-plugin/mdx';

const remarkPlugins: = [
        rehypeMyPlugin, // you must register this one first
        rehypeMdxMyPlugin,
      ],

What do you think? Trying to speak my mind and see if there is something that would make it easier for newbies and the ecosystem to figure out how to share and code the mdx side-by-side the other ones.

[wooorm]

The problem is that there aren’t many MDX-specific plugins yet. For something to become a (documented) pattern I think there need to be different ways to do it, and “we” as a community” are converging on one particular way.

One example that is unclear to me is how the data should flow: is file.meta the source of truth? The document’s AST? Options? The ESM export? What direction should these things flow?

For you last example: can you expand more practically on what you’re doing?

[yordis]

One example that is unclear to me is how the data should flow: is file.meta the source of truth?

Yeah, this is what I have been doing in other areas because normally they already extracted the info into vfile.data so I just use that information to also expose it to the mdx

For example:

• https://github.com/stefanprobst/rehype-extract-toc/blob/main/src/mdx.js

For you last example: can you expand more practically on what you’re doing?

Would this work?

• https://github.com/stefanprobst/rehype-extract-toc
• https://github.com/mattjennings/remark-reading-time

[wooorm]

For example:

Yeah, this is one example (and there are a few more), but I wouldn’t say that “most” or “normal” plugins are doing that.

---

If your use case is to create exports for vfile.data, then why not make it into one plugin, that does exactly and only that?

[yordis]

but I wouldn’t say that “most” or “normal” plugins are doing that.

Oh, sorry, did I say that somewhere? Tried to look for it. Just pointed that I have been doing that because I learned from a package.

If your use case is to create exports for vfile.data, then why not make it into one plugin, that does exactly and only that?

Oh like takes any vfile.data and exposes them all as mdx exports? 🤯 🤯 🤯 🤯 🤯

I like that idea, any template to get started? I can do that.

[wooorm]

https://github.com/mdx-js/mdx/blob/main/website/mdx-config.js#L148