[fix] {:else if} value incorrectly cached (#7043)

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

@@ -266,15 +266,15 @@ export default class IfBlockWrapper extends Wrapper {
 		if (this.needs_update) {
 			block.chunks.init.push(b`
 				function ${select_block_type}(#ctx, #dirty) {
-					${this.branches.map(({ dependencies, condition, snippet, block }) => condition
+					${this.branches.map(({ dependencies, condition, snippet }) => {
+						return b`${snippet && dependencies.length > 0 ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` : null}`;
+					})}
+					${this.branches.map(({ condition, snippet, block }) => condition
 					? b`
-					${snippet && (
+						${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
-						dependencies.length > 0
-							? b`if (${condition} == null || ${block.renderer.dirty(dependencies)}) ${condition} = !!${snippet}`
-							: b`if (${condition} == null) ${condition} = !!${snippet}`
-					)}
 						if (${condition}) return ${block.name};`
-					: b`return ${block.name};`)}
+					: b`return ${block.name};`
+					)}
 				}
 			`);
 		} else {
@@ -387,13 +387,12 @@ export default class IfBlockWrapper extends Wrapper {
 			${this.needs_update
 				? b`
 					function ${select_block_type}(#ctx, #dirty) {
-						${this.branches.map(({ dependencies, condition, snippet }, i) => condition
+						${this.branches.map(({ dependencies, condition, snippet }) => {
+							return b`${snippet && dependencies.length > 0 ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` : null}`;
+						})}
+						${this.branches.map(({ condition, snippet }, i) => condition
 						? b`
-						${snippet && (
+						${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
-							dependencies.length > 0
-								? b`if (${condition} == null || ${block.renderer.dirty(dependencies)}) ${condition} = !!${snippet}`
-								: b`if (${condition} == null) ${condition} = !!${snippet}`
-						)}
 						if (${condition}) return ${i};`
 						: b`return ${i};`)}
 						${!has_else && b`return -1;`}

test/runtime/samples/if-block-else-update/_config.js

@@ -0,0 +1,46 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+	
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn2.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: false, bar: true
+			<hr>
+			bar!
+		`);
+
+		await btn1.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: true, bar: true
+			<hr>
+			foo!
+		`);
+		
+		await btn2.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: true, bar: false
+			<hr>
+			foo!
+		`);
+		
+		await btn1.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: false, bar: false
+			<hr>
+		`);
+	}
+};

test/runtime/samples/if-block-else-update/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let foo = false
+	let bar = [false];
+</script>
+
+<button on:click={() => foo = !foo}>
+	Toggle foo
+</button>
+<button on:click={() => bar[0] = !bar[0]}>
+	Toggle bar
+</button>
+
+<hr>
+{@html `foo: ${foo}, bar: ${bar.every(x => x)}`}
+<hr>
+
+{#if foo}
+	foo!
+{:else if bar.every(x => x)}
+	bar!
+{/if}