treeloom 2.0.0 → 2.1.0

package/dist/diff/appliedSnapshot.d.ts

@@ -0,0 +1,34 @@
+import type { DomItem } from '../domItem/types';
+import type { ChangeList } from './types';
+/**
+ * What treeloom last wrote to an element, as the item described it: attribute values by their kabob-case names, the
+ * class names, and the styles by their CSS (kabob-case) names. Values are kept exactly as the item had them, not as the
+ * browser reports them back ('#333', not 'rgb(51, 51, 51)'; `border`, not its longhands).
+ */
+export type AppliedSnapshot = {
+    attributes: Record<string, unknown>;
+    classes: string[];
+    style: Record<string, unknown>;
+};
+/**
+ * Remember what was just written to the item's element (call it after the element has been updated to match the item).
+ * Does nothing for an item without an element, a text or comment node, or a style that is not an object.
+ * @param domItem
+ */
+export declare const recordApplied: (domItem: DomItem) => void;
+/**
+ * Forget what was written to an element, so its next update compares against the element itself again.
+ * @param element
+ */
+export declare const forgetApplied: (element: object | null | undefined) => void;
+/**
+ * The changes that make the item's element match the item, worked out from what was last written to the element rather
+ * than from the element itself: no style or attribute is read back from the DOM, and a value the browser stores in
+ * another form ('#333' as 'rgb(51, 51, 51)', `border` as longhands) is not mistaken for a change. Undefined when there is
+ * no snapshot to compare with (the element was never written by treeloom, or was captured from existing HTML), so the
+ * caller compares against the element instead.
+ * @param domItem
+ * @param propertyName - The name to set a plain attribute by: the element's own property name when it has one
+ * (innerHTML), otherwise the attribute's name (aria-label). Same rule as the element comparison.
+ */
+export declare const changesFromApplied: (domItem: DomItem, propertyName: (kabobKey: string) => string) => ChangeList | undefined;

package/dist/diff/appliedSnapshot.js

@@ -0,0 +1,134 @@
+"use strict";
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+require("core-js/modules/es.array.includes.js");
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changesFromApplied = exports.forgetApplied = exports.recordApplied = void 0;
+const si_funciona_1 = __importDefault(require("si-funciona"));
+const createChangeList_1 = __importDefault(require("./createChangeList"));
+/**
+ * Properties the person using the page changes directly (typing, ticking, choosing), so the element is their real current
+ * state, not what was last written. These are compared with the element itself, as before, so an item still puts them
+ * back (a controlled input: the item says '' and what was typed is cleared on the next update).
+ */
+const LIVE_PROPERTIES = ['value', 'checked', 'selected', 'indeterminate'];
+// Kept beside the item, not on it, so it never travels with the item (deflate, JSON) and goes away with the element
+const snapshots = new WeakMap();
+/**
+ * Whether an item's attributes can be compared through a snapshot: its style, when it has one, is an object of
+ * properties. Anything else (a style written as one string) is compared against the element, as before.
+ * @param domItem
+ */
+const canSnapshot = domItem => typeof domItem.attributes.style === 'undefined' || si_funciona_1.default.isObject(domItem.attributes.style);
+/**
+ * The class names in a className string.
+ * @param className
+ */
+const classNames = className => typeof className === 'string' ? className.split(/\s+/).filter(Boolean) : [];
+/**
+ * An item's attributes in the snapshot's form.
+ * @param domItem
+ */
+const describe = domItem => {
+  const snapshot = {
+    attributes: {},
+    classes: [],
+    style: {}
+  };
+  for (const name in domItem.attributes) {
+    const value = domItem.attributes[name];
+    if (name === 'className') {
+      snapshot.classes = classNames(value);
+      continue;
+    }
+    if (name === 'style') {
+      for (const property in value) {
+        snapshot.style[si_funciona_1.default.kabobCase(property)] = value[property];
+      }
+      continue;
+    }
+    snapshot.attributes[si_funciona_1.default.kabobCase(name)] = value;
+  }
+  return snapshot;
+};
+/**
+ * Remember what was just written to the item's element (call it after the element has been updated to match the item).
+ * Does nothing for an item without an element, a text or comment node, or a style that is not an object.
+ * @param domItem
+ */
+const recordApplied = domItem => {
+  if (!domItem.element || domItem.nodeValue !== null || !canSnapshot(domItem)) {
+    return;
+  }
+  snapshots.set(domItem.element, describe(domItem));
+};
+exports.recordApplied = recordApplied;
+/**
+ * Forget what was written to an element, so its next update compares against the element itself again.
+ * @param element
+ */
+const forgetApplied = element => {
+  if (element) {
+    snapshots.delete(element);
+  }
+};
+exports.forgetApplied = forgetApplied;
+/**
+ * The changes that make the item's element match the item, worked out from what was last written to the element rather
+ * than from the element itself: no style or attribute is read back from the DOM, and a value the browser stores in
+ * another form ('#333' as 'rgb(51, 51, 51)', `border` as longhands) is not mistaken for a change. Undefined when there is
+ * no snapshot to compare with (the element was never written by treeloom, or was captured from existing HTML), so the
+ * caller compares against the element instead.
+ * @param domItem
+ * @param propertyName - The name to set a plain attribute by: the element's own property name when it has one
+ * (innerHTML), otherwise the attribute's name (aria-label). Same rule as the element comparison.
+ */
+const changesFromApplied = (domItem, propertyName) => {
+  const previous = domItem.element ? snapshots.get(domItem.element) : undefined;
+  if (!previous || domItem.nodeValue !== null || !canSnapshot(domItem)) {
+    return undefined;
+  }
+  const next = describe(domItem);
+  const changes = (0, createChangeList_1.default)();
+  const element = domItem.element;
+  for (const key in next.attributes) {
+    const live = LIVE_PROPERTIES.includes(key) && key in element;
+    const current = live ? element[key] : previous.attributes[key];
+    const differs = live && typeof current === 'string' ? String(next.attributes[key] ?? '') !== current : next.attributes[key] !== current;
+    if (differs) {
+      changes.added[propertyName(key)] = next.attributes[key];
+    }
+  }
+  previous.classes.forEach((name, index) => {
+    if (!next.classes.includes(name)) {
+      changes.removed[`class.${index}`] = name;
+    }
+  });
+  next.classes.forEach((name, index) => {
+    if (!previous.classes.includes(name)) {
+      changes.added[`class.${index}`] = name;
+    }
+  });
+  for (const property in previous.style) {
+    if (!(property in next.style)) {
+      changes.removed[`style.${property}`] = previous.style[property];
+    }
+  }
+  for (const property in next.style) {
+    // A changed value is simply set again (setProperty replaces it): no remove first, so one write, not two
+    if (next.style[property] !== previous.style[property]) {
+      changes.added[`style.${property}`] = next.style[property];
+    }
+  }
+  return changes;
+};
+exports.changesFromApplied = changesFromApplied;

