feat(cache): adds cache eviction when nearing capacity

Author: dvcol

package.json

@@ -53,7 +53,7 @@
   "dependencies": {
     "@dvcol/base-http-client": "^1.1.2",
     "@dvcol/tmdb-http-client": "^1.1.1",
-    "@dvcol/trakt-http-client": "^1.2.0",
+    "@dvcol/trakt-http-client": "^1.3.0",
     "@dvcol/tvdb-http-client": "^1.1.1",
     "@dvcol/web-extension-utils": "^2.3.4",
     "@vue/devtools": "^7.0.15",

pnpm-lock.yaml

@@ -52,7 +52,7 @@ import { useAuthSettingsStore } from '~/stores/settings/auth.store';
 import { logger } from '~/stores/settings/log.store';
 import { useUserSettingsStore } from '~/stores/settings/user.store';
 import { createTab } from '~/utils/browser/browser.utils';
-import { ChromeCacheStore } from '~/utils/cache.utils';
+import { CachePrefix, ChromeCacheStore } from '~/utils/cache.utils';
 
 export const shouldEvict = (date?: string | number | Date, cache?: CacheResponse<unknown>): boolean => {
   // no cache skip
@@ -95,15 +95,15 @@ export class TraktService {
   static {
     this.caches = {
       trakt: new ChromeCacheStore<TraktApiResponse>({
-        prefix: 'trakt-cache',
+        prefix: CachePrefix.Trakt,
         retention: CacheRetention.Week,
       }),
       tvdb: new ChromeCacheStore<TvdbApiResponse>({
-        prefix: 'tvdb-cache',
+        prefix: CachePrefix.Tvdb,
         retention: CacheRetention.Year,
       }),
       tmdb: new ChromeCacheStore<TmdbApiResponse>({
-        prefix: 'tmdb-cache',
+        prefix: CachePrefix.Tmdb,
         retention: CacheRetention.Year,
       }),
     };

src/services/trakt.service.ts

@@ -6,8 +6,9 @@ import type { TmdbConfiguration, TmdbImage } from '@dvcol/tmdb-http-client/model
 
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
-import { storage } from '~/utils/browser/browser-storage.utils';
+import { localCache, storage } from '~/utils/browser/browser-storage.utils';
 import { getShortLocale } from '~/utils/browser/browser.utils';
+import { CachePrefix } from '~/utils/cache.utils';
 import { debounce } from '~/utils/debounce.utils';
 import { arrayMax, findClosestMatch } from '~/utils/math.utils';
 
@@ -84,11 +85,11 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
   const saveState = debounce(
     (_images = images) =>
       Promise.all([
-        storage.local.set(ImageStoreConstants.LocalMovie, _images.movie),
-        storage.local.set(ImageStoreConstants.LocalShow, _images.show),
-        storage.local.set(ImageStoreConstants.LocalSeason, _images.season),
-        storage.local.set(ImageStoreConstants.LocalEpisode, _images.episode),
-        storage.local.set(ImageStoreConstants.LocalPerson, _images.person),
+        localCache(ImageStoreConstants.LocalMovie, _images.movie, CachePrefix.Tmdb),
+        localCache(ImageStoreConstants.LocalShow, _images.show, CachePrefix.Tmdb),
+        localCache(ImageStoreConstants.LocalSeason, _images.season, CachePrefix.Tmdb),
+        localCache(ImageStoreConstants.LocalEpisode, _images.episode, CachePrefix.Tmdb),
+        localCache(ImageStoreConstants.LocalPerson, _images.person, CachePrefix.Tmdb),
       ]),
     1000,
   );

src/stores/data/image.store.ts

@@ -21,6 +21,14 @@ const filterObject = (object: Record<string, unknown>, regex: string | RegExp) =
 const reverseFilterObject = (object: Record<string, unknown>, regex: string | RegExp) =>
   Object.fromEntries(Object.entries(object).filter(([key]) => !(typeof regex === 'string' ? new RegExp(regex) : regex).test(key)));
 
+/**
+ * This function is used to get the total size of the local storage.
+ * @param storage The storage area to get the size of.
+ */
+const getLocalStorageSize = (storage = window.localStorage) => {
+  return Object.entries(storage).reduce((acc, [key, value]) => acc + key.length + value.length, 0);
+};
+
 /**
  * This function is used to wrap the storage areas to provide type inference and a more convenient interface.
  * @param area The storage area to wrap.
@@ -53,6 +61,7 @@ export const storageWrapper = (area: chrome.storage.StorageArea, name: string) =
 
     window.trakt = { ...window.trakt, [name]: storage };
     return {
+      getBytesInUse: async (): Promise<number> => getLocalStorageSize(window.localStorage),
       getAll: async <T>(regex?: string | RegExp): Promise<T> => (regex ? filterObject(storage.values, regex) : storage.values) as T,
       get: async <T>(key: string): Promise<T> => storage.values[key] as T,
       set: async <T>(key: string, value: T): Promise<void> => storage.setItem(key, value),
@@ -64,6 +73,7 @@ export const storageWrapper = (area: chrome.storage.StorageArea, name: string) =
     };
   }
   return {
+    getBytesInUse: (): Promise<number> => area.getBytesInUse(),
     getAll: <T>(regex?: string | RegExp): Promise<T> => area.get().then(data => (regex ? filterObject(data, regex) : data) as T),
     get: <T>(key: string): Promise<T> => area.get(key).then(({ [key]: value }) => value),
     set: <T>(key: string, value: T): Promise<void> => area.set({ [key]: value }),
@@ -92,3 +102,30 @@ export const storage = {
   local: storageWrapper(localStorage, 'local'),
   session: storageWrapper(sessionStorage, 'session'),
 };
+
+export const defaultMaxLocalStorageSize = 10485760;
+
+export const localCache: <T>(key: string, value: T, regex?: string | RegExp) => Promise<void> = async (key, value, regex) => {
+  let inUse = await storage.local.getBytesInUse();
+  const max = globalThis?.chrome?.storage?.local.QUOTA_BYTES ?? defaultMaxLocalStorageSize;
+  const payload = JSON.stringify(value).length;
+
+  if (payload > max) {
+    console.warn('Payload is too large to store in local storage.', { payload, max, inUse });
+    return Promise.resolve();
+  }
+
+  if (inUse + payload >= max) {
+    console.warn('Local storage is full, clearing cache.', { payload, max, inUse });
+    if (regex) await storage.local.removeAll(regex);
+    else await storage.local.clear();
+  }
+
+  inUse = await storage.local.getBytesInUse();
+  if (inUse + payload >= max) {
+    console.warn('Local storage is still full, skipping cache.', { payload, max, inUse });
+    return Promise.resolve();
+  }
+
+  return storage.local.set(key, value);
+};

src/utils/browser/browser-storage.utils.ts

@@ -3,7 +3,7 @@ import { CacheRetention } from '@dvcol/base-http-client/utils/cache';
 import type { ResponseOrTypedResponse, TypedResponse } from '@dvcol/base-http-client';
 import type { CacheStore, CacheStoreEntity } from '@dvcol/base-http-client/utils/cache';
 
-import { storage, type StorageArea } from '~/utils/browser/browser-storage.utils';
+import { localCache, storage, type StorageArea } from '~/utils/browser/browser-storage.utils';
 
 type FlatResponse<T extends Response = ResponseOrTypedResponse> = Record<keyof T, unknown>;
 
@@ -53,7 +53,10 @@ export class ChromeCacheStore<T> implements CacheStore<T> {
   }) {
     this.evictOnError = evictOnError;
     this.retention = retention;
-    this.store = store;
+    this.store = {
+      ...store,
+      set: <V>(key: string, value: V) => localCache(key, value, this.prefix),
+    };
     this.prefix = prefix;
   }
 
@@ -83,3 +86,9 @@ export class ChromeCacheStore<T> implements CacheStore<T> {
     return this.store.removeAll(`^${this.prefix}:${regex}`);
   }
 }
+
+export const CachePrefix = {
+  Trakt: 'trakt-cache' as const,
+  Tmdb: 'tmdb-cache' as const,
+  Tvdb: 'tvdb-cache' as const,
+} as const;