@angular-architects/ngrx-toolkit 20.1.0 → 20.4.0

package/fesm2022/angular-architects-ngrx-toolkit.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, signal, effect, inject, PLATFORM_ID, computed, isSignal, untracked, isDevMode as isDevMode$1 } from '@angular/core';
+import { Injectable, InjectionToken, signal, effect, inject, PLATFORM_ID, computed, isSignal, untracked, isDevMode as isDevMode$1, DestroyRef } from '@angular/core';
 import { watchState, getState, signalStoreFeature, withMethods, withHooks, patchState as patchState$1, withState, withComputed, withProps, withLinkedState } from '@ngrx/signals';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
-import { Subject } from 'rxjs';
+import { Subject, switchMap, mergeMap, concatMap, exhaustMap, defer, tap, catchError, EMPTY, finalize, filter, map } from 'rxjs';
 import { removeEntity, setAllEntities, updateEntity, addEntity } from '@ngrx/signals/entities';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { HttpClient, HttpEventType, HttpResponse } from '@angular/common/http';
 
 const DEVTOOLS_FEATURE = Symbol('DEVTOOLS_FEATURE');
 function createDevtoolsFeature(options) {
@@ -1781,6 +1783,214 @@ function withFeatureFactory(factoryFn) {
     };
 }
 
