prevent to create element if value of this attribute is null / undefined / empty string.

Author: baseballyama

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

@@ -274,31 +274,36 @@ export default class ElementWrapper extends Wrapper {
 		block.add_variable(previous_tag, snippet);
 
 		block.chunks.init.push(b`
-			let ${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
+			let ${this.var} = ${snippet} && ${this.child_dynamic_element_block.name}(#ctx);
 		`);
 
-		block.chunks.create.push(b`${this.var}.c();`);
+		block.chunks.create.push(b`if (${this.var}) ${this.var}.c();`);
 
 		if (this.renderer.options.hydratable) {
-			block.chunks.claim.push(b`${this.var}.l(${parent_nodes});`);
+			block.chunks.claim.push(b`if (${this.var}) ${this.var}.l(${parent_nodes});`);
 		}
 
 		block.chunks.mount.push(
-			b`${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`
+			b`if (${this.var}) ${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`
 		);
 
 		const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
 		const not_equal = this.renderer.component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`;
 		const if_statement = x`${not_equal}(${previous_tag}, ${previous_tag} = ${snippet})`;
 
 		block.chunks.update.unshift(b`
-			${this.var}.p(#ctx, #dirty);
-			if (${if_statement}) {
+		  if (${snippet}) {
+				if (${this.var}) ${this.var}.p(#ctx, #dirty);
+				if (${if_statement}) {
+					if (${this.var}) ${this.var}.d(1);
+					${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
+					${this.var}.c();
+					@transition_in(${this.var});
+					this.m(${this.get_update_mount_node(anchor)}, ${anchor});
+				}
+			} else if (${this.var}) {
 				${this.var}.d(1);
-				${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
-				${this.var}.c();
-				@transition_in(${this.var});
-				this.m(${this.get_update_mount_node(anchor)}, ${anchor});
+				${this.var} = null;
 			}
 		`);
 
@@ -310,7 +315,15 @@ export default class ElementWrapper extends Wrapper {
 			block.chunks.outro.push(b`@transition_out(${this.var});`);
 		}
 
-		block.chunks.destroy.push(b`${this.var}.d(detaching)`);
+		block.chunks.destroy.push(b`if (${this.var}) ${this.var}.d(detaching)`);
+
+		if (this.renderer.options.dev) {
+			block.chunks.create.push(b`@validate_dynamic_element(${snippet});`);
+			if (this.renderer.options.hydratable) {
+				block.chunks.claim.push(b`@validate_dynamic_element(${snippet});`);
+			}
+			block.chunks.update.push(b`@validate_dynamic_element(${snippet});`);
+		}
 	}
 
 	render_element(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
@@ -442,15 +455,6 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		block.renderer.dirty(this.node.tag_expr.dynamic_dependencies());
-		if (block.type === 'child_dynamic_element' && this.node.tag_expr.dependencies.size > 0) {
-			const snippet = this.node.tag_expr.manipulate(block);
-			if (this.renderer.options.dev) {
-				block.chunks.create.push(b`@validate_dynamic_element(${snippet});`);
-				if (renderer.options.hydratable) {
-					block.chunks.claim.push(b`@validate_dynamic_element(${snippet});`);
-				}
-			}
-		}
 	}
 
 	can_use_textcontent() {

src/runtime/internal/dev.ts

@@ -108,7 +108,7 @@ export function validate_slots(name, slot, keys) {
 }
 
 export function validate_dynamic_element(tag) {
-	if (tag == null) {
+	if (!tag) {
 		console.warn('<svelte:element> expects a non-nullish value in attribute "this"');
 	}
 }

test/runtime/samples/dev-warning-dynamic-element-nullish-tag/_config.js renamed to test/runtime/samples/dev-warning-dynamic-element-empty-tag/_config.js

@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		'<svelte:element> expects a non-nullish value in attribute "this"'
+	]
+};

test/runtime/samples/dev-warning-dynamic-element-nullish-tag/main.svelte renamed to test/runtime/samples/dev-warning-dynamic-element-empty-tag/main.svelte

@@ -0,0 +1,5 @@
+<script>
+  let tag = '';
+</script>
+
+<svelte:element this={tag}></svelte:element>

test/runtime/samples/dev-warning-dynamic-element-null-tag/_config.js

@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		'<svelte:element> expects a non-nullish value in attribute "this"'
+	]
+};

test/runtime/samples/dev-warning-dynamic-element-null-tag/main.svelte

@@ -0,0 +1,5 @@
+<script>
+  let tag;
+</script>
+
+<svelte:element this={tag}></svelte:element>

test/runtime/samples/dev-warning-dynamic-element-undefined-tag/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: ''
+};

test/runtime/samples/dev-warning-dynamic-element-undefined-tag/main.svelte

@@ -0,0 +1,5 @@
+<script>
+  let tag = '';
+</script>
+
+<svelte:element this={tag}>Foo</svelte:element>