Merge pull request #1 from baseballyama/gh-7937-baseballyama

add optimization of static <svelte:element> and fix a bug

src/compiler/compile/nodes/Element.ts

@@ -239,6 +239,7 @@ export default class Element extends Node {
 				this.tag_expr = new Expression(component, this, scope, info.tag);
 			} else {
 				this.tag_expr = new Expression(component, this, scope, string_literal(info.tag) as Literal);
+				this.name = info.tag;
 			}
 		} else {
 			this.tag_expr = new Expression(component, this, scope, string_literal(this.name) as Literal);

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

@@ -255,6 +255,7 @@ export default class ElementWrapper extends Wrapper {
 				node.styles.length > 0 ||
 				this.node.name === 'option' ||
 				node.tag_expr.dynamic_dependencies().length ||
+				node.is_dynamic_element ||
 				renderer.options.dev
 			) {
 				this.parent.cannot_use_innerhtml(); // need to use add_location
@@ -1176,7 +1177,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 		} else if (wrapper.node.name === 'noscript') {
 			// do nothing
 		} else {
-			const nodeName = wrapper.node.name === 'svelte:element' && wrapper.node.tag_expr.node.type === 'Literal' ? wrapper.node.tag_expr.node.value : wrapper.node.name;
+			const nodeName = wrapper.node.name;
 
 			// element
 			state.quasi.value.raw += `<${nodeName}`;

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

@@ -18,7 +18,7 @@ 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">
+// (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;
@@ -38,8 +38,8 @@ function create_dynamic_element(ctx) {
 
 	return {
 		c() {
-			svelte_element1 = svg_element("svg");
-			svelte_element0 = svg_element("path");
+			svelte_element1 = svg_element(/*tag*/ ctx[0].svg);
+			svelte_element0 = svg_element(/*tag*/ ctx[0].path);
 			set_svg_attributes(svelte_element0, svelte_element0_data);
 			set_svg_attributes(svelte_element1, svelte_element1_data);
 		},
@@ -60,9 +60,9 @@ function create_dynamic_element(ctx) {
 }
 
 function create_fragment(ctx) {
-	let previous_tag = "svg";
+	let previous_tag = /*tag*/ ctx[0].svg;
 	let svelte_element1_anchor;
-	let svelte_element1 = "svg" && create_dynamic_element(ctx);
+	let svelte_element1 = /*tag*/ ctx[0].svg && create_dynamic_element(ctx);
 
 	return {
 		c() {
@@ -74,12 +74,12 @@ function create_fragment(ctx) {
 			insert(target, svelte_element1_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if ("svg") {
+			if (/*tag*/ ctx[0].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")) {
+				} else if (safe_not_equal(previous_tag, /*tag*/ ctx[0].svg)) {
 					svelte_element1.d(1);
 					svelte_element1 = create_dynamic_element(ctx);
 					svelte_element1.c();
@@ -92,7 +92,7 @@ function create_fragment(ctx) {
 				svelte_element1 = null;
 			}
 
-			previous_tag = "svg";
+			previous_tag = /*tag*/ ctx[0].svg;
 		},
 		i: noop,
 		o: noop,
@@ -103,10 +103,15 @@ function create_fragment(ctx) {
 	};
 }
 
+function instance($$self) {
+	const tag = { svg: 'svg', path: 'path' };
+	return [tag];
+}
+
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, create_fragment, safe_not_equal, {});
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

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

@@ -1,3 +1,7 @@
-<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>
+<script>
+	const tag = { svg: 'svg', path: 'path' };
+</script>
+
+<svelte:element this={tag.svg} xmlns="http://www.w3.org/2000/svg">
+	<svelte:element this={tag.path} xmlns="http://www.w3.org/2000/svg" />
+</svelte:element>

test/runtime/samples/static-svelte-element2/_config.js

@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<div>
+			<p></p>
+		</div>
+	`,
+
+	test({ assert, target }) {
+		const p = target.querySelector('p');
+
+		assert.notEqual(p, undefined);
+	}
+};

test/runtime/samples/static-svelte-element2/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	const p = 'p';
+</script>
+
+<div>
+	<svelte:element this={p} />
+</div>