Translating a new mdast tag to hast

[glitteringkatie]

I'm working on a plugin that would allow variable interpolation in MDX (using v2). For example:

Hello, my name is {{name}}

Where you pass in the options {mapping: {name: 'Katie'}}, we should render:

Hello, my name is Katie.

I got this working for block level components by setting the node type to paragraph and the content to the result of tokenizeInline when passed the value of the map (to allow for markdown in the replacement text).

I'm having a harder time with inline. My remark plugin successfully tags something like the example above as inlineVariable but by the time I get over to the rehype plugin, the inlineVariable tag is gone. I dug into the mdx-js/mdx code to see where I should really be plugging in to inject a renderer for inlineVariables (all I want is a span).

That's when I found https://github.com/mdx-js/mdx/blob/v2.0.0-next.8/packages/mdx/index.js#L37. I thought I was home free and just had to figure out what options to pass into mdxAstToMdxHast. So I went to https://github.com/mdx-js/mdx/blob/v2.0.0-next.8/packages/mdx/mdx-ast-to-mdx-hast.js and found that it took... no options.

Editing my local node_module copy of mdx-ast-to-mdx-hast.js to include the blob below works (roughly: looks like children don't get converted to hast so only the text nodes show up but that's figure-out-able).

inlineVariable(h, node) {
        return Object.assign({}, node, {
          type: 'element',
          tagName: 'span',
          properties: {},
          children: node.children
        })
      },

So my question here is: am I missing an easier way of doing this? Is there some existing pair of remark/rehype plugins that could show me the right way? I was trying to use remark-math/rehype-mathjax as an example to follow but the amount of svg work in there doesn't exactly make it simple to follow.

tl;dr, I made a remark plugin that introduces a new tag (inlineVariable). Where do I hook into mdast->hast in order to translate that into a simple span?

Why make an inlineVariable anyways/how did the block one work out?

For the block version, the children were tokenized appropriately so all I had to do was wrap it in a paragraph node. mdast to hast translation was handled for me from there.

{
  type: 'paragraph',
  children: this.tokenizeInline(translation, now),
};

because tokenizeInline returns an array, I couldn't do the 'text' equivalent for my inline variable interpolation. So doing something like

{
  type: 'strong',
  children: this.tokenizeInline(translation, now),
};

works in making an inline variable, but then everything is bolded. I wasn't able to find an existing mdast node type for me to use that would result in a span or some other unstyled inline node.

[wooorm]

Heya!

I think you’re looking for: a way to define on markdown nodes, what they should turn into when they are turned into hast.

Here is an example for some emoji, that should be wrapped in an element with a class: https://codesandbox.io/s/remark-rehype-debug-forked-zs711?file=/src/index.js:858-1180. Note the data, the rest isn’t important. Here are some docs and examples on how hName and hProperties should look: https://github.com/syntax-tree/mdast-util-to-hast#examples.

But I am unsure what you mean by “My remark plugin successfully tags something like the example above as inlineVariable but by the time I get over to the rehype plugin, the inlineVariable tag is gone.”. a) I thought you replaced these variables when parsing, so there shouldn’t be anything in rehype anyway? b) what do you mean with gone? Is nothing rendered? Are there children?

---

However, although I can’t see your code, I have two questions/suggestions:

• I’d suggest that when parsing, you only do parsing. So, handle the {{...}}, but ignore what’s inside them (and don’t replace them).
  Then, some other time, do the replaces by walking the tree.
  One reason for that is that it’s nice to decouple things (e.g., remark-math parses $math$, then rehype-mathjax or rehype-katex make that into svg/mathml).
  Another, is that the positional info on your replaces things are incorrect, making it a bit hard to debug
• MDX 2 comes with expressions: # Hello, {data.name} works! Is a double brace syntax really needed?

[glitteringkatie]

Using the strategy from the emoji example worked out perfectly for me! By "the inlineVariable tag is gone" I meant--I was trying to go with the remark-math/rehype-mathjax style of building things. I was expecting I could introduce a node type "inlineVariable" that I could then grab into when I got to the rehype plugin. But once I was in the rehype plugin, things were already parsed into HAST. That's what I meant by "gone"--the 'inlineVariable' wasn't a persisting tag.

However, turns out one of the requirements I didn't see before was that variable interpolation needs to work in code snippets so we're moving to operate on raw files before passing things into mdx-js/mdx rendering this all null & void. But I wanted to say thanks for the help and also point out what worked in case others came along! (if I end up publishing the plugin on my own github, I'll link it here)