PrefetchCache: extract and re-use LRUCache from SnapshotCache

What
---

First, extract the `LRUCache` (named after the ["least recently used"
caching policy][LRU]) class from the `SnapshotCache`. The implementation
is largely unchanged, with the following exceptions:

1. accept `toCacheKey` argument to coerce key values
2. rename `this.snapshot` property to a more generic `this.entries`
3. rename `snapshot` arguments to `entry`
4. rename `location` arguments to `key`

Next, implement `SnapshotCache` in terms of the `LRUCache`. Since it
served as the original implementation, it is mostly an empty class that
passes the `toCacheKey` utility function to the constructor, and
provides a `snapshots` property alias that returns the `this.entries`
property.

Also implement the `PrefetchCache` as an extension of the `LRUCache`.
Rather than storing a reference to the "hot" entry, construct a cache of
size 1. When a new entry is put into the cache, the old entry is
expired. To supplement the "least recently used" purge strategy, also
declare a [setInterval][] function to purge expired entries every
`50ms`.

Finally, change all `PrefetchCache.get` call sites to pass the [URL][]
instance directly, rather than the `String`. Once passed as the
argument, the `PrefetchCache.get` implementation uses the existing
`toCacheKey` utility function already used by the `SnapshotCache`.
Rename any `PrefetchCache.setLater` call sites to instead invoke
`PrefetchCache.putLater` (named to match the `SnapshotCache` and
`LRUCache` "put" method).

Why
---

By adjusting the underlying `PrefetchCache` implementation to expand
upon an existing concept, it opens up possibilities for further
customization and configuration. Future changes could support
client-provided cache size and purge interval configuration to adjust
link prefetching behavior intervals to suit application-specific.

[LRU]: https://en.wikipedia.org/wiki/Cache_replacement_policies#LRU
[setInterval]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval
[URL]: https://developer.mozilla.org/en-US/docs/Web/API/URL

Author: seanpdoyle

src/core/drive/prefetch_cache.js

@@ -1,32 +1,48 @@
+import { LRUCache } from "../lru_cache"
+import { toCacheKey } from "../url"
+
 const PREFETCH_DELAY = 100
 
-class PrefetchCache {
+class PrefetchCache extends LRUCache {
   #prefetchTimeout = null
-  #prefetched = null
+  #maxAges = {}
 
-  get(url) {
-    if (this.#prefetched && this.#prefetched.url === url && this.#prefetched.expire > Date.now()) {
-      return this.#prefetched.request
-    }
+  constructor(size = 1, prefetchDelay = PREFETCH_DELAY) {
+    super(size, toCacheKey)
+    this.prefetchDelay = prefetchDelay
   }
 
-  setLater(url, request, ttl) {
-    this.clear()
-
+  putLater(url, request, ttl) {
     this.#prefetchTimeout = setTimeout(() => {
       request.perform()
-      this.set(url, request, ttl)
+      this.put(url, request, ttl)
       this.#prefetchTimeout = null
-    }, PREFETCH_DELAY)
+    }, this.prefetchDelay)
   }
 
-  set(url, request, ttl) {
-    this.#prefetched = { url, request, expire: new Date(new Date().getTime() + ttl) }
+  put(url, request, ttl = cacheTtl) {
+    super.put(url, request)
+    this.#maxAges[toCacheKey(url)] = new Date(new Date().getTime() + ttl)
   }
 
   clear() {
+    super.clear()
     if (this.#prefetchTimeout) clearTimeout(this.#prefetchTimeout)
-    this.#prefetched = null
+  }
+
+  evict(key) {
+    super.evict(key)
+    delete this.#maxAges[key]
+  }
+
+  has(key) {
+    if (super.has(key)) {
+      const maxAge = this.#maxAges[toCacheKey(key)]
+
+      return maxAge && maxAge > Date.now()
+    } else {
+      return false
+    }
   }
 }
 

src/core/drive/snapshot_cache.js

@@ -1,56 +1,12 @@
 import { toCacheKey } from "../url"
+import { LRUCache } from "../lru_cache"
 
-export class SnapshotCache {
-  keys = []
-  snapshots = {}
-
+export class SnapshotCache extends LRUCache {
   constructor(size) {
-    this.size = size
-  }
-
-  has(location) {
-    return toCacheKey(location) in this.snapshots
-  }
-
-  get(location) {
-    if (this.has(location)) {
-      const snapshot = this.read(location)
-      this.touch(location)
-      return snapshot
-    }
-  }
-
-  put(location, snapshot) {
-    this.write(location, snapshot)
-    this.touch(location)
-    return snapshot
-  }
-
-  clear() {
-    this.snapshots = {}
-  }
-
-  // Private
-
-  read(location) {
-    return this.snapshots[toCacheKey(location)]
-  }
-
-  write(location, snapshot) {
-    this.snapshots[toCacheKey(location)] = snapshot
-  }
-
-  touch(location) {
-    const key = toCacheKey(location)
-    const index = this.keys.indexOf(key)
-    if (index > -1) this.keys.splice(index, 1)
-    this.keys.unshift(key)
-    this.trim()
+    super(size, toCacheKey)
   }
 
-  trim() {
-    for (const key of this.keys.splice(this.size)) {
-      delete this.snapshots[key]
-    }
+  get snapshots() {
+    return this.entries
   }
 }

src/core/lru_cache.js

@@ -0,0 +1,64 @@
+const identity = key => key
+
+export class LRUCache {
+  keys = []
+  entries = {}
+  #toCacheKey
+
+  constructor(size, toCacheKey = identity) {
+    this.size = size
+    this.#toCacheKey = toCacheKey
+  }
+
+  has(key) {
+    return this.#toCacheKey(key) in this.entries
+  }
+
+  get(key) {
+    if (this.has(key)) {
+      const entry = this.read(key)
+      this.touch(key)
+      return entry
+    }
+  }
+
+  put(key, entry) {
+    this.write(key, entry)
+    this.touch(key)
+    return entry
+  }
+
+  clear() {
+    for (const key of Object.keys(this.entries)) {
+      this.evict(key)
+    }
+  }
+
+  // Private
+
+  read(key) {
+    return this.entries[this.#toCacheKey(key)]
+  }
+
+  write(key, entry) {
+    this.entries[this.#toCacheKey(key)] = entry
+  }
+
+  touch(key) {
+    key = this.#toCacheKey(key)
+    const index = this.keys.indexOf(key)
+    if (index > -1) this.keys.splice(index, 1)
+    this.keys.unshift(key)
+    this.trim()
+  }
+
+  trim() {
+    for (const key of this.keys.splice(this.size)) {
+      this.evict(key)
+    }
+  }
+
+  evict(key) {
+    delete this.entries[key]
+  }
+}

src/observers/link_prefetch_observer.js

@@ -80,7 +80,7 @@ export class LinkPrefetchObserver {
 
         fetchRequest.fetchOptions.priority = "low"
 
-        prefetchCache.setLater(location.toString(), fetchRequest, this.#cacheTtl)
+        prefetchCache.putLater(location, fetchRequest, this.#cacheTtl)
       }
     }
   }
@@ -96,7 +96,7 @@ export class LinkPrefetchObserver {
 
   #tryToUsePrefetchedRequest = (event) => {
     if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "GET") {
-      const cached = prefetchCache.get(event.detail.url.toString())
+      const cached = prefetchCache.get(event.detail.url)
 
       if (cached) {
         // User clicked link, use cache response