Storybook MDX Needing React?

[surreal basin]

Senior dev back in the FE world after some time in API-Land.

I am using SolidJs with Storybook. I would like to write some Doc stuff using MDX, but it seems Storybook really wants to render all JSX as React JSX?

Has anyone setup Storybook w/SolidJS and used MDX docs properly?

(Custom MDX, that is, not the autodocs stuff).

Many thanks!

[prime storm]

There’s this starter repo

https://github.com/solidjs-community/storybook/blob/main/README.md

[surreal basin]

Thank you. I am using this, but here is what I ran into:

• Using Vite to serve both my app and storybook
• MDX files with embedded JSX components worked fine.
• MDX files with imported *.jsx files broke as Storybook's React tries to import them as JSX but they've been altered by Solid.
• Even if I excluded folders and included others with both solid and react vite plugins, I got the same result
• Even if I moved the particular jsx files outside of my vite project, I got the same result.

I think ultimately this is just Solid and React competing and Vite not doing a great job of respecting include/exclude plugin params.

I could be (hope I am) wrong, but I already spent too much time on this already 😅.

Thanks for the response!

[prime storm]

@keen hamlet any ideas?

[keen hamlet]

Give me an hour, I'll check this.
But short answer – yes, MDX works only with React. But I have a workaround to render Solid components in MDX. Maybe I need to put these helpers in the repo or make a doc page about it.

[keen hamlet]

First of all, you need aka "Solid" component for react. Just simple bridge/proxy:
https://github.com/kachurun/dnd-kit/blob/solid/apps%2Fstories-solid%2Fcomponents-docs%2FSolid%2FSolid.react.tsx

Then you just use it this way:

<Solid of={ ActualComponent } someProp={123}/>

Also you need to teach vite include/exclude tsx of different types properly:

https://github.com/kachurun/dnd-kit/blob/solid/apps%2Fstories-solid%2F.storybook%2Fmain.ts

I have no idea how to achieve similar behavior without the Solid bridge component (but in theory, it's possible to create some Rollup plugin to auto-wrap it).
Also, I have no idea how to split framework files not by file name but by pragma comment, but in theory, it's possible as well. I just don't have time to play with it.