Pre-generated cache

Author: WebReflection

esm/creator.js

@@ -1,6 +1,8 @@
 import { PersistentFragment } from './persistent-fragment.js';
-import { detail, parsed } from './literals.js';
+import { detail } from './literals.js';
+import { array, hole } from './handler.js';
 import { empty } from './utils.js';
+import { cache } from './literals.js';
 
 /**
  * @param {DocumentFragment} content
@@ -12,19 +14,26 @@ const childNodesIndex = (node, i) => node.childNodes[i];
 
 /** @param {(template: TemplateStringsArray, values: any[]) => import("./parser.js").Resolved} parse */
 export default parse => (
-  /** @param {(template: TemplateStringsArray, values: any[]) => import("./literals.js").Parsed} parse */
+  /** @param {(template: TemplateStringsArray, values: any[]) => import("./literals.js").Cache} parse */
   (template, values) => {
     const { f: fragment, e: entries, d: direct } = parse(template, values);
     const root = fragment.cloneNode(true);
-    let current, prev, details = entries === empty ? empty : [];
-    for (let i = 0; i < entries.length; i++) {
-      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);
+    let details = empty, stack = empty;
+    if (entries !== empty) {
+      details = [];
+      stack = [];
+      for (let current, prev, i = 0; i < entries.length; i++) {
+        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);
+      }
     }
-    return parsed(
-      direct ? root.firstChild : new PersistentFragment(root),
-      details
-    );
+    return {
+      t: template,
+      n: direct ? root.firstChild : new PersistentFragment(root),
+      d: details,
+      s: stack,
+    };
   }
 );

esm/keyed.js

@@ -1,5 +1,5 @@
 /*! (c) Andrea Giammarchi - MIT */
-import { Hole, unroll } from './rabbit.js';
+import { Hole } from './rabbit.js';
 import { attr } from './handler.js';
 import { cache } from './literals.js';
 import { empty, set } from './utils.js';
@@ -24,7 +24,7 @@ const keyed = new WeakMap;
 const createRef = svg => /** @type {Bound} */ (ref, key) => {
   /** @type {Tag} */
   function tag(template, ...values) {
-    return unroll(this, new Hole(svg, template, values));
+    return new Hole(svg, template, values).toDOM(this);
   }
 
   const memo = keyed.get(ref) || set(keyed, ref, new Map);

esm/literals.js

@@ -49,27 +49,20 @@ export const entry = (p, u, n) => ({ p, u, n });
 
 /**
  * @typedef {Object} Cache
- * @property {Cache[]} s the stack of caches per each interpolation / hole
  * @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
  */
 
 /**
  * @param {Cache[]} s the cache stack
  * @returns {Cache}
  */
-export const cache = s => ({ s, t: null, n: null, d: empty});
+export const cache = s => ({ t: null, n: null, d: empty, s });
 
 /**
  * @typedef {Object} Parsed
  * @property {Node | PersistentFragment} n the returned node after parsing the template
  * @property {Detail[]} d the list of details to update the node
  */
-
-/**
- * @param {Node | PersistentFragment} n the returned node after parsing the template
- * @param {Detail[]} d the list of details to update the node
- * @returns {Parsed}
- */
-export const parsed = (n, d) => ({ n, d });

esm/node.js

@@ -1,16 +1,11 @@
 /*! (c) Andrea Giammarchi - MIT */
-import { Hole, unroll } from './rabbit.js';
+import { Hole } from './rabbit.js';
 import { attr } from './handler.js';
-import { cache } from './literals.js';
-import { empty } from './utils.js';
 
 /** @typedef {import("./literals.js").DOMValue} DOMValue */
 /** @typedef {import("./literals.js").Target} Target */
 
-const tag = svg => (template, ...values) => unroll(
-  cache(empty),
-  new Hole(svg, template, values)
-);
+const tag = svg => (template, ...values) => new Hole(svg, template, values).toDOM();
 
 /** @type {(template: TemplateStringsArray, ...values:DOMValue[]) => Target} A tag to render HTML content. */
 const html = tag(false);

esm/parser.js

@@ -12,10 +12,9 @@ import createContent from './create-content.js';
 
 /**
  * @typedef {Object} Resolved
- * @property {DocumentFragment} content
- * @property {Entry[]} entries
- * @property {function[]} updates
- * @property {number} length
+ * @param {DocumentFragment} f content retrieved from the template
+ * @param {Entry[]} e entries per each hole in the template
+ * @param {boolean} d direct node to handle
  */
 
 /**

esm/rabbit.js

@@ -1,51 +1,38 @@
-import { array, hole, text } from './handler.js';
+import { array, hole } from './handler.js';
 import { cache as newCache } from './literals.js';
 import { empty } from './utils.js';
 import create from './creator.js';
 import parser from './parser.js';
 
+const { assign } = Object;
+
 const parseHTML = create(parser(false));
 const parseSVG = create(parser(true));
 
-const createCache = ({ u }) => (
-  u === array ?
-    newCache([]) : (
-      u === hole ?
-        newCache(empty) :
-        null
-  )
-);
-
 /**
  * @param {import("./literals.js").Cache} cache
  * @param {Hole} hole
  * @returns {Node}
  */
-export const unroll = (cache, { s, t, v }) => {
-  let i = 0, { d: details, s: stack } = cache;
-  if (cache.t !== t) {
-    const { n, d } = (s ? parseSVG : parseHTML)(t, v);
-    cache.t = t;
-    cache.n = n;
-    cache.d = (details = d);
-    if (v.length) cache.s = (stack = d.map(createCache));
-  }
-  for (; i < details.length; i++) {
+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 value = v[i];
-    const detail = details[i];
+    const detail = d[i];
     const { v: previous, u: update, t: target, n: name } = detail;
     switch (update) {
       case array:
         detail.v = array(
           target,
-          unrollValues(stack[i], value),
+          unrollValues(s[i], value),
           previous
         );
         break;
       case hole:
         const current = value instanceof Hole ?
-          unroll(stack[i], value) :
-          value
+          unroll(s[i] || (s[i] = newCache(empty)), value) :
+          (s[i] = null, value)
         ;
         if (current !== previous)
           detail.v = hole.call(detail, target, current);
@@ -89,4 +76,7 @@ export class Hole {
     this.t = template;
     this.v = values;
   }
+  toDOM(cache = newCache(empty)) {
+    return unroll(cache, this);
+  }
 };

esm/render/hole.js

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

esm/render/shared.js

@@ -1,4 +1,4 @@
-import { Hole, unroll } from '../rabbit.js';
+import { Hole } from '../rabbit.js';
 import { cache } from '../literals.js';
 import { empty, set } from '../utils.js';
 
@@ -16,7 +16,7 @@ export default (where, what, check) => {
   const info = known.get(where) || set(known, where, cache(empty));
   const hole = (check && typeof what === 'function') ? what() : what;
   const { n } = info;
-  const node = hole instanceof Hole ? unroll(info, hole) : hole;
+  const node = hole instanceof Hole ? hole.toDOM(info) : hole;
   if (n !== node)
     where.replaceChildren((info.n = node).valueOf());
   return where;