@loadbare/app 0.14.0 → 0.16.0

package/dist/hub/lb-apply.js

@@ -20,9 +20,10 @@
  * arrives after that query's answer — a picker in a new live row, a ghost
  * row a custom element built — is filled from the kept answer at the end of
  * the next landing, so a query need not land again, and need not land after
- * the one whose rows hold it, just to fill what is new. A custom element
- * shipped inside an absent branch has not upgraded, so it is filled again
- * once it has, and places its rows itself.
+ * the one whose rows hold it, just to fill what is new.
+ *
+ * Every custom element landing places is told so once the landing is done,
+ * and every one it removes is told so once it is gone — see lb-lifecycle.
  *
  * A `rows` query is placed by its order: the one the URL carries for it, or
  * the one the server declared, or, with neither, the order its rows arrived
@@ -37,14 +38,13 @@
  */
 import { AGGREGATES, ATTR_COLUMN, ATTR_COLUMN_VALUE, ATTR_COUNT, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_MAX, ATTR_MIN, ATTR_QUERY, ATTR_QUERY_ROW_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_SHOW, ATTR_SUM, KIND_ROW, LIVE_GROUP, LIVE_ROW, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, ATTR_SELECT, ATTR_ROW_SELECTED, } from "../core/lb-constants.js";
 import { compareRows, compareValues, isPatch, parseOrder, } from "../core/lb-types.js";
-/** The template holding an absent branch — see ATTR_SHOW. */
-const PARKED = `template[${ATTR_SHOW}]`;
+import { attachPlaced, detachRemoved, LEAVING, PARKED, placed, upgradeAbsent, } from "./lb-lifecycle.js";
 /** A DocumentFragment's nodeType. Tier 3 has no `Node` global to read it from. */
 const FRAGMENT_NODE = 11;
 /** An Element's nodeType, for the same reason. */
 const ELEMENT_NODE = 1;
