-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Open
Labels
Description
Describe the problem
This is currently not allowed:
{#snippet test(item)}
<div animate:flip>{item}</div>
{/snippet}
{#each arr as item (item)}
{@render test(item)}
{/each}This would be useful if you for instance, make a snippet that renders a list of items;
{#snippet test(item)}
<div animate:flip>{item}</div>
{/snippet}
{#snippet list(array, itemSnippet)}
{#each arr as item (item)}
{@render itemSnippet(item)}
{/each}
{/snippet}
{@render list(arr, test)}As a practical example; I'm working on a drag-and-drop library runic-reorder which utilises above strategy.
This way of working with snippets expands the ease of use for design choices when creating a library.
I bring this up, as I noticed on Svelte Playground that snippets are a lot like regular elements, and attaching $.animation(div_1, () => flip, null); within a snippet might be feasable🙏
Describe the proposed solution
{#snippet test(item)}
<div animate:flip>{item}</div>
{/snippet}
{#each arr as item (item)}
{@render itemSnippet(item)}
{/each}or in compiled version words
// snippet
const test = ($$anchor, item = $.noop) => {
var div = root_1();
var text = $.child(div, true);
$.reset(div);
$.template_effect(() => $.set_text(text, item()));
$.animation(div, () => flip, null); // this
$.append($$anchor, div);
};Importance
would make my life easier
machak and singlyfy