@angular-architects/ngrx-toolkit 20.3.0 → 20.4.1

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

@@ -2,9 +2,10 @@ import * as i0 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, switchMap, mergeMap, concatMap, exhaustMap, defer, tap, catchError, EMPTY, finalize } 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) {
@@ -341,7 +342,7 @@ Enable automatic indexing via withDevTools('${storeName}', { indexNames: true })
         }, {});
         this.#currentState = Object.entries(this.#currentState).reduce((newState, [storeName, state]) => {
             if (storeName !== name) {
-                newState[name] = state;
+                newState[storeName] = state;
             }
             return newState;
         }, {});
@@ -349,18 +350,31 @@ Enable automatic indexing via withDevTools('${storeName}', { indexNames: true })
             tracker.removeStore(id);
         }
     }
-    renameStore(oldName, newName) {
-        const storeNames = Object.values(this.#stores).map((store) => store.name);
-        const id = throwIfNull(Object.keys(this.#stores).find((id) => this.#stores[id].name === oldName));
-        if (storeNames.includes(newName)) {
+    /**
+     * Renames a store identified by its internal id. If the store has already
+     * been removed (e.g. due to component destruction), this is a no-op.
+     */
+    renameStore(id, newName) {
+        const storeEntry = this.#stores[id];
+        if (!storeEntry) {
+            return;
+        }
+        const oldName = storeEntry.name;
+        if (oldName === newName) {
+            return;
+        }
+        const otherStoreNames = Object.entries(this.#stores)
+            .filter(([entryId]) => entryId !== id)
+            .map(([, s]) => s.name);
+        if (otherStoreNames.includes(newName)) {
             throw new Error(`NgRx Toolkit/DevTools: cannot rename from ${oldName} to ${newName}. ${newName} is already assigned to another SignalStore instance.`);
         }
-        this.#stores = Object.entries(this.#stores).reduce((newStore, [id, value]) => {
-            if (value.name === oldName) {
-                newStore[id] = { ...value, name: newName };
+        this.#stores = Object.entries(this.#stores).reduce((newStore, [entryId, value]) => {
+            if (entryId === id) {
+                newStore[entryId] = { ...value, name: newName };
             }
             else {
-                newStore[id] = value;
+                newStore[entryId] = value;
             }
             return newStore;
         }, {});
@@ -405,7 +419,7 @@ function withDevtools(name, ...features) {
         // TODO: use withProps and symbols
         return {
             [renameDevtoolsMethodName]: (newName) => {
-                syncer.renameStore(name, newName);
+                syncer.renameStore(id, newName);
             },
             [uniqueDevtoolsId]: () => id,
         };
@@ -1811,47 +1825,73 @@ const exhaustOp = {
  *
  * 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
- * export type Params = {
- *   value: number;
- * };
+ * const counterSignal = signal(0);
  *
- * 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);
- *       },
- *     }),
- *   })),
- * );
+ * 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(a + b);
+ *   return of(result).pipe(delay(500));
  * }
  * ```
  *
  * @param options
- * @returns
+ * @returns the actual mutation function along tracking data as properties/methods
  */
-function rxMutation(options) {
+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';
@@ -1866,7 +1906,6 @@ function rxMutation(options) {
     }, ...(ngDevMode ? [{ debugName: "status" }] : []));
     const initialInnerStatus = 'idle';
     let innerStatus = initialInnerStatus;
-    let lastResult;
     inputSubject
         .pipe(flatteningOp.rxJsOperator((input) => defer(() => {
         callCount.update((c) => c + 1);
@@ -1875,10 +1914,11 @@ function rxMutation(options) {
             options.onSuccess?.(result, input.param);
             innerStatus = 'success';
             errorSignal.set(undefined);
-            lastResult = result;
+            value.set(result);
         }), catchError((error) => {
             options.onError?.(error, input.param);
             errorSignal.set(error);
+            value.set(undefined);
             innerStatus = 'error';
             return EMPTY;
         }), finalize(() => {
@@ -1886,7 +1926,7 @@ function rxMutation(options) {
             if (innerStatus === 'success') {
                 input.resolve({
                     status: 'success',
-                    value: lastResult,
+                    value: value(),
                 });
             }
             else if (innerStatus === 'error') {
@@ -1923,6 +1963,9 @@ function rxMutation(options) {
     mutation.status = status;
     mutation.isPending = isPending;
     mutation.error = errorSignal;
+    mutation.value = value;
+    mutation.hasValue = hasValue;
+    mutation.isSuccess = isSuccess;
     return mutation;
 }
 
@@ -2060,9 +2103,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, concatOp, createEffects, createPageArray, createReducer, deriveCallStateKeys, emptyFeature, exhaustOp, firstPage, getCallStateKeys, getCollectionArray, getDataServiceKeys, getUndoRedoKeys, gotoPage, 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 };
+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