@mmstack/resource 20.2.6 → 20.2.8

package/fesm2022/mmstack-resource.mjs

@@ -1,11 +1,17 @@
-import { computed, untracked, InjectionToken, inject, isDevMode, signal, effect, Injector, linkedSignal, DestroyRef } from '@angular/core';
+import { computed, untracked, InjectionToken, isDevMode, inject, signal, effect, Injector, linkedSignal, DestroyRef } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { of, tap, map, finalize, shareReplay, interval, firstValueFrom, catchError, combineLatestWith, filter } from 'rxjs';
-import { HttpContextToken, HttpContext, HttpResponse, HttpParams, HttpHeaders, httpResource, HttpClient } from '@angular/common/http';
+import { HttpHeaders, HttpResponse, HttpContextToken, HttpContext, HttpParams, httpResource, HttpClient } from '@angular/common/http';
 import { mutable, toWritable } from '@mmstack/primitives';
 import { v7 } from 'uuid';
 import { keys, hash, entries } from '@mmstack/object';
 
+function isSyncMessage(msg) {
+    return (typeof msg === 'object' &&
+        msg !== null &&
+        'type' in msg &&
+        msg.type === 'cache-sync-message');
+}
 const ONE_DAY = 1000 * 60 * 60 * 24;
 const ONE_HOUR = 1000 * 60 * 60;
 const DEFAULT_CLEANUP_OPT = {
@@ -23,6 +29,14 @@ class Cache {
     staleTime;
     internal = mutable(new Map());
     cleanupOpt;
+    /**
+     * Destroys the cache instance, cleaning up any resources used by the cache.
+     * This method is called automatically when the cache instance is garbage collected.
+     */
+    destroy;
+    broadcast = () => {
+        // noop
+    };
     /**
      * Creates a new `Cache` instance.
      *
@@ -31,12 +45,14 @@ class Cache {
      *                    stale but can still be used while revalidation occurs in the background. Defaults to 1 hour.
      * @param cleanupOpt - Options for configuring the cache cleanup strategy.  Defaults to LRU with a
      *                     `maxSize` of 200 and a `checkInterval` of one hour.
+     * @param syncTabs - If provided, the cache will use the options a BroadcastChannel to send updates between tabs.
+     *                   Defaults to `undefined`, meaning no synchronization across tabs.
      */
     constructor(ttl = ONE_DAY, staleTime = ONE_HOUR, cleanupOpt = {
         type: 'lru',
         maxSize: 1000,
         checkInterval: ONE_HOUR,
-    }) {
+    }, syncTabs) {
         this.ttl = ttl;
         this.staleTime = staleTime;
         this.cleanupOpt = {
@@ -49,18 +65,70 @@ class Cache {
         const cleanupInterval = setInterval(() => {
             this.cleanup();
         }, cleanupOpt.checkInterval);
-        const destroyId = v7();
+        const cacheId = v7();
+        let destroySyncTabs = () => {
+            // noop
+        };
+        if (syncTabs) {
+            const channel = new BroadcastChannel(syncTabs.id);
+            this.broadcast = (msg) => {
+                if (msg.action === 'invalidate')
+                    return channel.postMessage({
+                        action: 'invalidate',
+                        entry: { key: msg.entry.key },
+                        cacheId,
+                        type: 'cache-sync-message',
+                    });
+                return channel.postMessage({
+                    ...msg,
+                    entry: {
+                        ...msg.entry,
+                        value: syncTabs.serialize(msg.entry.value),
+                    },
+                    cacheId,
+                    type: 'cache-sync-message',
+                });
+            };
+            channel.onmessage = (event) => {
+                const msg = event.data;
+                if (!isSyncMessage(msg))
+                    return;
+                if (msg.cacheId === cacheId)
+                    return; // ignore messages from this cache
+                if (msg.action === 'store') {
+                    const value = syncTabs.deserialize(msg.entry.value);
+                    if (value === null)
+                        return;
+                    this.storeInternal(msg.entry.key, value, msg.entry.stale - msg.entry.updated, msg.entry.expiresAt - msg.entry.updated, true);
+                }
+                else if (msg.action === 'invalidate') {
+                    this.invalidateInternal(msg.entry.key, true);
+                }
+            };
+            destroySyncTabs = () => {
+                channel.close();
+            };
+        }
+        let destroyed = false;
+        const destroy = () => {
+            if (destroyed)
+                return;
+            destroyed = true;
+            clearInterval(cleanupInterval);
+            destroySyncTabs();
+        };
+        this.destroy = destroy;
         // cleanup if object is garbage collected, this is because the cache can be quite large from a memory standpoint & we dont want all that floating garbage
         const registry = new FinalizationRegistry((id) => {
-            if (id === destroyId) {
-                clearInterval(cleanupInterval);
+            if (id === cacheId) {
+                destroy();
             }
         });
-        registry.register(this, destroyId);
+        registry.register(this, cacheId);
     }
     /** @internal */
     getInternal(key) {
-        const keySignal = computed(() => key());
+        const keySignal = computed(() => key(), ...(ngDevMode ? [{ debugName: "keySignal" }] : []));
         return computed(() => {
             const key = keySignal();
             if (!key)
@@ -116,6 +184,9 @@ class Cache {
      * @param ttl - (Optional) The TTL for this entry, in milliseconds. Overrides the default `ttl`.
      */
     store(key, value, staleTime = this.staleTime, ttl = this.ttl) {
+        this.storeInternal(key, value, staleTime, ttl);
+    }
+    storeInternal(key, value, staleTime = this.staleTime, ttl = this.ttl, fromSync = false) {
         const entry = this.getUntracked(key);
         if (entry) {
             clearTimeout(entry.timeout); // stop invalidation
@@ -125,18 +196,27 @@ class Cache {
         if (ttl < staleTime)
             staleTime = ttl;
         const now = Date.now();
+        const next = {
+            value,
+            created: entry?.created ?? now,
+            updated: now,
+            useCount: prevCount + 1,
+            stale: now + staleTime,
+            expiresAt: now + ttl,
+            key,
+        };
         this.internal.mutate((map) => {
             map.set(key, {
-                value,
-                created: entry?.created ?? now,
-                useCount: prevCount + 1,
-                stale: now + staleTime,
-                expiresAt: now + ttl,
+                ...next,
                 timeout: setTimeout(() => this.invalidate(key), ttl),
-                key,
             });
             return map;
         });
+        if (!fromSync)
+            this.broadcast({
+                action: 'store',
+                entry: next,
+            });
     }
     /**
      * Invalidates (removes) a cache entry.
@@ -144,6 +224,9 @@ class Cache {
      * @param key - The key of the entry to invalidate.
      */
     invalidate(key) {
+        this.invalidateInternal(key);
+    }
+    invalidateInternal(key, fromSync = false) {
         const entry = this.getUntracked(key);
         if (!entry)
             return;
@@ -152,6 +235,8 @@ class Cache {
             map.delete(key);
             return map;
         });
+        if (!fromSync)
+            this.broadcast({ action: 'invalidate', entry: { key } });
     }
     /** @internal */
     cleanup() {
@@ -198,9 +283,53 @@ const CLIENT_CACHE_TOKEN = new InjectionToken('INTERNAL_CLIENT_CACHE');
  * };
  */
 function provideQueryCache(opt) {
+    const syncTabsOpt = opt?.syncTabsId
+        ? {
+            id: opt.syncTabsId,
+            serialize: (value) => {
+                const headersRecord = {};
+                const headerKeys = value.headers.keys();
+                headerKeys.forEach((key) => {
+                    const values = value.headers.getAll(key);
+                    if (!values)
+                        return;
+                    headersRecord[key] = values;
+                });
+                return JSON.stringify({
+                    body: value.body,
+                    status: value.status,
+                    statusText: value.statusText,
+                    headers: headerKeys.length > 0 ? headersRecord : undefined,
+                    url: value.url,
+                });
+            },
+            deserialize: (value) => {
+                try {
+                    const parsed = JSON.parse(value);
+                    if (!parsed || typeof parsed !== 'object' || !('body' in parsed))
+                        throw new Error('Invalid cache entry format');
+                    const headers = parsed.headers
+                        ? new HttpHeaders(parsed.headers)
+                        : undefined;
+                    return new HttpResponse({
+                        body: parsed.body,
+                        status: parsed.status,
+                        statusText: parsed.statusText,
+                        headers: headers,
+                        url: parsed.url,
+                    });
+                }
+                catch (err) {
+                    if (isDevMode())
+                        console.error('Failed to deserialize cache entry:', err);
+                    return null;
+                }
+            },
+        }
+        : undefined;
     return {
         provide: CLIENT_CACHE_TOKEN,
-        useValue: new Cache(opt?.ttl, opt?.staleTime, opt?.cleanup),
+        useValue: new Cache(opt?.ttl, opt?.staleTime, opt?.cleanup, syncTabsOpt),
     };
 }
 class NoopCache extends Cache {
@@ -471,15 +600,15 @@ const DEFAULT_OPTIONS = {
 };
 /** @internal */
 function internalCeateCircuitBreaker(treshold = 5, resetTimeout = 30000, shouldFail = () => true, shouldFailForever = () => false) {
-    const halfOpen = signal(false);
-    const failureCount = signal(0);
+    const halfOpen = signal(false, ...(ngDevMode ? [{ debugName: "halfOpen" }] : []));
+    const failureCount = signal(0, ...(ngDevMode ? [{ debugName: "failureCount" }] : []));
     const status = computed(() => {
         if (failureCount() >= treshold)
             return 'OPEN';
         return halfOpen() ? 'HALF_OPEN' : 'CLOSED';
-    });
-    const isClosed = computed(() => status() !== 'OPEN');
-    const isOpen = computed(() => status() !== 'CLOSED');
+    }, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    const isClosed = computed(() => status() !== 'OPEN', ...(ngDevMode ? [{ debugName: "isClosed" }] : []));
+    const isOpen = computed(() => status() !== 'CLOSED', ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     const success = () => {
         failureCount.set(0);
         halfOpen.set(false);
@@ -500,7 +629,7 @@ function internalCeateCircuitBreaker(treshold = 5, resetTimeout = 30000, shouldF
             clearTimeout(timeout);
             failForeverResetId = null;
         });
-    });
+    }, ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
     const failInternal = () => {
         failureCount.set(failureCount() + 1);
         halfOpen.set(false);
@@ -904,7 +1033,7 @@ function retryOnError(res, opt) {
             case 'resolved':
                 return onSuccess();
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
     return {
         ...res,
         destroy: () => {
@@ -967,11 +1096,13 @@ function queryResource(request, options) {
         if (cb.isOpen())
             return undefined;
         return request() ?? undefined;
-    }, {
-        equal: options?.triggerOnSameRequest
-            ? undefined
-            : createEqualRequest(options?.equal),
-    });
+    }, ...(ngDevMode ? [{ debugName: "stableRequest", equal: options?.triggerOnSameRequest
+                ? undefined
+                : createEqualRequest(options?.equal) }] : [{
+            equal: options?.triggerOnSameRequest
+                ? undefined
+                : createEqualRequest(options?.equal),
+        }]));
     const hashFn = typeof options?.cache === 'object'
         ? (options.cache.hash ?? urlWithParams)
         : urlWithParams;
@@ -982,7 +1113,7 @@ function queryResource(request, options) {
         if (!r)
             return null;
         return hashFn(r);
-    });
+    }, ...(ngDevMode ? [{ debugName: "cacheKey" }] : []));
     const bustBrowserCache = typeof options?.cache === 'object' &&
         options.cache.bustBrowserCache === true;
     const ignoreCacheControl = typeof options?.cache === 'object' &&
@@ -1048,7 +1179,7 @@ function queryResource(request, options) {
             const err = resource.error();
             if (err)
                 onError(err);
-        });
+        }, ...(ngDevMode ? [{ debugName: "onErrorRef" }] : []));
         // cleanup on manual destroy, I'm comfortable setting these props in-line as we have yet to 'release' the object out of this lexical scope
         const destroyRest = resource.destroy;
         resource.destroy = () => {
@@ -1063,7 +1194,7 @@ function queryResource(request, options) {
             cb.fail(untracked(resource.error));
         else if (status === 'resolved')
             cb.success();
-    });
+    }, ...(ngDevMode ? [{ debugName: "cbEffectRef" }] : []));
     const set = (value) => {
         resource.value.set(value);
         const k = untracked(cacheKey);
@@ -1117,6 +1248,11 @@ function queryResource(request, options) {
             try {
                 await firstValueFrom(client.request(prefetchRequest.method ?? 'GET', prefetchRequest.url, {
                     ...prefetchRequest,
+                    credentials: prefetchRequest.credentials,
+                    priority: prefetchRequest.priority,
+                    cache: prefetchRequest.cache,
+                    mode: prefetchRequest.mode,
+                    redirect: prefetchRequest.redirect,
                     context: setCacheContext(prefetchRequest.context, {
                         staleTime,
                         ttl,
@@ -1164,23 +1300,29 @@ 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, {
-        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);
+            } }] : [{
+            equal: (a, b) => {
+                if (!a && !b)
+                    return true;
+                if (!a || !b)
+                    return false;
+                return eq(a, b);
+            },
+        }]));
     const req = computed(() => {
         const nr = next();
         if (!nr)
             return;
         return request(nr) ?? undefined;
-    }, {
-        equal: requestEqual,
-    });
+    }, ...(ngDevMode ? [{ debugName: "req", equal: requestEqual }] : [{
+            equal: requestEqual,
+        }]));
     const lastValue = linkedSignal({
         source: next,
         computation: (next, prev) => {
@@ -1194,9 +1336,9 @@ function mutationResource(request, options = {}) {
         if (!nr)
             return;
         return request(nr) ?? undefined;
-    }, {
-        equal: requestEqual,
-    });
+    }, ...(ngDevMode ? [{ debugName: "lastValueRequest", equal: requestEqual }] : [{
+            equal: requestEqual,
+        }]));
     const cb = createCircuitBreaker(options?.circuitBreaker === true
         ? undefined
         : (options?.circuitBreaker ?? false), options?.injector);