-/** A row or a group on its way out. */
-const LEAVING = `[${ATTR_ROW_LEAVING}], [${ATTR_GROUP_LEAVING}]`;
+/** A Text node's nodeType, for the same reason. */
+const TEXT_NODE = 3;
 /**
  * What a group's heading and aggregates stop at: the rows and groups inside
  * it, live or leaving, which are filled from rows of their own.
@@ -135,9 +135,29 @@ function land(el, value) {
         return;
     }
     else if (!el.localName.includes("-")) {
-        el.textContent = value;
+        setText(el, String(value));
     }
-    el.setAttribute(ATTR_COLUMN_VALUE, value);
+    setStamp(el, ATTR_COLUMN_VALUE, String(value));
+}
+/**
+ * Set an element's text, unless it already holds exactly that text. Writing
+ * the same text again replaces the text node, which is two mutations and a
+ * style check for nothing.
+ */
+function setText(el, text) {
+    const only = el.firstChild;
+    const same = only
+        ? only === el.lastChild &&
+            only.nodeType === TEXT_NODE &&
+            only.data === text
+        : text === "";
+    if (!same)
+        el.textContent = text;
+}
+/** Set an attribute, unless it already has that value. */
+function setStamp(el, name, value) {
+    if (el.getAttribute(name) !== value)
+        el.setAttribute(name, value);
 }
 /**
  * Whether an element under `root` belongs to root's query, rather than to a
@@ -252,6 +272,57 @@ function present(el, on) {
     parked.setAttribute(ATTR_SHOW, el.getAttribute(ATTR_SHOW));
     el.replaceWith(parked);
     parked.content.append(el);
+    parkedIn.set(el, parked);
+}
+/** The template each absent element was last put in. */
+const parkedIn = new WeakMap();
+/**
+ * Put a live row's element in the document or take it out, the element
+ * itself being known. Its template, while it is in one, decides first, as it
+ * does when landing finds both.
+ */
+function presentPlaced(el, on) {
+    const parked = parkedIn.get(el);
+    if (parked && el.parentNode === parked.content)
+        present(parked, on);
+    present(el, on);
+}
+const placesOf = new WeakMap();
+/**
+ * A live row's places, found the first time it is filled. Every live row is
+ * a copy of the row template, and landing moves what it shows and hides
+ * rather than rebuilding it, so what the first search finds stays true of
+ * the row, and filling it again searches nothing.
+ */
+function places(row) {
+    let found = placesOf.get(row);
+    if (found)
+        return found;
+    found = { columns: new Map(), shows: new Map() };
+    const add = (map, name, el) => {
+        const list = map.get(name);
+        if (list)
+            list.push(el);
+        else
+            map.set(name, [el]);
+    };
+    if (row.hasAttribute(ATTR_COLUMN)) {
+        add(found.columns, row.getAttribute(ATTR_COLUMN), row);
+    }
+    for (const el of below(row, `[${ATTR_COLUMN}]`)) {
+        add(found.columns, el.getAttribute(ATTR_COLUMN), el);
+    }
+    for (const el of below(row, `[${ATTR_SHOW}]`)) {
+        if (el.localName === "template") {
+            const branch = el.content.firstElementChild;
+            if (branch)
+                parkedIn.set(branch, el);
+            continue;
+        }
+        add(found.shows, el.getAttribute(ATTR_SHOW), el);
+    }
+    placesOf.set(row, found);
+    return found;
 }
 /**
  * Fill from one row: every `lb-column` and `lb-show` in root's query.
@@ -261,8 +332,24 @@ function present(el, on) {
  * be the column it displays. An element a `row` lands on is not its own
  * ancestor, so its own `lb-column` reads from the row around it and is left
  * alone here.
+ *
+ * A live row is searched once, the first time it is filled; see places().
  */
 export function applyRow(root, row, liveRow = false, stop) {
+    if (liveRow && !stop) {
+        const { columns, shows } = places(root);
+        for (const [column, value] of Object.entries(row)) {
+            for (const el of columns.get(column) ?? [])
+                land(el, value);
+            const on = value !== null && value !== false;
+            for (const el of shows.get(column) ?? [])
+                presentPlaced(el, on);
+            for (const el of shows.get(`${SHOW_NOT}${column}`) ?? []) {
+                presentPlaced(el, !on);
+            }
+        }
+        return;
+    }
     for (const [column, value] of Object.entries(row)) {
         const selector = `[${ATTR_COLUMN}="${column}"]`;
         const columns = below(root, selector, stop);
@@ -439,6 +526,7 @@ function depart(nodes) {
     const go = () => {
         for (const node of nodes)
             node.remove();
+        detachRemoved(nodes);
     };
     if (running.length === 0)
         go();
@@ -476,12 +564,14 @@ function leaveGroup(group) {
 function makeGroup(doc, template, id, term, value) {
     // Imported rather than cloned, for the reason a live row is.
     const fragment = doc.importNode(template.content, true);
+    upgradeAbsent(fragment, doc);
     const slot = slotIn(fragment);
     const nodes = [...fragment.childNodes];
     for (const node of nodes) {
         if (node.nodeType !== ELEMENT_NODE || node === slot)
             continue;
         const el = node;
+        placed(el);
         el.setAttribute(ATTR_GROUP_LIVE, "");
         if (term)
             el.setAttribute(ATTR_GROUP_COLUMN, term.column);
@@ -817,6 +907,8 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
             // until inserted, and a form-associated control would be filled as if
             // it were not one.
             row = el.ownerDocument.importNode(list.rowTemplate.content.firstElementChild, true);
+            upgradeAbsent(row, el.ownerDocument);
+            placed(row);
             row.setAttribute(ATTR_ROW_LIVE, "");
             row.setAttribute(ATTR_KEY_VALUE, key);
             shown.set(key, row);
@@ -829,10 +921,15 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
             changed: (prior?.changed ?? false) || differs(before, data),
         });
         list.data.set(row, { ...before, ...data });
-        // Fill before insertion. The attributes are already there when the row
-        // upgrades, which is the same thing that makes a first landing and a
-        // refresh one operation everywhere else.
-        applyRow(row, data, true);
+        // Fill before insertion, on a row already upgraded, which is the same
+        // thing that makes a first landing and a refresh one operation
+        // everywhere else.
+        //
+        // A row that already shows these values is left as it is, so a control
+        // the user has typed into and not committed keeps what was typed.
+        if (!before || options.refill || differs(before, data)) {
+            applyRow(row, data, true);
+        }
     };
     if (Array.isArray(result)) {
         for (const data of result)
@@ -909,7 +1006,7 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     // and a patch report the same fact the same way. Only here is the count
     // known: the server answers with rows and says nothing about how many
     // survived reconciliation.
-    el.setAttribute(ATTR_QUERY_ROW_COUNT, String(liveRows(el).length));
+    setStamp(el, ATTR_QUERY_ROW_COUNT, String(liveRows(el).length));
     host.lbRowsLanded?.();
 }
 /** Land one response item on one element that names its query. */
@@ -924,7 +1021,7 @@ function landItem(el, item, options = {}) {
         applyRow(el, row);
         const key = row[item.key];
         if (key !== undefined && key !== null) {
-            el.setAttribute(ATTR_KEY_VALUE, String(key));
+            setStamp(el, ATTR_KEY_VALUE, String(key));
         }
         return;
     }
@@ -993,22 +1090,6 @@ function keep(answers, item) {
         rows: patched(before.rows ?? [], item.key, item.patch),
     });
 }
-/**
- * A custom element whose class is defined and has not yet run on it: one the
- * builder shipped inside an absent branch's template, where nothing upgrades.
- * It has none of the hooks landing calls, so rows that land on it are not
- * placed by it. A landing on it does not count, and once `lb-show` brings it
- * into the document and it upgrades, it is filled again from the kept answer.
- *
- * An element with no class, such as one defined by an element file alone,
- * never upgrades, and is never waiting.
- */
-function waiting(el) {
-    const registry = globalThis
-        .customElements;
-    const upgraded = registry?.get(el.localName);
-    return upgraded !== undefined && !(el instanceof upgraded);
-}
 /**
  * Fill every element that names a kept query and has had nothing land on it.
  * Filling one can build more — a live row holding a picker of its own — so
@@ -1020,10 +1101,10 @@ function fillArrivals(root, state) {
         filled = false;
         for (const [query, item] of answers) {
             for (const el of everywhere(root, `[${ATTR_QUERY}="${query}"]`)) {
-                if (landed.has(el) || waiting(el) || el.closest(LEAVING))
+                if (landed.has(el) || el.closest(LEAVING))
                     continue;
                 landed.add(el);
-                landItem(el, item, { order: orderOf(state, item) });
+                landItem(el, item, { order: orderOf(state, item), refill: true });
                 filled = true;
             }
         }
@@ -1032,6 +1113,8 @@ function fillArrivals(root, state) {
 /**
  * Land response items. Every answer arrives through here, and is kept for
  * `root`, so that what arrives after it is filled from it — see forget().
+ * Once everything has landed, each custom element placed since the last
+ * landing is attached.
  */
 export function applyResponse(root, items, options = {}) {
     const state = keptFor(root);
@@ -1047,8 +1130,7 @@ export function applyResponse(root, items, options = {}) {
             continue;
         }
         for (const el of targets) {
-            if (!waiting(el))
-                state.landed.add(el);
+            state.landed.add(el);
             landItem(el, item, {
                 order: orderOf(state, item),
                 requested: options.requested,
@@ -1056,6 +1138,7 @@ export function applyResponse(root, items, options = {}) {
         }
     }
     fillArrivals(root, state);
+    attachPlaced();
 }
 /**
  * Land a query's kept answer again, as all of its rows: what the hub does