How to migrate remark plugins that depend on `type: html` in the MDAST? about xdm

[thecodingwizard]

I'm using gatsby-remark-images to get Gatsby's image optimization functionality for images I use in .mdx files. I don't really know if there's a way to achieve this in Gatsby without using gatsby-remark-images...

Is there something in particular that you’re looking for, and I can help with?

rehype-raw is exactly what I was looking for, thanks! It worked wonderfully, though I did have to add a number of passThroughs (is this intended?):

[
  rehypeRaw,
  {
    passThrough: [
      'mdxjsEsm',
      'mdxFlowExpression',
      'mdxTextExpression',
      'mdxJsxFlowElement',
      'mdxJsxTextElement',
    ],
  },
],

[wooorm]

Yup indeed, those have to be passed through!

I added support for this in 81d0fbb. Meant to document it, but also wanted to learn more about what users need for this case, the docs are already verbose, not yet sure how to document it!

[wooorm]

[…] I've just about finished migrating my Gatsby site to use xdm instead of gatsby-plugin-mdx, and I've seen some significant build time improvements as a result!

That’s awesome! Could you share what worked for you in the other issue? (#40) I’m sure someone else will stumble on it too, and I’m also interested to hear what worked.

Also, should the README specify that the MDAST of mdx and xdm are not the same?

xdm is a) things slated for mdx-js/mdx 2, b) more new things. The changes in the AST, including this problem specifically, are also part of the latest mdx-js/mdx 2 beta.
The goal is for how MDX is parsed and the AST to be exactly the same. I’ve refrained from documenting the AST in xdm to allow for some potential future changes, but you can see the nodes in the underlying projects: expressions, jsx, esm.

Is there a recommended way to migrate remark plugins (like gatsby-remark-image) that use type: html or type: jsx

html nodes are something that work for markdown. If you’re going markdown -> html, those values can be passed through untouched. But, say you’re going to React, it doesn’t work that nicely — you’d need a full blown HTML parser (importantly, say you have the HTML <h1>, then the markdown ## heading, and finally </h1>: then the h1 is closed before ##, and the final </h1> is ignored)

You can do this with xdm: rehype-raw It’ll work well, but it’s not great for bundle size and performance.

jsx nodes were in mdx-js/mdx@1. The equivalent for html, but a slightly different syntax.

Since about 6 years now, a different, and much better way for defining how things look like in HTML, was supported in remark.
Which is also supported in markdown and MDX in Gatsby: their plugins just never used it.
Here is an example of how to define what things turn into when going from markdown html.

My suggestion generally would be
a) never use 'html' or 'jsx' in mdast/mdxast, use the h* fields
b) move more things to remark plugins, so they can be used by Next (or other frameworks) folks too
c) do more with rehype plugins (see the Architecture section in the readme)

I hacked together a solution that used another remark plugin to convert nodes of type: html into a custom JSX component that renders the raw HTML, but I'm unsure if this is the best approach.

To come back to this particular question: are you using all of gatsby-remark-image? Is there something in particular that you’re looking for, and I can help with?