Sharing variables between plugins

[robinmetral]

Hiya!

First of, apologies if this is already documented or discussed elsewhere—I assume it is since it's a pretty basic thing to do, but I couldn't find anything.

I'm wondering if it's possible to share data between plugins.

My use case is that I want to get a variable from my markdown's frontmatter, and pass it as a page title to rehype-document:

unified()
    .use(remarkParse)
    .use(remarkFrontmatter, ["yaml"])
    /* Parse frontmatter with yaml-js */
    .use(() => (tree) => {
      const yamlFrontmatter = (tree.children[0] as FrontmatterContent).value;
      const jsFrontmatter = yaml.load(yamlFrontmatter);
      console.log(jsFrontmatter); // 👈 how can I get the title from here...
    })
    .use(remarkRehype)
    .use(rehypeDocument, { title: frontmatter.title }) // 👈 ...to here?
    .use(rehypeStringify)
    .process(file)
    .then((file) => {
      console.error(reporter(file));
      console.log(String(file));
    });

Thank in advance for the help—I hope this makes sense and I'm not doing something obviously wrong 😅

[wooorm]

Yes, it is possible.
Note that rehype-meta is much more powerful than rehype-document and supports this example! You can also use both rehype-document and rehype-meta — the first is more about the document structure coming from markdown, the second is about all your SEO/OG/etc needs.

// ...
.use(remarkFrontmatter, ["yaml"])
.use(() => (tree, file) => {
  const head = tree.children[0]
  if (head && head.type === 'yaml') {
    file.data.matter = yaml.load(yamlFrontmatter);
  }
})
// ...
.use(rehypeMeta) // It works!

This is done by sharing metadata on the file. The convention for parsed frontmatter is to go into file.data.matter. And rehype-meta accepts that!

[robinmetral]

Ah nice, so basically you can usually store custom data on the file itself

[wooorm]

if it’s data about a file, that’s a spot, yep

[robinmetral]

Awesome, thanks 🙌