Svelte 5: Avoiding {#snippet} boilerplate with the ability to pass parameters
#10678
Comments
katriellucas
changed the title
{#snippet} boilerplate with the ability to pass parameters.{#snippet} boilerplate with the ability to pass parameters
|
You can already trim this down by using But nevertheless an argument could be made for a |
That is correct for when you have only one children, what if you have two and need the label to be between then? What if you need three? A Card component that uses
|
|
What people have wanted elsewhere is the ability to decorate components. This feels like a use case for decorating snippets, i.e. take an existing snippet and return an augmented snippet. Maybe something like this (and similar for components). <script>
import { decorateSnippet } from 'svelte';
const decorated_foo = decorateSnippet(
foo,
(snippet /* the original snippet */, args /* the arguments passed to the snippet */) =>
snippet('my own argument; ignoring the args')
);
</script>
{#snippet foo(prop)}
..
{/snippet}
<Component foo={} /> |
|
That seems unnecessarily verbose for simple cases. <Chip label="Test" media={icon.bind('blue')} />Could be called something else, but given that snippets are declared like other functions, this would logically match (even if the generated arguments work differently); Svelte would need to override the existing |
|
To add to the discussion, here is another powerful pattern (in my opinion) that would be possible with Snippet parameter/bindings: Svelte 5 ReplThis case is even worse because I can't even use the nested PS: I'm not sure if I should have created a new issue for this, if so, please tell me. |
|
What's wrong with this? <script>
let { label, snippet, data } = $props()
</script>
<div class="chip">
{@render snippet(data)}
{label}
</div><Chip label="Test" />
<Chip label="Blue" snippet={icon} data="blue" />
<Chip label="Red" snippet={icon} />
<Chip label="Svelte" snippet={profile} />
<Chip label="Vue" snippet={profile} data="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" /> |
I would find a Example: REPL Right now this is needlessly complicated; at multiple levels the APIs need to be aware of snippet args. Effect that
|
|
I'm going to need a more convincing example I'm afraid — perhaps I'm being dense, but why wouldn't you just write -<svelte:options accessors />
<script context="module">
import { mount, unmount } from 'svelte';
- import { mountSnippet } from './MountSnippet.svelte';
import Dialog from './Dialog.svelte';
export function showModal(snippet, args) {
return new Promise(resolve => {
const dialog = mount(Dialog, {
target: document.body,
props: {
+ snippet,
+ args,
onclose(e) {
resolve(e.target.returnValue);
unmount(dialog);
}
}
});
- mountSnippet(dialog.ref, snippet, args); // hacky
- dialog.ref.showModal();
});
}
</script>
<script>
- let { ref, children, ...rest } = $props();
+ let { snippet, args, onclose } = $props();
+ function show(node) {
+ node.showModal();
+ }
</script>
-<dialog bind:this={ref} {...rest}>
- {@render children()}
+<dialog use:show {onclose}>
+ {@render snippet(args)}
</dialog>If you needed to also do Adding things like mount(App, {
target,
props: {
mySnippet: (firstname, lastname) {
const element = document.createElement('h1');
$effect.pre(() => {
element.textContent = `Hello ${firstname()} ${lastname()}!`;
});
return element;
}
}
});...and what challenges that would entail. (At the very least, we'd have to find a different solution to #10800.) |
It comes down to the points I listed at the start of my comment.
If you fear that the name could lead to confusion, a separate function could be used or a different name. E.g. snippet.withArgs(...args)
bindSnippet(snippet, ...args) // separate => not quite a "regular" bind |
You'll always need cooperation from the underlying It occurs to me that the Just A Function approach I sketched above doesn't really work, because of SSR. |
That still adds a lot of overhead and boilerplate. To use it, the snippet can only have one argument. It's really not great. Snippets being so much of a black box really limits their usefulness in code as soon as arguments are involved. I see a lot of unused potential here when it comes to more dynamic UI composition.
A utility function that just converts DOM elements/function returning DOM elements to a snippet could be useful. |
Describe the problem
As of now, if we want to pass a
Snippetas props to a component, it has to be without parameters, this is due to theSnippetprops expecting a snippet function to be passed. if we want parameters on ourSnippetfunction, it needs be nested inside the component as a child.This process can get boring and boilerplatey very quickly, specially with more complex cases were different kinds of
Snippetsare used inside components.Describe the proposed solution
Solution 1
It would be nice if Svelte let us pass parameters directly as props, using the example above, maybe:
or
or even
Personally, Option 2 feels more natural as this is how we already pass functions on Svelte 5 using events such as
onclick.Solution 2
Some kind of new sintax for such cases might be interesting to think about.
Solution 3
Do nothing. There is an argument on using
{#each}loops but it feels somewhat overkill for 3 or 4 components.Importance
would make my life easier
The text was updated successfully, but these errors were encountered: