feat: enable animate directive for snippets

Author: Refzlund

documentation/docs/98-reference/.generated/compile-errors.md

@@ -9,7 +9,7 @@ An element can only have one 'animate' directive
 ### animation_invalid_placement
 
 ```
-An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
+An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block, or an only child of a snippet
 ```
 
 ### animation_missing_key

packages/svelte/messages/compile-errors/template.md

@@ -4,7 +4,7 @@
 
 ## animation_invalid_placement
 
-> An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
+> An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block, or an only child of a snippet
 
 ## animation_missing_key
 

packages/svelte/src/compiler/errors.js

@@ -625,12 +625,12 @@ export function animation_duplicate(node) {
 }
 
 /**
- * An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
+ * An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block, or an only child of a snippet
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function animation_invalid_placement(node) {
-	e(node, "animation_invalid_placement", `An element that uses the \`animate:\` directive must be the only child of a keyed \`{#each ...}\` block\nhttps://svelte.dev/e/animation_invalid_placement`);
+	e(node, "animation_invalid_placement", `An element that uses the \`animate:\` directive must be the only child of a keyed \`{#each ...}\` block, or an only child of a snippet\nhttps://svelte.dev/e/animation_invalid_placement`);
 }
 
 /**

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js

@@ -91,9 +91,9 @@ export function validate_element(node, context) {
 			validate_attribute_name(attribute);
 		} else if (attribute.type === 'AnimateDirective') {
 			const parent = context.path.at(-2);
-			if (parent?.type !== 'EachBlock') {
+			if (parent?.type !== 'EachBlock' && parent?.type !== 'SnippetBlock') {
 				e.animation_invalid_placement(attribute);
-			} else if (!parent.key) {
+			} else if (parent.type === 'EachBlock' && !parent.key) {
 				e.animation_missing_key(attribute);
 			} else if (
 				parent.body.nodes.filter(

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -276,14 +276,15 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
  * @returns {void}
  */
 function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, get_collection) {
-	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
 	var should_update = (flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0;
 
 	var length = array.length;
 	var items = state.items;
 	var first = state.first;
 	var current = first;
 
+	var is_animated = items.get(get_key(array[0], 0))?.a !== null;
+
 	/** @type {undefined | Set<EachItem>} */
 	var seen;
 

packages/svelte/tests/validator/samples/animation-not-in-each/errors.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "animation_invalid_placement",
-		"message": "An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block",
+		"message": "An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block, or an only child of a snippet",
 		"start": {
 			"line": 5,
 			"column": 5

packages/svelte/tests/validator/samples/animation-siblings/errors.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "animation_invalid_placement",
-		"message": "An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block",
+		"message": "An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block, or an only child of a snippet",
 		"start": {
 			"line": 6,
 			"column": 6