From 28b266511759a0ef9c94486e31cf79e1ce2b1162 Mon Sep 17 00:00:00 2001
From: baseballyama <xydybaseball@gmail.com>
Date: Sat, 13 Nov 2021 15:10:32 +0900
Subject: [PATCH] Revert "support animation"

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

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index b12bcd88cc..463f6b27cf 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -238,6 +238,10 @@ 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 71e4dc1792..5595ad4762 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -260,6 +260,9 @@ 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();
@@ -267,6 +270,14 @@ 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
deleted file mode 100644
index b80545de3a..0000000000
--- a/test/runtime/samples/animation-dynamic-element/_config.js
+++ /dev/null
@@ -1,57 +0,0 @@
-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/_config.js b/test/runtime/samples/dynamic-element-animation-invalid/_config.js
new file mode 100644
index 0000000000..a3b4e1f9d3
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-animation-invalid/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: '<svelte:element> cannot have a animate directive'
+};
diff --git a/test/runtime/samples/animation-dynamic-element/main.svelte b/test/runtime/samples/dynamic-element-animation-invalid/main.svelte
similarity index 72%
rename from test/runtime/samples/animation-dynamic-element/main.svelte
rename to test/runtime/samples/dynamic-element-animation-invalid/main.svelte
index 2b1b37b5b7..870d1b3cff 100644
--- a/test/runtime/samples/animation-dynamic-element/main.svelte
+++ b/test/runtime/samples/dynamic-element-animation-invalid/main.svelte
@@ -1,6 +1,8 @@
 <script>
-	let tag = "div"
-	export let things;
+	let tag = 'div';
+	let things = [
+		{ id: 1, name: 'a' },
+	];
 
 	function flip(node, animation, params) {
 		const dx = animation.from.left - animation.to.left;
@@ -14,5 +16,5 @@
 </script>
 
 {#each things as thing (thing.id)}
-	<svelte:element this={tag} animate:flip>{thing.name}</svelte:element>
+	<svelte:element this={tag} animate:flip></svelte:element>
 {/each}