Storybook MDX Needing React?
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!
Has anyone setup Storybook w/SolidJS and used MDX docs properly? (Custom MDX, that is, not the autodocs stuff). Many thanks!
8 Replies
There’s this starter repo
https://github.com/solidjs-community/storybook/blob/main/README.md
GitHub
storybook/README.md at main · solidjs-community/storybook
Solid specific implementation for Storybook. Contribute to solidjs-community/storybook development by creating an account on GitHub.
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!
@Kachurun any ideas?
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.
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:
GitHub
dnd-kit/apps/stories-solid/components-docs/Solid/Solid.react.tsx at...
The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. - kachurun/dnd-kit
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
GitHub
dnd-kit/apps/stories-solid/.storybook/main.ts at solid · kachurun/...
The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. - kachurun/dnd-kit
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.
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.Hm, actually I did
