Revert "support animation"

This reverts commit 5160b2bc15.

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]`)'

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));

test/runtime/samples/animation-dynamic-element/_config.js

@@ -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
-		], ['', '']);
-	}
-};

test/runtime/samples/dynamic-element-animation-invalid/_config.js

@@ -0,0 +1,3 @@
+export default {
+	error: '<svelte:element> cannot have a animate directive'
+};

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}