From 5160b2bc15afdfe5f8681cb76142b2682cf515ff Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sat, 6 Nov 2021 12:49:42 +0900
Subject: [PATCH] support animation

---
 src/compiler/compile/compiler_errors.ts       |  4 --
 src/compiler/compile/nodes/Element.ts         | 11 ----
 .../animation-dynamic-element/_config.js      | 57 +++++++++++++++++++
 .../main.svelte                               |  8 +--
 .../_config.js                                |  3 -
 5 files changed, 60 insertions(+), 23 deletions(-)
 create mode 100644 test/runtime/samples/animation-dynamic-element/_config.js
 rename test/runtime/samples/{dynamic-element-animation-invalid => animation-dynamic-element}/main.svelte (72%)
 delete mode 100644 test/runtime/samples/dynamic-element-animation-invalid/_config.js

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index 463f6b27cf..b12bcd88cc 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -238,10 +238,6 @@ export default {
 		code: 'invalid-animation',
 		message: 'An element that uses the animate directive must be the sole child of a keyed each block'
 	},
-	invalid_animation_dynamic_element: {
-		code: 'invalid-animation',
-		message: '<svelte:element> cannot have a animate directive'
-	},
 	invalid_directive_value: {
 		code: 'invalid-directive-value',
 		message: 'Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)'
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 509ee5f462..b29382d20f 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -261,9 +261,6 @@ export default class Element extends Node {
 		this.scope = scope;
 		this.children = map_children(component, this, this.scope, info.children);
 
-		if (this.is_dynamic_element()) {
-			this.validate_dynamic_element(info);
-		}
 		this.validate();
 
 		this.optimise();
@@ -271,14 +268,6 @@ export default class Element extends Node {
 		component.apply_stylesheet(this);
 	}
 
-	validate_dynamic_element(info: TemplateNode) {
-		info.attributes.forEach(node => {
-			if (node.type === 'Animation') {
-				this.component.error(node, compiler_errors.invalid_animation_dynamic_element);
-			}
-		});
-	}
-
 	validate() {
 		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) {
 			this.component.warn(this, compiler_warnings.component_name_lowercase(this.name));
diff --git a/test/runtime/samples/animation-dynamic-element/_config.js b/test/runtime/samples/animation-dynamic-element/_config.js
new file mode 100644
index 0000000000..b80545de3a
--- /dev/null
+++ b/test/runtime/samples/animation-dynamic-element/_config.js
@@ -0,0 +1,57 @@
+export default {
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		]
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		let divs = target.querySelectorAll('div');
+		divs.forEach(div => {
+			div.getBoundingClientRect = function() {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = target.querySelectorAll('div');
+		assert.ok(~divs[0].style.animation.indexOf('__svelte'));
+		assert.equal(divs[1].style.animation, '');
+		assert.equal(divs[2].style.animation, '');
+		assert.equal(divs[3].style.animation, '');
+		assert.ok(~divs[4].style.animation.indexOf('__svelte'));
+
+		raf.tick(100);
+		assert.deepEqual([
+			divs[0].style.animation,
+			divs[4].style.animation
+		], ['', '']);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-animation-invalid/main.svelte b/test/runtime/samples/animation-dynamic-element/main.svelte
similarity index 72%
rename from test/runtime/samples/dynamic-element-animation-invalid/main.svelte
rename to test/runtime/samples/animation-dynamic-element/main.svelte
index 870d1b3cff..2b1b37b5b7 100644
--- a/test/runtime/samples/dynamic-element-animation-invalid/main.svelte
+++ b/test/runtime/samples/animation-dynamic-element/main.svelte
@@ -1,8 +1,6 @@
 <script>
-	let tag = 'div';
-	let things = [
-		{ id: 1, name: 'a' },
-	];
+	let tag = "div"
+	export let things;
 
 	function flip(node, animation, params) {
 		const dx = animation.from.left - animation.to.left;
@@ -16,5 +14,5 @@
 </script>
 
 {#each things as thing (thing.id)}
-	<svelte:element this={tag} animate:flip></svelte:element>
+	<svelte:element this={tag} animate:flip>{thing.name}</svelte:element>
 {/each}
diff --git a/test/runtime/samples/dynamic-element-animation-invalid/_config.js b/test/runtime/samples/dynamic-element-animation-invalid/_config.js
deleted file mode 100644
index a3b4e1f9d3..0000000000
--- a/test/runtime/samples/dynamic-element-animation-invalid/_config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-	error: '<svelte:element> cannot have a animate directive'
-};