Merge pull request #3518 from sveltejs/gh-3505

fix code generation for if-else with static conditions

src/compiler/compile/render_dom/wrappers/IfBlock.ts

@@ -74,6 +74,7 @@ class IfBlockBranch extends Wrapper {
 export default class IfBlockWrapper extends Wrapper {
 	node: IfBlock;
 	branches: IfBlockBranch[];
+	needs_update = false;
 
 	var = 'if_block';
 
@@ -112,10 +113,16 @@ export default class IfBlockWrapper extends Wrapper {
 			block.add_dependencies(node.expression.dependencies);
 
 			if (branch.block.dependencies.size > 0) {
+				// the condition, or its contents, is dynamic
 				is_dynamic = true;
 				block.add_dependencies(branch.block.dependencies);
 			}
 
+			if (branch.dependencies && branch.dependencies.length > 0) {
+				// the condition itself is dynamic
+				this.needs_update = true;
+			}
+
 			if (branch.block.has_intros) has_intros = true;
 			if (branch.block.has_outros) has_outros = true;
 
@@ -239,15 +246,29 @@ export default class IfBlockWrapper extends Wrapper {
 		const current_block_type_and = has_else ? '' : `${current_block_type} && `;
 
 		/* eslint-disable @typescript-eslint/indent,indent */
+		if (this.needs_update) {
 			block.builders.init.add_block(deindent`
 				function ${select_block_type}(changed, ctx) {
 					${this.branches.map(({ dependencies, condition, snippet, block }) => condition
 					? deindent`
-				${snippet && `if ((${condition} == null) || ${dependencies.map(n => `changed.${n}`).join(' || ')}) ${condition} = !!(${snippet})`}
+					${snippet && (
+						dependencies.length > 0
+							? `if ((${condition} == null) || ${dependencies.map(n => `changed.${n}`).join(' || ')}) ${condition} = !!(${snippet})`
+							: `if (${condition} == null) ${condition} = !!(${snippet})`
+					)}
 					if (${condition}) return ${block.name};`
 					: `return ${block.name};`)}
 				}
 			`);
+		} else {
+			block.builders.init.add_block(deindent`
+				function ${select_block_type}(changed, ctx) {
+					${this.branches.map(({ condition, snippet, block }) => condition
+					? `if (${snippet || condition}) return ${block.name};`
+					: `return ${block.name};`)}
+				}
+			`);
+		}
 		/* eslint-enable @typescript-eslint/indent,indent */
 
 		block.builders.init.add_block(deindent`
@@ -261,6 +282,7 @@ export default class IfBlockWrapper extends Wrapper {
 			`${if_name}${name}.m(${initial_mount_node}, ${anchor_node});`
 		);
 
+		if (this.needs_update) {
 			const update_mount_node = this.get_update_mount_node(anchor);
 
 			const change_block = deindent`
@@ -288,6 +310,9 @@ export default class IfBlockWrapper extends Wrapper {
 					}
 				`);
 			}
+		} else if (dynamic) {
+			block.builders.update.add_line(`${name}.p(changed, ctx);`);
+		}
 
 		block.builders.destroy.add_line(`${if_name}${name}.d(${detaching});`);
 	}
@@ -323,6 +348,8 @@ export default class IfBlockWrapper extends Wrapper {
 
 			var ${if_blocks} = [];
 
+			${this.needs_update
+				? deindent`
 					function ${select_block_type}(changed, ctx) {
 						${this.branches.map(({ dependencies, condition, snippet }, i) => condition
 						? deindent`
@@ -331,6 +358,15 @@ export default class IfBlockWrapper extends Wrapper {
 						: `return ${i};`)}
 						${!has_else && `return -1;`}
 					}
+				`
+				: deindent`
+					function ${select_block_type}(changed, ctx) {
+						${this.branches.map(({ condition, snippet }, i) => condition
+						? `if (${snippet || condition}) return ${String(i)};`
+						: `return ${i};`)}
+						${!has_else && `return -1;`}
+					}
+				`}
 		`);
 		/* eslint-enable @typescript-eslint/indent,indent */
 
@@ -354,6 +390,7 @@ export default class IfBlockWrapper extends Wrapper {
 			`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].m(${initial_mount_node}, ${anchor_node});`
 		);
 
+		if (this.needs_update) {
 			const update_mount_node = this.get_update_mount_node(anchor);
 
 			const destroy_old_block = deindent`
@@ -411,6 +448,9 @@ export default class IfBlockWrapper extends Wrapper {
 					}
 				`);
 			}
+		} else if (dynamic) {
+			block.builders.update.add_line(`${name}.p(changed, ctx);`);
+		}
 
 		block.builders.destroy.add_line(deindent`
 			${if_current_block_type_index}${if_blocks}[${current_block_type_index}].d(${detaching});

test/runtime/samples/if-block-static-with-else-and-outros/EEE.svelte

@@ -0,0 +1 @@
+eee

test/runtime/samples/if-block-static-with-else-and-outros/RRR.svelte

@@ -0,0 +1 @@
+rrr

test/runtime/samples/if-block-static-with-else-and-outros/_config.js

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

test/runtime/samples/if-block-static-with-else-and-outros/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import EEE from './EEE.svelte';
+	import RRR from './RRR.svelte';
+</script>
+
+{#if "Eva".startsWith('E')}
+	<EEE/>
+{:else}
+	<RRR/>
+{/if}

test/runtime/samples/if-block-static-with-else/_config.js

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

test/runtime/samples/if-block-static-with-else/main.svelte

@@ -0,0 +1,5 @@
+{#if "Eva".startsWith('E')}
+	eee
+{:else}
+	rrr
+{/if}