Gatsby: Support JSX nodes in `gatsby-remark-copy-linked-files`

[danoc]

Summary

Hello! A recent change to MDX prevents gatsby-remark-copy-linked-files from recognizing <img>, <a>, and other tags in MDX files. This happens because gatsby-remark-copy-linked-files is now receiving jsx nodes, not html.

gatsby-remark-copy-linked-files has support for visiting html nodes: https://github.com/gatsbyjs/gatsby/blob/3834b2bce5edc60cd5386561498ca29f028c1d30/packages/gatsby-remark-copy-linked-files/src/index.js#L206

Should there also be a visit for JSX? If so, how would that work?

This is a follow-up to the original issue I opened in https://github.com/ChristopherBiscardi/gatsby-mdx/issues/311.

Basic example

N/A

Motivation

Be able to share gatsby-remark-* plugins across .md and .mdx.

Thanks!

---

cc: @ChristopherBiscardi — Hopefully I explained this correctly!

[ChristopherBiscardi]

yep, looks good to me. For some additional context: MDX can be considered two layers for the purpose of this discussion.

• User Interface
• Remark AST Representation

User Interface

The UI for Remark is Markdown and HTML tags. The UI for MDX is Markdown and JSX. Consider the following valid file in both formats

# some title

<img src="./some/place" />

Remark AST

In gatsby-transformer-remark, the initial AST is

{
  "type": "root",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "children": [
        {
          "type": "text",
          "value": "some title",
        }
      ]
    },
    {
      "type": "html",
      "value": "<img src=\"./some/place\" />"
    }
  ]
}

MDX Remark AST

In gatsby-mdx, the initial AST is

{
  "type": "root",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "children": [
        {
          "type": "text",
          "value": "some title",
        }
      ]
    },
    {
      "type": "jsx",
      "value": "<img src=\"./some/place\" />"
    }
  ]
}

The core issue is the node that swaps between html and jsx, which prevents re-using the gatsby-remark-* plugins that operate on html nodes.

{
  "type": "jsx",
  "value": "<img src=\"./some/place\" />"
}

This is mostly a good thing because jsx and html are incompatible syntaxes even though they might overlap a lot in certain cases. This difference has led to a long series of bugs in gatsby-mdx as we tried to fix it without needing to upstream changes into plugins that operate on html nodes. None of the approaches has suitably solved the issue, so here we are needing changes so that gatsby-remark-* plugins also work on jsx nodes.

MDX React Output

and for some additional context here is the final MDX output

/* @jsx mdx */

const layoutProps = {};

export default function MDXContent({ components, ...props }) {
  return (
    <div
      name="wrapper"
      components={components}>
      <h1>{`some title`}</h1>
      <img src="./some/place" />
    </div>
  )
}
MDXContent.isMDXComponent = true

[danoc]

I'd be happy to take a look at this if the "add support for JSX nodes" approach is the desired one.

[ChristopherBiscardi]

it is. We've basically exhausted all of the other options at this point. Feel free to ping me to ask any questions if you need to.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[danoc]

Haven't been able to prioritize working on this, so someone is welcome to take it on if they run into this.

I'll post back here if I actively start working on it.