feat: make rxMutation standalone (#219) [backport v19]

This makes `rxMutation` a fully autonomous function
which can also be used entirely independently of the
SignalStore.

It also exposes the following additional properties:
- `isSuccess`
- `hasValue`
- `value`

Author: manfredsteyer

apps/demo/src/app/app.component.html

@@ -27,6 +27,7 @@
       <a mat-list-item routerLink="/feature-factory">withFeatureFactory</a>
       <a mat-list-item routerLink="/conditional">withConditional</a>
       <a mat-list-item routerLink="/mutation">withMutation</a>
+      <a mat-list-item routerLink="/rx-mutation">rxMutation (without Store)</a>
     </mat-nav-list>
   </mat-drawer>
   <mat-drawer-content>

apps/demo/src/app/counter-rx-mutation/counter-rx-mutation.css

@@ -0,0 +1,20 @@
+<h1>rxMutation (without Store)</h1>
+
+<div class="counter">{{ counter() }}</div>
+
+<ul>
+  <li>isPending: {{ isPending() }}</li>
+  <li>Status: {{ status() }}</li>
+  <li>Error: {{ error() | json }}</li>
+  <li>Value: {{ value() | json }}</li>
+  <li>hasValue: {{ hasValue() | json }}</li>
+</ul>
+
+<div>
+  <button (click)="incrementCounter()" [disabled]="isPending()">
+    Increment by 1
+  </button>
+  <button (click)="incrementBy13()" [disabled]="isPending()">
+    Increment by 13
+  </button>
+</div>

apps/demo/src/app/counter-rx-mutation/counter-rx-mutation.html

@@ -0,0 +1,69 @@
+import { concatOp, rxMutation } from '@angular-architects/ngrx-toolkit';
+import { CommonModule } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { delay, Observable, of, throwError } from 'rxjs';
+
+export type Params = {
+  value: number;
+};
+
+@Component({
+  selector: 'demo-counter-rx-mutation',
+  imports: [CommonModule],
+  templateUrl: './counter-rx-mutation.html',
+  styleUrl: './counter-rx-mutation.css',
+})
+export class CounterRxMutation {
+  private counterSignal = signal(0);
+
+  private increment = rxMutation({
+    operation: (params: Params) => {
+      return calcSum(this.counterSignal(), params.value);
+    },
+    operator: concatOp,
+    onSuccess: (result) => {
+      this.counterSignal.set(result);
+    },
+    onError: (error) => {
+      console.error('Error occurred:', error);
+    },
+  });
+
+  // Expose signals for template
+  protected counter = this.counterSignal.asReadonly();
+  protected error = this.increment.error;
+  protected isPending = this.increment.isPending;
+  protected status = this.increment.status;
+  protected value = this.increment.value;
+  protected hasValue = this.increment.hasValue;
+
+  async incrementCounter() {
+    const result = await this.increment({ value: 1 });
+    if (result.status === 'success') {
+      console.log('Success:', result.value);
+    }
+    if (result.status === 'error') {
+      console.log('Error:', result.error);
+    }
+    if (result.status === 'aborted') {
+      console.log('Operation aborted');
+    }
+  }
+
+  async incrementBy13() {
+    await this.increment({ value: 13 });
+  }
+}
+
+function calcSum(a: number, b: number): Observable<number> {
+  const result = a + b;
+  if (b === 13) {
+    return throwError(() => ({
+      message: 'error due to bad luck!',
+      a,
+      b,
+      result,
+    }));
+  }
+  return of(result).pipe(delay(500));
+}

apps/demo/src/app/counter-rx-mutation/counter-rx-mutation.ts

@@ -68,4 +68,11 @@ export const lazyRoutes: Route[] = [
         (m) => m.CounterMutation,
       ),
   },
+  {
+    path: 'rx-mutation',
+    loadComponent: () =>
+      import('./counter-rx-mutation/counter-rx-mutation').then(
+        (m) => m.CounterRxMutation,
+      ),
+  },
 ];

apps/demo/src/app/lazy-routes.ts

@@ -42,7 +42,7 @@ export {
 export { emptyFeature, withConditional } from './lib/with-conditional';
 export { withFeatureFactory } from './lib/with-feature-factory';
 
-export * from './lib/rx-mutation';
+export * from './lib/mutation/rx-mutation';
 export * from './lib/with-mutations';
 export { mapToResource, withResource } from './lib/with-resource';
 
@@ -52,3 +52,5 @@ export {
   mergeOp,
   switchOp,
 } from './lib/flattening-operator';
+
+export { rxMutation } from './lib/mutation/rx-mutation';

libs/ngrx-toolkit/src/index.ts

@@ -0,0 +1,26 @@
+import { Signal } from '@angular/core';
+
+export type MutationResult<Result> =
+  | {
+      status: 'success';
+      value: Result;
+    }
+  | {
+      status: 'error';
+      error: unknown;
+    }
+  | {
+      status: 'aborted';
+    };
+
+export type MutationStatus = 'idle' | 'pending' | 'error' | 'success';
+
+export type Mutation<Parameter, Result> = {
+  (params: Parameter): Promise<MutationResult<Result>>;
+  status: Signal<MutationStatus>;
+  value: Signal<Result | undefined>;
+  isPending: Signal<boolean>;
+  isSuccess: Signal<boolean>;
+  error: Signal<unknown>;
+  hasValue(): this is Mutation<Exclude<Parameter, undefined>, Result>;
+};