From 6ec8ecf7999ad74ce8cf735a98adca630f9de105 Mon Sep 17 00:00:00 2001
From: Mathias Picker <48158184+MathiasWP@users.noreply.github.com>
Date: Sun, 11 Sep 2022 21:22:17 +0200
Subject: [PATCH] [fix] render of svg elements when using svelte:element
 (#7695)

* fixed render statement for svg when using  svelte:element

* removed unecessary stuff in test
---
 .../render_dom/wrappers/Element/index.ts      |   4 +-
 .../js/samples/svelte-element-svg/expected.js | 111 ++++++++++++++++++
 .../samples/svelte-element-svg/input.svelte   |   3 +
 3 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 test/js/samples/svelte-element-svg/expected.js
 create mode 100644 test/js/samples/svelte-element-svg/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 8e8e0d6706..531208c476 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -504,9 +504,10 @@ export default class ElementWrapper extends Wrapper {
 
 	get_render_statement(block: Block) {
 		const { name, namespace, tag_expr } = this.node;
+		const reference = tag_expr.manipulate(block);
 
 		if (namespace === namespaces.svg) {
-			return x`@svg_element("${name}")`;
+			return x`@svg_element(${reference})`;
 		}
 
 		if (namespace) {
@@ -518,7 +519,6 @@ export default class ElementWrapper extends Wrapper {
 			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
 		}
 
-		const reference = tag_expr.manipulate(block);
 		return x`@element(${reference})`;
 	}
 
diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js
new file mode 100644
index 0000000000..f9ca24ff30
--- /dev/null
+++ b/test/js/samples/svelte-element-svg/expected.js
@@ -0,0 +1,111 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	assign,
+	detach,
+	empty,
+	get_spread_update,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_svg_attributes,
+	svg_element
+} from "svelte/internal";
+
+function create_dynamic_element_1(ctx) {
+	return { c: noop, m: noop, p: noop, d: noop };
+}
+
+// (1:0) <svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+function create_dynamic_element(ctx) {
+	let svelte_element1;
+	let svelte_element0;
+	let svelte_element0_levels = [{ xmlns: "http://www.w3.org/2000/svg" }];
+	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 = [{ xmlns: "http://www.w3.org/2000/svg" }];
+	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 = svg_element("svg");
+			svelte_element0 = svg_element("path");
+			set_svg_attributes(svelte_element0, svelte_element0_data);
+			set_svg_attributes(svelte_element1, svelte_element1_data);
+		},
+		m(target, anchor) {
+			insert(target, svelte_element1, anchor);
+			append(svelte_element1, svelte_element0);
+		},
+		p(ctx, dirty) {
+			set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+			set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+		},
+		d(detaching) {
+			if (detaching) detach(svelte_element1);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let previous_tag = "svg";
+	let svelte_element1_anchor;
+	let svelte_element1 = "svg" && create_dynamic_element(ctx);
+
+	return {
+		c() {
+			if (svelte_element1) svelte_element1.c();
+			svelte_element1_anchor = empty();
+		},
+		m(target, anchor) {
+			if (svelte_element1) svelte_element1.m(target, anchor);
+			insert(target, svelte_element1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if ("svg") {
+				if (!previous_tag) {
+					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element1.c();
+					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+				} else if (safe_not_equal(previous_tag, "svg")) {
+					svelte_element1.d(1);
+					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element1.c();
+					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+				} else {
+					svelte_element1.p(ctx, dirty);
+				}
+			} else if (previous_tag) {
+				svelte_element1.d(1);
+				svelte_element1 = null;
+			}
+
+			previous_tag = "svg";
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svelte_element1_anchor);
+			if (svelte_element1) svelte_element1.d(detaching);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/svelte-element-svg/input.svelte b/test/js/samples/svelte-element-svg/input.svelte
new file mode 100644
index 0000000000..2dc4d54814
--- /dev/null
+++ b/test/js/samples/svelte-element-svg/input.svelte
@@ -0,0 +1,3 @@
+<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+    <svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
+</svelte:element>
\ No newline at end of file