Is it possible to add props to a component in a remark plugin?

[lrholmes]

Hi!

I have a question regarding if / how it's possible to manipulate component props inside a remark plugin. Let's say I'm implementing my own version of the remark-toc plugin: https://github.com/remarkjs/remark-toc.

But instead of rendering a list under a relevant heading by inserting children on the AST, I want to be able to use a React component that accepts a headings prop. Would that be feasible to pull off within the bounds of a remark plugin?

I've been playing around with something like this (I've simplified things a bit):

MDX:

# Contents

<TOC />

# Heading 1

# Heading 2

# Heading 3

Compilation using next-mdx-remote:

const {mdx, frontmatter} = await compileMDX({
    source,
    components: {
      TOC: ({ headings }) => {
        <MyAwesomeTOCComponent headings={headings} />
      }
    },
    options: {
      parseFrontmatter: true,
      mdxOptions: {
        remarkPlugins: [
          customTOCPlugin,
        ],
      },
    },
  });

The relevant part of customTOCPlugin (I think):

    const headings = []
 
    visit(tree, 'heading', (node) => {
      const id = getID(node);
      const value = toString(node)
      headings.push({ id, value });
    });

    visit(tree, 'mdxJsxFlowElement', (node) => {
      if (node.name === 'TOC') {
        // Pass `headings` into component? 🤔
      } 
    });

I'm conscious that this problem can be solved via other means, such as it is in the remark-toc plugin, but for this example let's say I'm limited to rendering the table of contents via a React component.

I've considered a couple of other options that involve passing the headings data up to the react/next context as frontmatter, but these don't seem as clean or convenient as being able to manipulate the props of the JSX as it's defined in the mdx.

Apologies if this isn't the right place to ask such a question 🙏

[ChristianMurphy]

Welcome @lrholmes! 👋

It is possible.
I'd recommend starting by reading https://unifiedjs.com/learn/ to become more familiar with the different syntax trees and how they work.
Then explore some of the existing plugins to see how they achieved similar results https://mdxjs.com/docs/extending-mdx/.
https://github.com/remcohaszing/remark-mdx-frontmatter/#readme would probably be the most relevant in how it translates markdown frontmatter into a reusable export/variable.

[lrholmes]

Thanks for the prompt reply!

Okay, I've got it now. Thanks for pointing me in the right direction with some examples — it turns out I was previously on the right track with manipulating node.attributes, but wasn't sure quite how to construct a new one for my use case.

I found what I was looking for, an example of a "literal" attribute which seems to work for my case, in the remark-mdx-chartsjs lib which does something similar to what I'm doing: https://github.com/pangelani/remark-mdx-chartjs/blob/main/lib/utils.js#L174-L196

For posterity and possible future readers, here's my plugin snippet, updated with the relevant code to pass in a "prop" to my MDX component:

const headings = [];
 
  visit(tree, 'heading', (node) => {
    const id = getID(node);
    const value = toString(node)
    headings.push({ id, value });
  });

  visit(tree, 'mdxJsxFlowElement', (node) => {
    if (node.name === 'TOC') {  
      const attribute = {
        type: 'mdxJsxAttribute',
        name: 'headings', // prop name
        value: {
          type: 'mdxJsxAttributeValueExpression',
          value: JSON.stringify(headings),
          data: {
            estree: {
              type: 'Program',
              body: [
                {
                  type: 'ExpressionStatement',
                  expression: {
                    type: 'Literal',
                    value: headings,
                  },
                },
              ],
              sourceType: 'module',
              comments: [],
            },
          },
        },
      };
      node.attributes.push(attribute);
    } 
  });

[wooorm]

I recommend using https://github.com/remcohaszing/estree-util-value-to-estree to turn a value into estree!

[wooorm]

I also recommend going to the playground and trying this out: https://mdxjs.com/playground/.
<TOC headings='{"x":1}' /> might be a simpler alternative to generate: just pass a string of JSON. You don’t need to generate a Program for that.

[lrholmes]

Ah thanks for the follow up @wooorm!

Indeed, as I implemented types today I noticed that "Literal" wasn't actually the correct option here — I have fixed that using valueToEstree now, so thanks for the tip! 🙂

I have also updated my solution above to reflect that as the better option 👍

And I'll bear in mind the option to pass straight up JSON, that could work for future some use-cases. For now I'm pretty happy with being able to pass this array into my component.

Thanks again both for the support 🙌