Support react component inline rendering

[zsherman]

Would be nice to have an interpolated syntax for previewing components definitions, related to #9.

[mrpotatoes]

I wrote https://www.npmjs.com/package/remark-jsx (still in beta) so something like that could help. This uses a library called remark that converts markdown to an AST and parses it that way. Mine looks for a ```jsx code tag and converts it.

[zsherman]

@mrpotatoes that's awesome, until the latest release we were using remark as well but found it a bit difficult to work with for this very use case. I recently came across a similar approach in https://github.com/styleguidist/react-styleguidist/, have you taken a look at how they do their demos?

[mrpotatoes]

Yeah. I prefer Storybook because I can focus on a single component/page at a time whereas styleguidist (and correct me if I'm wrong) will gather all the [markdown] files and render them into one big file. Not my preferred way of working.

The hardest thing about Remark is the AST imo. Once it's setup it's really powerful.

[zsherman]

Sure, I'm mainly referring to their strategy for parsing react components out of markdown. The syntax is exactly like you described:

<MyComponent state={state.something} /> // you get a handy state object for each component

And they use bublé to dynamically compile the components in the browser.

[etimberg]

@mrpotatoes how does your converter work to render the JSX once it's detected? Or is that a separate topic? That's what I found was the hardest when I wrote the first converter we had here. Detecting JSX blocks was pretty easy, rendering the JSX was not.

[mrpotatoes]

@etimberg Pretty simple (3 days of banging head against wall & gitter pleading)

I import my remark-jsx component and set it up.

Include markdown, convert markdown, pass in array of custom components. This is a deep conversion too. This is an example markdown file with a component that I'm using in my example. Children, props are all passed to the custom component.

This is my remark-jsx code. It's mostly the remark-react code with some minor modifications to handle wrapping components and custom components.

The code is in those two repos. Mind you that the newest code with remark-jsx is in markdown-with-embedded-jsx's major-refactor branch. Also, the reason remark-jsx isn't complete is because I noticed that I and wrapping all code components and only wanted to do the one. To get a props table to show up isn't hard either if you use babel-plugin-react-docgen. I planned to fix and add these features but I've been on a book-reading-spree.

I hope this helps.