Handle whitespace inside #each with animation (#5477)

* Strip out whitespace inside each when it has an animation

* remove accidentally committed file

* lint

* add test to validate no error

* update changelog

Co-authored-by: Simon H <[email protected]>
Co-authored-by: tanhauhau <[email protected]>
Co-authored-by: Tan Li Hau <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Ignore whitespace in `{#each}` blocks when containing elements with `animate:` ([#5477](https://github.com/sveltejs/svelte/pull/5477))
+
 ## 3.46.2
 
 * Export `FlipParams` interface from `svelte/animate` ([#7103](https://github.com/sveltejs/svelte/issues/7103))

src/compiler/compile/nodes/EachBlock.ts

@@ -9,6 +9,7 @@ import { Node } from 'estree';
 import Component from '../Component';
 import { TemplateNode } from '../../interfaces';
 import compiler_errors from '../compiler_errors';
+import { INode } from './interfaces';
 import get_const_tags from './shared/get_const_tags';
 
 export default class EachBlock extends AbstractBlock {
@@ -62,6 +63,8 @@ export default class EachBlock extends AbstractBlock {
 		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
 
 		if (this.has_animation) {
+			this.children = this.children.filter(child => !isEmptyNode(child));
+
 			if (this.children.length !== 1) {
 				const child = this.children.find(child => !!(child as Element).animation);
 				component.error((child as Element).animation, compiler_errors.invalid_animation_sole);
@@ -76,3 +79,7 @@ export default class EachBlock extends AbstractBlock {
 			: null;
 	}
 }
+
+function isEmptyNode(node: INode) {
+	return node.type === 'Text' && node.data.trim() === '';
+}

test/validator/samples/animation-each-with-const/errors.json

@@ -0,0 +1 @@
+[]

test/validator/samples/animation-each-with-const/input.svelte

@@ -0,0 +1,10 @@
+<script>
+  function flip(){}
+</script>
+
+<div>
+  {#each [] as n (n)}
+    {@const a = n}
+    <div animate:flip={a} />
+  {/each}
+</div>

test/validator/samples/animation-each-with-whitespace/errors.json

@@ -0,0 +1 @@
+[]

test/validator/samples/animation-each-with-whitespace/input.svelte

@@ -0,0 +1,7 @@
+<script>
+	function flip() {}
+</script>
+
+<div>
+	{#each [] as n (n)} <div animate:flip /> {/each}
+</div>