@mmstack/resource 20.2.8 → 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,100 @@
-import { computed, untracked, InjectionToken, isDevMode, inject, 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 { 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 &&
@@ -27,8 +116,10 @@ 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.
@@ -52,9 +143,10 @@ class Cache {
         type: 'lru',
         maxSize: 1000,
         checkInterval: ONE_HOUR,
-    }, syncTabs) {
+    }, syncTabs, db = Promise.resolve(createNoopDB())) {
         this.ttl = ttl;
         this.staleTime = staleTime;
+        this.db = db;
         this.cleanupOpt = {
             ...DEFAULT_CLEANUP_OPT,
             ...cleanupOpt,
@@ -65,7 +157,6 @@ class Cache {
         const cleanupInterval = setInterval(() => {
             this.cleanup();
         }, cleanupOpt.checkInterval);
-        const cacheId = v7();
         let destroySyncTabs = () => {
             // noop
         };
@@ -76,7 +167,7 @@ class Cache {
                     return channel.postMessage({
                         action: 'invalidate',
                         entry: { key: msg.entry.key },
-                        cacheId,
+                        cacheId: this.id,
                         type: 'cache-sync-message',
                     });
                 return channel.postMessage({
@@ -85,7 +176,7 @@ class Cache {
                         ...msg.entry,
                         value: syncTabs.serialize(msg.entry.value),
                     },
-                    cacheId,
+                    cacheId: this.id,
                     type: 'cache-sync-message',
                 });
             };
@@ -93,13 +184,13 @@ class Cache {
                 const msg = event.data;
                 if (!isSyncMessage(msg))
                     return;
-                if (msg.cacheId === cacheId)
+                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);
+                    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);
@@ -117,14 +208,31 @@ class Cache {
             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 === cacheId) {
+            if (id === this.id) {
                 destroy();
             }
         });
-        registry.register(this, cacheId);
+        registry.register(this, this.id);
     }
     /** @internal */
     getInternal(key) {
@@ -183,10 +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) {
-        this.storeInternal(key, value, staleTime, 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) {
+    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
@@ -212,11 +320,14 @@ class Cache {
             });
             return map;
         });
-        if (!fromSync)
+        if (!fromSync) {
+            if (persist)
+                this.db.then((db) => db.store(next));
             this.broadcast({
                 action: 'store',
                 entry: next,
             });
+        }
     }
     /**
      * Invalidates (removes) a cache entry.
@@ -235,8 +346,10 @@ class Cache {
             map.delete(key);
             return map;
         });
-        if (!fromSync)
+        if (!fromSync) {
+            this.db.then((db) => db.remove(key));
             this.broadcast({ action: 'invalidate', entry: { key } });
+        }
     }
     /** @internal */
     cleanup() {
@@ -283,53 +396,80 @@ const CLIENT_CACHE_TOKEN = new InjectionToken('INTERNAL_CLIENT_CACHE');
  * };
  */
 function provideQueryCache(opt) {
-    const syncTabsOpt = opt?.syncTabsId
+    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: 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;
-                }
-            },
+            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, syncTabsOpt),
+        useValue: new Cache(opt?.ttl, opt?.staleTime, opt?.cleanup, syncTabsOpt, db),
     };
 }
 class NoopCache extends Cache {
@@ -385,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 = {
@@ -550,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
@@ -565,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
@@ -1118,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();
@@ -1132,6 +1264,7 @@ function queryResource(request, options) {
                     key: cacheKey() ?? hashFn(r),
                     bustBrowserCache,
                     ignoreCacheControl,
+                    persist,
                 }),
             };
         })
@@ -1203,7 +1336,7 @@ function queryResource(request, options) {
                 body: value,
                 status: 200,
                 statusText: 'OK',
-            }));
+            }), staleTime, ttl, persist);
     };
     const update = (updater) => {
         set(updater(untracked(resource.value)));
@@ -1262,6 +1395,7 @@ function queryResource(request, options) {
                         }),
                         bustBrowserCache,
                         ignoreCacheControl,
+                        persist,
                     }),
                     headers: prefetchRequest.headers,
                     observe: 'response',