WebReflection
diff --git a/‎esm/creator.js‎
Lines changed: 3 additions & 3 deletions b/‎esm/creator.js‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎esm/handler.js‎
Lines changed: 29 additions & 16 deletions b/‎esm/handler.js‎
Lines changed: 29 additions & 16 deletions
diff --git a/‎esm/literals.js‎
Lines changed: 6 additions & 6 deletions b/‎esm/literals.js‎
Lines changed: 6 additions & 6 deletions
diff --git a/‎esm/parser.js‎
Lines changed: 37 additions & 8 deletions b/‎esm/parser.js‎
Lines changed: 37 additions & 8 deletions
diff --git a/‎esm/persistent-fragment.js‎
Lines changed: 38 additions & 12 deletions b/‎esm/persistent-fragment.js‎
Lines changed: 38 additions & 12 deletions
diff --git a/‎esm/rabbit.js‎
Lines changed: 31 additions & 14 deletions b/‎esm/rabbit.js‎
Lines changed: 31 additions & 14 deletions
diff --git a/‎esm/render/hole.js‎
Lines changed: 1 addition & 1 deletion b/‎esm/render/hole.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎esm/render/node.js‎
Lines changed: 3 additions & 1 deletion b/‎esm/render/node.js‎
Lines changed: 3 additions & 1 deletion
@@ -14,16 +14,16 @@ const childNodesIndex = (node, i) => node.childNodes[i];
 export default parse => (
   /** @param {(template: TemplateStringsArray, values: any[]) => import("./literals.js").Parsed} parse */
   (template, values) => {
-    const { c: content, e: entries, l: length } = parse(template, values);
-    const root = content.cloneNode(true);
+    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);
     }
     return parsed(
-      length === 1 ? root.firstChild : new PersistentFragment(root),
+      direct ? root.firstChild : new PersistentFragment(root),
       details
     );
   }
 
@@ -6,6 +6,11 @@ import drop from './range.js';
 const setAttribute = (element, name, value) =>
   element.setAttribute(name, value);
 
+/**
+ * @param {Element} element
+ * @param {string} name
+ * @returns {void}
+ */
 export const removeAttribute = (element, name) =>
   element.removeAttribute(name);
 
@@ -51,22 +56,29 @@ const holes = new WeakMap;
 
 /**
  * @template T
+ * @this {import("./literals.js").Detail}
  * @param {Node} node
  * @param {T} value
  * @returns {T}
  */
-export const hole = (node, value) => {
-  const h = holes.get(node);
-  if (h) h.remove();
-  let nullish = value == null;
-  if (nullish || typeof value !== 'object') {
-    if (h) holes.delete(node);
-  }
-  else {
-    nullish = true;
-    node.before(set(holes, node, value.valueOf()));
+export function hole(node, value) {
+  let { n: hole } = this, nullish = false;
+  switch (typeof value) {
+    case 'object':
+      if (value !== null) {
+        (hole || node).replaceWith((this.n = value.valueOf()));
+        break;
+      }
+    case 'undefined':
+      nullish = true;
+    default:
+      node.data = nullish ? '' : value;
+      if (hole) {
+        this.n = null;
+        hole.replaceWith(node);
+      }
+      break;
   }
-  node.data = nullish ? '' : value;
   return value;
 };
 
@@ -183,21 +195,22 @@ export const toggle = (element, value, name) => (
  * @param {Node[]} prev
  * @returns {Node[]}
  */
-export const array = (node, value, _, prev) => {
+export const array = (node, value, prev) => {
   // normal diff
-  if (value.length)
+  const { length } = value;
+  node.data = `[${length}]`;
+  if (length)
     return udomdiff(node.parentNode, prev, value, diffFragment, node);
   /* c8 ignore start */
-  const { length } = prev;
-  switch (length) {
+  switch (prev.length) {
     case 1:
       prev[0].remove();
     case 0:
       break;
     default:
       drop(
         diffFragment(prev[0], 0),
-        diffFragment(prev[length - 1], -0),
+        diffFragment(prev.at(-1), -0),
         false
       );
       break;
 
@@ -15,12 +15,12 @@ import { empty } from './utils.js';
  */
 
 /**
- * @param {PersistentFragment} c content retrieved from the template
+ * @param {DocumentFragment} f content retrieved from the template
  * @param {Entry[]} e entries per each hole in the template
- * @param {number} l the length of content childNodes
+ * @param {boolean} d direct node to handle
  * @returns
  */
-export const cel = (c, e, l) => ({ c, e, l });
+export const cel = (f, e, d) => ({ f, e, d });
 
 /**
  * @typedef {Object} Detail
@@ -34,18 +34,18 @@ export const cel = (c, e, l) => ({ c, e, l });
  * @param {any} v the current value of the interpolation / hole
  * @param {function} u the callback to update the value
  * @param {Node} t the target comment node or element
- * @param {string} n the name of the attribute, if any
+ * @param {string?} n the attribute name, if any, or `null`
  * @returns {Detail}
  */
 export const detail = (v, u, t, n) => ({ v, u, t, n });
 
 /**
  * @param {number[]} p the path to retrieve the node
  * @param {function} u the update function
- * @param {string} n the attribute name, if any
+ * @param {string?} n the attribute name, if any, or `null`
  * @returns {Entry}
  */
-export const entry = (p, u, n = '') => ({ p, u, n });
+export const entry = (p, u, n) => ({ p, u, n });
 
 /**
  * @typedef {Object} Cache
 
@@ -1,4 +1,4 @@
-import { COMMENT_NODE } from 'domconstants/constants';
+import { COMMENT_NODE, ELEMENT_NODE } from 'domconstants/constants';
 import { TEXT_ELEMENTS } from 'domconstants/re';
 import parser from '@webreflection/uparser';
 
@@ -32,6 +32,8 @@ const createPath = node => {
   return path;
 };
 
+const textNode = () => document.createTextNode('');
+
 /**
  * @param {TemplateStringsArray} template
  * @param {boolean} xml
@@ -40,47 +42,74 @@ const createPath = node => {
 const resolve = (template, values, xml) => {
   const content = createContent(parser(template, prefix, xml), xml);
   const { length } = template;
-  let asArray = false, entries = empty;
+  let entries = empty;
   if (length > 1) {
     const replace = [];
     const tw = document.createTreeWalker(content, 1 | 128);
     let i = 0, search = `${prefix}${i++}`;
     entries = [];
     while (i < length) {
       const node = tw.nextNode();
+      // these are holes or arrays
       if (node.nodeType === COMMENT_NODE) {
         if (node.data === search) {
+          // ⚠️ once array, always array!
           const update = isArray(values[i - 1]) ? array : hole;
           if (update === hole) replace.push(node);
-          else asArray = true;
-          entries.push(entry(createPath(node), update));
+          else node.data = '[]';
+          entries.push(entry(createPath(node), update, null));
           search = `${prefix}${i++}`;
         }
       }
       else {
         let path;
+        // these are attributes
         while (node.hasAttribute(search)) {
           if (!path) path = createPath(node);
           const name = node.getAttribute(search);
           entries.push(entry(path, attribute(node, name, xml), name));
           removeAttribute(node, search);
           search = `${prefix}${i++}`;
         }
+        // these are special text-only nodes
         if (
+          !xml &&
           TEXT_ELEMENTS.test(node.localName) &&
           node.textContent.trim() === `<!--${search}-->`
         ) {
-          entries.push(entry(path || createPath(node), text));
+          entries.push(entry(path || createPath(node), text, null));
           search = `${prefix}${i++}`;
         }
       }
     }
     // can't replace holes on the fly or the tree walker fails
     for (i = 0; i < replace.length; i++)
-      replace[i].replaceWith(document.createTextNode(''));
+      replace[i].replaceWith(textNode());
+  }
+
+  // need to decide if there should be a persistent fragment
+  const { childNodes } = content;
+  let { length: len } = childNodes;
+
+  // html`` or svg`` to signal an empty content
+  // these nodes can be passed directly as never mutated
+  if (len < 1) {
+    len = 1;
+    content.appendChild(textNode());
+  }
+  // html`${'b'}` or svg`${[]}` cases
+  else if (
+    len === 1 &&
+    // ignore html`static` or svg`static` because
+    // these nodes can be passed directly as never mutated
+    length !== 1 &&
+    childNodes[0].nodeType !== ELEMENT_NODE
+  ) {
+    // use a persistent fragment for these cases too
+    len = 0;
   }
-  const l = content.childNodes.length;
-  return set(cache, template, cel(content, entries, l === 1 && asArray ? 0 : l));
+
+  return set(cache, template, cel(content, entries, len === 1));
 };
 
 /** @type {WeakMap<TemplateStringsArray, Resolved>} */
 
@@ -1,6 +1,7 @@
 import { DOCUMENT_FRAGMENT_NODE } from 'domconstants/constants';
 import custom from 'custom-function/factory';
 import drop from './range.js';
+import { empty } from './utils.js';
 
 /**
  * @param {PersistentFragment} fragment
@@ -23,29 +24,54 @@ export const diffFragment = (node, operation) => (
     node
 );
 
+const comment = value => document.createComment(value);
+
 /** @extends {DocumentFragment} */
 export class PersistentFragment extends custom(DocumentFragment) {
-  #nodes;
-  #length;
+  #firstChild = comment('<>');
+  #lastChild = comment('</>');
+  #nodes = empty;
   constructor(fragment) {
-    const _nodes = [...fragment.childNodes];
     super(fragment);
-    this.#nodes = _nodes;
-    this.#length = _nodes.length;
+    this.replaceChildren(...[
+      this.#firstChild,
+      ...fragment.childNodes,
+      this.#lastChild,
+    ]);
     checkType = true;
   }
-  get firstChild() { return this.#nodes[0]; }
-  get lastChild() { return this.#nodes.at(-1); }
-  get parentNode() { return this.#nodes[0].parentNode; }
-  /* c8 ignore start */
-  remove() { remove(this, false); }
-  /* c8 ignore stop */
+  get firstChild() { return this.#firstChild; }
+  get lastChild() { return this.#lastChild; }
+  get parentNode() { return this.#firstChild.parentNode; }
+  remove() {
+    remove(this, false);
+  }
   replaceWith(node) {
     remove(this, true).replaceWith(node);
   }
   valueOf() {
-    if (this.childNodes.length < this.#length)
+    let { firstChild, lastChild, parentNode } = this;
+    if (parentNode === this) {
+      if (this.#nodes === empty)
+        this.#nodes = [...this.childNodes];
+    }
+    else {
+      /* c8 ignore start */
+      // there are cases where a fragment might be just appended
+      // out of the box without valueOf() invoke (first render).
+      // When these are moved around and lose their parent and,
+      // such parent is not the fragment itself, it's possible there
+      // where changes or mutations in there to take care about.
+      // This is a render-only specific issue but it's tested and
+      // it's worth fixing to me to have more consistent fragments.
+      if (parentNode) {
+        this.#nodes = [firstChild];
+        while (firstChild !== lastChild)
+          this.#nodes.push((firstChild = firstChild.nextSibling));
+      }
+      /* c8 ignore stop */
       this.replaceChildren(...this.#nodes);
+    }
     return this;
   }
 }
@@ -7,6 +7,15 @@ import parser from './parser.js';
 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
@@ -19,25 +28,33 @@ export const unroll = (cache, { s, t, v }) => {
     cache.t = t;
     cache.n = n;
     cache.d = (details = d);
-    if (v.length) cache.s = (stack = []);
+    if (v.length) cache.s = (stack = d.map(createCache));
   }
   for (; i < details.length; i++) {
     const value = v[i];
     const detail = details[i];
     const { v: previous, u: update, t: target, n: name } = detail;
-    const asArray = update === array;
-    const asHole = !asArray && update === hole;
-    const cache = stack[i] || (
-      stack[i] = asArray ?
-        newCache([]) :
-        (asHole ? newCache(empty) : null)
-    );
-    const current = asArray ?
-      unrollValues(cache, value) :
-      (asHole ? (value instanceof Hole ? unroll(cache, value) : value) : value)
-    ;
-    if (asArray || (current !== previous))
-      detail.v = update(target, current, name, previous);
+    switch (update) {
+      case array:
+        detail.v = array(
+          target,
+          unrollValues(stack[i], value),
+          previous
+        );
+        break;
+      case hole:
+        const current = value instanceof Hole ?
+          unroll(stack[i], value) :
+          value
+        ;
+        if (current !== previous)
+          detail.v = hole.call(detail, target, current);
+        break;
+      default:
+        if (value !== previous)
+          detail.v = update(target, value, name, previous);
+        break;
+    }
   }
   return cache.n;
 };
 
@@ -17,6 +17,6 @@ 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))
-    where.replaceChildren(info.n);
+    where.replaceChildren(info.n.valueOf());
   return where;
 };
@@ -8,6 +8,8 @@
  * @returns
  */
 export default (where, what) => {
-  where.replaceChildren(typeof what === 'function' ? what() : what);
+  where.replaceChildren(
+    (typeof what === 'function' ? what() : what).valueOf()
+  );
   return where;
 };