(fix) control flow for awaited promise (#884)

By surrounding the generated block with an if-condition #880
sveltejs · Mar 19, 2021 · 7ccc6b4 · 7ccc6b4
1 parent 515239e
commit 7ccc6b4
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 49 deletions.
diff --git a/packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts b/packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts
@@ -562,11 +562,11 @@ describe('DiagnosticsProvider', () => {
                 range: {
                     end: {
                         character: 15,
-                        line: 13
+                        line: 14
                     },
                     start: {
                         character: 5,
-                        line: 13
+                        line: 14
                     }
                 },
                 severity: 1,
@@ -580,11 +580,11 @@ describe('DiagnosticsProvider', () => {
                 range: {
                     end: {
                         character: 19,
-                        line: 16
+                        line: 17
                     },
                     start: {
                         character: 9,
-                        line: 16
+                        line: 17
                     }
                 },
                 severity: 1,
@@ -598,11 +598,11 @@ describe('DiagnosticsProvider', () => {
                 range: {
                     end: {
                         character: 19,
-                        line: 20
+                        line: 21
                     },
                     start: {
                         character: 9,
-                        line: 20
+                        line: 21
                     }
                 },
                 severity: 1,
@@ -615,11 +615,11 @@ describe('DiagnosticsProvider', () => {
                 range: {
                     end: {
                         character: 14,
-                        line: 33
+                        line: 34
                     },
                     start: {
                         character: 13,
-                        line: 33
+                        line: 34
                     }
                 },
                 severity: 1,
@@ -633,11 +633,11 @@ describe('DiagnosticsProvider', () => {
                 range: {
                     end: {
                         character: 26,
-                        line: 35
+                        line: 36
                     },
                     start: {
                         character: 17,
-                        line: 35
+                        line: 36
                     }
                 },
                 severity: 1,
@@ -651,11 +651,11 @@ describe('DiagnosticsProvider', () => {
                 range: {
                     end: {
                         character: 25,
-                        line: 44
+                        line: 45
                     },
                     start: {
                         character: 13,
-                        line: 44
+                        line: 45
                     }
                 },
                 severity: 1,
@@ -669,11 +669,28 @@ describe('DiagnosticsProvider', () => {
                 range: {
                     end: {
                         character: 8,
-                        line: 53
+                        line: 54
                     },
                     start: {
                         character: 1,
-                        line: 53
+                        line: 54
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            },
+            {
+                code: 2531,
+                message: "Object is possibly 'null'.",
+                range: {
+                    end: {
+                        character: 22,
+                        line: 56
+                    },
+                    start: {
+                        character: 8,
+                        line: 56
                     }
                 },
                 severity: 1,

diff --git a/...e-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-if-control-flow.svelte b/...e-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-if-control-flow.svelte
@@ -7,6 +7,7 @@
     let assignA: string = '';
     assignA;
     const aPromise: Promise<boolean> = Promise.resolve(true);
+    const aNestedPromise: {p: Promise<boolean>} | null = null as any;
     const store = writable<boolean | string>(true);
 </script>
 
@@ -52,3 +53,12 @@
 
 {a === true}
 {assignA = a}
+
+{#await aNestedPromise.p then x}
+    {x}
+{/await}
+{#if aNestedPromise}
+    {#await aNestedPromise.p then x}
+        {x}
+    {/await}
+{/if}
diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts
@@ -74,8 +74,7 @@ export function convertHtmlxToJsx(
                         handleElse(htmlx, str, node, parent, ifScope);
                         break;
                     case 'AwaitBlock':
-                        templateScopeManager.awaitEnter(node);
-                        handleAwait(htmlx, str, node, ifScope);
+                        handleAwait(htmlx, str, node, ifScope, templateScopeManager);
                         break;
                     case 'PendingBlock':
                         templateScopeManager.awaitPendingEnter(node, parent);

diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/await.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/await.ts
@@ -1,6 +1,8 @@
 import MagicString from 'magic-string';
 import { Node } from 'estree-walker';
 import { IfScope } from './if-scope';
+import { TemplateScopeManager } from './template-scope';
+import { surroundWithIgnoreComments } from '../../utils/ignore';
 
 /**
  * Transform {#await ...} into something JSX understands
@@ -9,21 +11,25 @@ export function handleAwait(
     htmlx: string,
     str: MagicString,
     awaitBlock: Node,
-    ifScope: IfScope
+    ifScope: IfScope,
+    templateScopeManager: TemplateScopeManager
 ): void {
     // {#await somePromise then value} ->
     // {() => {let _$$p = (somePromise);
+    let ifCondition = ifScope.getFullCondition();
+    ifCondition = ifCondition ? surroundWithIgnoreComments(`if(${ifCondition}) {`) : '';
+    templateScopeManager.awaitEnter(awaitBlock);
     const constRedeclares = ifScope.getConstsToRedeclare();
     str.overwrite(
         awaitBlock.start,
         awaitBlock.expression.start,
-        `{() => {${constRedeclares}let _$$p = (`
+        `{() => {${constRedeclares}${ifCondition}let _$$p = (`
     );
 
     // {/await} ->
     // <>})}
     const awaitEndStart = htmlx.lastIndexOf('{', awaitBlock.end - 1);
-    str.overwrite(awaitEndStart, awaitBlock.end, '</>})}}');
+    str.overwrite(awaitEndStart, awaitBlock.end, '</>})}}' + (ifCondition ? '}' : ''));
 }
 
 export function handleAwaitPending(

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-await-block-shadowed/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-await-block-shadowed/expected.jsx
@@ -1,61 +1,61 @@
 <>{(hello) ? <>
-    {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*/let _$$p = (aPromise); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/((Ωhello)) && /*Ωignore_endΩ*/<>
+    {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*//*Ωignore_startΩ*/if(((hello))) {/*Ωignore_endΩ*/let _$$p = (aPromise); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/((Ωhello)) && /*Ωignore_endΩ*/<>
         {hello}
     </>}, () => {/*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
         {hello}
-    </>})}}
-    {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*/let _$$p = (aPromise); __sveltets_awaitThen(_$$p, (hi) => {/*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
+    </>})}}}
+    {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*//*Ωignore_startΩ*/if(((hello))) {/*Ωignore_endΩ*/let _$$p = (aPromise); __sveltets_awaitThen(_$$p, (hi) => {/*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
         {hello}
     </>}, (hello) => {/*Ωignore_startΩ*/((Ωhello)) && /*Ωignore_endΩ*/<>
         {hello}
-    </>})}}
-    {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*/let _$$p = (hello); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/((Ωhello)) && /*Ωignore_endΩ*/<>
+    </>})}}}
+    {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*//*Ωignore_startΩ*/if(((hello))) {/*Ωignore_endΩ*/let _$$p = (hello); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/((Ωhello)) && /*Ωignore_endΩ*/<>
         {hello}
         {(hello) ? <>
-            {() => {let _$$p = (aPromise); /*Ωignore_startΩ*/(((Ωhello))) && ((hello)) && /*Ωignore_endΩ*/<>
+            {() => {/*Ωignore_startΩ*/if((((Ωhello))) && ((hello))) {/*Ωignore_endΩ*/let _$$p = (aPromise); /*Ωignore_startΩ*/(((Ωhello))) && ((hello)) && /*Ωignore_endΩ*/<>
                 {hello}
-            </>; __sveltets_awaitThen(_$$p, () => {<></>})}}
-            {() => {/*Ωignore_startΩ*/const ΩΩhello=hello;/*Ωignore_endΩ*/let _$$p = (aPromise); /*Ωignore_startΩ*/(((Ωhello))) && ((hello)) && /*Ωignore_endΩ*/<>
+            </>; __sveltets_awaitThen(_$$p, () => {<></>})}}}
+            {() => {/*Ωignore_startΩ*/const ΩΩhello=hello;/*Ωignore_endΩ*//*Ωignore_startΩ*/if((((Ωhello))) && ((hello))) {/*Ωignore_endΩ*/let _$$p = (aPromise); /*Ωignore_startΩ*/(((Ωhello))) && ((hello)) && /*Ωignore_endΩ*/<>
                 {hello}
             </>; __sveltets_awaitThen(_$$p, () => {<></>}, (hello) => {/*Ωignore_startΩ*/(((Ωhello))) && ((ΩΩhello)) && /*Ωignore_endΩ*/<>
                 {hello}
-            </>})}}
-            {() => {/*Ωignore_startΩ*/const ΩΩhello=hello;/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/(((Ωhello))) && ((ΩΩhello)) && /*Ωignore_endΩ*/<>
+            </>})}}}
+            {() => {/*Ωignore_startΩ*/const ΩΩhello=hello;/*Ωignore_endΩ*//*Ωignore_startΩ*/if((((Ωhello))) && ((hello))) {/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/(((Ωhello))) && ((ΩΩhello)) && /*Ωignore_endΩ*/<>
                 {(hello) ? <>
                     {hello}
                 </> : <></>}
-            </>})}}
+            </>})}}}
         </> : <></>}
-    </>})}}
+    </>})}}}
     {(hi && bye) ? <>
-        {() => {/*Ωignore_startΩ*/const Ωbye=bye,Ωhello=hello;/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (bye) => {/*Ωignore_startΩ*/(((hello))) && ((hi && Ωbye)) && /*Ωignore_endΩ*/<>
+        {() => {/*Ωignore_startΩ*/const Ωbye=bye,Ωhello=hello;/*Ωignore_endΩ*//*Ωignore_startΩ*/if((((hello))) && ((hi && bye))) {/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (bye) => {/*Ωignore_startΩ*/(((hello))) && ((hi && Ωbye)) && /*Ωignore_endΩ*/<>
             {bye}
         </>}, (hello) => {/*Ωignore_startΩ*/(((Ωhello))) && ((hi && bye)) && /*Ωignore_endΩ*/<>
             {(hello) ? <>
                 {hello}
             </> : <></>}
-        </>})}}
+        </>})}}}
     </> : (cool) ? <>
-        {() => {/*Ωignore_startΩ*/const Ωcool=cool;/*Ωignore_endΩ*/let _$$p = (cool); /*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
+        {() => {/*Ωignore_startΩ*/const Ωcool=cool;/*Ωignore_endΩ*//*Ωignore_startΩ*/if((((hello))) && (!(hi && bye) && (cool))) {/*Ωignore_endΩ*/let _$$p = (cool); /*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
             loading
         </>; __sveltets_awaitThen(_$$p, (cool) => {/*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (Ωcool)) && /*Ωignore_endΩ*/<>
             {(cool) ? <>
                 {cool}
             </> : <></>}
         </>}, (cool) => {/*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (Ωcool)) && /*Ωignore_endΩ*/<>
             z
-        </>})}}
-        {() => {/*Ωignore_startΩ*/const Ωcool=cool;/*Ωignore_endΩ*/let _$$p = (aPromise); /*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
+        </>})}}}
+        {() => {/*Ωignore_startΩ*/const Ωcool=cool;/*Ωignore_endΩ*//*Ωignore_startΩ*/if((((hello))) && (!(hi && bye) && (cool))) {/*Ωignore_endΩ*/let _$$p = (aPromise); /*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
             loading
         </>; __sveltets_awaitThen(_$$p, (cool) => {/*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (Ωcool)) && /*Ωignore_endΩ*/<>
             {cool}
-        </>})}}
+        </>})}}}
     </> : <>
