feat: enable animate: directive for snippets

[Refzlund]

This would solve #14792 which still needs to be discussed. I'm opening this PR as an initiative.

This feature allows the use of the animate: directive within snippets:

{#snippet example(item)}
    <div animate:flip={{ duration: 200 }}>{item}</div>
{/snippet}

{#each items as item (item)}
    {@render example(item)}
{/each}

I've added error feedback:

• If you try to render a snippet with animate: directive and
  • it isn't inside an each-block
  • the each-block isn't keyed
• If the each-block have multiple children, with an animated snippet.

Svelte Playground for #14796

---

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.
• If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 10c01bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Rich-Harris]

preview: https://svelte-dev-git-preview-svelte-14796-svelte.vercel.app/

this is an automated message

[Refzlund]

This function is used twice as it is also in phases/3-transform/client/visitors/EachBlock.js#L347. Do I put it anywhere to re-use it across the two phases?

[Refzlund]

Same logic as in phases/2-analyze/visitors/shared/element.js#L92. Maybe re-use logic for consistent maintainence for future updates to this logic?

[Refzlund]

For this PR, if an each loop snippet gets exported from a file, and then imported into another file, animations won't work. I'll try looking into it🦒

For instance, if you have a file, e.g. ArraySnippet.svelte

<script module lang='ts'>

	export { renderArray }

</script>

{#snippet renderArray(array, snippet)}
	{#each array as item, i (item)}
		{@render snippet(item)}
	{/each}
{/snippet}

And then render this each-loop in Main.svelte

<script>
    import { renderArray } from './ArraySnippet.svelte'

    let array = $state([ 'a', 'b', 'c', 'd', 'e', 'f', 'g' ])
    
    function randomOrder() {
        array.sort((a,b) => Math.random() > 0.5)
    }
</script>

<button onclick={randomOrder}> Randomize order </button>

<#snippet itemSnippet(value)>
   <div animate:flip> {value} </div>
</snippet

{@render renderArray(array, itemSnippet)}