Using loaders with Svelte CSF

[brendan-morin]

Summary

I have a svelte CSF and it's not clear how I'd use loaders in it. For example, this component requires a file that I'd like to fetch and generate:

<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import AddMediaDialog from "$lib/components/page/product/add-media-dialog/add-media-dialog.svelte";
    import { type ComponentProps } from "svelte";

    async function getTestFile() {
        const response = await fetch("https://placehold.co/600x600?text=Product+A");
        const buffer = await response.arrayBuffer();
        return new File([buffer], "test.jpg", { type: "image/jpg" });
    }

    const { Story } = defineMeta({
        loaders: [
            async () => ({
                file: await getTestFile(),
            }),
        ],
        args: {
            productId: 1,
            // TODO: file should be passed as an arg to the component somehow
        },
        component: AddMediaDialog,
        render: template,
    });

    let open = $state(true);
</script>

{#snippet template(args: ComponentProps<typeof AddMediaDialog>)}
    <button onclick={() => (open = true)}>open</button>
    <AddMediaDialog {...args} bind:open />
{/snippet}

<Story name="Default" />

The main issue I am running into is it's not clear to me how I'd actually pass/access the loader inside my args or template. Any advise would be appreciated - thanks!

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

You can access loader results in Svelte CSF stories by using the second argument to your template function, which contains a loaded property. To pass the file from your loader to your component, update your template like this:

{#snippet template(args, { loaded: { file } })}
  <button onclick={() => (open = true)}>open</button>
  <AddMediaDialog {...args} file={file} bind:open />
{/snippet}

Or, if you want to spread all loader results as props:

{#snippet template(args, { loaded })}
  <button onclick={() => (open = true)}>open</button>
  <AddMediaDialog {...args} {...loaded} bind:open />
{/snippet}

This pattern is documented in the official Storybook Svelte CSF examples and works for async data like files returned from loaders. Loader data is not merged into args automatically; you need to access it via the loaded argument and pass it explicitly to your component props. See the official example here.

No Svelte-specific caveats were found—this approach should work as expected. If you run into issues, please share a minimal reproduction.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}