Transform if-blocks to ternaries (#696)

#619
This way the TypeScript control flow will be broken in less instances and nested if-blocks like
```
{#if a}
  {#if a.a}
     ..
  {/if}
{/if}
```
will not throw "a could be undefined" in the inner if anymore in strict mode.
This will not shut down all instances of control flow breakage, because for example slots/each/await are still transformed to lambda-functions.

Author: dummdidumm

packages/svelte2tsx/src/htmlxtojsx/nodes/if-else.ts

@@ -5,35 +5,47 @@ import { Node } from 'estree-walker';
  * {# if ...}...{/if}   --->   {() => {if(...){<>...</>}}}
  */
 export function handleIf(htmlx: string, str: MagicString, ifBlock: Node): void {
+    const endIf = htmlx.lastIndexOf('{', ifBlock.end - 1);
+
     if (ifBlock.elseif) {
-        //we are an elseif so our work is easier
-        str.appendLeft(ifBlock.expression.start, '(');
-        str.appendLeft(ifBlock.expression.end, ')');
+        // {:else if expr}  ->  : (expr) ? <>
+        const elseIfStart = htmlx.lastIndexOf('{', ifBlock.expression.start);
+        const elseIfConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
+        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', { contentOnly: true });
+        str.overwrite(ifBlock.expression.end, elseIfConditionEnd, ') ? <>');
+
+        if (!ifBlock.else) {
+            str.appendLeft(endIf, '</> : <>');
+        }
         return;
     }
-    // {#if expr} ->
-    // {() => { if (expr){ <>
-    str.overwrite(ifBlock.start, ifBlock.expression.start, '{() => {if (');
+
+    // {#if expr}  ->  {(expr) ? <>
+    str.overwrite(ifBlock.start, ifBlock.expression.start, '{(', { contentOnly: true });
     const end = htmlx.indexOf('}', ifBlock.expression.end);
-    str.overwrite(ifBlock.expression.end, end + 1, '){<>');
+    str.overwrite(ifBlock.expression.end, end + 1, ') ? <>', { contentOnly: true });
 
-    // {/if} -> </>}}}</>
-    const endif = htmlx.lastIndexOf('{', ifBlock.end - 1);
-    str.overwrite(endif, ifBlock.end, '</>}}}');
+    if (ifBlock.else) {
+        // {/if}  ->  </> }
+        str.overwrite(endIf, ifBlock.end, '</> }', { contentOnly: true });
+    } else {
+        // {/if}  ->  </> : <></>}
+        str.overwrite(endIf, ifBlock.end, '</> : <></>}', { contentOnly: true });
+    }
 }
 
 /**
- * {:else}   --->   </>} else {<>
+ * {:else}   --->   </> : <>
  */
 export function handleElse(htmlx: string, str: MagicString, elseBlock: Node, parent: Node): void {
-    if (parent.type !== 'IfBlock') {
+    if (
+        parent.type !== 'IfBlock' ||
+        (elseBlock.children[0]?.type === 'IfBlock' && elseBlock.children[0]?.elseif)
+    ) {
         return;
     }
     const elseEnd = htmlx.lastIndexOf('}', elseBlock.start);
     const elseword = htmlx.lastIndexOf(':else', elseEnd);
     const elseStart = htmlx.lastIndexOf('{', elseword);
-    str.overwrite(elseStart, elseStart + 1, '</>}');
-    str.overwrite(elseEnd, elseEnd + 1, '{<>');
-    const colon = htmlx.indexOf(':', elseword);
-    str.remove(colon, colon + 1);
+    str.overwrite(elseStart, elseEnd + 1, '</> : <>');
 }

packages/svelte2tsx/src/svelte2tsx/index.ts

@@ -38,7 +38,7 @@ interface AddComponentExportPara {
     uses$$propsOr$$restProps: boolean;
     strictMode: boolean;
     /**
-     * If true, not fallback to `CustomEvent<any>`
+     * If true, not fallback to `any`
      * -> all unknown events will throw a type error
      * */
     strictEvents: boolean;

packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-self/expected.jsx

@@ -1,3 +1,3 @@
-<>{() => {if (false){<>
+<>{(false) ? <>
     <svelteself {...__sveltets_ensureType(__sveltets_componentType(), element)} />
-</>}}}</>
+</> : <></>}</>

packages/svelte2tsx/test/htmlx2jsx/samples/blocks-without-whitespace-inbetween/expected.jsx

@@ -1 +1 @@
-<>{() => {if (name == "world"){<>!</>}}}{__sveltets_each(x, (y) => <>!</>)}{() => {let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {<>!</>})}}{() => {if (bla){<>*</>}}}</>
+<>{(name == "world") ? <>!</> : <></>}{__sveltets_each(x, (y) => <>!</>)}{() => {let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {<>!</>})}}{(bla) ? <>*</> : <></>}</>

packages/svelte2tsx/test/htmlx2jsx/samples/if-block/expected.jsx

@@ -1,3 +1,3 @@
-<>{() => {if (name == "world"){<>
+<>{(name == "world") ? <>
 <h1>Hello {name}</h1>
-</>}}}</>
+</> : <></>}</>

packages/svelte2tsx/test/htmlx2jsx/samples/if-comma-block/expected.jsx

@@ -1,3 +1,3 @@
-<>{() => {if (true, false){<>
+<>{(true, false) ? <>
 <h1>Hello {name}</h1>
-</>}}}</>
+</> : <></>}</>

packages/svelte2tsx/test/htmlx2jsx/samples/if-else-block-nested/expected.jsx

@@ -0,0 +1,60 @@
+<>{(name == "world") ? <>{(bla) ? <>asd</> : <></>}{(bla) ? <>asd</> : <></>}</> : (foo) ? <>{(bla) ? <>asd</> : <>bar</> }</> : <>{(bla) ? <>asd</> : (blubb) ? <>asd</> : <></> }</> }
+
+{(name == "world") ? <>
+    {(bla) ? <>asd</> : <></>}
+    {(bla) ? <>
+        asd
+    </> : <>
+        bar
+    </> }
+    {(bla) ? <>
+        asd
+    </> : (blubb) ? <>
+        bar
+    </> : <></> }
+    {(bla) ? <>
+        asd
+    </> : (blubb) ? <>
+        bar
+    </> : <>
+        foo
+    </> }
+</> : (foo) ? <>
+    {(bla) ? <>asd</> : <></>}
+    {(bla) ? <>
+        asd
+    </> : <>
+        bar
+    </> }
+    {(bla) ? <>
+        asd
+    </> : (blubb) ? <>
+        bar
+    </> : <></> }
+    {(bla) ? <>
+        asd
+    </> : (blubb) ? <>
+        bar
+    </> : <>
+        foo
+    </> }
+</> : <>
+    {(bla) ? <>asd</> : <></>}
+    {(bla) ? <>
+        asd
+    </> : <>
+        bar
+    </> }
+    {(bla) ? <>
+        asd
+    </> : (blubb) ? <>
+        bar
+    </> : <></> }
+    {(bla) ? <>
+        asd
+    </> : (blubb) ? <>
+        bar
+    </> : <>
+        foo
+    </> }
+</> }</>

packages/svelte2tsx/test/htmlx2jsx/samples/if-else-block-nested/input.svelte

@@ -0,0 +1,60 @@
+{#if name == "world"}{#if bla}asd{/if}{#if bla}asd{/if}{:else if foo}{#if bla}asd{:else}bar{/if}{:else}{#if bla}asd{:else if blubb}asd{/if}{/if}
+
+{#if name == "world"}
+    {#if bla}asd{/if}
+    {#if bla}
+        asd
+    {:else}
+        bar
+    {/if}
+    {#if bla}
+        asd
+    {:else if blubb}
+        bar
+    {/if}
+    {#if bla}
+        asd
+    {:else if blubb}
+        bar
+    {:else}
+        foo
+    {/if}
+{:else if foo}
+    {#if bla}asd{/if}
+    {#if bla}
+        asd
+    {:else}
+        bar
+    {/if}
+    {#if bla}
+        asd
+    {:else if blubb}
+        bar
+    {/if}
+    {#if bla}
+        asd
+    {:else if blubb}
+        bar
+    {:else}
+        foo
+    {/if}
+{:else}
+    {#if bla}asd{/if}
+    {#if bla}
+        asd
+    {:else}
+        bar
+    {/if}
+    {#if bla}
+        asd
+    {:else if blubb}
+        bar
+    {/if}
+    {#if bla}
+        asd
+    {:else if blubb}
+        bar
+    {:else}
+        foo
+    {/if}
+{/if}

packages/svelte2tsx/test/htmlx2jsx/samples/if-else-block/expected.jsx

@@ -1,5 +1,5 @@
-<>{() => {if (name == "world"){<>
+<>{(name == "world") ? <>
     <h1>Hello {name}</h1>
-</>}else{<>
+</> : <>
     <h2>hello {name}</h2>
-</>}}}</>
+</> }</>

packages/svelte2tsx/test/htmlx2jsx/samples/if-else-if-block/expected.jsx

@@ -1,5 +1,5 @@
-<>{() => {if (name1 == "world"){<>
+<>{(name1 == "world") ? <>
     <h1>Hello {name2}</h1>
-</>}else if (name3 == "person"){<>
+</> : (name3 == "person") ? <>
     <h2>hello {name4}</h2>
-</>}}}</>
+</> : <></> }</>