[fix] else if value cached

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;`}

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}