treeloom 2.0.0 → 2.1.0

package/browser/treeloomRenderOnly.js

@@ -8438,6 +8438,104 @@ var treeloomRenderOnly = (() => {
     }
   });
 
+  // dist/diff/appliedSnapshot.js
+  var require_appliedSnapshot = __commonJS({
+    "dist/diff/appliedSnapshot.js"(exports) {
+      "use strict";
+      init_process();
+      require_es_array_includes();
+      var __importDefault = function(mod) {
+        return mod && mod.__esModule ? mod : {
+          "default": mod
+        };
+      };
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.changesFromApplied = exports.forgetApplied = exports.recordApplied = void 0;
+      var si_funciona_1 = __importDefault(require_main());
+      var createChangeList_1 = __importDefault(require_createChangeList());
+      var LIVE_PROPERTIES = ["value", "checked", "selected", "indeterminate"];
+      var snapshots = /* @__PURE__ */ new WeakMap();
+      var canSnapshot = (domItem) => typeof domItem.attributes.style === "undefined" || si_funciona_1.default.isObject(domItem.attributes.style);
+      var classNames = (className) => typeof className === "string" ? className.split(/\s+/).filter(Boolean) : [];
+      var 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;
+      };
+      var recordApplied = (domItem) => {
+        if (!domItem.element || domItem.nodeValue !== null || !canSnapshot(domItem)) {
+          return;
+        }
+        snapshots.set(domItem.element, describe(domItem));
+      };
+      exports.recordApplied = recordApplied;
+      var forgetApplied = (element) => {
+        if (element) {
+          snapshots.delete(element);
+        }
+      };
+      exports.forgetApplied = forgetApplied;
+      var changesFromApplied = (domItem, propertyName) => {
+        const previous = domItem.element ? snapshots.get(domItem.element) : void 0;
+        if (!previous || domItem.nodeValue !== null || !canSnapshot(domItem)) {
+          return void 0;
+        }
+        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) {
+          if (next.style[property] !== previous.style[property]) {
+            changes.added[`style.${property}`] = next.style[property];
+          }
+        }
+        return changes;
+      };
+      exports.changesFromApplied = changesFromApplied;
+    }
+  });
+
   // dist/sync/updateDomItem.js
   var require_updateDomItem = __commonJS({
     "dist/sync/updateDomItem.js"(exports) {
@@ -8453,6 +8551,7 @@ var treeloomRenderOnly = (() => {
       });
       var si_funciona_1 = __importDefault(require_main());
       var elementChanges_1 = __importDefault(require_elementChanges());
+      var appliedSnapshot_1 = require_appliedSnapshot();
       var updateDomItem = (config) => {
         if (!config.element) {
           return config;
@@ -8478,6 +8577,7 @@ var treeloomRenderOnly = (() => {
           }
           si_funciona_1.default.dotSet(config, dotKey, changes.added[dotKey]);
         }
+        (0, appliedSnapshot_1.forgetApplied)(config.element);
         return config;
       };
       exports.default = updateDomItem;
@@ -10064,6 +10164,7 @@ var treeloomRenderOnly = (() => {
       var si_funciona_1 = __importDefault(require_main());
       var elementHasAttribute_1 = __importDefault(require_elementHasAttribute());
       var createChangeList_1 = __importDefault(require_createChangeList());
+      var appliedSnapshot_1 = require_appliedSnapshot();
       var checkAttribute = (element) => (attr, key) => {
         if (typeof attr === "object") {
           const styles = attr;
@@ -10116,6 +10217,16 @@ var treeloomRenderOnly = (() => {
           }
           return changeList;
         }
+        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) => {
@@ -10203,31 +10314,24 @@ var treeloomRenderOnly = (() => {
           return domItem;
         }
         const element = domItem.element;
-        const previousChildNodes = Array.from(element.childNodes);
-        domItem.children.map((child, index) => {
-          const existing = previousChildNodes.find((childNode2) => childNode2 === 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];
+        const wanted = new Set(childNodes);
+        Array.from(element.childNodes).forEach((node) => {
+          if (!wanted.has(node)) {
+            element.removeChild(node);
+          }
+        });
+        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;
       };
@@ -10252,6 +10356,7 @@ var treeloomRenderOnly = (() => {
       var bindListeners_1 = __importDefault(require_bindListeners());
       var deactivateListeners_1 = __importDefault(require_deactivateListeners());
       var domItemChanges_1 = __importDefault(require_domItemChanges());
+      var appliedSnapshot_1 = require_appliedSnapshot();
       var si_funciona_1 = __importDefault(require_main());
       var generateElement_1 = __importDefault(require_generateElement());
       var updateChildNodes_1 = __importDefault(require_updateChildNodes());
@@ -10319,6 +10424,7 @@ var treeloomRenderOnly = (() => {
           }
           element.style.setProperty(si_funciona_1.default.kabobCase(si_funciona_1.default.strAfter(dotKey, ".")), value);
         }
+        (0, appliedSnapshot_1.recordApplied)(domItem);
         return (0, bindListeners_1.default)(domItem);
       };
       exports.default = updateElement;
@@ -10359,6 +10465,365 @@ var treeloomRenderOnly = (() => {
     }
   });
 
+  // node_modules/core-js/internals/is-array.js
+  var require_is_array = __commonJS({
+    "node_modules/core-js/internals/is-array.js"(exports, module) {
+      "use strict";
+      init_process();
+      var classof = require_classof_raw();
+      module.exports = Array.isArray || function isArray(argument) {
+        return classof(argument) === "Array";
+      };
+    }
+  });
+
+  // node_modules/core-js/internals/is-raw-json.js
+  var require_is_raw_json = __commonJS({
+    "node_modules/core-js/internals/is-raw-json.js"(exports, module) {
+      "use strict";
+      init_process();
+      var isObject = require_is_object();
+      var getInternalState = require_internal_state().get;
+      module.exports = function isRawJSON(O) {
+        if (!isObject(O)) return false;
+        var state = getInternalState(O);
+        return !!state && state.type === "RawJSON";
+      };
+    }
+  });
+
+  // node_modules/core-js/internals/this-number-value.js
+  var require_this_number_value = __commonJS({
+    "node_modules/core-js/internals/this-number-value.js"(exports, module) {
+      "use strict";
+      init_process();
+      var uncurryThis = require_function_uncurry_this();
+      module.exports = uncurryThis(1.1.valueOf);
+    }
+  });
+
+  // node_modules/core-js/internals/to-string-tag-support.js
+  var require_to_string_tag_support = __commonJS({
+    "node_modules/core-js/internals/to-string-tag-support.js"(exports, module) {
+      "use strict";
+      init_process();
+      var wellKnownSymbol = require_well_known_symbol();
+      var TO_STRING_TAG = wellKnownSymbol("toStringTag");
+      var test = {};
+      test[TO_STRING_TAG] = "z";
+      module.exports = String(test) === "[object z]";
+    }
+  });
+
+  // node_modules/core-js/internals/classof.js
+  var require_classof = __commonJS({
+    "node_modules/core-js/internals/classof.js"(exports, module) {
+      "use strict";
+      init_process();
+      var TO_STRING_TAG_SUPPORT = require_to_string_tag_support();
+      var isCallable = require_is_callable();
+      var classofRaw = require_classof_raw();
+      var wellKnownSymbol = require_well_known_symbol();
+      var TO_STRING_TAG = wellKnownSymbol("toStringTag");
+      var $Object = Object;
+      var CORRECT_ARGUMENTS = classofRaw(/* @__PURE__ */ (function() {
+        return arguments;
+      })()) === "Arguments";
+      var tryGet = function(it, key) {
+        try {
+          return it[key];
+        } catch (error) {
+        }
+      };
+      module.exports = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+        var O, tag, result;
+        return it === void 0 ? "Undefined" : it === null ? "Null" : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == "string" ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : (result = classofRaw(O)) === "Object" && isCallable(O.callee) ? "Arguments" : result;
+      };
+    }
+  });
+
+  // node_modules/core-js/internals/to-string.js
+  var require_to_string = __commonJS({
+    "node_modules/core-js/internals/to-string.js"(exports, module) {
+      "use strict";
+      init_process();
+      var classof = require_classof();
+      var $String = String;
+      module.exports = function(argument) {
+        if (classof(argument) === "Symbol") throw new TypeError("Cannot convert a Symbol value to a string");
+        return $String(argument);
+      };
+    }
+  });
+
+  // node_modules/core-js/internals/parse-json-string.js
+  var require_parse_json_string = __commonJS({
+    "node_modules/core-js/internals/parse-json-string.js"(exports, module) {
+      "use strict";
+      init_process();
+      var uncurryThis = require_function_uncurry_this();
+      var hasOwn = require_has_own_property();
+      var $SyntaxError = SyntaxError;
+      var $parseInt = parseInt;
+      var fromCharCode = String.fromCharCode;
+      var at = uncurryThis("".charAt);
+      var slice = uncurryThis("".slice);
+      var exec = uncurryThis(/./.exec);
+      var codePoints = {
+        '\\"': '"',
+        "\\\\": "\\",
+        "\\/": "/",
+        "\\b": "\b",
+        "\\f": "\f",
+        "\\n": "\n",
+        "\\r": "\r",
+        "\\t": "	"
+      };
+      var IS_4_HEX_DIGITS = /^[\da-f]{4}$/i;
+      var IS_C0_CONTROL_CODE = /^[\u0000-\u001F]$/;
+      module.exports = function(source, i) {
+        var unterminated = true;
+        var value = "";
+        while (i < source.length) {
+          var chr = at(source, i);
+          if (chr === "\\") {
+            var twoChars = slice(source, i, i + 2);
+            if (hasOwn(codePoints, twoChars)) {
+              value += codePoints[twoChars];
+              i += 2;
+            } else if (twoChars === "\\u") {
+              i += 2;
+              var fourHexDigits = slice(source, i, i + 4);
+              if (!exec(IS_4_HEX_DIGITS, fourHexDigits)) throw new $SyntaxError("Bad Unicode escape at: " + i);
+              value += fromCharCode($parseInt(fourHexDigits, 16));
+              i += 4;
+            } else throw new $SyntaxError('Unknown escape sequence: "' + twoChars + '"');
+          } else if (chr === '"') {
+            unterminated = false;
+            i++;
+            break;
+          } else {
+            if (exec(IS_C0_CONTROL_CODE, chr)) throw new $SyntaxError("Bad control character in string literal at: " + i);
+            value += chr;
+            i++;
+          }
+        }
+        if (unterminated) throw new $SyntaxError("Unterminated string at: " + i);
+        return { value, end: i };
+      };
+    }
+  });
+
+  // node_modules/core-js/internals/native-raw-json.js
+  var require_native_raw_json = __commonJS({
+    "node_modules/core-js/internals/native-raw-json.js"(exports, module) {
+      "use strict";
+      init_process();
+      var fails = require_fails();
+      module.exports = !fails(function() {
+        var unsafeInt = "9007199254740993";
+        var raw = JSON.rawJSON(unsafeInt);
+        return !JSON.isRawJSON(raw) || JSON.stringify(raw) !== unsafeInt;
+      });
+    }
+  });
+
+  // node_modules/core-js/modules/es.json.stringify.js
+  var require_es_json_stringify = __commonJS({
+    "node_modules/core-js/modules/es.json.stringify.js"() {
+      "use strict";
+      init_process();
+      var $ = require_export();
+      var getBuiltIn = require_get_built_in();
+      var call = require_function_call();
+      var uncurryThis = require_function_uncurry_this();
+      var fails = require_fails();
+      var isArray = require_is_array();
+      var isCallable = require_is_callable();
+      var isObject = require_is_object();
+      var create = require_object_create();
+      var isRawJSON = require_is_raw_json();
+      var isSymbol = require_is_symbol();
+      var classof = require_classof_raw();
+      var thisNumberValue = require_this_number_value();
+      var includes = require_array_includes().includes;
+      var hasOwn = require_has_own_property();
+      var toString = require_to_string();
+      var parseJSONString = require_parse_json_string();
+      var uid = require_uid();
+      var NATIVE_SYMBOL = require_symbol_constructor_detection();
+      var NATIVE_RAW_JSON = require_native_raw_json();
+      var $String = String;
+      var $TypeError = TypeError;
+      var $stringify = getBuiltIn("JSON", "stringify");
+      var $BigInt = getBuiltIn("BigInt");
+      var stringValueOf = uncurryThis("".valueOf);
+      var booleanValueOf = uncurryThis(true.valueOf);
+      var bigIntValueOf = $BigInt && uncurryThis($BigInt.prototype.valueOf);
+      var exec = uncurryThis(/./.exec);
+      var charAt = uncurryThis("".charAt);
+      var charCodeAt = uncurryThis("".charCodeAt);
+      var replace = uncurryThis("".replace);
+      var slice = uncurryThis("".slice);
+      var push = uncurryThis([].push);
+      var pop = uncurryThis([].pop);
+      var numberToString = uncurryThis(1.1.toString);
+      var surrogates = /[\uD800-\uDFFF]/g;
+      var leadingSurrogates = /^[\uD800-\uDBFF]$/;
+      var trailingSurrogates = /^[\uDC00-\uDFFF]$/;
+      var digits = /^\d+$/;
+      var RAW_MARK = uid();
+      var KEY_MARK = uid();
+      var END_MARK = uid();
+      var RAW_MARK_LENGTH = RAW_MARK.length;
+      var KEY_MARK_LENGTH = KEY_MARK.length;
+      var WRONG_SYMBOLS_CONVERSION = !NATIVE_SYMBOL || fails(function() {
+        var symbol = getBuiltIn("Symbol")("stringify detection");
+        return $stringify([symbol]) !== "[null]" || $stringify({ a: symbol }) !== "{}" || $stringify(Object(symbol)) !== "{}";
+      });
+      var ILL_FORMED_UNICODE = fails(function() {
+        return $stringify("\uDF06\uD834") !== '"\\udf06\\ud834"' || $stringify("\uDEAD") !== '"\\udead"';
+      });
+      var isRawJSONValue = NATIVE_RAW_JSON ? getBuiltIn("JSON", "isRawJSON") : isRawJSON;
+      var stringifyWithProperSymbolsConversion = WRONG_SYMBOLS_CONVERSION ? function(it, replacer, space) {
+        return $stringify(it, function(key, value) {
+          var replaced = call(replacer, this, key, value);
+          if (!isSymbol(replaced)) return replaced;
+        }, space);
+      } : $stringify;
+      var fixIllFormedJSON = function(match, offset, string) {
+        var prev = charAt(string, offset - 1);
+        var next = charAt(string, offset + 1);
+        if (exec(leadingSurrogates, match) && !exec(trailingSurrogates, next) || exec(trailingSurrogates, match) && !exec(leadingSurrogates, prev)) {
+          return "\\u" + numberToString(charCodeAt(match, 0), 16);
+        }
+        return match;
+      };
+      var getPropertyList = function(replacer) {
+        if (!isArray(replacer)) return;
+        var rawLength = replacer.length;
+        var propertyList = [];
+        var addedKeys = create(null);
+        for (var i = 0; i < rawLength; i++) {
+          var element = replacer[i];
+          var key;
+          if (typeof element == "string") key = element;
+          else if (typeof element == "number" || classof(element) === "Number" || classof(element) === "String") key = toString(element);
+          else continue;
+          if (!hasOwn(addedKeys, key)) {
+            addedKeys[key] = true;
+            push(propertyList, key);
+          }
+        }
+        return propertyList;
+      };
+      var hasInternalSlot = function(valueOf, it) {
+        try {
+          valueOf(it);
+          return true;
+        } catch (error) {
+          return false;
+        }
+      };
+      var isBoxedPrimitive = function(it) {
+        var kind = classof(it);
+        return kind === "Number" && hasInternalSlot(thisNumberValue, it) || kind === "String" && hasInternalSlot(stringValueOf, it) || kind === "Boolean" && hasInternalSlot(booleanValueOf, it) || !!bigIntValueOf && kind === "BigInt" && hasInternalSlot(bigIntValueOf, it);
+      };
+      var isSerializedAsObject = function(it) {
+        if (!isObject(it) || isCallable(it) || isArray(it)) return false;
+        try {
+          return !isBoxedPrimitive(it);
+        } catch (error) {
+          return true;
+        }
+      };
+      var createElementHolder = function(holder, key) {
+        return {
+          toJSON: function() {
+            var element = holder[key];
+            if (isObject(element) || typeof element == "bigint") {
+              var elementToJSON = element.toJSON;
+              if (isCallable(elementToJSON)) element = call(elementToJSON, element, key);
+            }
+            return element;
+          }
+        };
+      };
+      var getKeyPrefix = function(propertyList) {
+        for (var i = 0, length = propertyList.length; i < length; i++) {
+          if (exec(digits, propertyList[i])) return KEY_MARK;
+        }
+        return "";
+      };
+      var createOrderedObject = function(value, propertyList, keyPrefix) {
+        var ordered = create(null);
+        for (var i = 0, length = propertyList.length; i < length; i++) {
+          var key = propertyList[i];
+          ordered[keyPrefix + key] = createElementHolder(value, key);
+        }
+        ordered[END_MARK] = null;
+        return ordered;
+      };
+      if ($stringify) $({ target: "JSON", stat: true, arity: 3, forced: WRONG_SYMBOLS_CONVERSION || ILL_FORMED_UNICODE || !NATIVE_RAW_JSON }, {
+        stringify: function stringify(text, replacer, space) {
+          var replacerFunction = isCallable(replacer) ? replacer : void 0;
+          var propertyList = replacerFunction ? void 0 : getPropertyList(replacer);
+          var keyPrefix = propertyList && getKeyPrefix(propertyList);
+          var rawStrings = [];
+          var openObjects = [];
+          var parentOrdered = [];
+          var currentOrdered;
+          var marked = false;
+          var root = true;
+          var json = stringifyWithProperSymbolsConversion(text, function(key, value) {
+            key = $String(key);
+            if (propertyList) {
+              if (key === END_MARK) {
+                pop(openObjects);
+                currentOrdered = pop(parentOrdered);
+                return;
+              }
+              if (root) root = false;
+              else if (this !== currentOrdered && !isArray(this) && !includes(propertyList, key)) return;
+            } else if (replacerFunction) value = call(replacerFunction, this, key, value);
+            if (isRawJSONValue(value)) {
+              if (NATIVE_RAW_JSON) return value;
+              marked = true;
+              return RAW_MARK + (push(rawStrings, value.rawJSON) - 1);
+            }
+            if (propertyList && isSerializedAsObject(value)) {
+              if (includes(openObjects, value)) throw new $TypeError("Converting circular structure to JSON");
+              var ordered = createOrderedObject(value, propertyList, keyPrefix);
+              push(openObjects, value);
+              push(parentOrdered, currentOrdered);
+              currentOrdered = ordered;
+              if (keyPrefix) marked = true;
+              return ordered;
+            }
+            return value;
+          }, space);
+          if (typeof json != "string") return json;
+          if (ILL_FORMED_UNICODE) json = replace(json, surrogates, fixIllFormedJSON);
+          if (!marked) return json;
+          var result = "";
+          var length = json.length;
+          for (var i = 0; i < length; i++) {
+            var chr = charAt(json, i);
+            if (chr === '"') {
+              var end = parseJSONString(json, ++i).end - 1;
+              var string = slice(json, i, end);
+              if (slice(string, 0, RAW_MARK_LENGTH) === RAW_MARK) result += rawStrings[slice(string, RAW_MARK_LENGTH)];
+              else if (slice(string, 0, KEY_MARK_LENGTH) === KEY_MARK) result += '"' + slice(string, KEY_MARK_LENGTH) + '"';
+              else result += '"' + string + '"';
+              i = end;
+            } else result += chr;
+          }
+          return result;
+        }
+      });
+    }
+  });
+
   // dist/render/updateElements.js
   var require_updateElements = __commonJS({
     "dist/render/updateElements.js"(exports) {
@@ -10389,6 +10854,124 @@ var treeloomRenderOnly = (() => {
     }
   });
 
+  // dist/render/reconcile.js
+  var require_reconcile = __commonJS({
+    "dist/render/reconcile.js"(exports) {
+      "use strict";
+      init_process();
+      require_es_array_includes();
+      require_es_json_stringify();
+      var __importDefault = function(mod) {
+        return mod && mod.__esModule ? mod : {
+          "default": mod
+        };
+      };
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      var removeEventListener_1 = __importDefault(require_removeEventListener());
+      var itemIdIndex_1 = require_itemIdIndex();
+      var updateElements_1 = __importDefault(require_updateElements());
+      var STRUCTURE = /* @__PURE__ */ new Set(["element", "parentItem", "children", "eventListeners", "activeListeners"]);
+      var listenerKey = (listener) => typeof listener.listenerFunc === "string" ? JSON.stringify([listener.listenerFunc, listener.listenerArgs ?? null, listener.listenerOptions ?? null]) : null;
+      var 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
+              });
+            }
+          }
+        }
+      };
+      var 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];
+          }
+        }
+      };
+      var pairChildren = (existing, next) => {
+        const byId = /* @__PURE__ */ new Map();
+        existing.forEach((child) => {
+          if (typeof child.id === "number") {
+            byId.set(child.id, child);
+          }
+        });
+        const claimed = new Set(next.map((child) => typeof child.id === "number" ? byId.get(child.id) : void 0).filter(Boolean));
+        const taken = /* @__PURE__ */ new Set();
+        return next.map((nextChild, index) => {
+          const sameId = typeof nextChild.id === "number" ? byId.get(nextChild.id) : void 0;
+          const atPosition = existing[index] && !claimed.has(existing[index]) ? existing[index] : void 0;
+          const candidate = sameId ?? atPosition;
+          if (candidate && !taken.has(candidate) && candidate.nodeName === nextChild.nodeName) {
+            taken.add(candidate);
+            return candidate;
+          }
+          return void 0;
+        });
+      };
+      var 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) => {
+          ;
+          child.element?.remove?.();
+        });
+        existing.children = nextChildren.map((nextChild, index) => {
+          const child = pairs[index];
+          if (child) {
+            reconcileItem(child, nextChild);
+            return child;
+          }
+          nextChild.parentItem = existing;
+          return nextChild;
+        });
+        existing.children.forEach((child) => {
+          child.parentItem = existing;
+        });
+      };
+      var reconcile = (existing, next) => {
+        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.`);
+        }
+        (0, itemIdIndex_1.unregisterItemIds)(existing);
+        reconcileItem(existing, next);
+        (0, itemIdIndex_1.registerItemIds)(existing);
+        return (0, updateElements_1.default)(existing);
+      };
+      exports.default = reconcile;
+    }
+  });
+
   // dist/render/renderHtml.js
   var require_renderHtml = __commonJS({
     "dist/render/renderHtml.js"(exports) {
@@ -10437,12 +11020,14 @@ var treeloomRenderOnly = (() => {
         value: true
       });
       var generateElement_1 = __importDefault(require_generateElement());
+      var reconcile_1 = __importDefault(require_reconcile());
       var renderHtml_1 = __importDefault(require_renderHtml());
       var updateChildNodes_1 = __importDefault(require_updateChildNodes());
       var updateElement_1 = __importDefault(require_updateElement());
       var 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,