Next.js: React Component to HTML

[alexanderbluhm]

I want to parse a React component to HTML with MDX.
So I want to write test.mdx:

import { Button } from '@/components/Button';
'''
<Button>Test</Button>
'''

and it outputs

'''
<button type="submit" class="button">Test</button>
'''

I started with a plugin where I define the Button component in a <template.

<template component>
    <Button />
</template>

I tried to use renderToString but this is not working since I can't use real JSX here,

snippet = snippet.replace(
    /<template\s+(?:class="([^"]*)"\s+)?component(?:\s+class="([^"]*)")?>(.*?)<\/template>/is,
    (m, class1, class2, content) => {
      return ReactDOMServer.renderToString(content)
    }
  )

Does anyone have an idea how to make this work?
Thanks in advance.

[ChristianMurphy]

@alexanderbluhm this seems very much like an XY Problem.
There is a guide on creating pages in MDX on Next in the documentation site https://mdxjs.com/getting-started/next
Is there a particular reason you want to go another route? If so what is the end problem you are trying to solve? And why is bypassing the toolchain a constraint?

[alexanderbluhm]

@ChristianMurphy Thanks for the quick reply.

I already set up MDX on Next and I am able to write full pages and all is fine.

The problem I have is that I don't know how to parse an existing React component to a code block of html.
I am writing docs for components I built with react and I don't want to duplicate code, so I want a preview of a component and a the html code of the rendered component below. I don't know how to achieve this with MDX.
I saw that Live code does a similar thing, so maybe I can transform this approach?

I hope it is clearer now.

[ChristianMurphy]

I hope it is clearer now.

That helps, thanks

I tried to use renderToString but this is not working since I can't use real JSX here,

babel can be used in runtime to transform JSX to plain JS.
This is how https://mdxjs.com/advanced/runtime works.
runtime could be an option for how to render content to HTML as well.

The problem I have is that I don't know how to parse an existing React component to a code block of html.

I'm not sure I follow how this is an MDX question, it's more about running JSX 🙂
Again mdx runtime and/or babel preset react

With your more documentation focus you may also want to checkout Storybook, Docz, and/or docusaurus which use MDX to build docs sites and may offer a higher level feature set to work with.

[alexanderbluhm]

@ChristianMurphy Thanks. I think for now I will just copy the rendered html. Then, I have a little bit duplication but that's okay.