Can mdxJsxFlowElement have phrasing content as child?

[clemyan]

I am currently writing a markdown plugin in TypeScript to process MDX and have encountered a problem:

• If I enter <div>Hello <span>World</span></div> into the playground to check the mdast tree, we can see an mdxJsxFlowElement having mdxJsxTextElement and text as children.
• But neither the spec nor the TypeScript types allows mdxJsxTextElement and text to be children of mdxJsxFlowElement

So which of the two is correct? Or am I missing something?

[wooorm]

Hi!

What are you doing and why? Perhaps markdown is not what you care about, perhaps you care about HTML.
I would recommend not checking for one or the other, but checking for both. TS should be smart enough to understand that content can then be both too.
Is this a problem with the playground or with actual code you have?

The spec/types you link is about the earliest parser integration.
MDX itself later does more things. Notably remarkMarkAndUnravel in https://github.com/mdx-js/mdx/blob/main/packages/mdx/lib/core.js is likely doing what you see.

[clemyan]

tl;dr: The MDX playground outputs an mdast tree that is not compliant to the spec.

---

I misspoke. I am making a remark plugin, called via Docusaurus.

The plugin, in short, reads the code blocks on the page and replace them with custom JSX elements for styling and attaching metadata. As a simplified example, imagine it transforms this:

```
git restore -S ./path
EDITOR=vi git commit --amend
```

into the something like this

<MyCodeBlock>
  <MyCodeLine><Command metadata={commands.git.restore}>git restore -S ./path</Command></MyCodeLine>
  <MyCodeLine><Env>EDITOR=vi</Env> <Command metadata={command.git.commit}>git commit --amend</Command></MyCodeLine>
</MyCodeBlock>

Doing that as a remark plugin should be simple: just use unist-util-visit to find all CodeBlock nodes in the mdast tree, and replace them with MdxJsxFlowElement nodes, right?

Using the MDX playground, we can see the mdast tree for the JSX snippet above is this:

{
  "type": "mdxJsxFlowElement",
  "name": "MyCodeBlock",
  "attributes": [],
  "children": [
    {
      "type": "mdxJsxFlowElement",
      "name": "MyCodeLine",
      "attributes": [],
      "children": [
        {
          "type": "mdxJsxTextElement",
          "name": "Command",
          "attributes": [/* --snip-- */],
          "children": [
            {
              "type": "text",
              "value": "git restore -S ./path"
            }
          ],
          "data": {
            "_mdxExplicitJsx": true
          }
        }
      ],
      "data": {
        "_mdxExplicitJsx": true
      }
    },
    {
      "type": "mdxJsxFlowElement",
      "name": "MyCodeLine",
      "attributes": [],
      "children": [
        {
          "type": "mdxJsxTextElement",
          "name": "Env",
          "attributes": [],
          "children": [
            {
              "type": "text",
              "value": "EDITOR=vi"
            }
          ],
          "data": {
            "_mdxExplicitJsx": true
          }
        },
        {
          "type": "text",
          "value": " "
        },
        {
          "type": "mdxJsxTextElement",
          "name": "Command",
          "attributes": [/* --snip-- */],
          "children": [
            {
              "type": "text",
              "value": "git commit --amend"
            }
          ],
          "data": {
            "_mdxExplicitJsx": true
          }
        }
      ],
      "data": {
        "_mdxExplicitJsx": true
      }
    }
  ],
  "data": {
    "_mdxExplicitJsx": true
  }
}

However, according to the spec I linked, this is not a valid mdast tree, because MdxJsxTextElement cannot be a child of MdxJsxFlowElement. And since the TypeScript types follows the spec, my plugin (written in TypeScript) does not compile.

My understanding is that spec (together with the unist and mdast specs) defines what a valid mdast tree is when using MDX. Am I misunderstanding something? Or is the playground outputting an invalid mdast tree? Are there TypeScript types for remark plugin authors to typecheck the plugin's output?

[wooorm]

ok, so that has little to do with markdown or HTML or how things mix.
You care solely about JS(X). You do not want markdown inside these things.

Use a rehype plugin. Generate an expression. Turn:

```sh
git commit --amend
```

Into:

{
  <Component>
    <Line>git commit --amend</Line>
  </Component>
}

Use the playground to inspect both. You want to generate that embedded data.estree on the expression