From 9276f85768337c8eb4ba91c02a55271f24cb99a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henning=20Gro=C3=9F?=
 <57948036+henninggross@users.noreply.github.com>
Date: Tue, 12 Apr 2022 18:22:11 +0200
Subject: [PATCH] [feat] improve error message for animate used in a non-keyed
 each block (#6838)

* introdcued new compiler error

* making use of newly created compiler error

* updated test for animation not in keyed each

* removed unneeded conditions
---
 src/compiler/compile/compiler_errors.ts                    | 4 ++++
 src/compiler/compile/nodes/Animation.ts                    | 7 ++++++-
 .../samples/animation-not-in-keyed-each/errors.json        | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index a04780e375..3099e6cca1 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -242,6 +242,10 @@ export default {
 		code: 'invalid-animation',
 		message: 'An element that uses the animate directive must be the immediate child of a keyed each block'
 	},
+	invalid_animation_key: {
+		code: 'invalid-animation',
+		message: 'An element that uses the animate directive must be used inside a keyed each block. Did you forget to add a key to your each block?'
+	},
 	invalid_animation_sole: {
 		code: 'invalid-animation',
 		message: 'An element that uses the animate directive must be the sole child of a keyed each block'
diff --git a/src/compiler/compile/nodes/Animation.ts b/src/compiler/compile/nodes/Animation.ts
index 507aa1df04..c05a2d8669 100644
--- a/src/compiler/compile/nodes/Animation.ts
+++ b/src/compiler/compile/nodes/Animation.ts
@@ -26,12 +26,17 @@ export default class Animation extends Node {
 		}
 
 		const block = parent.parent;
-		if (!block || block.type !== 'EachBlock' || !block.key) {
+		if (!block || block.type !== 'EachBlock') {
 			// TODO can we relax the 'immediate child' rule?
 			component.error(this, compiler_errors.invalid_animation_immediate);
 			return;
 		}
 
+		if (!block.key) {
+			component.error(this, compiler_errors.invalid_animation_key);
+			return;
+		}
+
 		(block as EachBlock).has_animation = true;
 
 		this.expression = info.expression
diff --git a/test/validator/samples/animation-not-in-keyed-each/errors.json b/test/validator/samples/animation-not-in-keyed-each/errors.json
index 3e0b2d3c0c..a21579ce4f 100644
--- a/test/validator/samples/animation-not-in-keyed-each/errors.json
+++ b/test/validator/samples/animation-not-in-keyed-each/errors.json
@@ -1,6 +1,6 @@
 [{
 	"code": "invalid-animation",
-	"message": "An element that uses the animate directive must be the immediate child of a keyed each block",
+	"message": "An element that uses the animate directive must be used inside a keyed each block. Did you forget to add a key to your each block?",
 	"start": {
 		"line": 6,
 		"column": 6,