@angular-architects/ngrx-toolkit 19.3.0 → 19.4.1

package/index.d.ts

@@ -22,6 +22,8 @@ export { withLocalStorage, withSessionStorage, } from './lib/storage-sync/featur
 export { SyncConfig, withStorageSync, } from './lib/storage-sync/with-storage-sync';
 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 { concatOp, exhaustOp, mergeOp, switchOp, } from './lib/flattening-operator';
+export * from './lib/mutation/http-mutation';
+export { rxMutation } from './lib/mutation/rx-mutation';

package/lib/mutation/http-mutation.d.ts

@@ -0,0 +1,86 @@
+import { HttpContext, HttpHeaders, HttpParams, HttpProgressEvent } from '@angular/common/http';
+import { Signal } from '@angular/core';
+import { Mutation } from './mutation';
+import { RxMutationOptions } from './rx-mutation';
+export type HttpMutationRequest = {
+    url: string;
+    method: string;
+    body?: unknown;
+    headers?: HttpHeaders | Record<string, string | string[]>;
+    context?: HttpContext;
+    reportProgress?: boolean;
+    params?: HttpParams | Record<string, string | number | boolean | ReadonlyArray<string | number | boolean>>;
+    withCredentials?: boolean;
+    credentials?: RequestCredentials;
+    keepalive?: boolean;
+    priority?: RequestPriority;
+    cache?: RequestCache;
+    mode?: RequestMode;
+    redirect?: RequestRedirect;
+    transferCache?: {
+        includeHeaders?: string[];
+    } | boolean;
+};
+export type HttpMutationOptions<Parameter, Result> = Omit<RxMutationOptions<Parameter, NoInfer<Result>>, 'operation'> & {
+    request: (param: Parameter) => HttpMutationRequest;
+    parse?: (response: unknown) => Result;
+};
+export type HttpMutation<Parameter, Result> = Mutation<Parameter, Result> & {
+    uploadProgress: Signal<HttpProgressEvent | undefined>;
+    downloadProgress: Signal<HttpProgressEvent | undefined>;
+    headers: Signal<HttpHeaders | undefined>;
+    statusCode: Signal<string | undefined>;
+};
+/**
+ * Creates an HTTP mutation.
+ *
+ * export type Params = {
+ *   value: number;
+ * };
+ *
+ * export type CounterResponse = {
+ *   // httpbin.org echos the request using the
+ *   // json property
+ *   json: { counter: number };
+ * };
+ *
+ * const simpleSaveUser = httpMutation({
+ *   request: (userData: AddUserEntry) => ({
+ *     url: 'api/users',
+ *     body: userData,
+ *   }),
+ *   parse: Boolean,
+ * })
+ *
+ * const saveUser = httpMutation({
+ *   request: (p: Params) => ({
+ *     url: `https://httpbin.org/post`,
+ *     method: 'POST',
+ *     body: { counter: p.value },
+ *     headers: { 'Content-Type': 'application/json' },
+ *   }),
+ *   onSuccess: (response: CounterResponse) => {
+ *     console.log('Counter sent to server:', response);
+ *   },
+ *   onError: (error) => {
+ *     console.error('Failed to send counter:', error);
+ *   },
+ * });
+ *
+ * ...
+ *
+ * const result = await this.saveUser({ value: 17 });
+ * if (result.status === 'success') {
+ *   console.log('Successfully saved to server:', result.value);
+ * }
+ * else if (result.status === 'error') {
+ *   console.log('Failed to save:', result.error);
+ * }
+ * else {
+ *   console.log('Operation aborted');
+ * }
+ *
+ * @param options The options for the HTTP mutation.
+ * @returns The HTTP mutation.
+ */
+export declare function httpMutation<Parameter, Result>(optionsOrRequest: HttpMutationOptions<Parameter, Result> | ((param: Parameter) => HttpMutationRequest)): HttpMutation<Parameter, Result>;

package/lib/mutation/mutation.d.ts

@@ -0,0 +1,20 @@
+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>;
+};

package/lib/mutation/rx-mutation.d.ts