package/dist/diff/appliedSnapshot.min.js

@@ -0,0 +1 @@
+"use strict";require("core-js/modules/es.array.includes.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.changesFromApplied=exports.forgetApplied=exports.recordApplied=void 0;const si_funciona_1=__importDefault(require("si-funciona")),createChangeList_1=__importDefault(require("./createChangeList")),LIVE_PROPERTIES=["value","checked","selected","indeterminate"],snapshots=new WeakMap,canSnapshot=e=>void 0===e.attributes.style||si_funciona_1.default.isObject(e.attributes.style),classNames=e=>"string"==typeof e?e.split(/\s+/).filter(Boolean):[],describe=e=>{const s={attributes:{},classes:[],style:{}};for(const t in e.attributes){const a=e.attributes[t];if("className"!==t)if("style"!==t)s.attributes[si_funciona_1.default.kabobCase(t)]=a;else for(const e in a)s.style[si_funciona_1.default.kabobCase(e)]=a[e];else s.classes=classNames(a)}return s},recordApplied=e=>{e.element&&null===e.nodeValue&&canSnapshot(e)&&snapshots.set(e.element,describe(e))};exports.recordApplied=recordApplied;const forgetApplied=e=>{e&&snapshots.delete(e)};exports.forgetApplied=forgetApplied;const changesFromApplied=(e,s)=>{const t=e.element?snapshots.get(e.element):void 0;if(!t||null!==e.nodeValue||!canSnapshot(e))return;const a=describe(e),r=(0,createChangeList_1.default)(),n=e.element;for(const e in a.attributes){const i=LIVE_PROPERTIES.includes(e)&&e in n,o=i?n[e]:t.attributes[e];(i&&"string"==typeof o?String(a.attributes[e]??"")!==o:a.attributes[e]!==o)&&(r.added[s(e)]=a.attributes[e])}t.classes.forEach((e,s)=>{a.classes.includes(e)||(r.removed[`class.${s}`]=e)}),a.classes.forEach((e,s)=>{t.classes.includes(e)||(r.added[`class.${s}`]=e)});for(const e in t.style)e in a.style||(r.removed[`style.${e}`]=t.style[e]);for(const e in a.style)a.style[e]!==t.style[e]&&(r.added[`style.${e}`]=a.style[e]);return r};exports.changesFromApplied=changesFromApplied;

package/dist/diff/domItemChanges.js

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", {
 const si_funciona_1 = __importDefault(require("si-funciona"));
 const elementHasAttribute_1 = __importDefault(require("./elementHasAttribute"));
 const createChangeList_1 = __importDefault(require("./createChangeList"));
+const appliedSnapshot_1 = require("./appliedSnapshot");
 /**
  * Given some config, provide a function to testing attribute and key existence in that config.
  * @param element
@@ -86,6 +87,18 @@ const domItemChanges = domItem => {
     }
     return changeList;
   }
+  // Compared with what treeloom last wrote to the element when it knows that (see appliedSnapshot): nothing is read
+  // back from the DOM. Not when the node is being replaced (nodeName changed): its new element starts fresh.
+  if (!changeList.added.nodeName) {
+    const fromApplied = (0, appliedSnapshot_1.changesFromApplied)(domItem, kabobKey => {
+      const name = attributeName(domItem.attributes, kabobKey);
+      const element = domItem.element;
+      return element && name in element && name !== 'form' ? name : kabobKey;
+    });
+    if (fromApplied) {
+      return fromApplied;
+    }
+  }
   const domItemAttributes = kabobCaseAttributes(domItem.attributes);
   const diffMap = si_funciona_1.default.mapObject(domItemAttributes, (attr, key) => checkAttribute(domItem.element)(attr, key));
   return si_funciona_1.default.reduceObject(diffMap, (changed, result, key) => {

package/dist/diff/domItemChanges.min.js

@@ -1 +1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),elementHasAttribute_1=__importDefault(require("./elementHasAttribute")),createChangeList_1=__importDefault(require("./createChangeList")),checkAttribute=e=>(t,a)=>{if("object"==typeof t){const u=t,s=()=>e.style,l=(0,elementHasAttribute_1.default)(e,a,t);return Array.isArray(l)&&1===l.length&&0===l[0].result[0]&&s()[l[0].value]===u[l[0].value]?0:si_funciona_1.default.filterObject(l,e=>0!==e.result[0]||s()[e.value]!==u[e.value])}if("class"===a){const u=(0,elementHasAttribute_1.default)(e,a,t);return Array.isArray(u)&&1===u.length&&0===u[0].result[0]?0:si_funciona_1.default.filterObject(u,e=>0!==e.result[0])}return(0,elementHasAttribute_1.default)(e,a,t)},kabobCaseAttributes=e=>si_funciona_1.default.reduceObject(e,(t,a,u)=>{let s=e[u]??a;si_funciona_1.default.isObject(s)&&(s=kabobCaseAttributes(s));return t["className"===u?"class":si_funciona_1.default.kabobCase(u)]=s,t},{}),attributeName=(e,t)=>Object.keys(e).find(e=>("className"===e?"class":si_funciona_1.default.kabobCase(e))===t)??si_funciona_1.default.camelCase(t),domItemChanges=e=>{const t=(0,createChangeList_1.default)();if(e.element||(t.added.nodeName=e.nodeName.toLowerCase()),e.element&&e.element.nodeName.toLowerCase()!==e.nodeName.toLowerCase()&&(t.removed.nodeName=e.element.nodeName.toLowerCase(),t.added.nodeName=e.nodeName.toLowerCase()),null!==e.nodeValue)return si_funciona_1.default.emptyObject(e.attributes)||(t.added=t.appendChanges("added",si_funciona_1.default.dotNotate(e.attributes))),e.element?(t.removed.nodeValue=e.element.nodeValue,e.element.nodeValue!==e.nodeValue&&(t.added.nodeValue=e.nodeValue),t):(t.added.nodeValue=e.nodeValue,t);const a=kabobCaseAttributes(e.attributes),u=si_funciona_1.default.mapObject(a,(t,a)=>checkAttribute(e.element)(t,a));return si_funciona_1.default.reduceObject(u,(t,u,s)=>{const l=Array.isArray(u);if(!l&&!u)return t;if(!l&&"class"===s)return t.added.className=e.attributes.className,t;if(!l){const a=attributeName(e.attributes,s),u=e.element;return t.added[u&&a in u&&"form"!==a?a:s]=e.attributes[a],t}if("class"!==s&&"style"!==s)return t;if("class"===s)return t.removed=u.reduce((e,t)=>(-1===t.result[0]&&(e[`class.${t.keys[1]}`]=t.value),e),t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`class.${t.keys[0]}`]=t.value),e),t.added),t;const r=()=>e.element.style;return t.removed=u.reduce((t,u)=>e.element?(-1===u.result[0]&&(t[`style.${u.value}`]=r()[u.value]),0===u.result[0]&&r()[u.value]!==a.style[u.value]&&(t[`style.${u.value}`]=r()[u.value]),t):t,t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`style.${t.value}`]=a.style[t.value]),0===t.result[0]&&r()[t.value]!==a.style[t.value]&&(e[`style.${t.value}`]=a.style[t.value]),e),t.added),t},t)};exports.default=domItemChanges;
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),elementHasAttribute_1=__importDefault(require("./elementHasAttribute")),createChangeList_1=__importDefault(require("./createChangeList")),appliedSnapshot_1=require("./appliedSnapshot"),checkAttribute=e=>(t,a)=>{if("object"==typeof t){const u=t,s=()=>e.style,r=(0,elementHasAttribute_1.default)(e,a,t);return Array.isArray(r)&&1===r.length&&0===r[0].result[0]&&s()[r[0].value]===u[r[0].value]?0:si_funciona_1.default.filterObject(r,e=>0!==e.result[0]||s()[e.value]!==u[e.value])}if("class"===a){const u=(0,elementHasAttribute_1.default)(e,a,t);return Array.isArray(u)&&1===u.length&&0===u[0].result[0]?0:si_funciona_1.default.filterObject(u,e=>0!==e.result[0])}return(0,elementHasAttribute_1.default)(e,a,t)},kabobCaseAttributes=e=>si_funciona_1.default.reduceObject(e,(t,a,u)=>{let s=e[u]??a;si_funciona_1.default.isObject(s)&&(s=kabobCaseAttributes(s));return t["className"===u?"class":si_funciona_1.default.kabobCase(u)]=s,t},{}),attributeName=(e,t)=>Object.keys(e).find(e=>("className"===e?"class":si_funciona_1.default.kabobCase(e))===t)??si_funciona_1.default.camelCase(t),domItemChanges=e=>{const t=(0,createChangeList_1.default)();if(e.element||(t.added.nodeName=e.nodeName.toLowerCase()),e.element&&e.element.nodeName.toLowerCase()!==e.nodeName.toLowerCase()&&(t.removed.nodeName=e.element.nodeName.toLowerCase(),t.added.nodeName=e.nodeName.toLowerCase()),null!==e.nodeValue)return si_funciona_1.default.emptyObject(e.attributes)||(t.added=t.appendChanges("added",si_funciona_1.default.dotNotate(e.attributes))),e.element?(t.removed.nodeValue=e.element.nodeValue,e.element.nodeValue!==e.nodeValue&&(t.added.nodeValue=e.nodeValue),t):(t.added.nodeValue=e.nodeValue,t);if(!t.added.nodeName){const t=(0,appliedSnapshot_1.changesFromApplied)(e,t=>{const a=attributeName(e.attributes,t),u=e.element;return u&&a in u&&"form"!==a?a:t});if(t)return t}const a=kabobCaseAttributes(e.attributes),u=si_funciona_1.default.mapObject(a,(t,a)=>checkAttribute(e.element)(t,a));return si_funciona_1.default.reduceObject(u,(t,u,s)=>{const r=Array.isArray(u);if(!r&&!u)return t;if(!r&&"class"===s)return t.added.className=e.attributes.className,t;if(!r){const a=attributeName(e.attributes,s),u=e.element;return t.added[u&&a in u&&"form"!==a?a:s]=e.attributes[a],t}if("class"!==s&&"style"!==s)return t;if("class"===s)return t.removed=u.reduce((e,t)=>(-1===t.result[0]&&(e[`class.${t.keys[1]}`]=t.value),e),t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`class.${t.keys[0]}`]=t.value),e),t.added),t;const l=()=>e.element.style;return t.removed=u.reduce((t,u)=>e.element?(-1===u.result[0]&&(t[`style.${u.value}`]=l()[u.value]),0===u.result[0]&&l()[u.value]!==a.style[u.value]&&(t[`style.${u.value}`]=l()[u.value]),t):t,t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`style.${t.value}`]=a.style[t.value]),0===t.result[0]&&l()[t.value]!==a.style[t.value]&&(e[`style.${t.value}`]=a.style[t.value]),e),t.added),t},t)};exports.default=domItemChanges;

package/dist/render/index.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     generateElement: (domItem: import("../domItem/types").DomItem) => import("../domItem/types").DomItem;
+    reconcile: (existing: import("../domItem/types").DomItem, next: import("../domItem/types").DomItem) => import("../domItem/types").DomItem;
     renderHtml: (item?: import("../domItem/types").DomItem | null, parent?: import("../domItem/types").DomItem, index?: number) => import("../domItem/types").DomItem;
     updateChildNodes: (domItem: import("../domItem/types").DomItem) => import("../domItem/types").DomItem;
     updateElement: (domItem: import("../domItem/types").DomItem) => import("../domItem/types").DomItem;

package/dist/render/index.js

@@ -12,12 +12,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 const generateElement_1 = __importDefault(require("./generateElement"));
+const reconcile_1 = __importDefault(require("./reconcile"));
 const renderHtml_1 = __importDefault(require("./renderHtml"));
 const updateChildNodes_1 = __importDefault(require("./updateChildNodes"));
 const updateElement_1 = __importDefault(require("./updateElement"));
 const updateElements_1 = __importDefault(require("./updateElements"));
 exports.default = {
   generateElement: generateElement_1.default,
+  reconcile: reconcile_1.default,
   renderHtml: renderHtml_1.default,
   updateChildNodes: updateChildNodes_1.default,
   updateElement: updateElement_1.default,

package/dist/render/index.min.js

@@ -1 +1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const generateElement_1=__importDefault(require("./generateElement")),renderHtml_1=__importDefault(require("./renderHtml")),updateChildNodes_1=__importDefault(require("./updateChildNodes")),updateElement_1=__importDefault(require("./updateElement")),updateElements_1=__importDefault(require("./updateElements"));exports.default={generateElement:generateElement_1.default,renderHtml:renderHtml_1.default,updateChildNodes:updateChildNodes_1.default,updateElement:updateElement_1.default,updateElements:updateElements_1.default};
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const generateElement_1=__importDefault(require("./generateElement")),reconcile_1=__importDefault(require("./reconcile")),renderHtml_1=__importDefault(require("./renderHtml")),updateChildNodes_1=__importDefault(require("./updateChildNodes")),updateElement_1=__importDefault(require("./updateElement")),updateElements_1=__importDefault(require("./updateElements"));exports.default={generateElement:generateElement_1.default,reconcile:reconcile_1.default,renderHtml:renderHtml_1.default,updateChildNodes:updateChildNodes_1.default,updateElement:updateElement_1.default,updateElements:updateElements_1.default};

package/dist/render/reconcile.d.ts

@@ -0,0 +1,16 @@
+import type { DomItem } from '../domItem/types';
+/**
+ * Update a rendered tree to match a new version of it (the next tree, such as one inflated from a server's JSON), by
+ * changing only what differs instead of rendering everything again. Children are matched by id, otherwise by
+ * position and node name. A matched item keeps its element, its id and its listeners; it takes the next item's
+ * attributes and data, and its named listeners are made the next item's. Items the next tree doesn't have are removed,
+ * new ones are added, and then only the changed attributes and nodes are written to the page (see updateElement).
+ *
+ * Listeners added as functions (locally, not carried by the next tree) and focus stay where they are, since the
+ * elements do.
+ * @param existing - An item already rendered (it has an element). It stays the same kind of node: next must be one too.
+ * @param next - The tree it should now match. Its items are taken over: don't render it separately.
+ * @returns existing, updated.
+ */
+declare const reconcile: (existing: DomItem, next: DomItem) => DomItem;
+export default reconcile;

package/dist/render/reconcile.js

@@ -0,0 +1,169 @@
+"use strict";
+
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.json.stringify.js");
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+const removeEventListener_1 = __importDefault(require("../events/functions/removeEventListener"));
+const itemIdIndex_1 = require("../domItem/tree/itemIdIndex");
+const updateElements_1 = __importDefault(require("./updateElements"));
+/** What makes an item part of the tree rather than its data: kept on the existing item, never taken from the next.
+ * The id is taken from the next item, so ids stay the ones the next tree (a server's, say) gives its items. */
+const STRUCTURE = new Set(['element', 'parentItem', 'children', 'eventListeners', 'activeListeners']);
+/**
+ * A named listener as plain data, to tell whether two items have the same one. Only named listeners are compared: they
+ * are the ones a tree carries as JSON. A listener given as a function was added locally (keyboard navigation, say)
+ * and is never in the next tree, so it is left alone.
+ * @param listener
+ */
+const listenerKey = listener => typeof listener.listenerFunc === 'string' ? JSON.stringify([listener.listenerFunc, listener.listenerArgs ?? null, listener.listenerOptions ?? null]) : null;
+/**
+ * Make existing's named listeners the next item's: remove the ones the next item doesn't have (detached from the
+ * element), and add the ones it gains (bound when the element is updated). Unchanged ones stay bound as they are.
+ * @param existing
+ * @param next
+ */
+const reconcileListeners = (existing, next) => {
+  const nextListeners = next.eventListeners ?? {};
+  existing.eventListeners = existing.eventListeners ?? {};
+  for (const eventName of Object.keys(existing.eventListeners)) {
+    const wanted = (nextListeners[eventName] ?? []).map(listenerKey);
+    for (const listener of [...existing.eventListeners[eventName]]) {
+      const key = listenerKey(listener);
+      if (key !== null && !wanted.includes(key)) {
+        (0, removeEventListener_1.default)(eventName, listener.listenerFunc, listener.listenerArgs, listener.listenerOptions, existing);
+      }
+    }
+  }
+  for (const eventName of Object.keys(nextListeners)) {
+    const have = (existing.eventListeners[eventName] ?? []).map(listenerKey);
+    for (const listener of nextListeners[eventName]) {
+      const key = listenerKey(listener);
+      if (key !== null && !have.includes(key)) {
+        existing.eventListeners[eventName] = existing.eventListeners[eventName] ?? [];
+        existing.eventListeners[eventName].push({
+          ...listener,
+          listenerActive: false,
+          activeResponder: null
+        });
+      }
+    }
+  }
+};
+/**
+ * Make existing's own data the next item's (its id included): every property but the structure (element, parent,
+ * children, listeners). A property the next item doesn't have is removed, unless it is a function (something added locally).
+ * @param existing
+ * @param next
+ */
+const reconcileData = (existing, next) => {
+  const target = existing;
+  const source = next;
+  for (const key of Object.keys(target)) {
+    if (!STRUCTURE.has(key) && !(key in source) && typeof target[key] !== 'function') {
+      delete target[key];
+    }
+  }
+  for (const key of Object.keys(source)) {
+    if (!STRUCTURE.has(key)) {
+      target[key] = source[key];
+    }
+  }
+};
+/**
+ * Pair each next child with the existing child it updates: the one with the same id, otherwise the one at the same
+ * position when it is the same kind of node and no next child has it by id (an item without an id in the JSON, a
+ * text node say, gets a fresh one when inflated, so its id says nothing about which item it was). Unpaired next
+ * children are new.
+ * @param existing
+ * @param next
+ */
+const pairChildren = (existing, next) => {
+  const byId = new Map();
+  existing.forEach(child => {
+    if (typeof child.id === 'number') {
+      byId.set(child.id, child);
+    }
+  });
+  // An existing child some next child has by id is that one's, never another's by position
+  const claimed = new Set(next.map(child => typeof child.id === 'number' ? byId.get(child.id) : undefined).filter(Boolean));
+  const taken = new Set();
+  return next.map((nextChild, index) => {
+    const sameId = typeof nextChild.id === 'number' ? byId.get(nextChild.id) : undefined;
+    const atPosition = existing[index] && !claimed.has(existing[index]) ? existing[index] : undefined;
+    const candidate = sameId ?? atPosition;
+    if (candidate && !taken.has(candidate) && candidate.nodeName === nextChild.nodeName) {
+      taken.add(candidate);
+      return candidate;
+    }
+    return undefined;
+  });
+};
+/**
+ * Update existing's subtree to match next's, reusing every item (and its element and listeners) that next still has.
+ * Items next no longer has are removed; new ones are added. Elements are not touched here; see reconcile.
+ * @param existing
+ * @param next
+ */
+const reconcileItem = (existing, next) => {
+  reconcileData(existing, next);
+  reconcileListeners(existing, next);
+  const previous = existing.children ?? [];
+  const nextChildren = next.children ?? [];
+  const pairs = pairChildren(previous, nextChildren);
+  const kept = new Set(pairs.filter(Boolean));
+  previous.filter(child => !kept.has(child)).forEach(child => {
+    // Removed (already out of the id index, see reconcile): its element out of the page
+    ;
+    child.element?.remove?.();
+  });
+  existing.children = nextChildren.map((nextChild, index) => {
+    const child = pairs[index];
+    if (child) {
+      reconcileItem(child, nextChild);
+      return child;
+    }
+    // New: taken as it is; its element is generated when the subtree is updated below
+    nextChild.parentItem = existing;
+    return nextChild;
+  });
+  existing.children.forEach(child => {
+    child.parentItem = existing;
+  });
+};
+/**
+ * Update a rendered tree to match a new version of it (the next tree, such as one inflated from a server's JSON), by
+ * changing only what differs instead of rendering everything again. Children are matched by id, otherwise by
+ * position and node name. A matched item keeps its element, its id and its listeners; it takes the next item's
+ * attributes and data, and its named listeners are made the next item's. Items the next tree doesn't have are removed,
+ * new ones are added, and then only the changed attributes and nodes are written to the page (see updateElement).
+ *
+ * Listeners added as functions (locally, not carried by the next tree) and focus stay where they are, since the
+ * elements do.
+ * @param existing - An item already rendered (it has an element). It stays the same kind of node: next must be one too.
+ * @param next - The tree it should now match. Its items are taken over: don't render it separately.
+ * @returns existing, updated.
+ */
+const reconcile = (existing, next) => {
+  // The item updated in place is where the page's content lives (a <main>, a <body>): changing its kind of node would
+  // replace that element with a new one outside the page. Children of another kind are replaced; this one never is.
+  if (existing.nodeName.toLowerCase() !== next.nodeName.toLowerCase()) {
+    throw new Error(`reconcile can't turn a ${existing.nodeName} into a ${next.nodeName}: give it a tree of the same node, or reconcile its parent.`);
+  }
+  // Ids can change (they follow the next tree), so the subtree leaves the id index first and is indexed again after
+  (0, itemIdIndex_1.unregisterItemIds)(existing);
+  reconcileItem(existing, next);
+  (0, itemIdIndex_1.registerItemIds)(existing);
+  // updateElements patches each item's element (only what changed) and puts its children's elements in order
+  return (0, updateElements_1.default)(existing);
+};
+exports.default = reconcile;

package/dist/render/reconcile.min.js

@@ -0,0 +1 @@
+"use strict";require("core-js/modules/es.array.includes.js"),require("core-js/modules/es.json.stringify.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const removeEventListener_1=__importDefault(require("../events/functions/removeEventListener")),itemIdIndex_1=require("../domItem/tree/itemIdIndex"),updateElements_1=__importDefault(require("./updateElements")),STRUCTURE=new Set(["element","parentItem","children","eventListeners","activeListeners"]),listenerKey=e=>"string"==typeof e.listenerFunc?JSON.stringify([e.listenerFunc,e.listenerArgs??null,e.listenerOptions??null]):null,reconcileListeners=(e,t)=>{const n=t.eventListeners??{};e.eventListeners=e.eventListeners??{};for(const t of Object.keys(e.eventListeners)){const r=(n[t]??[]).map(listenerKey);for(const n of[...e.eventListeners[t]]){const s=listenerKey(n);null===s||r.includes(s)||(0,removeEventListener_1.default)(t,n.listenerFunc,n.listenerArgs,n.listenerOptions,e)}}for(const t of Object.keys(n)){const r=(e.eventListeners[t]??[]).map(listenerKey);for(const s of n[t]){const n=listenerKey(s);null===n||r.includes(n)||(e.eventListeners[t]=e.eventListeners[t]??[],e.eventListeners[t].push({...s,listenerActive:!1,activeResponder:null}))}}},reconcileData=(e,t)=>{const n=e,r=t;for(const e of Object.keys(n))STRUCTURE.has(e)||e in r||"function"==typeof n[e]||delete n[e];for(const e of Object.keys(r))STRUCTURE.has(e)||(n[e]=r[e])},pairChildren=(e,t)=>{const n=new Map;e.forEach(e=>{"number"==typeof e.id&&n.set(e.id,e)});const r=new Set(t.map(e=>"number"==typeof e.id?n.get(e.id):void 0).filter(Boolean)),s=new Set;return t.map((t,i)=>{const o="number"==typeof t.id?n.get(t.id):void 0,c=e[i]&&!r.has(e[i])?e[i]:void 0,l=o??c;if(l&&!s.has(l)&&l.nodeName===t.nodeName)return s.add(l),l})},reconcileItem=(e,t)=>{reconcileData(e,t),reconcileListeners(e,t);const n=e.children??[],r=t.children??[],s=pairChildren(n,r),i=new Set(s.filter(Boolean));n.filter(e=>!i.has(e)).forEach(e=>{e.element?.remove?.()}),e.children=r.map((t,n)=>{const r=s[n];return r?(reconcileItem(r,t),r):(t.parentItem=e,t)}),e.children.forEach(t=>{t.parentItem=e})},reconcile=(e,t)=>{if(e.nodeName.toLowerCase()!==t.nodeName.toLowerCase())throw new Error(`reconcile can't turn a ${e.nodeName} into a ${t.nodeName}: give it a tree of the same node, or reconcile its parent.`);return(0,itemIdIndex_1.unregisterItemIds)(e),reconcileItem(e,t),(0,itemIdIndex_1.registerItemIds)(e),(0,updateElements_1.default)(e)};exports.default=reconcile;

package/dist/render/updateChildNodes.js

@@ -25,31 +25,28 @@ const updateChildNodes = domItem => {
     return domItem;
   }
   const element = domItem.element;
-  const previousChildNodes = Array.from(element.childNodes);
-  domItem.children.map((child, index) => {
-    const existing = previousChildNodes.find(childNode => childNode === child.element);
-    let childNode = existing ?? child.element;
-    if (!childNode) {
-      childNode = (0, updateElement_1.default)(child).element;
-    }
-    if (!previousChildNodes[index]) {
-      element.appendChild(childNode);
-      return childNode;
-    }
-    if (childNode !== previousChildNodes[index]) {
-      element.replaceChild(childNode, previousChildNodes[index]);
-    }
+  const childNodes = domItem.children.map(child => {
+    const childNode = child.element ?? (0, updateElement_1.default)(child).element;
+    child.element = childNode;
     return childNode;
-  }).forEach((childNode, index) => {
-    domItem.children[index].element = childNode;
   });
-  if (element.childNodes.length > domItem.children.length) {
-    const maxLength = domItem.children.length;
-    let nodeToRemove = element.childNodes[maxLength];
-    while (nodeToRemove) {
-      element.removeChild(nodeToRemove);
-      nodeToRemove = element.childNodes[maxLength];
+  // Anything in the element that isn't one of the children's nodes goes (as before, when it ended up past the last child)
+  const wanted = new Set(childNodes);
+  Array.from(element.childNodes).forEach(node => {
+    if (!wanted.has(node)) {
+      element.removeChild(node);
+    }
+  });
+  // Put the nodes in order from the last one back: a node is moved only when it isn't already right before the one that
+  // follows it. So [1, 2, 3, 4] -> [2, 3, 4, 1] moves only 1, not 2, 3 and 4: a node that moves loses focus (and restarts
+  // transitions), so as few as possible move. insertBefore, not replaceChild, so nothing in the way is detached.
+  let following = null;
+  for (let index = childNodes.length - 1; index >= 0; index--) {
+    const childNode = childNodes[index];
+    if (childNode.parentNode !== element || childNode.nextSibling !== following) {
+      element.insertBefore(childNode, following);
     }
+    following = childNode;
   }
   return domItem;
 };

package/dist/render/updateChildNodes.min.js

@@ -1 +1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const updateElement_1=__importDefault(require("./updateElement")),updateChildNodes=e=>{if(e.element||(e=(0,updateElement_1.default)(e)),!e.children||!e.children.length)return e.children=[],e;const t=e.element,l=Array.from(t.childNodes);if(e.children.map((e,d)=>{const n=l.find(t=>t===e.element);let r=n??e.element;return r||(r=(0,updateElement_1.default)(e).element),l[d]?(r!==l[d]&&t.replaceChild(r,l[d]),r):(t.appendChild(r),r)}).forEach((t,l)=>{e.children[l].element=t}),t.childNodes.length>e.children.length){const l=e.children.length;let d=t.childNodes[l];for(;d;)t.removeChild(d),d=t.childNodes[l]}return e};exports.default=updateChildNodes;
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const updateElement_1=__importDefault(require("./updateElement")),updateChildNodes=e=>{if(e.element||(e=(0,updateElement_1.default)(e)),!e.children||!e.children.length)return e.children=[],e;const t=e.element,l=e.children.map(e=>{const t=e.element??(0,updateElement_1.default)(e).element;return e.element=t,t}),n=new Set(l);Array.from(t.childNodes).forEach(e=>{n.has(e)||t.removeChild(e)});let r=null;for(let e=l.length-1;e>=0;e--){const n=l[e];n.parentNode===t&&n.nextSibling===r||t.insertBefore(n,r),r=n}return e};exports.default=updateChildNodes;

package/dist/render/updateElement.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
 const bindListeners_1 = __importDefault(require("../events/functions/bindListeners"));
 const deactivateListeners_1 = __importDefault(require("../events/functions/deactivateListeners"));
 const domItemChanges_1 = __importDefault(require("../diff/domItemChanges"));
+const appliedSnapshot_1 = require("../diff/appliedSnapshot");
 const si_funciona_1 = __importDefault(require("si-funciona"));
 const generateElement_1 = __importDefault(require("./generateElement"));
 const updateChildNodes_1 = __importDefault(require("./updateChildNodes"));
@@ -105,6 +106,8 @@ const updateElement = domItem => {
     // error. kabobCase here is a harmless no-op when the key is already kebab, and a real fix when it is not.
     element.style.setProperty(si_funciona_1.default.kabobCase(si_funciona_1.default.strAfter(dotKey, '.')), value);
   }
+  // The element now matches the item: the next update compares against this rather than reading the element back
+  (0, appliedSnapshot_1.recordApplied)(domItem);
   return (0, bindListeners_1.default)(domItem);
 };
 exports.default = updateElement;

package/dist/render/updateElement.min.js

@@ -1 +1 @@
-"use strict";require("core-js/modules/es.array.includes.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const bindListeners_1=__importDefault(require("../events/functions/bindListeners")),deactivateListeners_1=__importDefault(require("../events/functions/deactivateListeners")),domItemChanges_1=__importDefault(require("../diff/domItemChanges")),si_funciona_1=__importDefault(require("si-funciona")),generateElement_1=__importDefault(require("./generateElement")),updateChildNodes_1=__importDefault(require("./updateChildNodes")),updateElement=e=>{if(!e.element)return(0,updateChildNodes_1.default)((0,generateElement_1.default)((0,deactivateListeners_1.default)(e)));const t=(0,domItemChanges_1.default)(e),s=e.element,n=s;if(t.removed.nodeName||t.added.nodeName)return s.remove(),(0,updateChildNodes_1.default)((0,generateElement_1.default)((0,deactivateListeners_1.default)(e)));for(const e in t.removed){const i=t.removed[e];if(!e.includes(".")){if(e in s){delete n[e];continue}s.removeAttribute(e);continue}const r=si_funciona_1.default.strBefore(e,".");if("class"!==r&&"style"!==r)throw new Error("Unhandled dotKey: "+e);"class"!==r?s.style.removeProperty(si_funciona_1.default.kabobCase(si_funciona_1.default.strAfter(e,"."))):s.classList.remove(i)}for(const e in t.added){const i=t.added[e];if("className"===e){s.className=i;continue}if("style"===e){for(const e in i)s.style.setProperty(si_funciona_1.default.kabobCase(e),i[e]);continue}if(!e.includes(".")){if(e in s&&"form"!==e){n[e]=i;continue}s.setAttribute(e,i);continue}const r=si_funciona_1.default.strBefore(e,".");if("class"!==r&&"style"!==r)throw new Error("Unhandled dotKey: "+e);("class"!==r||!/\s/.test(i)&&i)&&("class"!==r?s.style.setProperty(si_funciona_1.default.kabobCase(si_funciona_1.default.strAfter(e,".")),i):s.classList.add(i))}return(0,bindListeners_1.default)(e)};exports.default=updateElement;
+"use strict";require("core-js/modules/es.array.includes.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const bindListeners_1=__importDefault(require("../events/functions/bindListeners")),deactivateListeners_1=__importDefault(require("../events/functions/deactivateListeners")),domItemChanges_1=__importDefault(require("../diff/domItemChanges")),appliedSnapshot_1=require("../diff/appliedSnapshot"),si_funciona_1=__importDefault(require("si-funciona")),generateElement_1=__importDefault(require("./generateElement")),updateChildNodes_1=__importDefault(require("./updateChildNodes")),updateElement=e=>{if(!e.element)return(0,updateChildNodes_1.default)((0,generateElement_1.default)((0,deactivateListeners_1.default)(e)));const t=(0,domItemChanges_1.default)(e),s=e.element,n=s;if(t.removed.nodeName||t.added.nodeName)return s.remove(),(0,updateChildNodes_1.default)((0,generateElement_1.default)((0,deactivateListeners_1.default)(e)));for(const e in t.removed){const i=t.removed[e];if(!e.includes(".")){if(e in s){delete n[e];continue}s.removeAttribute(e);continue}const a=si_funciona_1.default.strBefore(e,".");if("class"!==a&&"style"!==a)throw new Error("Unhandled dotKey: "+e);"class"!==a?s.style.removeProperty(si_funciona_1.default.kabobCase(si_funciona_1.default.strAfter(e,"."))):s.classList.remove(i)}for(const e in t.added){const i=t.added[e];if("className"===e){s.className=i;continue}if("style"===e){for(const e in i)s.style.setProperty(si_funciona_1.default.kabobCase(e),i[e]);continue}if(!e.includes(".")){if(e in s&&"form"!==e){n[e]=i;continue}s.setAttribute(e,i);continue}const a=si_funciona_1.default.strBefore(e,".");if("class"!==a&&"style"!==a)throw new Error("Unhandled dotKey: "+e);("class"!==a||!/\s/.test(i)&&i)&&("class"!==a?s.style.setProperty(si_funciona_1.default.kabobCase(si_funciona_1.default.strAfter(e,".")),i):s.classList.add(i))}return(0,appliedSnapshot_1.recordApplied)(e),(0,bindListeners_1.default)(e)};exports.default=updateElement;

package/dist/sync/updateDomItem.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 const si_funciona_1 = __importDefault(require("si-funciona"));
 const elementChanges_1 = __importDefault(require("../diff/elementChanges"));
+const appliedSnapshot_1 = require("../diff/appliedSnapshot");
 /**
  * Update a single objects.DomItem element with the provided attributes / style / elementProperties
  * @param config - The DomItem having config changes to be applied to its
@@ -44,6 +45,9 @@ const updateDomItem = config => {
     }
     si_funciona_1.default.dotSet(config, dotKey, changes.added[dotKey]);
   }
+  // The item now holds what the element has, which may not be what treeloom last wrote: compare the next update with
+  // the element itself again, or setting the item back to the old value would look like no change at all
+  (0, appliedSnapshot_1.forgetApplied)(config.element);
   return config;
 };
 exports.default = updateDomItem;

package/dist/sync/updateDomItem.min.js

@@ -1 +1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),elementChanges_1=__importDefault(require("../diff/elementChanges")),updateDomItem=e=>{if(!e.element)return e;const t=(0,elementChanges_1.default)(e);for(const s in t.removed){const t=si_funciona_1.default.strAfter(s,".");if("className"===si_funciona_1.default.strBefore(t,".")){const s=e.attributes.className.split(" ");s.splice(si_funciona_1.default.strAfterLast(t,"."),1),e.attributes.className=s.join(" ");continue}si_funciona_1.default.dotUnset(e,s)}for(const s in t.added){const a=si_funciona_1.default.strAfter(s,".");if("className"===si_funciona_1.default.strBefore(a,".")){const a=e.attributes.className.split(" ");a.push(t.added[s]),e.attributes.className=a.join(" ");continue}si_funciona_1.default.dotSet(e,s,t.added[s])}return e};exports.default=updateDomItem;
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),elementChanges_1=__importDefault(require("../diff/elementChanges")),appliedSnapshot_1=require("../diff/appliedSnapshot"),updateDomItem=e=>{if(!e.element)return e;const t=(0,elementChanges_1.default)(e);for(const s in t.removed){const t=si_funciona_1.default.strAfter(s,".");if("className"===si_funciona_1.default.strBefore(t,".")){const s=e.attributes.className.split(" ");s.splice(si_funciona_1.default.strAfterLast(t,"."),1),e.attributes.className=s.join(" ");continue}si_funciona_1.default.dotUnset(e,s)}for(const s in t.added){const a=si_funciona_1.default.strAfter(s,".");if("className"===si_funciona_1.default.strBefore(a,".")){const a=e.attributes.className.split(" ");a.push(t.added[s]),e.attributes.className=a.join(" ");continue}si_funciona_1.default.dotSet(e,s,t.added[s])}return(0,appliedSnapshot_1.forgetApplied)(e.element),e};exports.default=updateDomItem;

package/package.json

@@ -13,7 +13,7 @@
     "serialization",
     "typescript"
   ],
-  "version": "2.0.0",
+  "version": "2.1.0",
   "bugs": {
     "url": "https://github.com/jheagle/treeloom/issues"
   },