From 2f0f330b769141028c0d0c61984dce2878dcb789 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 7 Jan 2022 00:07:37 +0800
Subject: [PATCH] [fix] {:else if} value incorrectly cached (#7043)

---
 .../compile/render_dom/wrappers/IfBlock.ts    | 25 +++++-----
 .../samples/if-block-else-update/_config.js   | 46 +++++++++++++++++++
 .../samples/if-block-else-update/main.svelte  | 21 +++++++++
 3 files changed, 79 insertions(+), 13 deletions(-)
 create mode 100644 test/runtime/samples/if-block-else-update/_config.js
 create mode 100644 test/runtime/samples/if-block-else-update/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
index b3bbf9becd..01d49ac9dd 100644
--- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts
+++ b/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 && (
-						dependencies.length > 0
-							? b`if (${condition} == null || ${block.renderer.dirty(dependencies)}) ${condition} = !!${snippet}`
-							: b`if (${condition} == null) ${condition} = !!${snippet}`
+						${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
+						if (${condition}) return ${block.name};`
+					: b`return ${block.name};`
 					)}
-					if (${condition}) 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 && (
-							dependencies.length > 0
-								? b`if (${condition} == null || ${block.renderer.dirty(dependencies)}) ${condition} = !!${snippet}`
-								: b`if (${condition} == null) ${condition} = !!${snippet}`
-						)}
+						${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
 						if (${condition}) return ${i};`
 						: b`return ${i};`)}
 						${!has_else && b`return -1;`}
diff --git a/test/runtime/samples/if-block-else-update/_config.js b/test/runtime/samples/if-block-else-update/_config.js
new file mode 100644
index 0000000000..db35ca8488
--- /dev/null
+++ b/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>
+		`);
+	}
+};
diff --git a/test/runtime/samples/if-block-else-update/main.svelte b/test/runtime/samples/if-block-else-update/main.svelte
new file mode 100644
index 0000000000..258d0422ba
--- /dev/null
+++ b/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}
\ No newline at end of file