@mmstack/resource 20.4.1 → 21.0.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025-present Miha J. Mulec
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025-present Miha J. Mulec
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,120 +1,120 @@
-# @mmstack/resource
-
-[![npm version](https://badge.fury.io/js/%40mmstack%2Fresource.svg)](https://www.npmjs.com/package/@mmstack/resource)
-[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mihajm/mmstack/blob/master/packages/resource/LICENSE)
-
-`@mmstack/resource` is an Angular library that provides powerful, signal-based primitives for managing asynchronous data fetching and mutations. It builds upon Angular's `httpResource` and offers features like caching, retries, refresh intervals, circuit breakers, and request deduplication, all while maintaining a fine-grained reactive graph. It's inspired by libraries like TanStack Query, but aims for a more Angular-idiomatic and signal-centric approach.
-
-## Features
-
-- **Signal-Based:** Fully integrates with Angular's signal system for efficient change detection and reactivity.
-- **Caching:** Built-in caching with configurable TTL (Time To Live) and stale-while-revalidate behavior. Supports custom cache key generation and respects HTTP caching headers.
-- **Retries:** Automatic retries on failure with configurable backoff strategies.
-- **Refresh Intervals:** Automatically refetch data at specified intervals.
-- **Circuit Breaker:** Protects your application from cascading failures by temporarily disabling requests to failing endpoints.
-- **Request Deduplication:** Avoids making multiple identical requests concurrently.
-- **Mutations:** Provides a dedicated `mutationResource` for handling data modifications, with callbacks for `onMutate`, `onError`, `onSuccess`, and `onSettled`.
-- **Prefetching:** Allows you to prefetch data into the cache, improving perceived performance.
-- **Extensible:** Designed to be modular and extensible. You can easily add your own custom features or integrate with other libraries.
-- **TypeScript Support:** A strong focus on typesafety
-
-## Quick Start
-
-1. Install mmstack-resource
-
-```bash
-npm install @mmstack/resource
-```
-
-2. Initialize the QueryCache & interceptors (optional)
-
-```typescript
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { ApplicationConfig } from '@angular/core';
-import { createCacheInterceptor, createDedupeRequestsInterceptor, provideQueryCache } from '@mmstack/resource';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    // ..other providers
-    provideQueryCache(),
-
-    // --- Example of a more advanced setup ---
-    // provideQueryCache({
-    //   persist: true, // Enable IndexedDB persistence
-    //   version: 1,    // Version for the cache schema
-    //   syncTabs: true // enable BroadcastChannel
-    // }),
-
-    provideHttpClient(withInterceptors([createCacheInterceptor(), createDedupeRequestsInterceptor()])),
-  ],
-};
-```
-
-3. Use it :)
-
-```typescript
-import { Injectable, isDevMode, untracked } from '@angular/core';
-import { createCircuitBreaker, mutationResource, queryResource } from '@mmstack/resource';
-
-type Post = {
-  userId: number;
-  id: number;
-  title: string;
-  body: string;
-};
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PostsService {
-  private readonly endpoint = 'https://jsonplaceholder.typicode.com/posts';
-  private readonly cb = createCircuitBreaker();
-  readonly posts = queryResource<Post[]>(
-    () => ({
-      url: this.endpoint,
-    }),
-    {
-      keepPrevious: true, // keep data between requests
-      refresh: 5 * 60 * 1000, // refresh every 5 minutes
-      circuitBreaker: this.cb, // use shared circuit breaker use true if not sharing
-      retry: 3, // retry 3 times on error using default backoff
-      onError: (err) => {
-        if (!isDevMode()) return;
-        console.error(err);
-      }, // log errors in dev mode
-      defaultValue: [],
-    },
-  );
-
-  private readonly createPostResource = mutationResource(
-    (post: Post) => ({
-      url: this.endpoint,
-      method: 'POST',
-      body: post,
-    }),
-    {
-      circuitBreaker: this.cb, // use shared circuit breaker use true if not sharing
-      onMutate: (post: Post) => {
-        const prev = untracked(this.posts.value);
-        this.posts.set([...prev, post]); // optimistically update
-        return prev;
-      },
-      onError: (err, prev) => {
-        if (isDevMode()) console.error(err);
-        this.posts.set(prev); // rollback on error
-      },
-      onSuccess: (next) => {
-        this.posts.update((posts) => posts.map((p) => (p.id === next.id ? next : p))); // replace with value from server
-      },
-    },
-  );
-
-  createPost(post: Post) {
-    this.createPostResource.mutate(post); // send the request
-  }
-}
-```
-
-## In-depth
-
-For an in-depth explanation of the primitives & how they work check out this article: [Fun-grained Reactivity in Angular: Part 3 - Resources](https://dev.to/mihamulec/fun-grained-reactivity-in-angular-part-3-client-side-http-57g4)
+# @mmstack/resource
+
+[![npm version](https://badge.fury.io/js/%40mmstack%2Fresource.svg)](https://www.npmjs.com/package/@mmstack/resource)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mihajm/mmstack/blob/master/packages/resource/LICENSE)
+
+`@mmstack/resource` is an Angular library that provides powerful, signal-based primitives for managing asynchronous data fetching and mutations. It builds upon Angular's `httpResource` and offers features like caching, retries, refresh intervals, circuit breakers, and request deduplication, all while maintaining a fine-grained reactive graph. It's inspired by libraries like TanStack Query, but aims for a more Angular-idiomatic and signal-centric approach.
+
+## Features
+
+- **Signal-Based:** Fully integrates with Angular's signal system for efficient change detection and reactivity.
+- **Caching:** Built-in caching with configurable TTL (Time To Live) and stale-while-revalidate behavior. Supports custom cache key generation and respects HTTP caching headers.
+- **Retries:** Automatic retries on failure with configurable backoff strategies.
+- **Refresh Intervals:** Automatically refetch data at specified intervals.
+- **Circuit Breaker:** Protects your application from cascading failures by temporarily disabling requests to failing endpoints.
+- **Request Deduplication:** Avoids making multiple identical requests concurrently.
+- **Mutations:** Provides a dedicated `mutationResource` for handling data modifications, with callbacks for `onMutate`, `onError`, `onSuccess`, and `onSettled`.
+- **Prefetching:** Allows you to prefetch data into the cache, improving perceived performance.
+- **Extensible:** Designed to be modular and extensible. You can easily add your own custom features or integrate with other libraries.
+- **TypeScript Support:** A strong focus on typesafety
+
+## Quick Start
+
+1. Install mmstack-resource
+
+```bash
+npm install @mmstack/resource
+```
+
+2. Initialize the QueryCache & interceptors (optional)
+
+```typescript
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
+import { createCacheInterceptor, createDedupeRequestsInterceptor, provideQueryCache } from '@mmstack/resource';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ..other providers
+    provideQueryCache(),
+
+    // --- Example of a more advanced setup ---
+    // provideQueryCache({
+    //   persist: true, // Enable IndexedDB persistence
+    //   version: 1,    // Version for the cache schema
+    //   syncTabs: true // enable BroadcastChannel
+    // }),
+
+    provideHttpClient(withInterceptors([createCacheInterceptor(), createDedupeRequestsInterceptor()])),
+  ],
+};
+```
+
+3. Use it :)
+
+```typescript
+import { Injectable, isDevMode, untracked } from '@angular/core';
+import { createCircuitBreaker, mutationResource, queryResource } from '@mmstack/resource';
+
+type Post = {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PostsService {
+  private readonly endpoint = 'https://jsonplaceholder.typicode.com/posts';
+  private readonly cb = createCircuitBreaker();
+  readonly posts = queryResource<Post[]>(
+    () => ({
+      url: this.endpoint,
+    }),
+    {
+      keepPrevious: true, // keep data between requests
+      refresh: 5 * 60 * 1000, // refresh every 5 minutes
+      circuitBreaker: this.cb, // use shared circuit breaker use true if not sharing
+      retry: 3, // retry 3 times on error using default backoff
+      onError: (err) => {
+        if (!isDevMode()) return;
+        console.error(err);
+      }, // log errors in dev mode
+      defaultValue: [],
+    },
+  );
+
+  private readonly createPostResource = mutationResource(
+    (post: Post) => ({
+      url: this.endpoint,
+      method: 'POST',
+      body: post,
+    }),
+    {
+      circuitBreaker: this.cb, // use shared circuit breaker use true if not sharing
+      onMutate: (post: Post) => {
+        const prev = untracked(this.posts.value);
+        this.posts.set([...prev, post]); // optimistically update
+        return prev;
+      },
+      onError: (err, prev) => {
+        if (isDevMode()) console.error(err);
+        this.posts.set(prev); // rollback on error
+      },
+      onSuccess: (next) => {
+        this.posts.update((posts) => posts.map((p) => (p.id === next.id ? next : p))); // replace with value from server
+      },
+    },
+  );
+
+  createPost(post: Post) {
+    this.createPostResource.mutate(post); // send the request
+  }
+}
+```
+
+## In-depth
+
+For an in-depth explanation of the primitives & how they work check out this article: [Fun-grained Reactivity in Angular: Part 3 - Resources](https://dev.to/mihamulec/fun-grained-reactivity-in-angular-part-3-client-side-http-57g4)

package/fesm2022/mmstack-resource.mjs

@@ -1178,15 +1178,13 @@ function hasSlowConnection() {
 
 function persist(src, equal) {
     // linkedSignal allows us to access previous source value
-    const persisted = linkedSignal({
-        source: () => src(),
+    const persisted = linkedSignal({ ...(ngDevMode ? { debugName: "persisted" } : {}), source: () => src(),
         computation: (next, prev) => {
             if (next === undefined && prev !== undefined)
                 return prev.value;
             return next;
         },
-        equal,
-    });
+        equal });
     // if original value was WritableSignal then override linkedSignal methods to original...angular uses linkedSignal under the hood in ResourceImpl, this applies to that.
     if ('set' in src) {
         persisted.set = src.set;
@@ -1271,10 +1269,10 @@ function retryOnError(res, opt) {
 
 class ResourceSensors {
     networkStatus = sensor('networkStatus');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResourceSensors, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResourceSensors, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ResourceSensors, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ResourceSensors, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResourceSensors, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ResourceSensors, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1341,17 +1339,11 @@ function queryResource(request, options) {
         if (!networkAvailable() || cb.isOpen())
             return undefined;
         return request() ?? undefined;
-    }, ...(ngDevMode ? [{ debugName: "stableRequest", equal: (a, b) => {
-                if (eq)
-                    return eq(a, b);
-                return a === b;
-            } }] : [{
-            equal: (a, b) => {
-                if (eq)
-                    return eq(a, b);
-                return a === b;
-            },
-        }]));
+    }, { ...(ngDevMode ? { debugName: "stableRequest" } : {}), equal: (a, b) => {
+            if (eq)
+                return eq(a, b);
+            return a === b;
+        } });
     const hashFn = typeof options?.cache === 'object'
         ? (options.cache.hash ?? urlWithParams)
         : urlWithParams;
@@ -1393,8 +1385,7 @@ function queryResource(request, options) {
     resource = catchValueError(resource, options?.defaultValue);
     // get full HttpResonse from Cache
     const cachedEvent = cache.getEntryOrKey(cacheKey);
-    const cacheEntry = linkedSignal({
-        source: () => cachedEvent(),
+    const cacheEntry = linkedSignal({ ...(ngDevMode ? { debugName: "cacheEntry" } : {}), source: () => cachedEvent(),
         computation: (entry, prev) => {
             if (!entry)
                 return null;
@@ -1412,8 +1403,7 @@ function queryResource(request, options) {
                 value: entry.value.body,
                 key: entry.key,
             };
-        },
-    });
+        } });
     resource = refresh(resource, destroyRef, options?.refresh);
     resource = retryOnError(resource, options?.retry);
     resource = persistResourceValues(resource, options?.keepPrevious, options?.equal);
@@ -1498,6 +1488,7 @@ function queryResource(request, options) {
             try {
                 await firstValueFrom(client.request(prefetchRequest.method ?? 'GET', prefetchRequest.url, {
                     ...prefetchRequest,
+                    referrerPolicy: prefetchRequest.referrerPolicy,
                     credentials: prefetchRequest.credentials,
                     priority: prefetchRequest.priority,
                     cache: prefetchRequest.cache,
@@ -1551,21 +1542,13 @@ function mutationResource(request, options = {}) {
     const { onMutate, onError, onSuccess, onSettled, equal, ...rest } = options;
     const requestEqual = createEqualRequest(equal);
     const eq = equal ?? Object.is;
-    const next = signal(null, ...(ngDevMode ? [{ debugName: "next", equal: (a, b) => {
-                if (!a && !b)
-                    return true;
-                if (!a || !b)
-                    return false;
-                return eq(a, b);
-            } }] : [{
-            equal: (a, b) => {
-                if (!a && !b)
-                    return true;
-                if (!a || !b)
-                    return false;
-                return eq(a, b);
-            },
-        }]));
+    const next = signal(null, { ...(ngDevMode ? { debugName: "next" } : {}), equal: (a, b) => {
+            if (!a && !b)
+                return true;
+            if (!a || !b)
+                return false;
+            return eq(a, b);
+        } });
     const queue = signal([], ...(ngDevMode ? [{ debugName: "queue" }] : []));
     let ctx = undefined;
     const queueRef = effect(() => {
@@ -1582,25 +1565,19 @@ function mutationResource(request, options = {}) {
         if (!nr)
             return;
         return request(nr) ?? undefined;
-    }, ...(ngDevMode ? [{ debugName: "req", equal: requestEqual }] : [{
-            equal: requestEqual,
-        }]));
-    const lastValue = linkedSignal({
-        source: next,
+    }, { ...(ngDevMode ? { debugName: "req" } : {}), equal: requestEqual });
+    const lastValue = linkedSignal({ ...(ngDevMode ? { debugName: "lastValue" } : {}), source: next,
         computation: (next, prev) => {
             if (next === null && !!prev)
                 return prev.value;
             return next;
-        },
-    });
+        } });
     const lastValueRequest = computed(() => {
         const nr = lastValue();
         if (!nr)
             return;
         return request(nr) ?? undefined;
-    }, ...(ngDevMode ? [{ debugName: "lastValueRequest", equal: requestEqual }] : [{
-            equal: requestEqual,
-        }]));
+    }, { ...(ngDevMode ? { debugName: "lastValueRequest" } : {}), equal: requestEqual });
     const cb = createCircuitBreaker(options?.circuitBreaker === true
         ? undefined
         : (options?.circuitBreaker ?? false), options?.injector);