@mmstack/resource 20.2.7 → 20.2.9

package/README.md

@@ -37,6 +37,14 @@ 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()])),
   ],
 };

package/fesm2022/mmstack-resource.mjs

@@ -1,11 +1,106 @@
-import { computed, untracked, InjectionToken, inject, isDevMode, signal, effect, Injector, linkedSignal, DestroyRef } from '@angular/core';
+import { isDevMode, inject, PLATFORM_ID, untracked, computed, InjectionToken, 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 { isPlatformBrowser } from '@angular/common';
 import { keys, hash, entries } from '@mmstack/object';
 
+function createNoopDB() {
+    return {
+        getAll: async () => [],
+        store: async () => {
+            // noop
+        },
+        remove: async () => {
+            // noop
+        },
+    };
+}
+function toCacheDB(db, storeName) {
+    const getAll = async () => {
+        const now = Date.now();
+        return new Promise((res, rej) => {
+            const transaction = db.transaction(storeName, 'readonly');
+            const store = transaction.objectStore(storeName);
+            const request = store.getAll();
+            request.onsuccess = () => res(request.result);
+            request.onerror = () => rej(request.error);
+        })
+            .then((entries) => entries.filter((e) => e.expiresAt > now))
+            .catch((err) => {
+            if (isDevMode())
+                console.error('Error getting all items from cache DB:', err);
+            return [];
+        });
+    };
+    const store = (value) => {
+        return new Promise((res, rej) => {
+            const transaction = db.transaction(storeName, 'readwrite');
+            const store = transaction.objectStore(storeName);
+            store.put(value);
+            transaction.oncomplete = () => res();
+            transaction.onerror = () => rej(transaction.error);
+        }).catch((err) => {
+            if (isDevMode())
+                console.error('Error storing item in cache DB:', err);
+        });
+    };
+    const remove = (key) => {
+        return new Promise((res, rej) => {
+            const transaction = db.transaction(storeName, 'readwrite');
+            const store = transaction.objectStore(storeName);
+            store.delete(key);
+            transaction.oncomplete = () => res();
+            transaction.onerror = () => rej(transaction.error);
+        }).catch((err) => {
+            if (isDevMode())
+                console.error('Error removing item from cache DB:', err);
+        });
+    };
+    return {
+        getAll,
+        store,
+        remove,
+    };
+}
+function createSingleStoreDB(name, getStoreName, version = 1) {
+    const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    const storeName = getStoreName(version);
+    if (!isBrowser)
+        return Promise.resolve(createNoopDB());
+    return new Promise((res, rej) => {
+        if (version < 1)
+            rej(new Error('Version must be 1 or greater'));
+        const req = indexedDB.open(name, version);
+        req.onupgradeneeded = (event) => {
+            const db = req.result;
+            const oldVersion = event.oldVersion;
+            db.createObjectStore(storeName, { keyPath: 'key' });
+            if (oldVersion > 0) {
+                db.deleteObjectStore(getStoreName(oldVersion));
+            }
+        };
+        req.onerror = () => {
+            rej(req.error);
+        };
+        req.onsuccess = () => res(req.result);
+    })
+        .then((db) => toCacheDB(db, storeName))
+        .catch((err) => {
+        if (isDevMode())
+            console.error('Error creating query DB:', err);
+        return createNoopDB();
+    });
+}
+
+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 = {
@@ -21,8 +116,18 @@ const DEFAULT_CLEANUP_OPT = {
 class Cache {
     ttl;
     staleTime;
+    db;
     internal = mutable(new Map());
     cleanupOpt;
+    id = v7();
+    /**
+     * 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,14 +136,17 @@ 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, db = Promise.resolve(createNoopDB())) {
         this.ttl = ttl;
         this.staleTime = staleTime;
+        this.db = db;
         this.cleanupOpt = {
             ...DEFAULT_CLEANUP_OPT,
             ...cleanupOpt,
@@ -49,14 +157,82 @@ class Cache {
         const cleanupInterval = setInterval(() => {
             this.cleanup();
         }, cleanupOpt.checkInterval);
-        const destroyId = 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: this.id,
+                        type: 'cache-sync-message',
+                    });
+                return channel.postMessage({
+                    ...msg,
+                    entry: {
+                        ...msg.entry,
+                        value: syncTabs.serialize(msg.entry.value),
+                    },
+                    cacheId: this.id,
+                    type: 'cache-sync-message',
+                });
+            };
+            channel.onmessage = (event) => {
+                const msg = event.data;
+                if (!isSyncMessage(msg))
+                    return;
+                if (msg.cacheId === this.id)
+                    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, false);
+                }
+                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.db
+            .then(async (db) => {
+            if (destroyed)
+                return [];
+            return db.getAll();
+        })
+            .then((entries) => {
+            if (destroyed)
+                return;
+            // load entries into the cache
+            const current = untracked(this.internal);
+            entries.forEach((entry) => {
+                if (current.has(entry.key))
+                    return;
+                this.storeInternal(entry.key, entry.value, entry.stale - entry.updated, entry.expiresAt - entry.updated, true);
+            });
+        });
+        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 === this.id) {
+                destroy();
             }
         });
-        registry.register(this, destroyId);
+        registry.register(this, this.id);
     }
     /** @internal */
     getInternal(key) {
@@ -115,7 +291,10 @@ class Cache {
      * @param staleTime - (Optional) The stale time for this entry, in milliseconds. Overrides the default `staleTime`.
      * @param ttl - (Optional) The TTL for this entry, in milliseconds. Overrides the default `ttl`.
      */
-    store(key, value, staleTime = this.staleTime, ttl = this.ttl) {
+    store(key, value, staleTime = this.staleTime, ttl = this.ttl, persist = false) {
+        this.storeInternal(key, value, staleTime, ttl, false, persist);
+    }
+    storeInternal(key, value, staleTime = this.staleTime, ttl = this.ttl, fromSync = false, persist = false) {
         const entry = this.getUntracked(key);
         if (entry) {
             clearTimeout(entry.timeout); // stop invalidation
@@ -125,18 +304,30 @@ 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) {
+            if (persist)
+                this.db.then((db) => db.store(next));
+            this.broadcast({
+                action: 'store',
+                entry: next,
+            });
+        }
     }
     /**
      * Invalidates (removes) a cache entry.
@@ -144,6 +335,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 +346,10 @@ class Cache {
             map.delete(key);
             return map;
         });
+        if (!fromSync) {
+            this.db.then((db) => db.remove(key));
+            this.broadcast({ action: 'invalidate', entry: { key } });
+        }
     }
     /** @internal */
     cleanup() {
@@ -198,9 +396,80 @@ const CLIENT_CACHE_TOKEN = new InjectionToken('INTERNAL_CLIENT_CACHE');
  * };
  */
 function provideQueryCache(opt) {
+    const 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,
+        });
+    };
+    const 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;
+        }
+    };
+    const syncTabsOpt = opt?.syncTabs
+        ? {
+            id: 'mmstack-query-cache-sync',
+            serialize,
+            deserialize,
+        }
+        : undefined;
+    let db = opt?.persist === false
+        ? undefined
+        : createSingleStoreDB('mmstack-query-cache-db', (version) => `query-store_v${version}`, opt?.version).then((db) => {
+            return {
+                getAll: () => {
+                    return db.getAll().then((entries) => {
+                        return entries
+                            .map((entry) => {
+                            const value = deserialize(entry.value);
+                            if (value === null)
+                                return null;
+                            return {
+                                ...entry,
+                                value,
+                            };
+                        })
+                            .filter((e) => e !== null);
+                    });
+                },
+                store: (entry) => {
+                    return db.store({ ...entry, value: serialize(entry.value) });
+                },
+                remove: db.remove,
+            };
+        });
     return {
         provide: CLIENT_CACHE_TOKEN,
-        useValue: new Cache(opt?.ttl, opt?.staleTime, opt?.cleanup),
+        useValue: new Cache(opt?.ttl, opt?.staleTime, opt?.cleanup, syncTabsOpt, db),
     };
 }
 class NoopCache extends Cache {
@@ -256,17 +525,7 @@ function setCacheContext(ctx = new HttpContext(), opt) {
 function getCacheContext(ctx) {
     return ctx.get(CACHE_CONTEXT);
 }
-function parseCacheControlHeader(req, ignoreCacheControl = false) {
-    if (ignoreCacheControl) {
-        return {
-            noStore: false,
-            noCache: false,
-            mustRevalidate: false,
-            immutable: false,
-            maxAge: null,
-            staleWhileRevalidate: null,
-        };
-    }
+function parseCacheControlHeader(req) {
     const header = req.headers.get('Cache-Control');
     let sMaxAge = null;
     const directives = {
@@ -421,10 +680,12 @@ function createCacheInterceptor(allowedMethods = ['GET', 'HEAD', 'OPTIONS']) {
         }
         return next(req).pipe(tap((event) => {
             if (event instanceof HttpResponse && event.ok) {
-                const cacheControl = parseCacheControlHeader(event, opt.ignoreCacheControl);
-                if (cacheControl.noStore)
+                const cacheControl = parseCacheControlHeader(event);
+                if (cacheControl.noStore && !opt.ignoreCacheControl)
                     return;
-                const { staleTime, ttl } = resolveTimings(cacheControl, opt.staleTime, opt.ttl);
+                const { staleTime, ttl } = opt.ignoreCacheControl
+                    ? opt
+                    : resolveTimings(cacheControl, opt.staleTime, opt.ttl);
                 if (opt.ttl === 0)
                     return; // no point
                 const parsedResponse = opt.parse
@@ -436,7 +697,7 @@ function createCacheInterceptor(allowedMethods = ['GET', 'HEAD', 'OPTIONS']) {
                         url: event.url ?? undefined,
                     })
                     : event;
-                cache.store(key, parsedResponse, staleTime, ttl);
+                cache.store(key, parsedResponse, staleTime, ttl, opt.persist);
             }
         }), map((event) => {
             // handle 304 responses due to eTag/last-modified
@@ -989,7 +1250,7 @@ function queryResource(request, options) {
         options.cache.bustBrowserCache === true;
     const ignoreCacheControl = typeof options?.cache === 'object' &&
         options.cache.ignoreCacheControl === true;
-    const parse = options?.parse ?? ((val) => val);
+    const persist = typeof options?.cache === 'object' && options.cache.persist === true;
     const cachedRequest = options?.cache
         ? computed(() => {
             const r = stableRequest();
@@ -1003,6 +1264,7 @@ function queryResource(request, options) {
                     key: cacheKey() ?? hashFn(r),
                     bustBrowserCache,
                     ignoreCacheControl,
+                    persist,
                 }),
             };
         })
@@ -1074,7 +1336,7 @@ function queryResource(request, options) {
                 body: value,
                 status: 200,
                 statusText: 'OK',
-            }));
+            }), staleTime, ttl, persist);
     };
     const update = (updater) => {
         set(updater(untracked(resource.value)));
@@ -1133,6 +1395,7 @@ function queryResource(request, options) {
                         }),
                         bustBrowserCache,
                         ignoreCacheControl,
+                        persist,
                     }),
                     headers: prefetchRequest.headers,
                     observe: 'response',