Repository: sveltejs/svelte (JavaScript)
Date: 2020-05-15 20:54:13+00:00
Task type: Bug Fix

Issue:
If-elseif-else block not evaluating first if condition properly when using function, reactive value, and nested component
**Describe the bug**
(Open my REPL link below. This will be way easier to follow)
When using an if,elseif,else statement where the first `if` uses a function, the second `if` uses a reactive value and the `else` block contains a component, the first `if` will always be evaluated as false.

* If the first `if`is changed to anything other than a function call it works as expected
* If the second `if` is changed to anything other than a reactive value it works as expected
* If the content in the `else` block does not contain a component, it works as expected

**Logs**
No errors reported

**To Reproduce**
https://svelte.dev/repl/775ab3e02b6c4ddd99e10ee0822e13b9?version=3

**Expected behavior**
The first if should evaluate based on the condition, not always be false.

**Information about your Svelte project:**
- Your browser and the version: Chromium 81.0.4044.129
- Your operating system: Arch Linux
- Svelte version 3.20.1 - 3.22.2
- Webpack, storyboard, @babel/preset-env (but note that since this happens in the REPL I don't think any of this is related)

**Severity**
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Annoying but easy to work around. Actually figuring out what was causing it was far more of a hassle than the fix. The hardest part is auditing other scenarios where this may come into play since it's not something you can really search for.




Issue discussion:
This seems loosely related to https://github.com/sveltejs/svelte/issues/4120

Solution patch:
diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
--- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
@@ -392,7 +392,7 @@ export default class IfBlockWrapper extends Wrapper {
 						${snippet && (
 							dependencies.length > 0
 								? b`if (${block.renderer.dirty(dependencies)}) ${condition} = !!${snippet}`
-								: b`if (${condition} == -1) ${condition} = !!${snippet}`
+								: b`if (${condition} == null) ${condition} = !!${snippet}`
 						)}
 						if (${condition}) return ${i};`
 						: b`return ${i};`)}


Test patch:
diff --git a/test/runtime/samples/if-block-static-with-elseif-else-and-outros/RRR.svelte b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/RRR.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/RRR.svelte
@@ -0,0 +1 @@
+rrr
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-static-with-elseif-else-and-outros/_config.js b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'eee'
+};
diff --git a/test/runtime/samples/if-block-static-with-elseif-else-and-outros/main.svelte b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import RRR from './RRR.svelte';
+
+	export let x;
+</script>
+
+{#if "Eva".startsWith('E')}
+	eee
+{:else if x}
+  def
+{:else}
+	<RRR/>
+{/if}