fix await typing issue (#378)

1. Now use helper function for then
2. Support `PromiseLike`
3. Support await on anything
4. fix hover on then value (sourcemap issue)

Author: jasonlyu123

packages/svelte2tsx/src/htmlxtojsx.ts

@@ -517,7 +517,7 @@ export function convertHtmlxToJsx(
     const handleAwait = (awaitBlock: Node) => {
         str.overwrite(awaitBlock.start, awaitBlock.expression.start, '{() => {let _$$p = (');
         // then value } | {:then value} ->
-        // _$$p.then((value) => {<>
+        // __sveltets_awaitThen(_$$p, (value) => {<>
         let thenStart: number;
         let thenEnd: number;
         if (!awaitBlock.pending.skip) {
@@ -543,18 +543,13 @@ export function convertHtmlxToJsx(
             str.overwrite(awaitBlock.expression.end, thenStart, '); ');
         }
         if (awaitBlock.value) {
-            str.overwrite(
-                thenStart,
-                thenEnd,
-                '_$$p.then((' +
-                    htmlx.substring(awaitBlock.value.start, awaitBlock.value.end) +
-                    ') => {<>',
-            );
+            str.overwrite(thenStart, awaitBlock.value.start, '__sveltets_awaitThen(_$$p, (');
+            str.overwrite(awaitBlock.value.end, thenEnd, ') => {<>');
         } else {
-            str.overwrite(thenStart, thenEnd, '_$$p.then(() => {<>');
+            str.overwrite(thenStart, thenEnd, '__sveltets_awaitThen(_$$p, () => {<>');
         }
         //{:catch error} ->
-        //</>}).catch((error) => {<>
+        //</>}, (error) => {<>
         if (!awaitBlock.catch.skip) {
             //catch block includes the {:catch}
             const catchStart = awaitBlock.catch.start;
@@ -563,7 +558,7 @@ export function convertHtmlxToJsx(
             const errorStart = awaitBlock.error ? awaitBlock.error.start : catchSymbolEnd;
             const errorEnd = awaitBlock.error ? awaitBlock.error.end : errorStart;
             const catchEnd = htmlx.indexOf('}', errorEnd) + 1;
-            str.overwrite(catchStart, errorStart, '</>}).catch((');
+            str.overwrite(catchStart, errorStart, '</>}, (');
             str.overwrite(errorEnd, catchEnd, ') => {<>');
         }
         // {/await} ->

packages/svelte2tsx/svelte-shims.d.ts

@@ -78,3 +78,14 @@ declare function __sveltets_bubbleEventDef<
     TEvent,
     TKey extends keyof T = TEvent extends keyof T ? TEvent : string
 >(on: SvelteOnAllEvent<T>, event: TEvent): T[TKey];
+
+declare function __sveltets_awaitThen<T>(
+    promise: PromiseLike<T>,
+    onfulfilled: (value: T) => any,
+    onrejected?: (value: any) => any
+): any;
+declare function __sveltets_awaitThen<T>(
+    promise: T,
+    onfulfilled: (value: T) => any,
+    onrejected?: (value: never) => any
+): any;

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-basic-catch/expected.jsx

@@ -1,5 +1,5 @@
-<>{() => {let _$$p = (somePromise); _$$p.then((value) => {<>
-    <h1>Promise Resolved</h1>
-</>}).catch(() => {<>
-    <h2>Promise Errored</h2>
-</>})}}</>
+<>{() => {let _$$p = (somePromise); __sveltets_awaitThen(_$$p, (value) => {<>
+    <h1>Promise Resolved</h1>
+</>}, () => {<>
+    <h2>Promise Errored</h2>
+</>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-basic/expected.jsx

@@ -1,9 +1,9 @@
-<>{() => {let _$$p = (somePromise); _$$p.then((value) => {<>
+<>{() => {let _$$p = (somePromise); __sveltets_awaitThen(_$$p, (value) => {<>
     <h1>Promise Resolved</h1>
 </>})}}
 
 {() => {let _$$p = (somePromise); <>
     <h1>Loading...</h1>
-</>; _$$p.then(() => {<>
+</>; __sveltets_awaitThen(_$$p, () => {<>
     <h1>Promise Resolved</h1>
 </>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-destruct-array/expected.jsx

@@ -1,7 +1,7 @@
 <>{() => {let _$$p = (thePromise); <>
     loading
-</>; _$$p.then(([ a, b ]) => {<>
+</>; __sveltets_awaitThen(_$$p, ([ a, b ]) => {<>
     then
-</>}).catch(([c, [d, e]]) => {<>
+</>}, ([c, [d, e]]) => {<>
     catch
-</>})}}</>
+</>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-destruct-default/expected.jsx

@@ -1,19 +1,19 @@
-<>{() => {let _$$p = (object); _$$p.then(({ a = 3, b = 4, c }) => {<>
+<>{() => {let _$$p = (object); __sveltets_awaitThen(_$$p, ({ a = 3, b = 4, c }) => {<>
     then
 </>})}}
 
-{() => {let _$$p = (array); _$$p.then(([a, b, c = 3]) => {<>
+{() => {let _$$p = (array); __sveltets_awaitThen(_$$p, ([a, b, c = 3]) => {<>
     then
 </>})}}
 
-{() => {let _$$p = (objectReject); _$$p.then((value) => {<>
+{() => {let _$$p = (objectReject); __sveltets_awaitThen(_$$p, (value) => {<>
     then
-</>}).catch(({ a = 3, b = 4, c }) => {<>
+</>}, ({ a = 3, b = 4, c }) => {<>
     catch
 </>})}}
 
-{() => {let _$$p = (arrayReject); _$$p.then((value) => {<>
+{() => {let _$$p = (arrayReject); __sveltets_awaitThen(_$$p, (value) => {<>
     then
-</>}).catch(([a, b, c = 3]) => {<>
+</>}, ([a, b, c = 3]) => {<>
     catch
-</>})}}</>
+</>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-destruct-object/expected.jsx

@@ -1,7 +1,7 @@
 <>{() => {let _$$p = (thePromise); <>
     loading
-</>; _$$p.then(({ result, error }) => {<>
+</>; __sveltets_awaitThen(_$$p, ({ result, error }) => {<>
     then
-</>}).catch(({ error: { message, code } }) => {<>
+</>}, ({ error: { message, code } }) => {<>
     catch
-</>})}}</>
+</>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-destruct-rest/expected.jsx

@@ -1,19 +1,19 @@
-<>{() => {let _$$p = (object); _$$p.then(({ a, ...rest }) => {<>
+<>{() => {let _$$p = (object); __sveltets_awaitThen(_$$p, ({ a, ...rest }) => {<>
     then
 </>})}}
 
-{() => {let _$$p = (array); _$$p.then(([a, b, ...rest]) => {<>
+{() => {let _$$p = (array); __sveltets_awaitThen(_$$p, ([a, b, ...rest]) => {<>
     then
 </>})}}
 
-{() => {let _$$p = (objectReject); _$$p.then((value) => {<>
+{() => {let _$$p = (objectReject); __sveltets_awaitThen(_$$p, (value) => {<>
     then
-</>}).catch(({ a, ...rest }) => {<>
+</>}, ({ a, ...rest }) => {<>
     catch
 </>})}}
 
-{() => {let _$$p = (arrayReject); _$$p.then((value) => {<>
+{() => {let _$$p = (arrayReject); __sveltets_awaitThen(_$$p, (value) => {<>
     then
-</>}).catch(([a, b, ...rest]) => {<>
+</>}, ([a, b, ...rest]) => {<>
     catch
-</>})}}</>
+</>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/expected.jsx

@@ -1,9 +1,9 @@
-<>{() => {let _$$p = (somePromise); _$$p.then((value) => {<>
+<>{() => {let _$$p = (somePromise); __sveltets_awaitThen(_$$p, (value) => {<>
     <h1>Promise Resolved</h1>
 </>})}}
 
 {() => {let _$$p = (somePromise); <>
     <h1>Loading...</h1>
-</>; _$$p.then(() => {<>
+</>; __sveltets_awaitThen(_$$p, () => {<>
     <h1>Promise Resolved</h1>
 </>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-pending-catch/expected.jsx

@@ -1,7 +1,7 @@
-<>{() => {let _$$p = (somePromise); <>
-    <h1>Promise Pending</h1>
-</>; _$$p.then((value) => {<>
-    <h1>Promise Resolved {value}</h1>
-</>}).catch((error) => {<>
-    <h1>Promise Errored {error}</h1>
-</>})}}</>
+<>{() => {let _$$p = (somePromise); <>
+    <h1>Promise Pending</h1>
+</>; __sveltets_awaitThen(_$$p, (value) => {<>
+    <h1>Promise Resolved {value}</h1>
+</>}, (error) => {<>
+    <h1>Promise Errored {error}</h1>
+</>})}}</>

packages/svelte2tsx/test/htmlx2jsx/samples/await-block-pending/expected.jsx

@@ -1,5 +1,5 @@
-<>{() => {let _$$p = (somePromise); <>
-    <h1>Promise Pending</h1>
-</>; _$$p.then((value) => {<>
-    <h1>Promise Resolved {value}</h1>
-</>})}}</>
+<>{() => {let _$$p = (somePromise); <>
+    <h1>Promise Pending</h1>
+</>; __sveltets_awaitThen(_$$p, (value) => {<>
+    <h1>Promise Resolved {value}</h1>
+</>})}}</>

packages/svelte2tsx/test/svelte2tsx/samples/await-with-$store/expected.tsx

@@ -9,7 +9,7 @@ function render() {
 
 {() => {let _$$p = (__sveltets_store_get(store)); <>
 	<p>loading</p>
-</>; _$$p.then((data) => {<>
+</>; __sveltets_awaitThen(_$$p, (data) => {<>
 	{data}
 </>})}}</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}