How do I create a snippet out of another snippet?

[webJose]

I have a couple functions in a project at work that impersonate or stop impersonation of users. These are called from a couple of places, so I figured I wanted them centralized. DRY principle. The twist: The functions trigger user interface. Specifically, while the HTTP request takes place, an overlay appears on screen telling the user what's happening. I want this also encapsulated in the reusable module.

I decided to go the snippet route.

The whole thing is more convoluted than what I'll show, but basically there's a store that holds the piece of UI (the snippet) that the dev wants to show:

import { type Snippet } from "svelte";

export default new class {
    ui = $state<Snippet>();

    show(ui: Snippet) {
        this.ui = ui;
    }

    hide() {
        this.ui = undefined;
    }
};

An Overlay component reactively shows or hides based on this store's ui property.

The impersonate() function takes the user as parameter, simplified as a string below:

<script lang="ts" module>
    import overlayStore from './OverlayStore.svelte';

    export function impersonate(user: string) {
        overlayStore.show(_overlay(user)); // <-------- HERE.  How to do this?
    }
</script>

{#snippet _overlay(user?: string)}
    <div>
        {#if user}
            <span>Attempting to impersonate user &quot;{user}&quot;...</span>
        {:else}
            <span>Attempting to cancel impersonation...</span>
        {/if}
    </div>
{/snippet}

The code has a line with a comment that shows the problem: Evaluating the snippet does not produce a snippet assignable to Snippet.

In Svelte, snippets are functions that return an object with specific caracteristics. So my attempt was to use bind:

overlayStore.show(_overlay.bind(null, user)); // <-------- TypeScript error gone, but won't work.

The above, in runtime throws the error "user is not a function". This is probably because I'm binding the this pointer incorrectly.

Does anybody know how to do this?

What I'm trying to do is the snippet equivalent of () => someFunc(args): Create a parameterless snippet out of one with parameters.

[webJose]

UPDATE

Exchanging null with an object makes the user is not a function error go away. So I guess I just need to bind to an object that satisfies what the runtime wants as this.

@paoloricciuti may I trouble you for ideas? Or perhaps this would be a good feature request?

[brunnerh]

Issue already exists:

• Svelte 5: Avoiding {#snippet} boilerplate with the ability to pass parameters #10678

[webJose]

You are like the Google search for Svelte things, @brunnerh ! Awesome. Yes, it looks like that is what I'm after. Thanks for digging it up for me.