chore(core): remove resource tasks 🎉

also deprecate `useResource$` and friends

Author: wmertens

.changeset/slimy-swans-send.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': minor
+---
+
+DEPRECATION: `useResource$` and `<Resource />` are now deprecated. `useAsync$` is more efficient, more flexible, and easier to use. Use `concurrency: 0` to have the same behavior as `useResource$`.

packages/docs/src/routes/docs/(qwik)/core/state/index.mdx

@@ -384,13 +384,10 @@ import {
 export default component$(() => {
   const query = useSignal('busy');
   const jokes = useResource$<{ value: string }[]>(
-    async ({ track, cleanup }) => {
+    async ({ track, abortSignal }) => {
       track(() => query.value);
-      // A good practice is to use `AbortController` to abort the fetching of data if
-      // new request comes in. We create a new `AbortController` and register a `cleanup`
-      // function which is called when this function re-runs.
-      const controller = new AbortController();
-      cleanup(() => controller.abort());
+      // The abortSignal is automatically aborted when this function re-runs,
+      // canceling any pending fetch requests.
 
       if (query.value.length < 3) {
         return [];
@@ -399,7 +396,7 @@ export default component$(() => {
       const url = new URL('https://api.chucknorris.io/jokes/search');
       url.searchParams.set('query', query.value);
 
-      const resp = await fetch(url, { signal: controller.signal });
+      const resp = await fetch(url, { signal: abortSignal });
       const json = (await resp.json()) as { result: { value: string }[] };
 
       return json.result;

packages/docs/src/routes/tutorial/introduction/resource/index.mdx

@@ -34,11 +34,8 @@ Use [`useResource$()`](/docs/(qwik)/core/state/index.mdx) to set up how the data
     // Use `track` to trigger re-running of this data fetching function.
     track(() => github.org);
 
-    // A good practice is to use `AbortController` to abort the fetching of data if
-    // new request comes in. We create a new `AbortController` and register a `cleanup`
-    // function which is called when this function re-runs.
-    const controller = new AbortController();
-    cleanup(() => controller.abort());
+    // The abortSignal is automatically provided and will be aborted when this
+    // function re-runs, allowing you to cancel pending operations.
 
     // Fetch the data and return the promises.
     return getRepositories(github.org, controller);

packages/docs/src/routes/tutorial/reactivity/resource/index.mdx

@@ -16,50 +16,39 @@ created_at: '2022-08-02T12:07:45Z'
 
 For this tutorial, we would like to fetch the list of repositories for a given GitHub organization. To aid you, we have added the `getRepositories()` function to the bottom of the file. Your task is to use the `getRepositories()` function to fetch the list of repositories whenever the user updates the `org` input.
 
-Qwik provides [`useResource$()`](/docs/(qwik)/core/state/index.mdx) and `<Resource>` to help you fetch and display data from the server. When fetching data the application can be in one of three states:
+Qwik provides [`useAsync$()`](/docs/(qwik)/core/state/index.mdx) to help you fetch and display data from the server. When fetching data the application can be in one of three states:
 
 - `pending`: the data is being fetched from the server => Render `loading...` indicator.
-- `resolved`: the data has successfully been fetched from the server => Render the data.
 - `rejected`: the data could not be fetched from the server due to an error => Render the error.
+- `resolved`: the data has successfully been fetched from the server => Render the data.
 
-Use [`useResource$()`](/docs/(qwik)/core/state/index.mdx) function to set up how the data is fetched from the server. Use `<Resource>` to display the data.
+Use [`useAsync$()`](/docs/(qwik)/core/state/index.mdx) function to set up how the data is fetched from the server.
 
 ## Fetching data
 
-Use [`useResource$()`](/docs/(qwik)/core/state/index.mdx) to set up how the data is fetched from the server.
-
+Use [`useAsync$()`](/docs/(qwik)/core/state/index.mdx) to set up how the data is fetched from the server.
 ```jsx
-  const reposResource = useResource$<string[]>(({ track, cleanup }) => {
+  const reposResource = useAsync$<string[]>(({ track, abortSignal }) => {
     // We need a way to re-run fetching data whenever the `github.org` changes.
     // Use `track` to trigger re-running of this data fetching function.
-    track(() => github.org);
-
-    // A good practice is to use `AbortController` to abort the fetching of data if
-    // new request comes in. We create a new `AbortController` and register a `cleanup`
-    // function which is called when this function re-runs.
-    const controller = new AbortController();
-    cleanup(() => controller.abort());
-
-    // Fetch the data and return the promises.
-    return getRepositories(github.org, controller);
+    const org = track(githubOrg);
+  
+    // The abortSignal is automatically (lazily) provided and will be aborted when this
+    // function re-runs, allowing you to cancel pending operations.
+    return getRepositories(org, abortSignal);
   });
 ```
 
-The [`useResource$()`](/docs/(qwik)/core/state/index.mdx) function returns a `ResourceReturn` object, which is a Promise-like object that can be serialized by Qwik. The [`useResource$()`](/docs/(qwik)/core/state/index.mdx) function allows you to `track` store properties so that the [`useResource$()`](/docs/(qwik)/core/state/index.mdx) function can be reactive on store changes. The `cleanup` function allows you to register a code that needs to be run to release resources from the previous run. Finally, the [`useResource$()`](/docs/(qwik)/core/state/index.mdx) function returns a promise that will resolve to the value.
-
+The [`useAsync$()`](/docs/(qwik)/core/state/index.mdx) function returns an `AsyncSignal`, which is reactive state that can be serialized by Qwik. The [`useAsync$()`](/docs/(qwik)/core/state/index.mdx) function allows you to `track` store properties so that the [`useAsync$()`](/docs/(qwik)/core/state/index.mdx) function can be reactive on store changes. The `abortSignal` allows you to cancel pending operations when the function re-runs. Finally, the [`useAsync$()`](/docs/(qwik)/core/state/index.mdx) function returns a promise that will resolve to the value.
+  
 ## Rendering data
 
-Use `<Resource>` to display the data of the [`useResource$()`](/docs/(qwik)/core/state/index.mdx) function. The `<Resource>` allows you to render different content depending if the resource is `pending`, `resolved` or `rejected`.
+The `AsyncSignal` provides the `.loading` and `.error` reactive properties to allow you to render different content depending if the resource is `pending`, `resolved` or `rejected`.
 
-On the server the `<Resource>` does not render `loading` state, instead, it pauses rendering until the resource is resolved and will always render as either `resolved` or `rejected`. (On the client, the `<Resource>` renders all states including `pending`.)
+During SSR, the rendering will pause until the `AsyncSignal` has loaded so it  will always render as either `resolved` or `rejected`.
 
 ```jsx
-<Resource
-  value={resourceToRender}
-  onPending={() => <div>Loading...</div>}
-  onRejected={(reason) => <div>Error: {reason}</div>}
-  onResolved={(data) => <div>{data}</div>}
-/>
+{reposResource.loading && <div>Loading...</div> ? reposResource.error ? <div>Error: {reposResource.error}</div> : <div>{reposResource.value}</div>}
 ```
 
 ## SSR vs Client

packages/docs/src/routes/tutorial/reactivity/resource/problem/app.tsx

@@ -1,27 +1,19 @@
 // @ts-ignore: Unused import
-import { component$, useStore, Resource, useResource$ } from '@qwik.dev/core';
+import { component$, useSignal, useAsync$ } from '@qwik.dev/core';
 
 export default component$(() => {
-  const github = useStore({
-    org: 'QwikDev',
-  });
+  const githubOrg = useSignal('QwikDev');
 
-  // Use useResource$() to set up how the data is fetched from the server.
+  // Use useAsync$() to set up how the data is fetched from the server.
   // See the example for Fetching Data in the text on the left.
   // @ts-ignore: Unused declaration
-  const reposResource = useResource$<string[]>(({ track, cleanup }) => {
+  const reposResource = useAsync$<string[]>(({ track, abortSignal }) => {
     // We need a way to re-run fetching data whenever the `github.org` changes.
     // Use `track` to trigger re-running of the this data fetching function.
-    track(() => github.org);
-
-    // A good practice is to use `AbortController` to abort the fetching of data if
-    // new request comes in. We create a new `AbortController` and register a `cleanup`
-    // function which is called when this function re-runs.
-    const controller = new AbortController();
-    cleanup(() => controller.abort());
+    const org = track(githubOrg);
 
     // Fetch the data and return the promises.
-    return getRepositories(github.org, controller);
+    return getRepositories(org, abortSignal);
   });
 
   console.log('Render');
@@ -30,7 +22,7 @@ export default component$(() => {
       <p>
         <label>
           GitHub username:
-          <input value={github.org} onInput$={(ev, el) => (github.org = el.value)} />
+          <input bind:value={githubOrg} />
         </label>
       </p>
       <section>
@@ -40,7 +32,7 @@ export default component$(() => {
             <ul>
               {repos.map((repo) => (
                 <li>
-                  <a href={`https://github.com/${github.org}/${repo}`}>{repo}</a>
+                  <a href={`https://github.com/${githubOrg.value}/${repo}`}>{repo}</a>
                 </li>
               ))}
             </ul>
@@ -52,11 +44,11 @@ export default component$(() => {
 
 export async function getRepositories(
   username: string,
-  controller?: AbortController
+  abortSignal?: AbortSignal
 ): Promise<string[]> {
   console.log('FETCH', `https://api.github.com/users/${username}/repos`);
   const resp = await fetch(`https://api.github.com/users/${username}/repos`, {
-    signal: controller?.signal,
+    signal: abortSignal,
   });
   console.log('FETCH resolved');
   const json = await resp.json();

packages/docs/src/routes/tutorial/reactivity/resource/solution/app.tsx

@@ -1,24 +1,16 @@
 /* eslint-disable no-console */
-import { component$, useStore, Resource, useResource$ } from '@qwik.dev/core';
+import { component$, useSignal, useAsync$ } from '@qwik.dev/core';
 
 export default component$(() => {
-  const github = useStore({
-    org: 'QwikDev',
-  });
+  const githubOrg = useSignal('QwikDev');
 
-  const reposResource = useResource$<string[]>(({ track, cleanup }) => {
+  const reposResource = useAsync$<string[]>(({ track, abortSignal }) => {
     // We need a way to re-run fetching data whenever the `github.org` changes.
     // Use `track` to trigger re-running of this data fetching function.
-    track(() => github.org);
-
-    // A good practice is to use `AbortController` to abort the fetching of data if
-    // new request comes in. We create a new `AbortController` and register a `cleanup`
-    // function which is called when this function re-runs.
-    const controller = new AbortController();
-    cleanup(() => controller.abort());
+    const org = track(githubOrg);
 
     // Fetch the data and return the promises.
-    return getRepositories(github.org, controller);
+    return getRepositories(org, abortSignal);
   });
 
   console.log('Render');
@@ -27,36 +19,35 @@ export default component$(() => {
       <p>
         <label>
           GitHub username:
-          <input value={github.org} onInput$={(ev, el) => (github.org = el.value)} />
+          <input bind:value={githubOrg} />
         </label>
       </p>
       <section>
-        <Resource
-          value={reposResource}
-          onPending={() => <>Loading...</>}
-          onRejected={(error) => <>Error: {error.message}</>}
-          onResolved={(repos) => (
-            <ul>
-              {repos.map((repo) => (
-                <li>
-                  <a href={`https://github.com/${github.org}/${repo}`}>{repo}</a>
-                </li>
-              ))}
-            </ul>
-          )}
-        />
+        {reposResource.loading ? (
+          <>Loading...</>
+        ) : reposResource.error ? (
+          <>Error: {reposResource.error.message}</>
+        ) : (
+          <ul>
+            {reposResource.value?.map((repo) => (
+              <li>
+                <a href={`https://github.com/${githubOrg.value}/${repo}`}>{repo}</a>
+              </li>
+            ))}
+          </ul>
+        )}
       </section>
     </main>
   );
 });
 
 export async function getRepositories(
   username: string,
-  controller?: AbortController
+  abortSignal?: AbortSignal
 ): Promise<string[]> {
   console.log('FETCH', `https://api.github.com/users/${username}/repos`);
   const resp = await fetch(`https://api.github.com/users/${username}/repos`, {
-    signal: controller?.signal,
+    signal: abortSignal,
   });
   console.log('FETCH resolved');
   const json = await resp.json();

packages/qwik/handlers.mjs

@@ -6,4 +6,4 @@
  *
  * Make sure that these handlers are listed in manifest.ts
  */
-export { _chk, _res, _run, _task, _val } from '@qwik.dev/core';
+export { _chk, _rsc, _res, _run, _task, _val } from '@qwik.dev/core';

packages/qwik/src/core/internal.ts

@@ -71,3 +71,4 @@ export {
 export { useLexicalScope } from './use/use-lexical-scope.public';
 export { isTask as _isTask, scheduleTask as _task } from './use/use-task';
 export { _captures } from './shared/qrl/qrl-class';
+export { _rsc } from './use/use-resource';

packages/qwik/src/core/reactive-primitives/impl/async-signal-impl.ts

@@ -32,25 +32,39 @@ const log = (...args: any[]) =>
   console.log('ASYNC COMPUTED SIGNAL', ...args.map(qwikDebugToString));
 
 /** Retains job metadata and also serves as the argument for the compute function */
-class AsyncJob<T> implements AsyncCtx {
+class AsyncJob<T> implements AsyncCtx<T> {
   /** First holds the compute promise and then the cleanup promise */
   $promise$: Promise<void> | null = null;
   $cleanupRequested$: boolean = false;
   $canWrite$: boolean = true;
-  $track$: AsyncCtx['track'] | undefined;
-  $cleanups$: Parameters<AsyncCtx['cleanup']>[0][] | undefined;
+  $track$: AsyncCtx<T>['track'] | undefined;
+  $cleanups$: Parameters<AsyncCtx<T>['cleanup']>[0][] | undefined;
   $abortController$: AbortController | undefined;
 
   constructor(readonly $signal$: AsyncSignalImpl<T>) {}
 
-  get track(): AsyncCtx['track'] {
+  get track(): AsyncCtx<T>['track'] {
     return (this.$track$ ||= trackFn(this.$signal$, this.$signal$.$container$));
   }
 
   get abortSignal(): AbortSignal {
     return (this.$abortController$ ||= new AbortController()).signal;
   }
 
+  /** Backward compatible cache method for resource */
+  cache(): void {
+    console.error(
+      'useResource cache() method does not do anything. Use `useAsync$` instead of `useResource$`, use the `pollMs` option for polling behavior.'
+    );
+  }
+
+  get previous(): T | undefined {
+    const val = this.$signal$.$untrackedValue$;
+    if (val !== NEEDS_COMPUTATION) {
+      return val;
+    }
+  }
+
   cleanup(callback: () => void) {
     if (typeof callback === 'function') {
       (this.$cleanups$ ||= []).push(callback);

packages/qwik/src/core/reactive-primitives/impl/signal-impl.ts

@@ -82,8 +82,9 @@ export class SignalImpl<T = any> implements Signal<T> {
       (import.meta.env.TEST ? !isDomContainer(this.$container$) : isServer) &&
         addQrlToSerializationCtx(effectSubscriber, this.$container$);
       DEBUG && log('read->sub', pad('\n' + this.toString(), '  '));
+    } else {
+      DEBUG && log('read no sub', pad('\n' + this.toString(), '  '));
     }
-    DEBUG && log('read no sub', pad('\n' + this.toString(), '  '));
     return val;
   }