Can't access props with inline JSX

With the new inline parsing of JSX blocks we no longer allow props access like we did in v0:

This is some inline JSX: <span>{props.foo}</span>

We now result in the following AST:

{
  "type": "root",
  "children": [
    {
      "type": "paragraph",
      "children": [
        {
          "type": "text",
          "value": "This is some inline JSX: "
        },
        {
          "type": "jsx",
          "value": "<span>"
        }
        {
          "type": "text",
          "value": "{props.foo}",
        },
        {
          "type": "jsx",
          "value": "</span>"
        }
      }
    }
  ]
}

This is problematic because “{props.foo}” will be escaped and end up like:

<span>{`{props.foo}`}</span>

Potential solution

Rather than parsing open/close blocks separately we should probably return a single node:

{
  type: 'jsx',
  value: '<span>{props.foo}</span>`
}

However, this can be problematic if folks are using Markdown inside inline JSX because their embedded Markdown will suddenly no longer work. This is also why remark parses inline HTML in that way. In the context of MDX, though, I’m not sure this is correct and we want it as a single JSX node.

cc/ @ChristopherBiscardi @wooorm @timneutkens @jxnblk @jlengstorf

---

AST Explorer example

[larrybotha]

For anyone else struggling with this, one workaround is to wrap the line of text in React.Fragment or span:

<React.Fragment>This is some inline JSX: {props.foo}</React.Fragment>

Note: Markdown needs to be used outside of JSX, otherwise the content isn’t parsed by MDX

e.g.

<React.Fragment> > This is some inline JSX: {props.foo}</React.Fragment>

results in

> This is some inline JSX: [foo value]

instead of

<blockquote>
  This is some inline JSX: [foo value]
</blockquote>

[johno]

After some more thinking on this we might need to change the AST structure for inline JSX a bit. So each inline JSX tag has children so that we can parse the Markdown and nest inline JSX tags in a way that is unambiguous:

{
  "type": "root",
  "children": [
    {
      "type": "paragraph",
      "children": [
        {
          "type": "text",
          "value": "This is some inline JSX: "
        },
        {
          "type": "jsx",
          "children": [
            {
              "type": "jsx",
              "value": "<span>"
            },
            {
              "type": "emphasis",
              "children": [
                {
                  "type": "text",
                  "value": "Hi"
                }
              ]
            },
            {
              "type": "jsx",
              "value": "{props.foo}"
            },
            {
              "type": "jsx",
              "value": "</span>",
            }
          ]
        }
      ]
    }
  ]
}