MDX Children

[sswatson]

Suppose I want to use a React component inside my MDX which has children or props that involve further exposition. It seems my options are to write JSX (which is unfortunate since MDX is more convenient) or to split out every one of these into a separate file (which is impractical if these children/props are small and come by the dozens).

I'm thinking of something along these lines:

# Exercises

What's 1 + 1?

<MultipleChoice
  options={[{
      answer: 2,
      response: *Nice!*
    },{
      answer: 3,
      response: **Too** big!
    }
  ]}
/>

(Of course, that isn't going to work as is. There would need to be some syntax like curly braces for JSX that switches back to MDX mode.)

Anyway, my question is about whether there are any approaches that might be better than the two I outlined above for this kind of use case.

[ChristianMurphy]

It seems my options are to write JSX (which is unfortunate since MDX is more convenient)

Could you expand what you mean by this?
MDX is Markdown and JSX, either can be used in this context.

Some ways to do interleaving:

JavaScript tagged templates

Using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates to treat the content of the template string as markdown or MDX content.
Which could look something like:

# Exercises

What's 1 + 1?

<MultipleChoice
  options={[{
      answer: 2,
      response: mdx`*Nice!*`
    },{
      answer: 3,
      response: mdx`**Too** big!`
    }
  ]}
/>

Using declarative JSX components, with Markdown children

Using https://reactjs.org/docs/context.html to allow components to decoratively describe their content and communicate with each other.
For example:

# Exercises

What's 1 + 1?

<MultipleChoice>
  <Option>
    <Answer>2</Answer>
    <Response>*Nice!*</Response>
  </Option>
  <Option>
    <Answer>3</Answer>
    <Response>**Too** big!</Response>
  </Option>
</MultipleChoice>

note inside JSX component children, markdown can be interleaved.

[sswatson]

Both of these are really helpful suggestions, thanks!

I'm especially curious about the template literal approach. Do you have a reference handy for this, or is it more of a roll-your-own situation? I was able to find a couple packages along these lines on the page for this VS code extension, but I wasn't able to tell whether you were suggesting that or something different.

Regarding your question:

Could you expand what you mean by this?

You interpreted my meaning correctly. By JSX I mean "JSX without MDX". E.g., I could write <strong>Too</strong> instead of **Too**, etc.

[ChristianMurphy]

I'm especially curious about the template literal approach. Do you have a reference handy for this

There was a draft of this a while back in unified, unifiedjs/unified#40, it was not merged because it can fairly easily be done in user-space as a utility.
Which could look something like

import * as runtime from 'react/jsx-runtime'
import {evaluateSync} from '@mdx-js/mdx'

export function mdx() {
  return evaluateSync(String.raw.apply(null, arguments), {...runtime})
}

then import that mdx function into the MDX document.

📓 Note: There is a caveat to this, if you are using server-side or static rendering, this would ship mdx to the client-side and evaluate the last bit of the content client-side.

📓 Note 2: It could also be done via an AST plugin (See: https://unifiedjs.com/learn/) which could server-side/statically replace the template with the rendered content, but that requires considerably more domain knowledge of MDX internals/ASTs to do.

[sswatson]

All of that makes sense and is extremely helpful.

I thought about handling this through plugins, and I guess that's probably the ideal solution (because the authoring syntax could be simplified somewhat), but at the moment I'm quite happy with the tagged template literal solution. Thanks again.