refactor: rename async computed fields

Author: Varixo

packages/qwik/src/core/reactive-primitives/cleanup.ts

@@ -64,7 +64,7 @@ function clearAsyncComputedSignal(
   if (effects) {
     effects.delete(effect);
   }
-  const pendingEffects = producer.$pendingEffects$;
+  const pendingEffects = producer.$loadingEffects$;
   if (pendingEffects) {
     pendingEffects.delete(effect);
   }

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

@@ -1,4 +1,3 @@
-import { isDev } from '@qwik.dev/core/build';
 import { qwikDebugToString } from '../../debug';
 import type { Container } from '../../shared/types';
 import { ChoreType } from '../../shared/util-chore-type';
@@ -28,11 +27,11 @@ export class AsyncComputedSignalImpl<T>
   extends ComputedSignalImpl<T, AsyncComputeQRL<T>>
   implements BackRef
 {
-  $untrackedPending$: boolean = false;
-  $untrackedFailed$: boolean = false;
+  $untrackedLoading$: boolean = false;
+  $untrackedError$: Error | null = null;
 
-  $pendingEffects$: null | Set<EffectSubscription> = null;
-  $failedEffects$: null | Set<EffectSubscription> = null;
+  $loadingEffects$: null | Set<EffectSubscription> = null;
+  $errorEffects$: null | Set<EffectSubscription> = null;
   $destroy$: NoSerialize<() => void> | null;
   private $promiseValue$: T | null = null;
 
@@ -43,59 +42,56 @@ export class AsyncComputedSignalImpl<T>
   }
 
   /**
-   * Pending is true if the signal is still waiting for the promise to resolve, false if the promise
+   * Loading is true if the signal is still waiting for the promise to resolve, false if the promise
    * has resolved or rejected.
    */
-  get pending(): boolean {
+  get loading(): boolean {
     return setupSignalValueAccess(
       this,
-      () => (this.$pendingEffects$ ||= new Set()),
-      () => this.untrackedPending
+      () => (this.$loadingEffects$ ||= new Set()),
+      () => this.untrackedLoading
     );
   }
 
-  set untrackedPending(value: boolean) {
-    if (value !== this.$untrackedPending$) {
-      this.$untrackedPending$ = value;
+  set untrackedLoading(value: boolean) {
+    if (value !== this.$untrackedLoading$) {
+      this.$untrackedLoading$ = value;
       this.$container$?.$scheduler$(
         ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS,
         null,
         this,
-        this.$pendingEffects$
+        this.$loadingEffects$
       );
     }
   }
 
-  get untrackedPending() {
-    return this.$untrackedPending$;
+  get untrackedLoading() {
+    return this.$untrackedLoading$;
   }
 
-  /**
-   * Failed is true if the signal failed to resolve, false if the promise has resolved or is still
-   * pending.
-   */
-  get failed(): boolean {
+  /** The error that occurred when the signal was resolved. */
+  get error(): Error | null {
     return setupSignalValueAccess(
       this,
-      () => (this.$failedEffects$ ||= new Set()),
-      () => this.untrackedFailed
+      () => (this.$errorEffects$ ||= new Set()),
+      () => this.untrackedError
     );
   }
 
-  set untrackedFailed(value: boolean) {
-    if (value !== this.$untrackedFailed$) {
-      this.$untrackedFailed$ = value;
+  set untrackedError(value: Error | null) {
+    if (value !== this.$untrackedError$) {
+      this.$untrackedError$ = value;
       this.$container$?.$scheduler$(
         ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS,
         null,
         this,
-        this.$failedEffects$
+        this.$errorEffects$
       );
     }
   }
 
-  get untrackedFailed() {
-    return this.$untrackedFailed$;
+  get untrackedError() {
+    return this.$untrackedError$;
   }
 
   $computeIfNeeded$() {
@@ -113,20 +109,17 @@ export class AsyncComputedSignalImpl<T>
         cleanup,
       }) as T);
     if (isPromise(untrackedValue)) {
-      this.untrackedPending = true;
-      this.untrackedFailed = false;
+      this.untrackedLoading = true;
+      this.untrackedError = null;
       throw untrackedValue
         .then((promiseValue) => {
           this.$promiseValue$ = promiseValue;
-          this.untrackedPending = false;
+          this.untrackedLoading = false;
+          this.untrackedError = null;
         })
         .catch((err) => {
-          if (isDev) {
-            console.error(err);
-          }
-          // TODO: should we store the error?
-          // this.$promiseValue$ = err;
-          this.untrackedFailed = true;
+          this.untrackedLoading = false;
+          this.untrackedError = err;
         });
     }
     this.$promiseValue$ = null;

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

@@ -16,8 +16,8 @@ export interface ReadonlySignal<T = unknown> {
 /** @public */
 export interface AsyncComputedReadonlySignal<T = unknown> extends ReadonlySignal<T> {
   // TODO: enable later this, after the scheduler changes for "streaming" signals values
-  // pending: boolean;
-  // failed: boolean;
+  // loading: boolean;
+  // error: Error | null;
 }
 
 /**

packages/qwik/src/core/shared/shared-serialization.ts

@@ -297,15 +297,15 @@ const inflate = (
         Array<EffectSubscription> | null,
         Array<EffectSubscription> | null,
         boolean,
-        boolean,
+        Error,
         unknown?,
       ];
       asyncComputed.$computeQrl$ = d[0];
       asyncComputed.$effects$ = new Set(d[1]);
-      asyncComputed.$pendingEffects$ = new Set(d[2]);
-      asyncComputed.$failedEffects$ = new Set(d[3]);
-      asyncComputed.$untrackedPending$ = d[4];
-      asyncComputed.$untrackedFailed$ = d[5];
+      asyncComputed.$loadingEffects$ = new Set(d[2]);
+      asyncComputed.$errorEffects$ = new Set(d[3]);
+      asyncComputed.$untrackedLoading$ = d[4];
+      asyncComputed.$untrackedError$ = d[5];
       const hasValue = d.length > 6;
       if (hasValue) {
         asyncComputed.$untrackedValue$ = d[6];
@@ -1192,15 +1192,15 @@ async function serialize(serializationContext: SerializationContext): Promise<vo
           Set<EffectSubscription> | null,
           Set<EffectSubscription> | null,
           boolean,
-          boolean,
+          Error | null,
           unknown?,
         ] = [
           value.$computeQrl$,
           value.$effects$,
-          value.$pendingEffects$,
-          value.$failedEffects$,
-          value.$untrackedPending$,
-          value.$untrackedFailed$,
+          value.$loadingEffects$,
+          value.$errorEffects$,
+          value.$untrackedLoading$,
+          value.$untrackedError$,
         ];
         if (v !== NEEDS_COMPUTATION) {
           out.push(v);

starters/apps/e2e/src/components/async-computed/async-computed.tsx

@@ -57,7 +57,7 @@ export const PendingComponent = component$(() => {
 
   return (
     <div>
-      {(double as any).pending ? "pending" : "not pending"}
+      {(double as any).loading ? "loading" : "not loading"}
       <div class="result">double: {double.value}</div>
       <button id="increment" onClick$={() => count.value++}>
         Increment