Skip to content

Instantly share code, notes, and snippets.

@leejoramo-d51
Forked from d4rekanguok/component.svelte
Created January 7, 2022 22:15
Show Gist options
  • Save leejoramo-d51/4b7bb0ba5465c54861137ea1c743ed52 to your computer and use it in GitHub Desktop.
Save leejoramo-d51/4b7bb0ba5465c54861137ea1c743ed52 to your computer and use it in GitHub Desktop.
A svelte component you can drop into your svelte kit app to view a list of all your components (poor man's Storybook)
<script context="module">
const modules = import.meta.glob('/src/sections/*.svelte')
const componentNames = Object.keys(modules)
</script>
<script>
import cx from 'clsx'
let current = componentNames[0]
$: importComponent = modules[current]
const onClickForName = (name) => () => {
current = name
}
</script>
<div class="flex">
<ul class="w-1/5 p-4">
{#each componentNames as name (name)}
<li class={cx({
'opacity-40': name === current
})}>
<button on:click={onClickForName(name)}>
{name.split('/src/sections/')[1] || ''}
</button>
</li>
{/each}
</ul>
<div class="flex-1">
{#await importComponent()}
<div>Loading</div>
{:then component}
<svelte:component this={component.default} />
{:catch err}
<div>{JSON.stringify(err)}</div>
{/await}
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment