hard to optimize more here ... but it looks good

Author: WebReflection

esm/creator.js

@@ -1,5 +1,5 @@
 import { PersistentFragment } from './persistent-fragment.js';
-import { abc, detail } from './literals.js';
+import { bc, detail } from './literals.js';
 import { array, hole } from './handler.js';
 import { empty } from './utils.js';
 import { cache } from './literals.js';
@@ -14,10 +14,15 @@ 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").Cache} parse */
+  /**
+   * @param {TemplateStringsArray} template
+   * @param {any[]} values
+   * @returns {import("./literals.js").Cache}
+   */
   (template, values) => {
     const { a: fragment, b: entries, c: direct } = parse(template, values);
     const root = fragment.cloneNode(true);
+    /** @type {import("./literals.js").Detail[]} */
     let details = empty;
     if (entries !== empty) {
       details = [];
@@ -32,8 +37,7 @@ export default parse => (
         );
       }
     }
-    return abc(
-      template,
+    return bc(
       direct ? root.firstChild : new PersistentFragment(root),
       details,
     );

esm/handler.js

@@ -56,25 +56,25 @@ const holes = new WeakMap;
 
 /**
  * @template T
- * @this {import("./literals.js").Detail}
- * @param {Node} node
+ * @param {import("./literals.js").Detail} detail
  * @param {T} value
  * @returns {T}
  */
-export function hole(node, value) {
-  let { n: hole } = this, nullish = false;
+export const hole = (detail, value) => {
+  const { t: node, n: hole } = detail;
+  let nullish = false;
   switch (typeof value) {
     case 'object':
       if (value !== null) {
-        (hole || node).replaceWith((this.n = value.valueOf()));
+        (hole || node).replaceWith((detail.n = value.valueOf()));
         break;
       }
     case 'undefined':
       nullish = true;
     default:
       node.data = nullish ? '' : value;
       if (hole) {
-        this.n = null;
+        detail.n = null;
         hole.replaceWith(node);
       }
       break;

esm/literals.js

@@ -6,23 +6,22 @@ import { empty } from './utils.js';
 /** @typedef {unknown} Value */
 /** @typedef {Node | Element | PersistentFragment} Target */
 /** @typedef {null | undefined | string | number | boolean | Node | Element | PersistentFragment} DOMValue */
+/** @typedef {Hole | Node} ArrayValue */
 
 export const abc = (a, b, c) => ({ a, b, c });
 
+export const bc = (b, c) => ({ b, c });
+
 /**
  * @typedef {Object} Detail
  * @property {any} v the current value of the interpolation / hole
  * @property {function} u the callback to update the value
  * @property {Node} t the target comment node or element
- * @property {string | null} n the attribute name, if any, or `null`
- * @param {Cache | Hole[] | Node[] | null} c the cache value for this detail
+ * @property {string | null | Node} n the attribute name, if any, or `null`
+ * @property {Cache | ArrayValue[] | null} c the cache value for this detail
  */
 
 /**
- * @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 = (u, t, n, c) => ({ v: empty, u, t, n, c });
@@ -36,19 +35,12 @@ export const detail = (u, t, n, c) => ({ v: empty, u, t, n, c });
 
 /**
  * @typedef {Object} Cache
- * @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
+ * @property {null | TemplateStringsArray} a the cached template
+ * @property {null | Node | PersistentFragment} b the node returned when parsing the template
+ * @property {Detail[]} c the list of updates to perform
  */
 
 /**
  * @returns {Cache}
  */
 export const cache = () => abc(null, null, empty);
-
-/**
- * @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
- */

esm/node.js

@@ -5,7 +5,7 @@ import { attr } from './handler.js';
 /** @typedef {import("./literals.js").DOMValue} DOMValue */
 /** @typedef {import("./literals.js").Target} Target */
 
-const tag = svg => (template, ...values) => new Hole(svg, template, values).toDOM();
+const tag = svg => (template, ...values) => new Hole(svg, template, values).toDOM().valueOf();
 
 /** @type {(template: TemplateStringsArray, ...values:DOMValue[]) => Target} A tag to render HTML content. */
 const html = tag(false);
@@ -21,9 +21,7 @@ const svg = tag(true);
  * @returns
  */
 const render = (where, what) => {
-  where.replaceChildren(
-    (typeof what === 'function' ? what() : what).valueOf()
-  );
+  where.replaceChildren(typeof what === 'function' ? what() : what);
   return where;
 };
 

esm/rabbit.js

@@ -3,8 +3,6 @@ import { cache } from './literals.js';
 import create from './creator.js';
 import parser from './parser.js';
 
-const { assign } = Object;
-
 const parseHTML = create(parser(false));
 const parseSVG = create(parser(true));
 
@@ -14,31 +12,34 @@ const parseSVG = create(parser(true));
  * @returns {Node}
  */
 const unroll = (info, { s, t, v }) => {
-  if (info.a !== t)
-    assign(info, (s ? parseSVG : parseHTML)(t, v));
+  if (info.a !== t) {
+    const { b, c } = (s ? parseSVG : parseHTML)(t, v);
+    info.a = t;
+    info.b = b;
+    info.c = c;
+  }
   for (let { c } = info, i = 0; i < c.length; i++) {
     const value = v[i];
     const detail = c[i];
-    const { v: previous, u: update, t: target, n: name } = detail;
-    switch (update) {
+    switch (detail.u) {
       case array:
         detail.v = array(
-          target,
+          detail.t,
           unrollValues(detail.c, value),
-          previous
+          detail.v
         );
         break;
       case hole:
         const current = value instanceof Hole ?
           unroll(detail.c || (detail.c = cache()), value) :
           (detail.c = null, value)
         ;
-        if (current !== previous)
-          detail.v = hole.call(detail, target, current);
+        if (current !== detail.v)
+          detail.v = hole(detail, current);
         break;
       default:
-        if (value !== previous)
-          detail.v = update(target, value, name, previous);
+        if (value !== detail.v)
+          detail.v = detail.u(detail.t, value, detail.n, detail.v);
         break;
     }
   }