@@ -0,0 +1,76 @@
+import { Injector } from '@angular/core';
+import { Observable } from 'rxjs';
+import { FlatteningOperator } from '../flattening-operator';
+import { Mutation } from './mutation';
+export type Operation<Parameter, Result> = (param: Parameter) => Result;
+export interface RxMutationOptions<Parameter, Result> {
+    operation: Operation<Parameter, Observable<Result>>;
+    onSuccess?: (result: Result, param: Parameter) => void;
+    onError?: (error: unknown, param: Parameter) => void;
+    operator?: FlatteningOperator;
+    injector?: Injector;
+}
+/**
+ * Creates a mutation that leverages RxJS.
+ *
+ * For each mutation the following options can be defined:
+ * - `operation`: A function that defines the mutation logic. It returns an Observable.
+ * - `onSuccess`: A callback that is called when the mutation is successful.
+ * - `onError`: A callback that is called when the mutation fails.
+ * - `operator`: An optional wrapper of an RxJS flattening operator. By default `concat` sematics are used.
+ * - `injector`: An optional Angular injector to use for dependency injection.
+ *
+ * The `operation` is the only mandatory option.
+ *
+ * The returned mutation can be called as an async function and returns a Promise.
+ * This promise informs about whether the mutation was successful, failed, or aborted
+ * (due to switchMap or exhaustMap semantics).
+ *
+ * The mutation also provides several Signals such as error, status or isPending (see below).
+ *
+ * Example usage without Store:
+ *
+ * ```typescript
+ * const counterSignal = signal(0);
+ *
+ * const increment = rxMutation({
+ *   operation: (param: Param) => {
+ *     return calcSum(this.counterSignal(), param.value);
+ *   },
+ *   operator: concatOp,
+ *   onSuccess: (result) => {
+ *     this.counterSignal.set(result);
+ *   },
+ *   onError: (error) => {
+ *     console.error('Error occurred:', error);
+ *   },
+ * });
+ *
+ * const error = increment.error;
+ * const isPending = increment.isPending;
+ * const status = increment.status;
+ * const value = increment.value;
+ * const hasValue = increment.hasValue;
+ *
+ * async function incrementCounter() {
+ *     const result = await 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');
+ *     }
+ * }
+ *
+ * function calcSum(a: number, b: number): Observable<number> {
+ *   return of(result).pipe(delay(500));
+ * }
+ * ```
+ *
+ * @param options
+ * @returns the actual mutation function along tracking data as properties/methods
+ */
+export declare function rxMutation<Parameter, Result>(optionsOrOperation: RxMutationOptions<Parameter, Result> | Operation<Parameter, Observable<Result>>): Mutation<Parameter, Result>;

package/lib/with-mutations.d.ts

@@ -1,22 +1,7 @@
 import { Signal } from '@angular/core';
 import { EmptyFeatureResult, SignalStoreFeature, SignalStoreFeatureResult, StateSignals, WritableStateSource } from '@ngrx/signals';
-export type Mutation<P, R> = {
-    (params: P): Promise<MutationResult<R>>;
-    status: Signal<MutationStatus>;
-    isPending: Signal<boolean>;
-    error: Signal<unknown>;
-};
+import { Mutation, MutationStatus } from './mutation/mutation';
 type MutationsDictionary = Record<string, Mutation<any, any>>;
-export type MutationResult<T> = {
-    status: 'success';
-    value: T;
-} | {
-    status: 'error';
-    error: unknown;
-} | {
-    status: 'aborted';
-};
-export type MutationStatus = 'idle' | 'pending' | 'error' | 'success';
 export type MethodsDictionary = Record<string, Function>;
 type NamedMutationProps<T extends MutationsDictionary> = {
     [Prop in keyof T as `${Prop & string}IsPending`]: Signal<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/ngrx-toolkit",
-  "version": "19.3.0",
+  "version": "19.4.1",
   "license": "MIT",
   "repository": {
     "type": "GitHub",

package/lib/rx-mutation.d.ts

@@ -1,58 +0,0 @@
-import { Injector } from '@angular/core';
-import { Observable } from 'rxjs';
-import { FlatteningOperator } from './flattening-operator';
-import { Mutation } from './with-mutations';
-export type Func<P, R> = (params: P) => R;
-export interface RxMutationOptions<P, R> {
-    operation: Func<P, Observable<R>>;
-    onSuccess?: (result: R, params: P) => void;
-    onError?: (error: unknown, params: P) => void;
-    operator?: FlatteningOperator;
-    injector?: Injector;
-}
-/**
- * Creates a mutation that leverages RxJS.
- *
- * For each mutation the following options can be defined:
- * - `operation`: A function that defines the mutation logic. It returns an Observable.
- * - `onSuccess`: A callback that is called when the mutation is successful.
- * - `onError`: A callback that is called when the mutation fails.
- * - `operator`: An optional wrapper of an RxJS flattening operator. By default `concat` sematics are used.
- * - `injector`: An optional Angular injector to use for dependency injection.
- *
- * The `operation` is the only mandatory option.
- *
- * ```typescript
- * export type Params = {
- *   value: number;
- * };
- *
- * export const CounterStore = signalStore(
- *   { providedIn: 'root' },
- *   withState({ counter: 0 }),
- *   withMutations((store) => ({
- *     increment: rxMutation({
- *       operation: (params: Params) => {
- *         return calcSum(store.counter(), params.value);
- *       },
- *       operator: concatOp,
- *       onSuccess: (result) => {
- *         console.log('result', result);
- *         patchState(store, { counter: result });
- *       },
- *       onError: (error) => {
- *         console.error('Error occurred:', error);
- *       },
- *     }),
- *   })),
- * );
- *
- * function calcSum(a: number, b: number): Observable<number> {
- *   return of(a + b);
- * }
- * ```
- *
- * @param options
- * @returns
- */
-export declare function rxMutation<P, R>(options: RxMutationOptions<P, R>): Mutation<P, R>;