-        {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/(((Ωhello))) && (!(hi && bye) && !(cool)) && /*Ωignore_endΩ*/<>
+        {() => {/*Ωignore_startΩ*/const Ωhello=hello;/*Ωignore_endΩ*//*Ωignore_startΩ*/if((((hello))) && (!(hi && bye) && !(cool))) {/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (hello) => {/*Ωignore_startΩ*/(((Ωhello))) && (!(hi && bye) && !(cool)) && /*Ωignore_endΩ*/<>
             {(hello) ? <>
                 {hello}
             </> : <></>}
-        </>})}}
+        </>})}}}
     </> }
 </> : <></>}
 

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-await-block/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-await-block/expected.jsx
@@ -1,27 +1,30 @@
 <>{(hello) ? <>
-    {() => {let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
+    {() => {/*Ωignore_startΩ*/if(((hello))) {/*Ωignore_endΩ*/let _$$p = (hello.foo); __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
         {y}
-    </>})}}
-    {() => {let _$$p = (aPromise); /*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
+    </>})}}}
+    {() => {/*Ωignore_startΩ*/if(((hello))) {/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
+        {y}
+    </>})}}}
+    {() => {/*Ωignore_startΩ*/if(((hello))) {/*Ωignore_endΩ*/let _$$p = (aPromise); /*Ωignore_startΩ*/((hello)) && /*Ωignore_endΩ*/<>
       {hello}
-    </>; __sveltets_awaitThen(_$$p, () => {<></>})}}
+    </>; __sveltets_awaitThen(_$$p, () => {<></>})}}}
     {(hi && bye) ? <>
-        {() => {let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/(((hello))) && ((hi && bye)) && /*Ωignore_endΩ*/<>
+        {() => {/*Ωignore_startΩ*/if((((hello))) && ((hi && bye))) {/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/(((hello))) && ((hi && bye)) && /*Ωignore_endΩ*/<>
             {y}
         </>}, () => {/*Ωignore_startΩ*/(((hello))) && ((hi && bye)) && /*Ωignore_endΩ*/<>
             z
-        </>})}}
+        </>})}}}
     </> : (cool) ? <>
-        {() => {let _$$p = (x); /*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
+        {() => {/*Ωignore_startΩ*/if((((hello))) && (!(hi && bye) && (cool))) {/*Ωignore_endΩ*/let _$$p = (x); /*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
             loading
         </>; __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
             {y}
         </>}, () => {/*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && (cool)) && /*Ωignore_endΩ*/<>
             z
-        </>})}}
+        </>})}}}
     </> : <>
-        {() => {let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && !(cool)) && /*Ωignore_endΩ*/<>
+        {() => {/*Ωignore_startΩ*/if((((hello))) && (!(hi && bye) && !(cool))) {/*Ωignore_endΩ*/let _$$p = (x); __sveltets_awaitThen(_$$p, (y) => {/*Ωignore_startΩ*/(((hello))) && (!(hi && bye) && !(cool)) && /*Ωignore_endΩ*/<>
             {y}
-        </>})}}
+        </>})}}}
     </> }
 </> : <></>}</>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-await-block/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-await-block/input.svelte
@@ -1,4 +1,7 @@
 {#if hello}
+    {#await hello.foo then y}
+        {y}
+    {/await}
     {#await x then y}
         {y}
     {/await}