feat: rerender on cache changes

Components that (try to) get a value from cache now rerender on
changes to that entry by any loader/component.

Author: ph-fritsche

src/methods/clear.ts

@@ -1,5 +1,5 @@
 import { entries, setMany, clear as idbClear } from 'idb-keyval'
-import { expire, reactCache, verifyEntry } from '../shared'
+import { delProperty, dispatch, expire, reactCache, verifyEntry } from '../shared'
 
 export async function clear(
     cache: reactCache,
@@ -17,11 +17,18 @@ export async function clear(
         : idbClear(store)
     )
 
-    return Object.entries(cache).forEach(([key, entry]) => {
-        if (entry.promise) {
-            delete entry.obj
+    const keys: string[] = []
+    Object.entries(cache).forEach(([key, entry]) => {
+        if (expire) {
+            if (!verifyEntry({ obj: entry.obj }, expire)) {
+                keys.push(key)
+                delProperty(cache, [key, 'obj'])
+            }
         } else {
-            delete cache[key]
+            keys.push(key)
+            delProperty(cache, [key, 'obj'])
         }
     })
+
+    dispatch(cache, keys)
 }

src/methods/del.ts

@@ -1,11 +1,13 @@
 import { del as idbDel } from 'idb-keyval'
-import { reactCache } from '../shared'
+import { delProperty, dispatch, reactCache } from '../shared'
 
 export async function del(
     cache: reactCache,
     store: Parameters<typeof idbDel>[1],
     key: string,
 ): Promise<void> {
     await idbDel(key, store)
-    delete cache[key]
+    delProperty(cache, [key, 'obj'])
+
+    dispatch(cache, [key])
 }

src/methods/get.ts

@@ -1,5 +1,5 @@
 import { getMany } from 'idb-keyval'
-import { cachedObj, debugLog, expire, reactCache, verifyEntry } from '../shared'
+import { addListener, cachedObj, debugLog, dispatch, expire, reactCache, setProperty, verifyEntry } from '../shared'
 
 type valueTypes = {
     data: cachedObj['data'],
@@ -22,6 +22,7 @@ export function get<
 >(
     cache: reactCache,
     store: Parameters<typeof getMany>[1],
+    id: string,
     rerender: () => void,
     keyOrKeys: K,
     loader?: (missingKeys: string[]) => Promise<void>,
@@ -34,6 +35,7 @@ export function get<
 >(
     cache: reactCache,
     store: Parameters<typeof getMany>[1],
+    id: string,
     rerender: () => void,
     keyOrKeys: K,
     loader?: (missingKeys: string[]) => Promise<void>,
@@ -47,6 +49,7 @@ export function get<
 >(
     cache: reactCache,
     store: Parameters<typeof getMany>[1],
+    id: string,
     rerender: () => void,
     keyOrKeys: K,
     loader?: (missingKeys: string[]) => Promise<void>,
@@ -55,24 +58,25 @@ export function get<
 ): getReturn<K, T> {
     const keys = (Array.isArray(keyOrKeys) ? keyOrKeys : [keyOrKeys]) as string[]
 
+    addListener(cache, keys, id, rerender)
+
     const values: Record<string, getValue<T>> = {}
     const missing: string[] = []
 
     keys.forEach(key => {
-        if(!verifyEntry(cache[key], expire)) {
+        if(!cache[key].promise && !verifyEntry(cache[key], expire)) {
             missing.push(key)
         }
         if (returnType === 'obj') {
-            values[key] = cache[key]?.obj as getValue<T>
+            values[key] = cache[key].obj as getValue<T>
         } else {
-            values[key] = cache[key]?.obj?.data as getValue<T>
+            values[key] = cache[key].obj?.data as getValue<T>
         }
     })
 
     if (missing.length) {
         debugLog('Get from idb: %s', missing.join(', '))
 
-        let hit = false
         const idbPromise = getMany(missing, store).then(
             obj => {
                 debugLog.enabled && debugLog(
@@ -81,15 +85,18 @@ export function get<
                 )
 
                 const stillMissing: string[] = []
+                const hit: string[] = []
                 obj.forEach((obj, i) => {
                     if (verifyEntry({ obj }, expire)) {
-                        hit = true
-                        cache[ missing[i] ] = { obj }
+                        setProperty(cache, [missing[i], 'obj'], obj)
+                        hit.push(missing[i])
                     } else {
                         stillMissing.push(missing[i])
                     }
                 })
 
+                dispatch(cache, hit)
+
                 const loaderPromise = typeof loader === 'function' ? loader(stillMissing) : undefined
 
                 if (loaderPromise) {
@@ -106,11 +113,8 @@ export function get<
             },
         )
 
-        idbPromise.then(() => hit && rerender())
-
         missing.forEach((key, i) => {
-            cache[key] = cache[key] ?? {}
-            cache[key].promise = idbPromise.then(values => values[i])
+            setProperty(cache, [key, 'promise'], idbPromise.then(values => values[i]))
         })
     }
 

src/methods/index.ts

@@ -14,12 +14,12 @@ declare function boundDel(
 ): Promise<void>;
 
 declare function boundGet<
-    K extends Parameters<typeof get>[3],
-    T extends Parameters<typeof get>[6],
+    K extends Parameters<typeof get>[4],
+    T extends Parameters<typeof get>[7],
 >(
     keyOrKeys: K,
-    loader?: Parameters<typeof get>[4],
-    expire?: Parameters<typeof get>[5],
+    loader?: Parameters<typeof get>[5],
+    expire?: Parameters<typeof get>[6],
     returnType?: T,
 ): getReturn<K, T>;
 
@@ -42,11 +42,11 @@ interface cachedApi {
     set: typeof boundSet,
 }
 
-export function createApi(cache: reactCache, store: ReturnType<typeof createStore>, rerender: () => void): cachedApi {
+export function createApi(cache: reactCache, store: ReturnType<typeof createStore>, id: string, rerender: () => void): cachedApi {
     return {
         clear: clear.bind(undefined, cache, store) as typeof boundClear,
         del: del.bind(undefined, cache, store) as typeof boundDel,
-        get: get.bind(undefined, cache, store, rerender) as typeof boundGet,
-        set: set.bind(undefined, cache, store, rerender) as typeof boundSet,
+        get: get.bind(undefined, cache, store, id, rerender) as typeof boundGet,
+        set: set.bind(undefined, cache, store) as typeof boundSet,
     }
 }

src/methods/set.ts

@@ -1,18 +1,16 @@
 import { setMany } from 'idb-keyval'
-import { cachedObj, options, reactCache } from '../shared'
+import { cachedObj, delProperty, dispatch, options, reactCache, setProperty } from '../shared'
 
 export function set(
     cache: reactCache,
     store: Parameters<typeof setMany>[1],
-    rerender: () => void,
     recordData: Record<string, cachedObj['data']>,
     recordMeta?: Record<string, cachedObj['meta'] | null>,
     options?: options,
 ): Promise<void>;
 export function set(
     cache: reactCache,
     store: Parameters<typeof setMany>[1],
-    rerender: () => void,
     key: string,
     data: cachedObj['data'],
     meta?: cachedObj['meta'],
@@ -21,22 +19,19 @@ export function set(
 export async function set(
     cache: reactCache,
     store: Parameters<typeof setMany>[1],
-    rerender: () => void,
     ...args: unknown[]
 ): Promise<void> {
     if (typeof args[0] == 'string') {
         return _set(
             cache,
             store,
-            rerender,
             { [args[0]]: { data: args[1], meta: args[2] } } as Record<string, cachedObj>,
             args[3] as options,
         )
     } else {
         return _set(
             cache,
             store,
-            rerender,
             Object.assign({}, ...Object
                 .entries(args[0] as Record<string, cachedObj['data']>)
                 .map(([key, data]) => {
@@ -55,7 +50,6 @@ export async function set(
 async function _set(
     cache: reactCache,
     store: Parameters<typeof setMany>[1],
-    rerender: () => void,
     record: Record<string, { data: cachedObj['data'], meta?: cachedObj['meta'] } | undefined>,
     options: options = {},
 ): Promise<void> {
@@ -79,14 +73,11 @@ async function _set(
 
     entries.forEach(([key, obj]) => {
         if (obj) {
-            cache[key] = cache[key] ?? {}
-            cache[key].obj = obj
-        } else if(cache[key]?.promise) {
-            delete cache[key].obj
+            setProperty(cache, [key, 'obj'], obj)
         } else {
-            delete cache[key]
+            delProperty(cache, [key, 'obj'])
         }
     })
 
-    rerender()
+    dispatch(cache, entries.map(([key]) => key))
 }

src/shared/cache.ts

@@ -1,6 +1,7 @@
 export interface reactCacheEntry {
     promise?: Promise<cachedObj | undefined>,
     obj?: cachedObj,
+    listeners?: Record<string, () => void>,
 }
 
 export type reactCache = Record<string, reactCacheEntry>

src/shared/event.ts

@@ -0,0 +1,37 @@
+import { reactCache, reactCacheEntry } from './cache'
+import { delProperty, setProperty } from './object'
+
+export function addListener(
+    cache: reactCache,
+    keys: (keyof reactCache)[],
+    id: string,
+    listener: () => void,
+): void {
+    keys.forEach(key => {
+        setProperty(cache, [key, 'listeners', id], listener)
+    })
+}
+
+export function removeListener(
+    cache: reactCache,
+    id: string,
+    keys?: (keyof reactCache)[],
+): void {
+    (keys ?? Object.keys(cache)).forEach(key => {
+        delProperty(cache, [key, 'listeners', id])
+    })
+}
+
+export function dispatch(
+    cache: reactCache,
+    keys: (keyof reactCache)[],
+): void {
+    const listeners: reactCacheEntry['listeners'] = {}
+    keys.forEach(key => {
+        Object.entries(cache[key]?.listeners ?? {}).forEach(([id, listener]) => {
+            listeners[id] = listener
+        })
+    })
+
+    Object.values(listeners).forEach(listener => listener())
+}

src/shared/index.ts

@@ -1,4 +1,6 @@
 export * from './cache'
 export * from './debug'
+export * from './event'
+export * from './object'
 export * from './options'
 export * from './verifyEntry'

src/shared/object.ts

@@ -0,0 +1,45 @@
+export function setProperty(obj: Record<string, unknown>, keys: string[], value: unknown): void {
+    for(
+        let o = obj, i = 0;
+        i < keys.length;
+        o = o[keys[i]] as Record<string, unknown>, i++
+    ) {
+        if (o !== undefined && !(o instanceof Object) || Array.isArray(o)) {
+            throw `Unexpected type at $obj.${keys.join('.')}`
+        }
+        if (i < keys.length -1) {
+            o[keys[i]] = o[keys[i]] ?? {}
+        } else {
+            o[keys[i]] = value
+        }
+    }
+}
+
+export function delProperty(obj: Record<string, unknown>, keys: string[]): void {
+    const objects: Record<string, unknown>[] = []
+    let o, i
+    for(
+        o = obj, i = 0;
+        i < keys.length;
+        o = o[keys[i]] as Record<string, unknown>, i++
+    ) {
+        if (o !== undefined && !(o instanceof Object) || Array.isArray(o)) {
+            throw `Unexpected type at $obj.${keys.join('.')}`
+        }
+        objects.push(o)
+        if (o[keys[i]] === undefined) {
+            break
+        }
+    }
+    for(
+        i = objects.length - 1;
+        i >= 0;
+        i--
+    ) {
+        if ((i === keys.length - 1) || objects[i+1] !== undefined && Object.keys(objects[i+1]).length === 0) {
+            delete objects[i][keys[i]]
+        } else {
+            break
+        }
+    }
+}

src/shared/verifyEntry.ts

@@ -1,9 +1,7 @@
 import { expire, reactCacheEntry } from './cache'
 
 export function verifyEntry(entry: reactCacheEntry | undefined, expire: expire | undefined): boolean {
-    if (entry?.promise instanceof Promise) {
-        return true
-    } else if (!entry?.obj) {
+    if (!entry?.obj) {
         return false
     }