fix: fix a resource a type error when using async _resolved function (#7426)

* fix: fix a resource a type error when using async _resolved function

* Create tidy-snakes-flow.md

* fix test

* Delete .changeset/tidy-snakes-flow.md

* fix

* add change

* add promise for pending

* refactor(resource): allow async callbacks for resource lifecycle handlers

* fix test

* fix test

* fix test

* fix test

* fix test

* fix test

* delete only

* chore: update api files 🍉

* chore: change changeset message 🍒

---------

Co-authored-by: wuls <[email protected]>
Co-authored-by: Giorgio Boa <[email protected]>
Co-authored-by: gioboa <[email protected]>

Author: 3 people

.changeset/polite-singers-sing.md

@@ -0,0 +1,6 @@
+---
+'@builder.io/qwik-city': patch
+'@builder.io/qwik': patch
+---
+
+FIX: solve type error when using async _resolved function

packages/docs/src/routes/api/qwik/api.json

@@ -1774,7 +1774,7 @@
         }
       ],
       "kind": "Function",
-      "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\n> Warning: This API is now obsolete.\n> \n> This is no longer needed as the preloading happens automatically in qrl-class.ts. Leave this in your app for a while so it uninstalls existing service workers, but don't use it for new projects.\n> \n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n    base?: string;\n    scope?: string;\n    path?: string;\n    verbose?: boolean;\n    fetchBundleGraph?: boolean;\n    nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\n[JSXNode](#jsxnode)<!-- -->&lt;'script'&gt;",
+      "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\n> Warning: This API is now obsolete.\n> \n> This is no longer needed as the preloading happens automatically in qrl-class.ts. Leave this in your app for a while so it uninstalls existing service workers, but don't use it for new projects.\n> \n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n    base?: string;\n    scope?: string;\n    path?: string;\n    verbose?: boolean;\n    fetchBundleGraph?: boolean;\n    nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nJSXNode&lt;'script'&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
       "mdFile": "qwik.prefetchserviceworker.md"
     },
