@zubra/runtime 5.9.0 → 5.9.2

package/src/effect.js

@@ -31,7 +31,7 @@ let owner = null;          // the Effect or Scope currently running
 let nextId = 0;
 let scheduled = null;      // promise for the pending microtask flush
 let flushing = false;
-const effectOf = new WeakMap();
+const EFFECT = Symbol('effect');
 
 /**
  * `Symbol.dispose`, or, where the engine doesn't have it yet, the symbol TypeScript's downlevel
@@ -92,15 +92,18 @@ function report(error) {
 class Owner {
   constructor(parent) {
     this.parent = parent;
-    this.children = new Set();
+    this.children = null;     // created on first child: most effects have none
     this.disposed = false;
     this.paused = false;
-    parent?.children.add(this);
+    if (parent) (parent.children ??= new Set()).add(this);
   }
 
   disposeChildren() {
+    const children = this.children;
+    if (children === null || children.size === 0) return;
+    this.children = null;
     batch(() => {
-      for (const child of [...this.children]) child.dispose();
+      for (const child of children) { child.parent = null; child.dispose(); }
     });
   }
 
@@ -108,7 +111,7 @@ class Owner {
     if (this.disposed) return;
     this.disposed = true;
     this.disposeChildren();
-    this.parent?.children.delete(this);
+    this.parent?.children?.delete(this);
   }
 
   [DISPOSE]() {
@@ -118,7 +121,7 @@ class Owner {
   pause() {
     if (this.paused || this.disposed) return;
     this.paused = true;
-    batch(() => {
+    if (this.children) batch(() => {
       for (const child of [...this.children]) child.pause();
     });
   }
@@ -128,7 +131,7 @@ class Owner {
     this.paused = false;
     // Children may be replaced while their parent resumes, so iterate a snapshot and skip
     // anything that was disposed along the way.
-    for (const child of [...this.children]) if (!child.disposed) child.resume();
+    if (this.children) for (const child of [...this.children]) if (!child.disposed) child.resume();
   }
 }
 
@@ -152,7 +155,7 @@ class Effect extends Owner {
         owner = previous;
       }
     });
-    effectOf.set(this.computed, this);
+    this.computed[EFFECT] = this;
     watcher.watch(this.computed);
   }
 
@@ -187,7 +190,7 @@ class Effect extends Owner {
     this.paused = false;
     watchAgain(this.computed);
     try { this.run(); } catch (error) { report(error); }
-    for (const child of [...this.children]) if (!child.disposed) child.resume();
+    if (this.children) for (const child of [...this.children]) if (!child.disposed) child.resume();
   }
 }
 
@@ -255,7 +258,7 @@ export function flush() {
         report(new Error('zubra: effects keep re-triggering each other; stopped after 100 rounds'));
         return;
       }
-      const effects = pending.map((computed) => effectOf.get(computed)).sort((a, b) => a.id - b.id);
+      const effects = pending.map((computed) => computed[EFFECT]).sort((a, b) => a.id - b.id);
       for (const e of effects) {
         if (e.disposed || e.paused) continue;
         try { e.run(); } catch (error) { report(error); }

package/src/element.js

@@ -559,6 +559,25 @@ function blueprint(source, parent = null) {
   return content;
 }
 
+// For a blueprint with no custom elements: a copy owned by this document, made once, which rows
+// clone. Its clones need no adopting when they're inserted, and nothing in it has to upgrade.
+const imported = new WeakMap();
+const upgrades = (content) =>
+  [...content.querySelectorAll('*')].some((element) => element.localName.includes('-') || element.hasAttribute('is'));
+
+/** A fresh copy of `block`'s template for `parent`, ready for its parts to be found and bound. */
+function freshCopy(block, parent) {
+  const content = blueprint(block, parent);
+  let copy = imported.get(content);
+  if (copy === undefined) {
+    // importNode: custom elements inside upgrade now, so their properties exist before parts
+    // bind (a plain clone stays in the template's inert document).
+    copy = upgrades(content) ? null : document.importNode(content, true);
+    imported.set(content, copy);
+  }
+  return copy === null ? document.importNode(content, true) : copy.cloneNode(true);
+}
+
 function clearBetween(open, close) {
   while (open.nextSibling && open.nextSibling !== close) open.nextSibling.remove();
 }
@@ -619,10 +638,8 @@ function mountBlock(block, args, open, close, hydrating, context) {
   clearBetween(open, close);
   // Find and bind the parts in the fragment, then insert it: child components inside see
   // their props from the start, and can't move slotted nodes before they're found.
-  // importNode, not cloneNode: defined custom elements upgrade now, so their properties exist
-  // before parts bind (a clone stays in the template's inert document).
   const parent = parentOf(close);
-  const fragment = document.importNode(blueprint(block, parent), true);
+  const fragment = freshCopy(block, parent);
   fragmentParents.set(fragment, parent);
   const fresh = locate(childRange(fragment), parts);
   parts.forEach((part, index) => bind(part, fresh[index], false, context));
@@ -756,7 +773,12 @@ function bind(part, node, hydrating, context) {
   if (part.text) {
     effect(() => {
       const text = part.text();
-      if (node.textContent !== text) node.textContent = text;
+      // A lone Text child is compared and written in place (`.data`): reading `textContent`
+      // walks the subtree, and setting it replaces the Text node.
+      const child = node.firstChild;
+      if (child !== null && child === node.lastChild && child.nodeType === TEXT) {
+        if (child.data !== text) child.data = text;
+      } else if (node.textContent !== text) node.textContent = text;
     });
   } else if (part.anchor) {
     effect(() => {
@@ -1317,19 +1339,27 @@ function bindEach(part, open, hydrating, context) {
   const rowsOwner = scope();
   let rows = [];
 
+  // A row is the nodes from `open` to `close`. Rows the server rendered keep the markers it put
+  // around them. A row made here is its block's own nodes, from first to last, with no markers:
+  // what a block's nodes are at the top never changes after it's bound (a region inside one keeps
+  // its own markers), so the first and last stay the row's ends. Only an empty block needs one.
   const createRow = (value, index, key, rowOpen, rowClose, hydrateRow) => {
-    if (!rowOpen) {
-      // A new row is assembled in a fragment, then placed.
-      rowOpen = document.createComment('[');
-      rowClose = document.createComment(']');
-      const fragment = new DocumentFragment();
-      fragmentParents.set(fragment, parentOf(open));
-      fragment.append(rowOpen, rowClose);
-    }
     const item = new Signal.State(value);
     const position = new Signal.State(index);
-    const owner = rowsOwner.run(() => scope(() => mountBlock(part.block, [item, position], rowOpen, rowClose, hydrateRow, context)));
-    return { key, item, position, open: rowOpen, close: rowClose, owner };
+    if (rowOpen) {
+      const owner = rowsOwner.run(() => scope(() => mountBlock(part.block, [item, position], rowOpen, rowClose, hydrateRow, context)));
+      return { key, item, position, open: rowOpen, close: rowClose, owner };
+    }
+    const parent = parentOf(open);
+    const fragment = freshCopy(part.block, parent);
+    fragmentParents.set(fragment, parent);
+    const owner = rowsOwner.run(() => scope(() => {
+      const parts = part.block.parts(item, position);
+      const nodes = locate(childRange(fragment), parts);
+      parts.forEach((each, at) => bind(each, nodes[at], false, context));
+    }));
+    if (!fragment.firstChild) fragment.append(document.createComment(''));
+    return { key, item, position, open: fragment.firstChild, close: fragment.lastChild, owner };
   };
   const nodesOf = (row) => {
     const nodes = [];