Best way to get a react component's raw code?
Is it possible to get a component's raw code? For example.
then something like this
Basically, I want something like this: https://ui.shadcn.com/docs/components/accordion, where I can see the preview of the component and the raw code. Technically, I can just copy/paste the component's code into the <code> element but I want to have a single source of truth. And I did try looking at shadcn/ui repo but I did not understand how it worked at all.
9 Replies
Not really unless you read the file
I tried that too. It doesn't give the raw code. Unless I'm doing something wrong.
You have to read the .ts file not the build output
yes, I read the .tsx file
then what exactly are you getting if not the contents of the file
im going to be honest w/ you, don't do this
The way shadcn does it's not really on his repo. The only thing you can learn is here and here.
He uses a lot of plugins and something called "contentlayer", which is under all gitignores.
And based on those files, he really parses it in a way that the "<ComponentPreview />" receives just a name prop, and the search for the doc e in which contains the "doc.body.code" property, which is generated in build time, i assume.
If you wanna do something similar, maybe wrap your components inside some specific comment "tags", then create a script that read the some folders file and grab(if exists) just the content inside the specified tags and then make it available for your project in some kind o way, like an object indexed by name. Anyway, i don't think is gonna be any fast work
GitHub
ui/apps/www/content/docs/components at main · shadcn-ui/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. - shadcn-ui/ui
I do know about contentlayer. What I don't understand is how he can use ComponentPreview without passing in any children even though it's required.
He uses this to get the raw code...
But I tried a simplified example in my project and it didn't work because there is no children. So then I pass in some children but still I didn't get raw code back.
There must be some easier way to do this since it's a common problem for any coding example, this is way too complicated.
I got it working. Just had to specify utf8 encoding lol.
yes but cursed
I don't see any better way to do this. Shadcn solution is much more cursed imo.
Solution in case anyone ever needs this.