feat: enable animate: directive for snippets

.changeset/sixty-grapes-dream.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: enable `animate:` directive for snippets

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/RenderTag.js

@@ -27,9 +27,13 @@ export function RenderTag(node, context) {
  */
 let resolved = callee.type === 'Identifier' && is_resolved_snippet(binding);
 
+/** @type {AST.SnippetBlock | undefined} */
+let snippet;
+
 if (binding?.initial?.type === 'SnippetBlock') {
 // if this render tag unambiguously references a local snippet, our job is easy
-node.metadata.snippets.add(binding.initial);
+snippet = binding.initial;
+node.metadata.snippets.add(snippet);
 }
 
 context.state.analysis.snippet_renderers.set(node, resolved);
@@ -50,7 +54,44 @@ export function RenderTag(node, context) {
 e.render_tag_invalid_call_expression(node);
 }
 
+const parent = context.path.at(-2);
+const is_animated = snippet?.body.nodes.some((n) => is_animate_directive(n));
+
+if (is_animated) {
+if (parent?.type !== 'EachBlock') {
+e.animation_invalid_placement(node);
+} else if (!parent.key) {
+e.animation_missing_key(parent);
+} else if (
+parent.body.nodes.filter(
+(n) =>
+n.type !== 'Comment' &&
+n.type !== 'ConstTag' &&
+(n.type !== 'Text' || n.data.trim() !== '')
+).length > 1
+) {
+e.animation_invalid_placement(node);
+}
+}
+
 mark_subtree_dynamic(context.path);
 
 context.next({ ...context.state, render_tag: node });
 }
+
+/**
+ * @param {AST.Text | AST.Tag | AST.ElementLike | AST.Comment | AST.Block} child
+ * @param {boolean} render_snippet
+ * @returns {boolean}
+ */
+function is_animate_directive(child, render_snippet = false) {
+if (child.type === 'RenderTag') {
+if (render_snippet) return false; // Prevent infinite recursion
+for (const snippet_block of child.metadata.snippets) {
+if (snippet_block.body.nodes.includes(child)) break;
+return snippet_block.body.nodes.some((n) => is_animate_directive(n, true));
+}
+}
+if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
+return child.attributes.some((attr) => attr.type === 'AnimateDirective');
+}

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/compiler/phases/3-transform/client/visitors/EachBlock.js

@@ -83,13 +83,7 @@ export function EachBlock(node, context) {
 // Since `animate:` can only appear on elements that are the sole child of a keyed each block,
 // we can determine at compile time whether the each block is animated or not (in which
 // case it should measure animated elements before and after reconciliation).
-if (
-node.key &&
-node.body.nodes.some((child) => {
-if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
-return child.attributes.some((attr) => attr.type === 'AnimateDirective');
-})
-) {
+if (node.key && node.body.nodes.some(is_animate_directive)) {
 flags |= EACH_IS_ANIMATED;
 }
 
@@ -348,3 +342,14 @@ function collect_transitive_dependencies(binding, seen = new Set()) {
 
 return [...seen];
 }
+
+/** @param {AST.Text | AST.Tag | AST.ElementLike | AST.Comment | AST.Block} child */
+function is_animate_directive(child) {
+if (child.type === 'RenderTag') {
+for (const snippet_block of child.metadata.snippets) {
+return snippet_block.body.nodes.some(is_animate_directive);
+}
+}
+if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
+return child.attributes.some((attr) => attr.type === 'AnimateDirective');
+}

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