updated test and fixed bug

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -187,19 +187,20 @@ export default class ElementWrapper extends Wrapper {
 			);
 		}
 
+		this.var = {
+			type: 'Identifier',
+			name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
+		};
+
+		this.void = is_void(node.name);
+		
+		this.class_dependencies = [];
+
 		// the original svelte:element is never used for rendering, because
 		// it gets assigned a child_dynamic_element which is used in all rendering logic.
 		// so doing all of this on the original svelte:element will just cause double
 		// code, because it will be done again on the child_dynamic_element.
 		if (!is_original_dynamic_element) {
-			this.var = {
-				type: 'Identifier',
-				name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
-			};
-	
-			this.void = is_void(node.name);
-	
-			this.class_dependencies = [];
 			if (this.node.children.length) {
 				this.node.lets.forEach(l => {
 					extract_names(l.value || l.name).forEach(name => {
@@ -207,7 +208,7 @@ export default class ElementWrapper extends Wrapper {
 					});
 				});
 			}
-
+	
 			this.attributes = this.node.attributes.map(attribute => {
 				if (attribute.name === 'style') {
 					return new StyleAttributeWrapper(this, block, attribute);

test/js/samples/svelte-element-event-handlers/expected.js

@@ -1,6 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	append,
 	assign,
 	bubble,
 	detach,
@@ -11,54 +12,84 @@ import {
 	insert,
 	listen,
 	noop,
+	run_all,
 	safe_not_equal,
 	set_attributes,
 	set_custom_element_data_map
 } from "svelte/internal";
 
 function create_dynamic_element(ctx) {
-	let svelte_element;
+	let svelte_element1;
+	let svelte_element0;
 	let mounted;
 	let dispose;
-	let svelte_element_levels = [{ class: "some-classname" }];
-	let svelte_element_data = {};
+	let svelte_element0_levels = [{ class: "inner" }];
+	let svelte_element0_data = {};
 
-	for (let i = 0; i < svelte_element_levels.length; i += 1) {
-		svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);
+	for (let i = 0; i < svelte_element0_levels.length; i += 1) {
+		svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]);
+	}
+
+	let svelte_element1_levels = [{ class: "outer" }];
+	let svelte_element1_data = {};
+
+	for (let i = 0; i < svelte_element1_levels.length; i += 1) {
+		svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]);
 	}
 
 	return {
 		c() {
-			svelte_element = element("a");
-			svelte_element.textContent = "Hi";
+			svelte_element1 = element("a");
+			svelte_element0 = element("span");
+
+			if ((/-/).test("span")) {
+				set_custom_element_data_map(svelte_element0, svelte_element0_data);
+			} else {
+				set_attributes(svelte_element0, svelte_element0_data);
+			}
 
 			if ((/-/).test("a")) {
-				set_custom_element_data_map(svelte_element, svelte_element_data);
+				set_custom_element_data_map(svelte_element1, svelte_element1_data);
 			} else {
-				set_attributes(svelte_element, svelte_element_data);
+				set_attributes(svelte_element1, svelte_element1_data);
 			}
 		},
 		m(target, anchor) {
-			insert(target, svelte_element, anchor);
+			insert(target, svelte_element1, anchor);
+			append(svelte_element1, svelte_element0);
 
 			if (!mounted) {
-				dispose = listen(svelte_element, "keydown", /*keydown_handler*/ ctx[0]);
+				dispose = [
+					listen(svelte_element0, "keydown", /*keydown_handler_1*/ ctx[2]),
+					listen(svelte_element0, "keyup", /*keyup_handler_1*/ ctx[3]),
+					listen(svelte_element1, "keydown", /*keydown_handler*/ ctx[0]),
+					listen(svelte_element1, "keyup", /*keyup_handler*/ ctx[1])
+				];
+
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			svelte_element_data = get_spread_update(svelte_element_levels, [{ class: "some-classname" }]);
+			svelte_element0_data = get_spread_update(svelte_element0_levels, [{ class: "inner" }]);
+
+			if ((/-/).test("span")) {
+				set_custom_element_data_map(svelte_element0, svelte_element0_data);
+			} else {
+				set_attributes(svelte_element0, svelte_element0_data);
+			}
+
+			svelte_element1_data = get_spread_update(svelte_element1_levels, [{ class: "outer" }]);
 
 			if ((/-/).test("a")) {
-				set_custom_element_data_map(svelte_element, svelte_element_data);
+				set_custom_element_data_map(svelte_element1, svelte_element1_data);
 			} else {
-				set_attributes(svelte_element, svelte_element_data);
+				set_attributes(svelte_element1, svelte_element1_data);
 			}
 		},
 		d(detaching) {
-			if (detaching) detach(svelte_element);
+			if (detaching) detach(svelte_element1);
 			mounted = false;
-			dispose();
+			run_all(dispose);
 		}
 	};
 }
@@ -112,7 +143,19 @@ function instance($$self) {
 		bubble.call(this, $$self, event);
 	}
 
-	return [keydown_handler];
+	function keyup_handler(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	function keydown_handler_1(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	function keyup_handler_1(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	return [keydown_handler, keyup_handler, keydown_handler_1, keyup_handler_1];
 }
 
 class Component extends SvelteComponent {

test/js/samples/svelte-element-event-handlers/input.svelte

@@ -1,3 +1,3 @@
-<svelte:element class="some-classname" this="a" on:keydown>
-    Hi
+<svelte:element class="outer" this="a" on:keydown on:keyup>
+    <svelte:element class="inner" this="span" on:keydown on:keyup></svelte:element>
 </svelte:element>