From a4e4027f794dad93bcd6ffd74c1a19a9ce9ef6ac Mon Sep 17 00:00:00 2001
From: Andreas Ehrencrona <andreas.ehrencrona@velik.it>
Date: Sat, 15 Jan 2022 04:47:02 +0100
Subject: [PATCH] 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 <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com>
---
 CHANGELOG.md                                           |  4 ++++
 src/compiler/compile/nodes/EachBlock.ts                |  7 +++++++
 .../samples/animation-each-with-const/errors.json      |  1 +
 .../samples/animation-each-with-const/input.svelte     | 10 ++++++++++
 .../samples/animation-each-with-whitespace/errors.json |  1 +
 .../animation-each-with-whitespace/input.svelte        |  7 +++++++
 6 files changed, 30 insertions(+)
 create mode 100644 test/validator/samples/animation-each-with-const/errors.json
 create mode 100644 test/validator/samples/animation-each-with-const/input.svelte
 create mode 100644 test/validator/samples/animation-each-with-whitespace/errors.json
 create mode 100644 test/validator/samples/animation-each-with-whitespace/input.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 426c35b84f..4df49ecc77 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index e1e3107d92..bb78845dd9 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/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() === '';
+}
diff --git a/test/validator/samples/animation-each-with-const/errors.json b/test/validator/samples/animation-each-with-const/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/animation-each-with-const/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/animation-each-with-const/input.svelte b/test/validator/samples/animation-each-with-const/input.svelte
new file mode 100644
index 0000000000..1e236de76f
--- /dev/null
+++ b/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>
diff --git a/test/validator/samples/animation-each-with-whitespace/errors.json b/test/validator/samples/animation-each-with-whitespace/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/animation-each-with-whitespace/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/animation-each-with-whitespace/input.svelte b/test/validator/samples/animation-each-with-whitespace/input.svelte
new file mode 100644
index 0000000000..3e063716ab
--- /dev/null
+++ b/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>