How to display the "contents" of an imported component?

[henrikvilhelmberglund]

I'm writing components and trying to display the code for the contents of these components. It's possible to for example write a component , then copy the code to a new component which is wrapped in svelte example, and then using that component. Or, just copy paste the code of the component into a svelte example

I'm looking for a way to not have to duplicate the code and just get an example from the contents of my component. Aka, I'm wondering if there's a way to display the contents of an imported component instead of the importing and usage of the component.

So for example instead of

Button

An example of how to use our Button component

<script>
    import Button from '$lib/Button.svelte'
</script>

<Button>Button</Button>

displaying

Button

I would like it to act as if I copy pasted the code from $lib/Button.svelte into the svelte example.

Is this possible somehow?

[mattjennings]

@henrikvilhelmberglund No - that's not something this library supports, because (if I'm understanding you right) you can do that by just using Vite features:

<script>
import Button from '$lib/Button.svelte'
import ButtonSrc from '$lib/Button.svelte?raw'
</script>

<!-- you would want to bring in a code highlighting library here, i.e prism -->
<pre><code>{ButtonSrc}</code></pre>

<Button>Button</Button>

Here are the Vite docs on using ?raw

[henrikvilhelmberglund]

My bad, but didn't really know where to post it.

Anyway, thanks for the help, it works perfectly!