[Plugin] Adding data to the 'import' like remark-frontmatter

[mattoni]

The remark-frontmatter plugin is able to add to the return of await import("file.mdx"), where you get a nice frontmatter object (I'm using remix & vite). I want to make a plugin that can generate a table of contents, but instead of injecting it into the markdown content, or on the file.data (since this doesn't seem to work), I want it returned like frontmatter.

Here's what I've tried, to no avail:

 const mdxTOCPlugin: Plugin<[], Root> = () => {
    return (tree: Root, file) => {
      const toc: TOCItem[] = [];
  
      // Traverse the AST to find headings and build the TOC
      visit(tree, 'heading', (node: any) => {
        const depth = node.depth;
        const text = node.children.map((child: any) => child.value || '').join('');
        const id = text.toLowerCase().replace(/\s+/g, '-');
  
        toc.push({ depth, text, id });
      });
  
      // Attach the TOC to the file's data
      console.log(file.data)
      file.data.toc = toc;
  
      // Create the ES module export for the TOC and inject it into the MDX
      const exportTOC = `
  export const toc = ${JSON.stringify(toc)};
      `;
  
      // Define a basic position at the end of the file
      const position: Position = {
        start: { line: tree.children.length + 1, column: 1, offset: tree.position?.end.offset || 0 },
        end: { line: tree.children.length + 2, column: 1, offset: tree.position?.end.offset || 0 },
      };
  
      const esModule = {
        type: 'mdxjsEsm',
        // value: "export const toc = 123",
        position, // Include position information
        data: {},
      } as unknown as Content; // Explicitly casting to 'Content' type
  
      // Add the export to the end of the AST
      tree.children = [esModule, ...tree.children]
      console.log(file)
    };
  };

I thought that by creating a custom export like this, it'd work, but that doesn't seem to be the case. What am I doing wrong/how can I achieve this?

[ChristianMurphy]

Welcome @mattoni! 👋
Have you looked at https://github.com/DCsunset/remark-mdx-toc by any chance?
It does what you're describing, it needs an update from MDX 2 to MDX 3, maybe you could look into contributing there?

[mattoni]

Excellent thank you. It provides the key to what I was missing - need to set data with an estree, not value. Thanks!

[wooorm]

The remark-frontmatter plugin is able to add to the return of await import("file.mdx") where you get a nice frontmatter object (I'm using remix & vite). [...]

That’s not what remark-frontmatter does? 🤔 you must be using other things to get that result.

or on the file.data (since this doesn't seem to work)

This is very possible. Why not ask for this?

I want it returned like frontmatter.

I’d like to hear what else you are using because remark-frontmatter doesn’t give that result.

I thought that by creating a custom export like this, it'd work, but that doesn't seem to be the case. What am I doing wrong/how can I achieve this?

You’re doing several things “wrong”, or more nicely worded: several things can be improved ;)
The types are very messy, for one. You remove all useful type info by casting everything as any.

I can help you better if you provide exact input MDX, and show exact output MDX/JS/HTML. I don’t know exactly what you want.

Did you see https://mdxjs.com/docs/extending-mdx/#list-of-plugins? Go through those projects, particularly the ones close to what you want to do. Their code will improve your understanding!

[mattoni]

Hey thanks for taking the time to reply.

That’s not what remark-frontmatter does? 🤔 you must be using other things to get that result.

Sorry, I thought I was clear that I was using an async import with vite, where the frontmatter is accessible as a property on the return. The remark-frontmatter plugin absolutely makes that work.

This is very possible. Why not ask for this?

Unfortunately, using an async import doesn't make the data property of the file accessible, it's only accessible in the internals of vite, so that wouldn't work using it i.e. in a component when pre-processing (using remix, so this approach is what's recommended)

You’re doing several things “wrong”, or more nicely worded: several things can be improved ;)
The types are very messy, for one. You remove all useful type info by casting everything as any.

Trust me, not how I usually write Typescript - I'm particular about NOT using any, but given I was just trying to get a working POC, I went with the path that let me focus on the problem immediately instead of something production grade.

Did you see https://mdxjs.com/docs/extending-mdx/#list-of-plugins? Go through those projects, particularly the ones close to what > you want to do. Their code will improve your understanding!

Yes, I went through and learned how to build the TOC, but was stuck on how they were getting it into the return from async imports. I think the other answers here have helped me get on the right path. Thank you for writing this up though!

[wooorm]

where the frontmatter is accessible as a property on the return. The remark-frontmatter plugin absolutely makes that work.

No? https://github.com/remarkjs/remark-frontmatter does not do that. Perhaps, as remco mentions, you are mixing 2 plugins up?
This may sound pedantic. I want to clarify this, as this may be where your reading the source is not helping you: there are different plugins at play with frontmatter.

Lastly, as there are different tools at play, half your code is about generating a table of contents. While your question is about generating an export statement, which you have now solved. I want to mention that the rest of your code seems to be https://github.com/syntax-tree/mdast-util-toc

[remcohaszing]

I think you’re looking to largely recreate remark-mdx-frontmatter, notably this part:

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

You need to specify data.estree on the mdxjsEsm node. value may be empty. position should even be empty for generated nodes.

[mattoni]

Thanks yes, this is exactly what I was missing.