Creating new node types from inline JSX

[KyleAMathews]

I'm working on a new version of my React static site generator Gatsby and want to natively support embedding JSX (for React components) inside Markdown e.g.

# Hello world

Would you please take my quiz:

<Quiz id={1234} />

The user when building the site would then specify what is Quiz.

I see from the Markdown parser demo that you put raw HTML into its own node type. Would it be possible to write a plugin which instead parses the HTML w/ a JSX parser and creates a node type of Quiz along with its attributes and any children? If so, I'd really appreciate some pointers!! This is something I really want and a number of Gatsby users have mentioned it as well so would love to figure it out. This would also simplify creating custom Markdown React renderers e.g. footnotes that get rendered on a sidebar or as an inline widget which you click on to see the footnote.

[wooorm]

That's very possible, you can extend mdast with any nodes you like.

Inside the remark ecosystem, however, you may not fare too well: unknown nodes are ignored or thrown about when found, depending on the plugin. You'll also run in the compiler (remark-stringify, used in remark), which will not know what to do with them.

If it looks like HTML, and quacks like HTML, why not use the 'html' type? Note that, if you use your own compiler (e.g., remark-react has their own), you can always do funky stuff in that when compiling to a virtual dom.

Finally, could you expand some more on how you're planning to handle the new nodes? It's an interesting problem and I'd like to help.

[KyleAMathews]

Oh cool! Perfect.

So for the next version of Gatsby I'm building a new data layer based on GraphQL. GraphQL is cool in lots of ways but one big reason is it let's the client (in this case React.js components) tell the server (Gatsby) what data it wants. So the server can offer data in all sorts of ways and the client can pick and choose from the offerings. So for markdown, I want Gatsby to expose markdown in every possible way that a client could want.

So the obvious way for a client to query for markdown data is for the compiled HTML string. But for maximum flexibility I want to give people the option to query the markdown AST directly and build React components directly from the raw markdown AST data. They could specify which components they want to handle lists, paragraphs, headers, etc. This is why it'd be ideal to parse JSX and add the parsed nodes alongside the markdown nodes so the user could just match the Quiz node they put in the markdown with their custom Quiz React component.

Make sense? Seem like a sensible plan?

[wooorm]

Yes, it does makes sense. And I’m working on doing something quite similar, transforming to HAST, however it’s rather hard and I’m unsure how to do it properly 😬

[wooorm]

Hope that answered the issue. If not, either use Gitter, or create a new issue!

[wooorm]

I finally figured out how to get HTML in markdown, properly: https://github.com/wooorm/rehype-raw, which may be useful!

[naivefun]

@wooorm is there an example of extending node type? For example I'd like to support something like this block:

@startxxx
...
@end

Is it parsed as paragraph by default?