[fix]: remove double up initialization on svelte:element (#8142)

* fixed double up initialization on svelte:element elements

* updated test and fixed bug

* update other svelte:element test

* removed whitespace

* refactor

* correctly update expected ouput resulting from #7938

* remove .solo

Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>

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

@@ -170,6 +170,15 @@ export default class ElementWrapper extends Wrapper {
 	) {
 		super(renderer, block, parent, node);
 
+		this.var = {
+			type: 'Identifier',
+			name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
+		};
+
+		this.void = is_void(node.name);
+
+		this.class_dependencies = [];
+
 		if (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) {
 			this.child_dynamic_element_block = block.child({
 				comment: create_debugging_comment(node, renderer.component),
@@ -185,16 +194,13 @@ export default class ElementWrapper extends Wrapper {
 				strip_whitespace,
 				next_sibling
 			);
-		}
 
-		this.var = {
+			// the original svelte:element is never used for rendering, because
-			type: 'Identifier',
+			// it gets assigned a child_dynamic_element which is used in all rendering logic.
-			name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
+			// 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.
-
+			return;
-		this.void = is_void(node.name);
+		}
-
-		this.class_dependencies = [];
 
 		if (this.node.children.length) {
 			this.node.lets.forEach(l => {
@@ -327,20 +333,19 @@ export default class ElementWrapper extends Wrapper {
 					${this.var}.p(#ctx, #dirty);
 				}
 			} else if (${previous_tag}) {
-				${
+				${has_transitions
-					has_transitions
+				? b`
-						? b`
 							@group_outros();
 							@transition_out(${this.var}, 1, 1, () => {
 								${this.var} = null;
 							});
 							@check_outros();
 						`
-						: b`
+				: b`
 							${this.var}.d(1);
 							${this.var} = null;
 						`
-				}
+			}
 			}
 			${previous_tag} = ${tag};
 		`);
@@ -682,9 +687,9 @@ export default class ElementWrapper extends Wrapper {
 			function ${handler}(${params}) {
 				${binding_group.bindings.map(b => b.handler.mutation)}
 				${Array.from(dependencies)
-					.filter(dep => dep[0] !== '$')
+				.filter(dep => dep[0] !== '$')
-					.filter(dep => !contextual_dependencies.has(dep))
+				.filter(dep => !contextual_dependencies.has(dep))
-					.map(dep => b`${this.renderer.invalidate(dep)};`)}
+				.map(dep => b`${this.renderer.invalidate(dep)};`)}
 			}
 		`);
 

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

@@ -0,0 +1,168 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	assign,
+	bubble,
+	detach,
+	element,
+	empty,
+	get_spread_update,
+	init,
+	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_element1;
+	let svelte_element0;
+	let mounted;
+	let dispose;
+	let svelte_element0_levels = [{ class: "inner" }];
+	let svelte_element0_data = {};
+
+	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_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_element1, svelte_element1_data);
+			} else {
+				set_attributes(svelte_element1, svelte_element1_data);
+			}
+		},
+		m(target, anchor) {
+			insert(target, svelte_element1, anchor);
+			append(svelte_element1, svelte_element0);
+
+			if (!mounted) {
+				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_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_element1, svelte_element1_data);
+			} else {
+				set_attributes(svelte_element1, svelte_element1_data);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(svelte_element1);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let previous_tag = "a";
+	let svelte_element_anchor;
+	let svelte_element = "a" && create_dynamic_element(ctx);
+
+	return {
+		c() {
+			if (svelte_element) svelte_element.c();
+			svelte_element_anchor = empty();
+		},
+		m(target, anchor) {
+			if (svelte_element) svelte_element.m(target, anchor);
+			insert(target, svelte_element_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if ("a") {
+				if (!previous_tag) {
+					svelte_element = create_dynamic_element(ctx);
+					svelte_element.c();
+					svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
+				} else if (safe_not_equal(previous_tag, "a")) {
+					svelte_element.d(1);
+					svelte_element = create_dynamic_element(ctx);
+					svelte_element.c();
+					svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
+				} else {
+					svelte_element.p(ctx, dirty);
+				}
+			} else if (previous_tag) {
+				svelte_element.d(1);
+				svelte_element = null;
+			}
+
+			previous_tag = "a";
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svelte_element_anchor);
+			if (svelte_element) svelte_element.d(detaching);
+		}
+	};
+}
+
+function instance($$self) {
+	function keydown_handler(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	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 {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;

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

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

test/js/samples/svelte-element-svg/expected.js

@@ -14,11 +14,6 @@ import {
 	svg_element
 } from "svelte/internal";
 
-function create_dynamic_element_1(ctx) {
-	return { c: noop, m: noop, p: noop, d: noop };
-}
-
-// (5:0) <svelte:element this={tag.svg} xmlns="http://www.w3.org/2000/svg">
 function create_dynamic_element(ctx) {
 	let svelte_element1;
 	let svelte_element0;
@@ -61,35 +56,35 @@ function create_dynamic_element(ctx) {
 
 function create_fragment(ctx) {
 	let previous_tag = /*tag*/ ctx[0].svg;
-	let svelte_element1_anchor;
+	let svelte_element_anchor;
-	let svelte_element1 = /*tag*/ ctx[0].svg && create_dynamic_element(ctx);
+	let svelte_element = /*tag*/ ctx[0].svg && create_dynamic_element(ctx);
 
 	return {
 		c() {
-			if (svelte_element1) svelte_element1.c();
+			if (svelte_element) svelte_element.c();
-			svelte_element1_anchor = empty();
+			svelte_element_anchor = empty();
 		},
 		m(target, anchor) {
-			if (svelte_element1) svelte_element1.m(target, anchor);
+			if (svelte_element) svelte_element.m(target, anchor);
-			insert(target, svelte_element1_anchor, anchor);
+			insert(target, svelte_element_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
 			if (/*tag*/ ctx[0].svg) {
 				if (!previous_tag) {
-					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element = create_dynamic_element(ctx);
-					svelte_element1.c();
+					svelte_element.c();
-					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+					svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
 				} else if (safe_not_equal(previous_tag, /*tag*/ ctx[0].svg)) {
-					svelte_element1.d(1);
+					svelte_element.d(1);
-					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element = create_dynamic_element(ctx);
-					svelte_element1.c();
+					svelte_element.c();
-					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+					svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
 				} else {
-					svelte_element1.p(ctx, dirty);
+					svelte_element.p(ctx, dirty);
 				}
 			} else if (previous_tag) {
-				svelte_element1.d(1);
+				svelte_element.d(1);
-				svelte_element1 = null;
+				svelte_element = null;
 			}
 
 			previous_tag = /*tag*/ ctx[0].svg;
@@ -97,8 +92,8 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(svelte_element1_anchor);
+			if (detaching) detach(svelte_element_anchor);
-			if (svelte_element1) svelte_element1.d(detaching);
+			if (svelte_element) svelte_element.d(detaching);
 		}
 	};
 }
@@ -115,4 +110,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
+export default Component;