From 47d07c3e25b0c0182d0f1d80af0d7cc736567bee Mon Sep 17 00:00:00 2001
From: Mathias Picker <mattis123@live.no>
Date: Fri, 23 Dec 2022 10:25:45 +0100
Subject: [PATCH] fixed double up initialization on svelte:element elements

---
 .../render_dom/wrappers/Element/index.ts      | 135 +++++++++---------
 .../svelte-element-event-handlers/expected.js | 125 ++++++++++++++++
 .../input.svelte                              |   3 +
 3 files changed, 198 insertions(+), 65 deletions(-)
 create mode 100644 test/js/samples/svelte-element-event-handlers/expected.js
 create mode 100644 test/js/samples/svelte-element-event-handlers/input.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 8d0429879e..30ca9a266d 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -169,8 +169,8 @@ export default class ElementWrapper extends Wrapper {
 		next_sibling: Wrapper
 	) {
 		super(renderer, block, parent, node);
-
-		if (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) {
+		const is_original_dynamic_element = node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK;
+		if (is_original_dynamic_element) {
 			this.child_dynamic_element_block = block.child({
 				comment: create_debugging_comment(node, renderer.component),
 				name: renderer.component.get_unique_name('create_dynamic_element'),
@@ -187,82 +187,87 @@ 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 = [];
-
-		if (this.node.children.length) {
-			this.node.lets.forEach(l => {
-				extract_names(l.value || l.name).forEach(name => {
-					renderer.add_to_context(name, true);
+		// 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 => {
+						renderer.add_to_context(name, true);
+					});
 				});
+			}
+
+			this.attributes = this.node.attributes.map(attribute => {
+				if (attribute.name === 'style') {
+					return new StyleAttributeWrapper(this, block, attribute);
+				}
+				if (attribute.type === 'Spread') {
+					return new SpreadAttributeWrapper(this, block, attribute);
+				}
+				return new AttributeWrapper(this, block, attribute);
 			});
-		}
 
-		this.attributes = this.node.attributes.map(attribute => {
-			if (attribute.name === 'style') {
-				return new StyleAttributeWrapper(this, block, attribute);
-			}
-			if (attribute.type === 'Spread') {
-				return new SpreadAttributeWrapper(this, block, attribute);
-			}
-			return new AttributeWrapper(this, block, attribute);
-		});
+			// ordinarily, there'll only be one... but we need to handle
+			// the rare case where an element can have multiple bindings,
+			// e.g. <audio bind:paused bind:currentTime>
+			this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this));
 
-		// ordinarily, there'll only be one... but we need to handle
-		// the rare case where an element can have multiple bindings,
-		// e.g. <audio bind:paused bind:currentTime>
-		this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this));
+			this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, this));
 
-		this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, this));
+			if (node.intro || node.outro) {
+				if (node.intro) block.add_intro(node.intro.is_local);
+				if (node.outro) block.add_outro(node.outro.is_local);
+			}
 
-		if (node.intro || node.outro) {
-			if (node.intro) block.add_intro(node.intro.is_local);
-			if (node.outro) block.add_outro(node.outro.is_local);
-		}
+			if (node.animation) {
+				block.add_animation();
+			}
 
-		if (node.animation) {
-			block.add_animation();
-		}
+			block.add_dependencies(node.tag_expr.dependencies);
 
-		block.add_dependencies(node.tag_expr.dependencies);
+			// add directive and handler dependencies
+			[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
+				if (directive && directive.expression) {
+					block.add_dependencies(directive.expression.dependencies);
+				}
+			});
 
-		// add directive and handler dependencies
-		[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
-			if (directive && directive.expression) {
-				block.add_dependencies(directive.expression.dependencies);
-			}
-		});
+			node.handlers.forEach(handler => {
+				if (handler.expression) {
+					block.add_dependencies(handler.expression.dependencies);
+				}
+			});
 
-		node.handlers.forEach(handler => {
-			if (handler.expression) {
-				block.add_dependencies(handler.expression.dependencies);
+			if (this.parent) {
+				if (node.actions.length > 0 ||
+					node.animation ||
+					node.bindings.length > 0 ||
+					node.classes.length > 0 ||
+					node.intro || node.outro ||
+					node.handlers.length > 0 ||
+					node.styles.length > 0 ||
+					this.node.name === 'option' ||
+					node.tag_expr.dynamic_dependencies().length ||
+					renderer.options.dev
+				) {
+					this.parent.cannot_use_innerhtml(); // need to use add_location
+					this.parent.not_static_content();
+				}
 			}
-		});
 
-		if (this.parent) {
-			if (node.actions.length > 0 ||
-				node.animation ||
-				node.bindings.length > 0 ||
-				node.classes.length > 0 ||
-				node.intro || node.outro ||
-				node.handlers.length > 0 ||
-				node.styles.length > 0 ||
-				this.node.name === 'option' ||
-				node.tag_expr.dynamic_dependencies().length ||
-				renderer.options.dev
-			) {
-				this.parent.cannot_use_innerhtml(); // need to use add_location
-				this.parent.not_static_content();
-			}
+			this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
 		}
-
-		this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
 	}
 
 	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
diff --git a/test/js/samples/svelte-element-event-handlers/expected.js b/test/js/samples/svelte-element-event-handlers/expected.js
new file mode 100644
index 0000000000..e25efb8388
--- /dev/null
+++ b/test/js/samples/svelte-element-event-handlers/expected.js
@@ -0,0 +1,125 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	assign,
+	bubble,
+	detach,
+	element,
+	empty,
+	get_spread_update,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_attributes,
+	set_custom_element_data_map
+} from "svelte/internal";
+
+function create_dynamic_element(ctx) {
+	let svelte_element;
+	let mounted;
+	let dispose;
+	let svelte_element_levels = [{ class: "some-classname" }];
+	let svelte_element_data = {};
+
+	for (let i = 0; i < svelte_element_levels.length; i += 1) {
+		svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);
+	}
+
+	return {
+		c() {
+			svelte_element = element("a");
+			svelte_element.textContent = "Hi";
+
+			if ((/-/).test("a")) {
+				set_custom_element_data_map(svelte_element, svelte_element_data);
+			} else {
+				set_attributes(svelte_element, svelte_element_data);
+			}
+		},
+		m(target, anchor) {
+			insert(target, svelte_element, anchor);
+
+			if (!mounted) {
+				dispose = listen(svelte_element, "keydown", /*keydown_handler*/ ctx[0]);
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			svelte_element_data = get_spread_update(svelte_element_levels, [{ class: "some-classname" }]);
+
+			if ((/-/).test("a")) {
+				set_custom_element_data_map(svelte_element, svelte_element_data);
+			} else {
+				set_attributes(svelte_element, svelte_element_data);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(svelte_element);
+			mounted = false;
+			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);
+	}
+
+	return [keydown_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/svelte-element-event-handlers/input.svelte b/test/js/samples/svelte-element-event-handlers/input.svelte
new file mode 100644
index 0000000000..72adb1d729
--- /dev/null
+++ b/test/js/samples/svelte-element-event-handlers/input.svelte
@@ -0,0 +1,3 @@
+<svelte:element class="some-classname" this="a" on:keydown>
+    Hi
+</svelte:element>
\ No newline at end of file