From a86ec67d4142bd8d2c076284452b32f120e0eedf Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Wed, 3 Nov 2021 19:21:01 +0900
Subject: [PATCH] throw error if <svelte:element> uses animation

---
 src/compiler/compile/compiler_errors.ts       |  4 ++++
 src/compiler/compile/nodes/Element.ts         | 14 ++++++++++++-
 .../_config.js                                |  3 +++
 .../main.svelte                               | 20 +++++++++++++++++++
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/dynamic-element-animation-invalid/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-animation-invalid/main.svelte

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 d26cad8bb7..7632a204db 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -16,6 +16,7 @@ import list from '../../utils/list';
 import Let from './Let';
 import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
+import { TemplateNode } from '../../interfaces';
 import Component from '../Component';
 import Expression from './shared/Expression';
 import compiler_warnings from '../compiler_warnings';
@@ -134,7 +135,7 @@ export default class Element extends Node {
 	needs_manual_style_scoping: boolean;
 	dynamic_tag_expr?: Expression = null;
 
-	constructor(component: Component, parent: Node, scope: TemplateScope, info: any) {
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 		this.name = info.name;
 
@@ -251,6 +252,9 @@ export default class Element extends Node {
 		this.scope = scope;
 		this.children = map_children(component, this, this.scope, info.children);
 
+		if (this.dynamic_tag_expr) {
+			this.validate_dynamic_element(info);
+		}
 		this.validate();
 
 		this.optimise();
@@ -258,6 +262,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/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/dynamic-element-animation-invalid/main.svelte b/test/runtime/samples/dynamic-element-animation-invalid/main.svelte
new file mode 100644
index 0000000000..870d1b3cff
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-animation-invalid/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let tag = 'div';
+	let things = [
+		{ id: 1, name: 'a' },
+	];
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<svelte:element this={tag} animate:flip></svelte:element>
+{/each}