Merge branch 'master' into svelte-element-duplicate-event-handlers-fix

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 3.55.1 (unreleased)
 
 * add missing `submitter` property to `on:submit` event type
+* Fix static `<svelte:element>` optimization in production mode ([#7938](https://github.com/sveltejs/svelte/pull/7938))
 
 ## 3.55.0
 

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

@@ -261,6 +261,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
@@ -1181,10 +1182,12 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 		} else if (wrapper.node.name === 'noscript') {
 			// do nothing
 		} else {
+			const nodeName = wrapper.node.name;
+
 			// element
-			state.quasi.value.raw += `<${wrapper.node.name}`;
+			state.quasi.value.raw += `<${nodeName}`;
 
-			const is_empty_textarea = wrapper.node.name === 'textarea' && wrapper.fragment.nodes.length === 0;
+			const is_empty_textarea = nodeName === 'textarea' && wrapper.fragment.nodes.length === 0;
 
 			(wrapper as ElementWrapper).attributes.forEach((attr: AttributeWrapper) => {
 				if (is_empty_textarea && attr.node.name === 'value') {
@@ -1201,7 +1204,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 			if (!wrapper.void) {
 				state.quasi.value.raw += '>';
 
-				if (wrapper.node.name === 'pre') {
+				if (nodeName === 'pre') {
 					// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
 					// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
 					const first = wrapper.fragment.nodes[0];
@@ -1226,7 +1229,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 
 				to_html(wrapper.fragment.nodes as Array<ElementWrapper | TextWrapper>, block, literal, state);
 
-				state.quasi.value.raw += `</${wrapper.node.name}>`;
+				state.quasi.value.raw += `</${nodeName}>`;
 			} else {
 				state.quasi.value.raw += '/>';
 			}

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

@@ -1,3 +1,7 @@
-<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+<script>
-    <svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
+	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-element/_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-element/main.svelte

@@ -0,0 +1,3 @@
+<div>
+	<svelte:element this="p" />
+</div>

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>