@@ -2432,7 +2432,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface ResourceProps<T> \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[onPending?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; [JSXOutput](#jsxoutput)\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[onRejected?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(reason: Error) =&gt; [JSXOutput](#jsxoutput)\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[onResolved](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(value: T) =&gt; [JSXOutput](#jsxoutput)\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[value](#)\n\n\n</td><td>\n\n`readonly`\n\n\n</td><td>\n\n[ResourceReturn](#resourcereturn)<!-- -->&lt;T&gt; \\| [Signal](#signal)<!-- -->&lt;Promise&lt;T&gt; \\| T&gt; \\| Promise&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface ResourceProps<T> \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[onPending?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; [JSXOutput](#jsxoutput) \\| Promise&lt;[JSXOutput](#jsxoutput)<!-- -->&gt;\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[onRejected?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(reason: Error) =&gt; [JSXOutput](#jsxoutput) \\| Promise&lt;[JSXOutput](#jsxoutput)<!-- -->&gt;\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[onResolved](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(value: T) =&gt; [JSXOutput](#jsxoutput) \\| Promise&lt;[JSXOutput](#jsxoutput)<!-- -->&gt;\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[value](#)\n\n\n</td><td>\n\n`readonly`\n\n\n</td><td>\n\n[ResourceReturn](#resourcereturn)<!-- -->&lt;T&gt; \\| [Signal](#signal)<!-- -->&lt;Promise&lt;T&gt; \\| T&gt; \\| Promise&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts",
       "mdFile": "qwik.resourceprops.md"
     },

packages/docs/src/routes/api/qwik/index.mdx

@@ -3667,7 +3667,7 @@ opts
 
 **Returns:**
 
-[JSXNode](#jsxnode)<'script'>
+JSXNode<'script'>
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
 
@@ -5081,7 +5081,7 @@ Description
 
 </td><td>
 
-() =&gt; [JSXOutput](#jsxoutput)
+() =&gt; [JSXOutput](#jsxoutput) \| Promise&lt;[JSXOutput](#jsxoutput)&gt;
 
 </td><td>
 
@@ -5096,7 +5096,7 @@ _(Optional)_
 
 </td><td>
 
-(reason: Error) =&gt; [JSXOutput](#jsxoutput)
+(reason: Error) =&gt; [JSXOutput](#jsxoutput) \| Promise&lt;[JSXOutput](#jsxoutput)&gt;
 
 </td><td>
 
@@ -5111,7 +5111,7 @@ _(Optional)_
 
 </td><td>
 
-(value: T) =&gt; [JSXOutput](#jsxoutput)
+(value: T) =&gt; [JSXOutput](#jsxoutput) \| Promise&lt;[JSXOutput](#jsxoutput)&gt;
 
 </td><td>
 

packages/qwik/src/core/qwik.core.api.md

@@ -886,11 +886,11 @@ export interface ResourcePending<T> {
 // @public (undocumented)
 export interface ResourceProps<T> {
     // (undocumented)
-    onPending?: () => JSXOutput;
+    onPending?: () => JSXOutput | Promise<JSXOutput>;
     // (undocumented)
-    onRejected?: (reason: Error) => JSXOutput;
+    onRejected?: (reason: Error) => JSXOutput | Promise<JSXOutput>;
     // (undocumented)
-    onResolved: (value: T) => JSXOutput;
+    onResolved: (value: T) => JSXOutput | Promise<JSXOutput>;
     // (undocumented)
     readonly value: ResourceReturn<T> | Signal<Promise<T> | T> | Promise<T>;
 }

packages/qwik/src/core/render/ssr/render-ssr.unit.tsx

@@ -1550,6 +1550,25 @@ test('issue 4283', async () => {
   );
 });
 
+test('AsyncResource', async () => {
+  await testSSR(
+    <body>
+      <ul>
+        <AsyncResource text="thing" delay={500} />
+      </ul>
+    </body>,
+    `<html q:container="paused" q:version="dev" q:render="ssr-dev" q:base="" q:manifest-hash="test">
+    <body>
+      <ul>
+        <!--qv q:id=0 q:key=sX:-->
+          <div class="cmp1"><!--qkssr-f--><span>1</span>;</div>
+        <!--/qv-->
+      </ul>
+    </body>
+  </html>`
+  );
+});
+
 // TODO
 // Merge props on host
 // - host events
@@ -1882,6 +1901,25 @@ export const DelayResource = component$((props: { text: string; delay: number })
   );
 });
 
+export const AsyncResource = component$((props: { text: string; delay: number }) => {
+  const resource = useResource$<string>(async ({ track }) => {
+    track(() => props.text);
+    await delay(props.delay);
+    return props.text;
+  });
+  return (
+    <div class="cmp1">
+      <Resource
+        value={resource}
+        onResolved={async () => <span>1</span>}
+        onRejected={async () => <span>1</span>}
+        onPending={async () => <span>1</span>}
+      />
+      ;
+    </div>
+  );
+});
+
 export const NullCmp = component$(() => {
   return null;
 });

packages/qwik/src/core/use/use-resource.ts

@@ -191,9 +191,9 @@ export const useResource$ = <T>(
 /** @public */
 export interface ResourceProps<T> {
   readonly value: ResourceReturn<T> | Signal<Promise<T> | T> | Promise<T>;
-  onResolved: (value: T) => JSXOutput;
-  onPending?: () => JSXOutput;
-  onRejected?: (reason: Error) => JSXOutput;
+  onResolved: (value: T) => JSXOutput | Promise<JSXOutput>;
+  onPending?: () => JSXOutput | Promise<JSXOutput>;
+  onRejected?: (reason: Error) => JSXOutput | Promise<JSXOutput>;
 }
 
 // <docs markdown="../readme.md#useResource">
@@ -252,48 +252,62 @@ export interface ResourceProps<T> {
  */
 // </docs>
 export const Resource = <T>(props: ResourceProps<T>): JSXOutput => {
-  const isBrowser = !isServerPlatform();
+  // Resource path
+  return jsx(Fragment, {
+    children: getResourceValueAsPromise(props),
+  });
+};
+function getResourceValueAsPromise<T>(props: ResourceProps<T>): Promise<JSXOutput> | JSXOutput {
   const resource = props.value as ResourceReturnInternal<T> | Promise<T> | Signal<T>;
-  let promise: Promise<T> | undefined;
   if (isResourceReturn(resource)) {
+    const isBrowser = !isServerPlatform();
     if (isBrowser) {
       if (props.onRejected) {
-        resource.value.catch(() => {});
         if (resource._state === 'rejected') {
-          return props.onRejected(resource._error!);
+          return Promise.resolve(resource._error!).then(useBindInvokeContext(props.onRejected));
         }
       }
       if (props.onPending) {
         const state = resource._state;
         if (state === 'resolved') {
-          return props.onResolved(resource._resolved!);
+          return Promise.resolve(resource._resolved!).then(useBindInvokeContext(props.onResolved));
         } else if (state === 'pending') {
-          return props.onPending();
+          return Promise.resolve().then(useBindInvokeContext(props.onPending));
         } else if (state === 'rejected') {
           throw resource._error;
         }
       }
       if (untrack(() => resource._resolved) !== undefined) {
-        return props.onResolved(resource._resolved!);
+        return Promise.resolve(resource._resolved!).then(useBindInvokeContext(props.onResolved));
       }
     }
-    promise = resource.value;
+    const value = resource.value;
+    if (value) {
+      return value.then(
+        useBindInvokeContext(props.onResolved),
+        useBindInvokeContext(props.onRejected)
+      );
+    } else {
+      // this is temporary value until the `runResource` is executed and promise is assigned to the value
+      return Promise.resolve(undefined);
+    }
   } else if (isPromise(resource)) {
-    promise = resource;
+    return resource.then(
+      useBindInvokeContext(props.onResolved),
+      useBindInvokeContext(props.onRejected)
+    );
   } else if (isSignal(resource)) {
-    promise = Promise.resolve(resource.value);
+    return Promise.resolve(resource.value).then(
+      useBindInvokeContext(props.onResolved),
+      useBindInvokeContext(props.onRejected)
+    );
   } else {
-    return props.onResolved(resource as T);
-  }
-
-  // Resource path
-  return jsx(Fragment, {
-    children: promise.then(
+    return Promise.resolve(resource as T).then(
       useBindInvokeContext(props.onResolved),
       useBindInvokeContext(props.onRejected)
-    ),
-  });
-};
+    );
+  }
+}
 
 export const _createResourceReturn = <T>(opts?: ResourceOptions): ResourceReturnInternal<T> => {
   const resource: ResourceReturnInternal<T> = {