Improved cache

Author: WebReflection

esm/creator.js

@@ -1,5 +1,5 @@
 import { PersistentFragment } from './persistent-fragment.js';
-import { detail } from './literals.js';
+import { detail, resolved } from './literals.js';
 import { array, hole } from './handler.js';
 import { empty } from './utils.js';
 import { cache } from './literals.js';
@@ -26,14 +26,14 @@ export default parse => (
         const { p: path, u: update, n: name } = entries[i];
         const node = path === prev ? current : (current = find(root, (prev = path)));
         details[i] = detail(empty, update, node, name);
-        stack[i] = update === array ? cache([]) : (update === hole ? cache(empty) : null);
+        stack[i] = update === array ? [] : (update === hole ? cache() : null);
       }
     }
-    return {
-      t: template,
-      n: direct ? root.firstChild : new PersistentFragment(root),
-      d: details,
-      s: stack,
-    };
+    return resolved(
+      template,
+      direct ? root.firstChild : new PersistentFragment(root),
+      details,
+      stack,
+    );
   }
 );

esm/keyed.js

@@ -2,7 +2,7 @@
 import { Hole } from './rabbit.js';
 import { attr } from './handler.js';
 import { cache } from './literals.js';
-import { empty, set } from './utils.js';
+import { set } from './utils.js';
 import { html, svg } from './index.js';
 
 import render from './render/keyed.js';
@@ -28,7 +28,7 @@ const createRef = svg => /** @type {Bound} */ (ref, key) => {
   }
 
   const memo = keyed.get(ref) || set(keyed, ref, new Map);
-  return memo.get(key) || set(memo, key, tag.bind(cache(empty)));
+  return memo.get(key) || set(memo, key, tag.bind(cache()));
 };
 
 /** @type {Bound} Returns a bound tag to render HTML content. */

esm/literals.js

@@ -28,9 +28,10 @@ export const cel = (f, e, d) => ({ f, e, d });
  * @param {function} u the callback to update the value
  * @param {Node} t the target comment node or element
  * @param {string | null} n the attribute name, if any, or `null`
+ * @param {Cache | null} c the cache value for this detail
  * @returns {Detail}
  */
-export const detail = (v, u, t, n) => ({ v, u, t, n });
+export const detail = (v, u, t, n, c) => ({ v, u, t, n, c });
 
 /**
  * @typedef {Object} Entry
@@ -56,10 +57,18 @@ export const entry = (p, u, n) => ({ p, u, n });
  */
 
 /**
- * @param {Cache[]} s the cache stack
  * @returns {Cache}
  */
-export const cache = s => ({ t: null, n: null, d: empty, s });
+export const cache = () => resolved(null, null, empty, empty);
+
+/**
+ * @property {null | TemplateStringsArray} t the cached template
+ * @property {null | Node | PersistentFragment} n the node returned when parsing the template
+ * @property {Detail[]} d the list of updates to perform
+ * @property {Cache[]} s the stack of caches per each interpolation / hole
+ * @returns {Cache}
+ */
+export const resolved = (t, n, d, s) => ({ t, n, d, s });
 
 /**
  * @typedef {Object} Parsed

esm/rabbit.js

@@ -1,6 +1,5 @@
 import { array, hole } from './handler.js';
-import { cache as newCache } from './literals.js';
-import { empty } from './utils.js';
+import { cache } from './literals.js';
 import create from './creator.js';
 import parser from './parser.js';
 
@@ -10,14 +9,14 @@ const parseHTML = create(parser(false));
 const parseSVG = create(parser(true));
 
 /**
- * @param {import("./literals.js").Cache} cache
+ * @param {import("./literals.js").Cache} info
  * @param {Hole} hole
  * @returns {Node}
  */
-const unroll = (cache, { s, t, v }) => {
-  if (cache.t !== t)
-    assign(cache, (s ? parseSVG : parseHTML)(t, v));
-  for (let { d, s } = cache, i = 0; i < d.length; i++) {
+const unroll = (info, { s, t, v }) => {
+  if (info.t !== t)
+    assign(info, (s ? parseSVG : parseHTML)(t, v));
+  for (let { d, s } = info, i = 0; i < d.length; i++) {
     const value = v[i];
     const detail = d[i];
     const { v: previous, u: update, t: target, n: name } = detail;
@@ -31,7 +30,7 @@ const unroll = (cache, { s, t, v }) => {
         break;
       case hole:
         const current = value instanceof Hole ?
-          unroll(s[i] || (s[i] = newCache(empty)), value) :
+          unroll(s[i] || (s[i] = cache()), value) :
           (s[i] = null, value)
         ;
         if (current !== previous)
@@ -43,22 +42,22 @@ const unroll = (cache, { s, t, v }) => {
         break;
     }
   }
-  return cache.n;
+  return info.n;
 };
 
 /**
  * @param {Cache} cache
  * @param {any[]} values
  * @returns {number}
  */
-const unrollValues = ({ s: stack }, values) => {
+const unrollValues = (stack, values) => {
   let i = 0, { length } = values;
   if (length < stack.length) stack.splice(length);
   for (; i < length; i++) {
     const value = values[i];
-    const asHole = value instanceof Hole;
-    const cache = stack[i] || (stack[i] = asHole ? newCache(empty) : null);
-    if (asHole) values[i] = unroll(cache, value);
+    if (value instanceof Hole)
+      values[i] = unroll(stack[i] || (stack[i] = cache()), value);
+    else stack[i] = null;
   }
   return values;
 };
@@ -76,7 +75,7 @@ export class Hole {
     this.t = template;
     this.v = values;
   }
-  toDOM(cache = newCache(empty)) {
-    return unroll(cache, this);
+  toDOM(info = cache()) {
+    return unroll(info, this);
   }
 };

esm/render/hole.js

@@ -1,5 +1,5 @@
 import { cache } from '../literals.js';
-import { empty, set } from '../utils.js';
+import { set } from '../utils.js';
 
 /** @typedef {import("../rabbit.js").Hole} Hole */
 
@@ -14,7 +14,7 @@ const known = new WeakMap;
  * @returns
  */
 export default (where, what) => {
-  const info = known.get(where) || set(known, where, cache(empty));
+  const info = known.get(where) || set(known, where, cache());
   if (info.n !== (typeof what === 'function' ? what() : what).toDOM(info))
     where.replaceChildren(info.n.valueOf());
   return where;

esm/render/shared.js

@@ -1,6 +1,6 @@
 import { Hole } from '../rabbit.js';
 import { cache } from '../literals.js';
-import { empty, set } from '../utils.js';
+import { set } from '../utils.js';
 
 /** @type {WeakMap<Element | DocumentFragment, import("../literals.js").Cache>} */
 const known = new WeakMap;
@@ -13,7 +13,7 @@ const known = new WeakMap;
   * @returns
   */
 export default (where, what, check) => {
-  const info = known.get(where) || set(known, where, cache(empty));
+  const info = known.get(where) || set(known, where, cache());
   const hole = (check && typeof what === 'function') ? what() : what;
   const { n } = info;
   const node = hole instanceof Hole ? hole.toDOM(info) : hole;