+const switchOp = {
+    rxJsOperator: switchMap,
+    exhaustSemantics: false,
+};
+const mergeOp = {
+    rxJsOperator: mergeMap,
+    exhaustSemantics: false,
+};
+const concatOp = {
+    rxJsOperator: concatMap,
+    exhaustSemantics: false,
+};
+const exhaustOp = {
+    rxJsOperator: exhaustMap,
+    exhaustSemantics: true,
+};
+
+/**
+ * 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
+ */
+function rxMutation(optionsOrOperation) {
+    const inputSubject = new Subject();
+    const options = typeof optionsOrOperation === 'function'
+        ? { operation: optionsOrOperation }
+        : optionsOrOperation;
+    const flatteningOp = options.operator ?? concatOp;
+    const destroyRef = options.injector?.get(DestroyRef) ?? inject(DestroyRef);
+    const callCount = signal(0, ...(ngDevMode ? [{ debugName: "callCount" }] : []));
+    const errorSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "errorSignal" }] : []));
+    const idle = signal(true, ...(ngDevMode ? [{ debugName: "idle" }] : []));
+    const isPending = computed(() => callCount() > 0, ...(ngDevMode ? [{ debugName: "isPending" }] : []));
+    const value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    const isSuccess = computed(() => !idle() && !isPending() && !errorSignal(), ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+    const hasValue = function () {
+        return typeof value() !== 'undefined';
+    };
+    const status = computed(() => {
+        if (idle()) {
+            return 'idle';
+        }
+        if (callCount() > 0) {
+            return 'pending';
+        }
+        if (errorSignal()) {
+            return 'error';
+        }
+        return 'success';
+    }, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    const initialInnerStatus = 'idle';
+    let innerStatus = initialInnerStatus;
+    inputSubject
+        .pipe(flatteningOp.rxJsOperator((input) => defer(() => {
+        callCount.update((c) => c + 1);
+        idle.set(false);
+        return options.operation(input.param).pipe(tap((result) => {
+            options.onSuccess?.(result, input.param);
+            innerStatus = 'success';
+            errorSignal.set(undefined);
+            value.set(result);
+        }), catchError((error) => {
+            options.onError?.(error, input.param);
+            errorSignal.set(error);
+            value.set(undefined);
+            innerStatus = 'error';
+            return EMPTY;
+        }), finalize(() => {
+            callCount.update((c) => c - 1);
+            if (innerStatus === 'success') {
+                input.resolve({
+                    status: 'success',
+                    value: value(),
+                });
+            }
+            else if (innerStatus === 'error') {
+                input.resolve({
+                    status: 'error',
+                    error: errorSignal(),
+                });
+            }
+            else {
+                input.resolve({
+                    status: 'aborted',
+                });
+            }
+            innerStatus = initialInnerStatus;
+        }));
+    })), takeUntilDestroyed(destroyRef))
+        .subscribe();
+    const mutationFn = (param) => {
+        return new Promise((resolve) => {
+            if (callCount() > 0 && flatteningOp.exhaustSemantics) {
+                resolve({
+                    status: 'aborted',
+                });
+            }
+            else {
+                inputSubject.next({
+                    param,
+                    resolve,
+                });
+            }
+        });
+    };
+    const mutation = mutationFn;
+    mutation.status = status;
+    mutation.isPending = isPending;
+    mutation.error = errorSignal;
+    mutation.value = value;
+    mutation.hasValue = hasValue;
+    mutation.isSuccess = isSuccess;
+    return mutation;
+}
+
+function withMutations(mutationsFactory) {
+    return (store) => {
+        // TODO: Is this the correct usage?
+        const source = store;
+        const mutations = mutationsFactory({
+            ...source,
+            ...store.props,
+            ...store.methods,
+            ...store.stateSignals,
+        });
+        const feature = createMutationsFeature(mutations);
+        return feature(store);
+    };
+}
+function createMutationsFeature(mutations) {
+    const keys = Object.keys(mutations);
+    const feature = signalStoreFeature(withMethods(() => keys.reduce((acc, key) => ({
+        ...acc,
+        [key]: async (params) => {
+            const mutation = mutations[key];
+            if (!mutation) {
+                throw new Error(`Mutation ${key} not found`);
+            }
+            const result = await mutation(params);
+            return result;
+        },
+    }), {})), withComputed(() => keys.reduce((acc, key) => ({
+        ...acc,
+        [`${key}IsPending`]: mutations[key].isPending,
+        [`${key}Status`]: mutations[key].status,
+        [`${key}Error`]: mutations[key].error,
+    }), {})));
+    return feature;
+}
+
 //** Types for `withResource` */
 function withResource(resourceFactory) {
     return (store) => {
@@ -1880,9 +2090,107 @@ function mapToResource(store, name) {
     };
 }
 
+/**
+ * Creates an HTTP mutation.
+ *
+ * ```typescript
+ * 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.
+ */
+function httpMutation(optionsOrRequest) {
+    const httpClient = inject(HttpClient);
+    const options = typeof optionsOrRequest === 'function'
+        ? { request: optionsOrRequest }
+        : optionsOrRequest;
+    const parse = options.parse ?? ((raw) => raw);
+    const uploadProgress = signal(undefined, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+    const downloadProgress = signal(undefined, ...(ngDevMode ? [{ debugName: "downloadProgress" }] : []));
+    const headers = signal(undefined, ...(ngDevMode ? [{ debugName: "headers" }] : []));
+    const statusCode = signal(undefined, ...(ngDevMode ? [{ debugName: "statusCode" }] : []));
+    const mutation = rxMutation({
+        ...options,
+        operation: (param) => {
+            const httpRequest = options.request(param);
+            return defer(() => {
+                uploadProgress.set(undefined);
+                downloadProgress.set(undefined);
+                headers.set(undefined);
+                statusCode.set(undefined);
+                return httpClient
+                    .request(httpRequest.method, httpRequest.url, {
+                    ...httpRequest,
+                    observe: 'events',
+                    responseType: 'json',
+                })
+                    .pipe(tap((response) => {
+                    if (response.type === HttpEventType.UploadProgress) {
+                        uploadProgress.set(response);
+                    }
+                    else if (response.type === HttpEventType.DownloadProgress) {
+                        downloadProgress.set(response);
+                    }
+                }), filter((event) => event instanceof HttpResponse), tap((response) => {
+                    headers.set(response.headers);
+                    statusCode.set(response.status.toString());
+                }), map((event) => parse(event.body)));
+            });
+        },
+    });
+    mutation.uploadProgress = uploadProgress;
+    mutation.downloadProgress = downloadProgress;
+    mutation.statusCode = statusCode;
+    mutation.headers = headers;
+    return mutation;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { capitalize, createEffects, createPageArray, createReducer, deriveCallStateKeys, emptyFeature, firstPage, getCallStateKeys, getCollectionArray, getDataServiceKeys, getUndoRedoKeys, gotoPage, mapToResource, nextPage, noPayload, patchState, payload, previousPage, provideDevtoolsConfig, renameDevtoolsName, setError, setLoaded, setLoading, setMaxPageNavigationArrayItems, setPageSize, setResetState, updateState, withCallState, withConditional, withDataService, withDevToolsStub, withDevtools, withDisabledNameIndices, withFeatureFactory, withGlitchTracking, withImmutableState, withIndexedDB, withIndexedDB as withIndexeddb, withLocalStorage, withMapper, withPagination, withRedux, withReset, withResource, withSessionStorage, withStorageSync, withUndoRedo };
+export { capitalize, concatOp, createEffects, createPageArray, createReducer, deriveCallStateKeys, emptyFeature, exhaustOp, firstPage, getCallStateKeys, getCollectionArray, getDataServiceKeys, getUndoRedoKeys, gotoPage, httpMutation, mapToResource, mergeOp, nextPage, noPayload, patchState, payload, previousPage, provideDevtoolsConfig, renameDevtoolsName, rxMutation, setError, setLoaded, setLoading, setMaxPageNavigationArrayItems, setPageSize, setResetState, switchOp, updateState, withCallState, withConditional, withDataService, withDevToolsStub, withDevtools, withDisabledNameIndices, withFeatureFactory, withGlitchTracking, withImmutableState, withIndexedDB, withIndexedDB as withIndexeddb, withLocalStorage, withMapper, withMutations, withPagination, withRedux, withReset, withResource, withSessionStorage, withStorageSync, withUndoRedo };
 //# sourceMappingURL=angular-architects-ngrx-toolkit.mjs.map