From 3bce29e59e400b1217f5573fd9770260079fc2aa Mon Sep 17 00:00:00 2001
From: matheo <mdaninos@apple.com>
Date: Tue, 7 Nov 2023 09:39:44 +0100
Subject: [PATCH 1/6] Migrate LiveComponent to Idiomorph

---
 .../assets/dist/live_controller.js            | 1458 +++++++++--------
 src/LiveComponent/assets/dist/morphdom.d.ts   |    1 +
 src/LiveComponent/assets/package.json         |    2 +-
 src/LiveComponent/assets/src/morphdom.ts      |   42 +-
 .../assets/test/controller/render.test.ts     |    2 +-
 yarn.lock                                     |   10 +-
 6 files changed, 764 insertions(+), 751 deletions(-)

diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
index 425b2e6a90b..7dc3231e910 100644
--- a/src/LiveComponent/assets/dist/live_controller.js
+++ b/src/LiveComponent/assets/dist/live_controller.js
@@ -425,764 +425,765 @@ class ValueStore {
     }
 }
 
-var DOCUMENT_FRAGMENT_NODE = 11;
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+//=============================================================================
+// AMD insanity... i hate javascript so much
+//
+// IGNORE EVERYTHING FROM HERE UNTIL THE COMMENT SAYING 'AND NOW IT BEGINS..."
+//=============================================================================
+(function (root, factory) {
+    //@ts-ignore
+    {
+        // Browser globals
+        root.Idiomorph = root.Idiomorph || factory();
+    }
+}(typeof self !== 'undefined' ? self : commonjsGlobal,
+    function () {
+        return (function () {
+
+            //=============================================================================
+            // AND NOW IT BEGINS...
+            //=============================================================================
+            let EMPTY_SET = new Set();
+
+            //=============================================================================
+            // Core Morphing Algorithm - morph, morphNormalizedContent, morphOldNodeTo, morphChildren
+            //=============================================================================
+            function morph(oldNode, newContent, config = {}) {
+
+                if (oldNode instanceof Document) {
+                    oldNode = oldNode.documentElement;
+                }
 
-function morphAttrs(fromNode, toNode) {
-    var toNodeAttrs = toNode.attributes;
-    var attr;
-    var attrName;
-    var attrNamespaceURI;
-    var attrValue;
-    var fromValue;
+                if (typeof newContent === 'string') {
+                    newContent = parseContent(newContent);
+                }
 
-    // document-fragments dont have attributes so lets not do anything
-    if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) {
-      return;
-    }
+                let normalizedContent = normalizeContent(newContent);
+
+                let ctx = createMorphContext(oldNode, normalizedContent, config);
+
+                return morphNormalizedContent(oldNode, normalizedContent, ctx);
+            }
+
+            function morphNormalizedContent(oldNode, normalizedNewContent, ctx) {
+                if (ctx.head.block) {
+                    let oldHead = oldNode.querySelector('head');
+                    let newHead = normalizedNewContent.querySelector('head');
+                    if (oldHead && newHead) {
+                        let promises = handleHeadElement(newHead, oldHead, ctx);
+                        // when head promises resolve, call morph again, ignoring the head tag
+                        Promise.all(promises).then(function () {
+                            morphNormalizedContent(oldNode, normalizedNewContent, Object.assign(ctx, {
+                                head: {
+                                    block: false,
+                                    ignore: true
+                                }
+                            }));
+                        });
+                        return;
+                    }
+                }
+
+                if (ctx.morphStyle === "innerHTML") {
 
-    // update attributes on original DOM element
-    for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
-        attr = toNodeAttrs[i];
-        attrName = attr.name;
-        attrNamespaceURI = attr.namespaceURI;
-        attrValue = attr.value;
+                    // innerHTML, so we are only updating the children
+                    morphChildren(normalizedNewContent, oldNode, ctx);
+                    return oldNode.children;
 
-        if (attrNamespaceURI) {
-            attrName = attr.localName || attrName;
-            fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);
+                } else if (ctx.morphStyle === "outerHTML" || ctx.morphStyle == null) {
+                    // otherwise find the best element match in the new content, morph that, and merge its siblings
+                    // into either side of the best match
+                    let bestMatch = findBestNodeMatch(normalizedNewContent, oldNode, ctx);
 
-            if (fromValue !== attrValue) {
-                if (attr.prefix === 'xmlns'){
-                    attrName = attr.name; // It's not allowed to set an attribute with the XMLNS namespace without specifying the `xmlns` prefix
+                    // stash the siblings that will need to be inserted on either side of the best match
+                    let previousSibling = bestMatch?.previousSibling;
+                    let nextSibling = bestMatch?.nextSibling;
+
+                    // morph it
+                    let morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
+
+                    if (bestMatch) {
+                        // if there was a best match, merge the siblings in too and return the
+                        // whole bunch
+                        return insertSiblings(previousSibling, morphedNode, nextSibling);
+                    } else {
+                        // otherwise nothing was added to the DOM
+                        return []
+                    }
+                } else {
+                    throw "Do not understand how to morph style " + ctx.morphStyle;
                 }
-                fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
             }
-        } else {
-            fromValue = fromNode.getAttribute(attrName);
 
-            if (fromValue !== attrValue) {
-                fromNode.setAttribute(attrName, attrValue);
+
+            /**
+             * @param possibleActiveElement
+             * @param ctx
+             * @returns {boolean}
+             */
+            function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
+                return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+            }
+
+            /**
+             * @param oldNode root node to merge content into
+             * @param newContent new content to merge
+             * @param ctx the merge context
+             * @returns {Element} the element that ended up in the DOM
+             */
+            function morphOldNodeTo(oldNode, newContent, ctx) {
+                if (ctx.ignoreActive && oldNode === document.activeElement) ; else if (newContent == null) {
+                    if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return;
+
+                    oldNode.remove();
+                    ctx.callbacks.afterNodeRemoved(oldNode);
+                    return null;
+                } else if (!isSoftMatch(oldNode, newContent)) {
+                    if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return;
+                    if (ctx.callbacks.beforeNodeAdded(newContent) === false) return;
+
+                    oldNode.parentElement.replaceChild(newContent, oldNode);
+                    ctx.callbacks.afterNodeAdded(newContent);
+                    ctx.callbacks.afterNodeRemoved(oldNode);
+                    return newContent;
+                } else {
+                    if (ctx.callbacks.beforeNodeMorphed(oldNode, newContent) === false) return;
+
+                    if (oldNode instanceof HTMLHeadElement && ctx.head.ignore) ; else if (oldNode instanceof HTMLHeadElement && ctx.head.style !== "morph") {
+                        handleHeadElement(newContent, oldNode, ctx);
+                    } else {
+                        syncNodeFrom(newContent, oldNode, ctx);
+                        if (!ignoreValueOfActiveElement(oldNode, ctx)) {
+                            morphChildren(newContent, oldNode, ctx);
+                        }
+                    }
+                    ctx.callbacks.afterNodeMorphed(oldNode, newContent);
+                    return oldNode;
+                }
             }
-        }
-    }
 
-    // Remove any extra attributes found on the original DOM element that
-    // weren't found on the target element.
-    var fromNodeAttrs = fromNode.attributes;
+            /**
+             * This is the core algorithm for matching up children.  The idea is to use id sets to try to match up
+             * nodes as faithfully as possible.  We greedily match, which allows us to keep the algorithm fast, but
+             * by using id sets, we are able to better match up with content deeper in the DOM.
+             *
+             * Basic algorithm is, for each node in the new content:
+             *
+             * - if we have reached the end of the old parent, append the new content
+             * - if the new content has an id set match with the current insertion point, morph
+             * - search for an id set match
+             * - if id set match found, morph
+             * - otherwise search for a "soft" match
+             * - if a soft match is found, morph
+             * - otherwise, prepend the new node before the current insertion point
+             *
+             * The two search algorithms terminate if competing node matches appear to outweigh what can be achieved
+             * with the current node.  See findIdSetMatch() and findSoftMatch() for details.
+             *
+             * @param {Element} newParent the parent element of the new content
+             * @param {Element } oldParent the old content that we are merging the new content into
+             * @param ctx the merge context
+             */
+            function morphChildren(newParent, oldParent, ctx) {
+
+                let nextNewChild = newParent.firstChild;
+                let insertionPoint = oldParent.firstChild;
+                let newChild;
+
+                // run through all the new content
+                while (nextNewChild) {
+
+                    newChild = nextNewChild;
+                    nextNewChild = newChild.nextSibling;
+
+                    // if we are at the end of the exiting parent's children, just append
+                    if (insertionPoint == null) {
+                        if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
+
+                        oldParent.appendChild(newChild);
+                        ctx.callbacks.afterNodeAdded(newChild);
+                        removeIdsFromConsideration(ctx, newChild);
+                        continue;
+                    }
+
+                    // if the current node has an id set match then morph
+                    if (isIdSetMatch(newChild, insertionPoint, ctx)) {
+                        morphOldNodeTo(insertionPoint, newChild, ctx);
+                        insertionPoint = insertionPoint.nextSibling;
+                        removeIdsFromConsideration(ctx, newChild);
+                        continue;
+                    }
+
+                    // otherwise search forward in the existing old children for an id set match
+                    let idSetMatch = findIdSetMatch(newParent, oldParent, newChild, insertionPoint, ctx);
 
-    for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {
-        attr = fromNodeAttrs[d];
-        attrName = attr.name;
-        attrNamespaceURI = attr.namespaceURI;
+                    // if we found a potential match, remove the nodes until that point and morph
+                    if (idSetMatch) {
+                        insertionPoint = removeNodesBetween(insertionPoint, idSetMatch, ctx);
+                        morphOldNodeTo(idSetMatch, newChild, ctx);
+                        removeIdsFromConsideration(ctx, newChild);
+                        continue;
+                    }
+
+                    // no id set match found, so scan forward for a soft match for the current node
+                    let softMatch = findSoftMatch(newParent, oldParent, newChild, insertionPoint, ctx);
 
-        if (attrNamespaceURI) {
-            attrName = attr.localName || attrName;
+                    // if we found a soft match for the current node, morph
+                    if (softMatch) {
+                        insertionPoint = removeNodesBetween(insertionPoint, softMatch, ctx);
+                        morphOldNodeTo(softMatch, newChild, ctx);
+                        removeIdsFromConsideration(ctx, newChild);
+                        continue;
+                    }
 
-            if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {
-                fromNode.removeAttributeNS(attrNamespaceURI, attrName);
+                    // abandon all hope of morphing, just insert the new child before the insertion point
+                    // and move on
+                    if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
+
+                    oldParent.insertBefore(newChild, insertionPoint);
+                    ctx.callbacks.afterNodeAdded(newChild);
+                    removeIdsFromConsideration(ctx, newChild);
+                }
+
+                // remove any remaining old nodes that didn't match up with new content
+                while (insertionPoint !== null) {
+
+                    let tempNode = insertionPoint;
+                    insertionPoint = insertionPoint.nextSibling;
+                    removeNode(tempNode, ctx);
+                }
             }
-        } else {
-            if (!toNode.hasAttribute(attrName)) {
-                fromNode.removeAttribute(attrName);
+
+            //=============================================================================
+            // Attribute Syncing Code
+            //=============================================================================
+
+            /**
+             * syncs a given node with another node, copying over all attributes and
+             * inner element state from the 'from' node to the 'to' node
+             *
+             * @param {Element} from the element to copy attributes & state from
+             * @param {Element} to the element to copy attributes & state to
+             */
+            function syncNodeFrom(from, to, ctx) {
+                let type = from.nodeType;
+
+                // if is an element type, sync the attributes from the
+                // new node into the new node
+                if (type === 1 /* element type */) {
+                    const fromAttributes = from.attributes;
+                    const toAttributes = to.attributes;
+                    for (const fromAttribute of fromAttributes) {
+                        if (fromAttribute.name === 'value' && ignoreValueOfActiveElement(to, ctx)) {
+                            continue;
+                        }
+                        if (to.getAttribute(fromAttribute.name) !== fromAttribute.value) {
+                            to.setAttribute(fromAttribute.name, fromAttribute.value);
+                        }
+                    }
+                    for (const toAttribute of toAttributes) {
+                        if (!from.hasAttribute(toAttribute.name)) {
+                            to.removeAttribute(toAttribute.name);
+                        }
+                    }
+                }
+
+                // sync text nodes
+                if (type === 8 /* comment */ || type === 3 /* text */) {
+                    if (to.nodeValue !== from.nodeValue) {
+                        to.nodeValue = from.nodeValue;
+                    }
+                }
+
+                if (!ignoreValueOfActiveElement(to, ctx)) {
+                    // sync input values
+                    syncInputValue(from, to);
+                }
             }
-        }
-    }
-}
 
-var range; // Create a range object for efficently rendering strings to elements.
-var NS_XHTML = 'http://www.w3.org/1999/xhtml';
+            function syncAttribute(from, to, attributeName) {
+                if (from[attributeName] !== to[attributeName]) {
+                    if (from[attributeName]) {
+                        to.setAttribute(attributeName, from[attributeName]);
+                    } else {
+                        to.removeAttribute(attributeName);
+                    }
+                }
+            }
 
-var doc = typeof document === 'undefined' ? undefined : document;
-var HAS_TEMPLATE_SUPPORT = !!doc && 'content' in doc.createElement('template');
-var HAS_RANGE_SUPPORT = !!doc && doc.createRange && 'createContextualFragment' in doc.createRange();
+            // NB: many bothans died to bring us information:
+            //
+            // https://github.com/patrick-steele-idem/morphdom/blob/master/src/specialElHandlers.js
+            // https://github.com/choojs/nanomorph/blob/master/lib/morph.jsL113
+            function syncInputValue(from, to) {
+                if (from instanceof HTMLInputElement &&
+                    to instanceof HTMLInputElement &&
+                    from.type !== 'file') {
+
+                    to.value = from.value || '';
+                    syncAttribute(from, to, 'value');
+
+                    // sync boolean attributes
+                    syncAttribute(from, to, 'checked');
+                    syncAttribute(from, to, 'disabled');
+                } else if (from instanceof HTMLOptionElement) {
+                    syncAttribute(from, to, 'selected');
+                } else if (from instanceof HTMLTextAreaElement && to instanceof HTMLTextAreaElement) {
+                    let fromValue = from.value;
+                    let toValue = to.value;
+                    if (fromValue !== toValue) {
+                        to.value = fromValue;
+                    }
+                    if (to.firstChild && to.firstChild.nodeValue !== fromValue) {
+                        to.firstChild.nodeValue = fromValue;
+                    }
+                }
+            }
 
-function createFragmentFromTemplate(str) {
-    var template = doc.createElement('template');
-    template.innerHTML = str;
-    return template.content.childNodes[0];
-}
+            //=============================================================================
+            // the HEAD tag can be handled specially, either w/ a 'merge' or 'append' style
+            //=============================================================================
+            function handleHeadElement(newHeadTag, currentHead, ctx) {
 
-function createFragmentFromRange(str) {
-    if (!range) {
-        range = doc.createRange();
-        range.selectNode(doc.body);
-    }
+                let added = [];
+                let removed = [];
+                let preserved = [];
+                let nodesToAppend = [];
 
-    var fragment = range.createContextualFragment(str);
-    return fragment.childNodes[0];
-}
+                let headMergeStyle = ctx.head.style;
 
-function createFragmentFromWrap(str) {
-    var fragment = doc.createElement('body');
-    fragment.innerHTML = str;
-    return fragment.childNodes[0];
-}
+                // put all new head elements into a Map, by their outerHTML
+                let srcToNewHeadNodes = new Map();
+                for (const newHeadChild of newHeadTag.children) {
+                    srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
+                }
 
-/**
- * This is about the same
- * var html = new DOMParser().parseFromString(str, 'text/html');
- * return html.body.firstChild;
- *
- * @method toElement
- * @param {String} str
- */
-function toElement(str) {
-    str = str.trim();
-    if (HAS_TEMPLATE_SUPPORT) {
-      // avoid restrictions on content for things like `<tr><th>Hi</th></tr>` which
-      // createContextualFragment doesn't support
-      // <template> support not available in IE
-      return createFragmentFromTemplate(str);
-    } else if (HAS_RANGE_SUPPORT) {
-      return createFragmentFromRange(str);
-    }
-
-    return createFragmentFromWrap(str);
-}
+                // for each elt in the current head
+                for (const currentHeadElt of currentHead.children) {
+
+                    // If the current head element is in the map
+                    let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
+                    let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
+                    let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
+                    if (inNewContent || isPreserved) {
+                        if (isReAppended) {
+                            // remove the current version and let the new version replace it and re-execute
+                            removed.push(currentHeadElt);
+                        } else {
+                            // this element already exists and should not be re-appended, so remove it from
+                            // the new content map, preserving it in the DOM
+                            srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
+                            preserved.push(currentHeadElt);
+                        }
+                    } else {
+                        if (headMergeStyle === "append") {
+                            // we are appending and this existing element is not new content
+                            // so if and only if it is marked for re-append do we do anything
+                            if (isReAppended) {
+                                removed.push(currentHeadElt);
+                                nodesToAppend.push(currentHeadElt);
+                            }
+                        } else {
+                            // if this is a merge, we remove this content since it is not in the new head
+                            if (ctx.head.shouldRemove(currentHeadElt) !== false) {
+                                removed.push(currentHeadElt);
+                            }
+                        }
+                    }
+                }
 
-/**
- * Returns true if two node's names are the same.
- *
- * NOTE: We don't bother checking `namespaceURI` because you will never find two HTML elements with the same
- *       nodeName and different namespace URIs.
- *
- * @param {Element} a
- * @param {Element} b The target element
- * @return {boolean}
- */
-function compareNodeNames(fromEl, toEl) {
-    var fromNodeName = fromEl.nodeName;
-    var toNodeName = toEl.nodeName;
-    var fromCodeStart, toCodeStart;
-
-    if (fromNodeName === toNodeName) {
-        return true;
-    }
+                // Push the remaining new head elements in the Map into the
+                // nodes to append to the head tag
+                nodesToAppend.push(...srcToNewHeadNodes.values());
+
+                let promises = [];
+                for (const newNode of nodesToAppend) {
+                    let newElt = document.createRange().createContextualFragment(newNode.outerHTML).firstChild;
+                    if (ctx.callbacks.beforeNodeAdded(newElt) !== false) {
+                        if (newElt.href || newElt.src) {
+                            let resolve = null;
+                            let promise = new Promise(function (_resolve) {
+                                resolve = _resolve;
+                            });
+                            newElt.addEventListener('load',function() {
+                                resolve();
+                            });
+                            promises.push(promise);
+                        }
+                        currentHead.appendChild(newElt);
+                        ctx.callbacks.afterNodeAdded(newElt);
+                        added.push(newElt);
+                    }
+                }
 
-    fromCodeStart = fromNodeName.charCodeAt(0);
-    toCodeStart = toNodeName.charCodeAt(0);
+                // remove all removed elements, after we have appended the new elements to avoid
+                // additional network requests for things like style sheets
+                for (const removedElement of removed) {
+                    if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
+                        currentHead.removeChild(removedElement);
+                        ctx.callbacks.afterNodeRemoved(removedElement);
+                    }
+                }
 
-    // If the target element is a virtual DOM node or SVG node then we may
-    // need to normalize the tag name before comparing. Normal HTML elements that are
-    // in the "http://www.w3.org/1999/xhtml"
-    // are converted to upper case
-    if (fromCodeStart <= 90 && toCodeStart >= 97) { // from is upper and to is lower
-        return fromNodeName === toNodeName.toUpperCase();
-    } else if (toCodeStart <= 90 && fromCodeStart >= 97) { // to is upper and from is lower
-        return toNodeName === fromNodeName.toUpperCase();
-    } else {
-        return false;
-    }
-}
+                ctx.head.afterHeadMorphed(currentHead, {added: added, kept: preserved, removed: removed});
+                return promises;
+            }
+
+            function noOp() {}
+
+            function createMorphContext(oldNode, newContent, config) {
+                return {
+                    target:oldNode,
+                    newContent: newContent,
+                    config: config,
+                    morphStyle : config.morphStyle,
+                    ignoreActive : config.ignoreActive,
+                    ignoreActiveValue : config.ignoreActiveValue,
+                    idMap: createIdMap(oldNode, newContent),
+                    deadIds: new Set(),
+                    callbacks: Object.assign({
+                        beforeNodeAdded: noOp,
+                        afterNodeAdded : noOp,
+                        beforeNodeMorphed: noOp,
+                        afterNodeMorphed : noOp,
+                        beforeNodeRemoved: noOp,
+                        afterNodeRemoved : noOp,
+
+                    }, config.callbacks),
+                    head: Object.assign({
+                        style: 'merge',
+                        shouldPreserve : function(elt) {
+                            return elt.getAttribute("im-preserve") === "true";
+                        },
+                        shouldReAppend : function(elt) {
+                            return elt.getAttribute("im-re-append") === "true";
+                        },
+                        shouldRemove : noOp,
+                        afterHeadMorphed : noOp,
+                    }, config.head),
+                }
+            }
 
-/**
- * Create an element, optionally with a known namespace URI.
- *
- * @param {string} name the element name, e.g. 'div' or 'svg'
- * @param {string} [namespaceURI] the element's namespace URI, i.e. the value of
- * its `xmlns` attribute or its inferred namespace.
- *
- * @return {Element}
- */
-function createElementNS(name, namespaceURI) {
-    return !namespaceURI || namespaceURI === NS_XHTML ?
-        doc.createElement(name) :
-        doc.createElementNS(namespaceURI, name);
-}
+            function isIdSetMatch(node1, node2, ctx) {
+                if (node1 == null || node2 == null) {
+                    return false;
+                }
+                if (node1.nodeType === node2.nodeType && node1.tagName === node2.tagName) {
+                    if (node1.id !== "" && node1.id === node2.id) {
+                        return true;
+                    } else {
+                        return getIdIntersectionCount(ctx, node1, node2) > 0;
+                    }
+                }
+                return false;
+            }
 
-/**
- * Copies the children of one DOM element to another DOM element
- */
-function moveChildren(fromEl, toEl) {
-    var curChild = fromEl.firstChild;
-    while (curChild) {
-        var nextChild = curChild.nextSibling;
-        toEl.appendChild(curChild);
-        curChild = nextChild;
-    }
-    return toEl;
-}
+            function isSoftMatch(node1, node2) {
+                if (node1 == null || node2 == null) {
+                    return false;
+                }
+                return node1.nodeType === node2.nodeType && node1.tagName === node2.tagName
+            }
 
-function syncBooleanAttrProp(fromEl, toEl, name) {
-    if (fromEl[name] !== toEl[name]) {
-        fromEl[name] = toEl[name];
-        if (fromEl[name]) {
-            fromEl.setAttribute(name, '');
-        } else {
-            fromEl.removeAttribute(name);
-        }
-    }
-}
+            function removeNodesBetween(startInclusive, endExclusive, ctx) {
+                while (startInclusive !== endExclusive) {
+                    let tempNode = startInclusive;
+                    startInclusive = startInclusive.nextSibling;
+                    removeNode(tempNode, ctx);
+                }
+                removeIdsFromConsideration(ctx, endExclusive);
+                return endExclusive.nextSibling;
+            }
+
+            //=============================================================================
+            // Scans forward from the insertionPoint in the old parent looking for a potential id match
+            // for the newChild.  We stop if we find a potential id match for the new child OR
+            // if the number of potential id matches we are discarding is greater than the
+            // potential id matches for the new child
+            //=============================================================================
+            function findIdSetMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
+
+                // max id matches we are willing to discard in our search
+                let newChildPotentialIdCount = getIdIntersectionCount(ctx, newChild, oldParent);
+
+                let potentialMatch = null;
+
+                // only search forward if there is a possibility of an id match
+                if (newChildPotentialIdCount > 0) {
+                    let potentialMatch = insertionPoint;
+                    // if there is a possibility of an id match, scan forward
+                    // keep track of the potential id match count we are discarding (the
+                    // newChildPotentialIdCount must be greater than this to make it likely
+                    // worth it)
+                    let otherMatchCount = 0;
+                    while (potentialMatch != null) {
+
+                        // If we have an id match, return the current potential match
+                        if (isIdSetMatch(newChild, potentialMatch, ctx)) {
+                            return potentialMatch;
+                        }
 
-var specialElHandlers = {
-    OPTION: function(fromEl, toEl) {
-        var parentNode = fromEl.parentNode;
-        if (parentNode) {
-            var parentName = parentNode.nodeName.toUpperCase();
-            if (parentName === 'OPTGROUP') {
-                parentNode = parentNode.parentNode;
-                parentName = parentNode && parentNode.nodeName.toUpperCase();
-            }
-            if (parentName === 'SELECT' && !parentNode.hasAttribute('multiple')) {
-                if (fromEl.hasAttribute('selected') && !toEl.selected) {
-                    // Workaround for MS Edge bug where the 'selected' attribute can only be
-                    // removed if set to a non-empty value:
-                    // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12087679/
-                    fromEl.setAttribute('selected', 'selected');
-                    fromEl.removeAttribute('selected');
-                }
-                // We have to reset select element's selectedIndex to -1, otherwise setting
-                // fromEl.selected using the syncBooleanAttrProp below has no effect.
-                // The correct selectedIndex will be set in the SELECT special handler below.
-                parentNode.selectedIndex = -1;
-            }
-        }
-        syncBooleanAttrProp(fromEl, toEl, 'selected');
-    },
-    /**
-     * The "value" attribute is special for the <input> element since it sets
-     * the initial value. Changing the "value" attribute without changing the
-     * "value" property will have no effect since it is only used to the set the
-     * initial value.  Similar for the "checked" attribute, and "disabled".
-     */
-    INPUT: function(fromEl, toEl) {
-        syncBooleanAttrProp(fromEl, toEl, 'checked');
-        syncBooleanAttrProp(fromEl, toEl, 'disabled');
-
-        if (fromEl.value !== toEl.value) {
-            fromEl.value = toEl.value;
-        }
-
-        if (!toEl.hasAttribute('value')) {
-            fromEl.removeAttribute('value');
-        }
-    },
-
-    TEXTAREA: function(fromEl, toEl) {
-        var newValue = toEl.value;
-        if (fromEl.value !== newValue) {
-            fromEl.value = newValue;
-        }
-
-        var firstChild = fromEl.firstChild;
-        if (firstChild) {
-            // Needed for IE. Apparently IE sets the placeholder as the
-            // node value and vise versa. This ignores an empty update.
-            var oldValue = firstChild.nodeValue;
-
-            if (oldValue == newValue || (!newValue && oldValue == fromEl.placeholder)) {
-                return;
+                        // computer the other potential matches of this new content
+                        otherMatchCount += getIdIntersectionCount(ctx, potentialMatch, newContent);
+                        if (otherMatchCount > newChildPotentialIdCount) {
+                            // if we have more potential id matches in _other_ content, we
+                            // do not have a good candidate for an id match, so return null
+                            return null;
+                        }
+
+                        // advanced to the next old content child
+                        potentialMatch = potentialMatch.nextSibling;
+                    }
+                }
+                return potentialMatch;
             }
 
-            firstChild.nodeValue = newValue;
-        }
-    },
-    SELECT: function(fromEl, toEl) {
-        if (!toEl.hasAttribute('multiple')) {
-            var selectedIndex = -1;
-            var i = 0;
-            // We have to loop through children of fromEl, not toEl since nodes can be moved
-            // from toEl to fromEl directly when morphing.
-            // At the time this special handler is invoked, all children have already been morphed
-            // and appended to / removed from fromEl, so using fromEl here is safe and correct.
-            var curChild = fromEl.firstChild;
-            var optgroup;
-            var nodeName;
-            while(curChild) {
-                nodeName = curChild.nodeName && curChild.nodeName.toUpperCase();
-                if (nodeName === 'OPTGROUP') {
-                    optgroup = curChild;
-                    curChild = optgroup.firstChild;
-                } else {
-                    if (nodeName === 'OPTION') {
-                        if (curChild.hasAttribute('selected')) {
-                            selectedIndex = i;
-                            break;
+            //=============================================================================
+            // Scans forward from the insertionPoint in the old parent looking for a potential soft match
+            // for the newChild.  We stop if we find a potential soft match for the new child OR
+            // if we find a potential id match in the old parents children OR if we find two
+            // potential soft matches for the next two pieces of new content
+            //=============================================================================
+            function findSoftMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
+
+                let potentialSoftMatch = insertionPoint;
+                let nextSibling = newChild.nextSibling;
+                let siblingSoftMatchCount = 0;
+
+                while (potentialSoftMatch != null) {
+
+                    if (getIdIntersectionCount(ctx, potentialSoftMatch, newContent) > 0) {
+                        // the current potential soft match has a potential id set match with the remaining new
+                        // content so bail out of looking
+                        return null;
+                    }
+
+                    // if we have a soft match with the current node, return it
+                    if (isSoftMatch(newChild, potentialSoftMatch)) {
+                        return potentialSoftMatch;
+                    }
+
+                    if (isSoftMatch(nextSibling, potentialSoftMatch)) {
+                        // the next new node has a soft match with this node, so
+                        // increment the count of future soft matches
+                        siblingSoftMatchCount++;
+                        nextSibling = nextSibling.nextSibling;
+
+                        // If there are two future soft matches, bail to allow the siblings to soft match
+                        // so that we don't consume future soft matches for the sake of the current node
+                        if (siblingSoftMatchCount >= 2) {
+                            return null;
                         }
-                        i++;
                     }
-                    curChild = curChild.nextSibling;
-                    if (!curChild && optgroup) {
-                        curChild = optgroup.nextSibling;
-                        optgroup = null;
+
+                    // advanced to the next old content child
+                    potentialSoftMatch = potentialSoftMatch.nextSibling;
+                }
+
+                return potentialSoftMatch;
+            }
+
+            function parseContent(newContent) {
+                let parser = new DOMParser();
+
+                // remove svgs to avoid false-positive matches on head, etc.
+                let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
+
+                // if the newContent contains a html, head or body tag, we can simply parse it w/o wrapping
+                if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
+                    let content = parser.parseFromString(newContent, "text/html");
+                    // if it is a full HTML document, return the document itself as the parent container
+                    if (contentWithSvgsRemoved.match(/<\/html>/)) {
+                        content.generatedByIdiomorph = true;
+                        return content;
+                    } else {
+                        // otherwise return the html element as the parent container
+                        let htmlElement = content.firstChild;
+                        if (htmlElement) {
+                            htmlElement.generatedByIdiomorph = true;
+                            return htmlElement;
+                        } else {
+                            return null;
+                        }
                     }
+                } else {
+                    // if it is partial HTML, wrap it in a template tag to provide a parent element and also to help
+                    // deal with touchy tags like tr, tbody, etc.
+                    let responseDoc = parser.parseFromString("<body><template>" + newContent + "</template></body>", "text/html");
+                    let content = responseDoc.body.querySelector('template').content;
+                    content.generatedByIdiomorph = true;
+                    return content
                 }
             }
 
-            fromEl.selectedIndex = selectedIndex;
-        }
-    }
-};
+            function normalizeContent(newContent) {
+                if (newContent == null) {
+                    // noinspection UnnecessaryLocalVariableJS
+                    const dummyParent = document.createElement('div');
+                    return dummyParent;
+                } else if (newContent.generatedByIdiomorph) {
+                    // the template tag created by idiomorph parsing can serve as a dummy parent
+                    return newContent;
+                } else if (newContent instanceof Node) {
+                    // a single node is added as a child to a dummy parent
+                    const dummyParent = document.createElement('div');
+                    dummyParent.append(newContent);
+                    return dummyParent;
+                } else {
+                    // all nodes in the array or HTMLElement collection are consolidated under
+                    // a single dummy parent element
+                    const dummyParent = document.createElement('div');
+                    for (const elt of [...newContent]) {
+                        dummyParent.append(elt);
+                    }
+                    return dummyParent;
+                }
+            }
 
-var ELEMENT_NODE = 1;
-var DOCUMENT_FRAGMENT_NODE$1 = 11;
-var TEXT_NODE = 3;
-var COMMENT_NODE = 8;
+            function insertSiblings(previousSibling, morphedNode, nextSibling) {
+                let stack = [];
+                let added = [];
+                while (previousSibling != null) {
+                    stack.push(previousSibling);
+                    previousSibling = previousSibling.previousSibling;
+                }
+                while (stack.length > 0) {
+                    let node = stack.pop();
+                    added.push(node); // push added preceding siblings on in order and insert
+                    morphedNode.parentElement.insertBefore(node, morphedNode);
+                }
+                added.push(morphedNode);
+                while (nextSibling != null) {
+                    stack.push(nextSibling);
+                    added.push(nextSibling); // here we are going in order, so push on as we scan, rather than add
+                    nextSibling = nextSibling.nextSibling;
+                }
+                while (stack.length > 0) {
+                    morphedNode.parentElement.insertBefore(stack.pop(), morphedNode.nextSibling);
+                }
+                return added;
+            }
+
+            function findBestNodeMatch(newContent, oldNode, ctx) {
+                let currentElement;
+                currentElement = newContent.firstChild;
+                let bestElement = currentElement;
+                let score = 0;
+                while (currentElement) {
+                    let newScore = scoreElement(currentElement, oldNode, ctx);
+                    if (newScore > score) {
+                        bestElement = currentElement;
+                        score = newScore;
+                    }
+                    currentElement = currentElement.nextSibling;
+                }
+                return bestElement;
+            }
 
-function noop() {}
+            function scoreElement(node1, node2, ctx) {
+                if (isSoftMatch(node1, node2)) {
+                    return .5 + getIdIntersectionCount(ctx, node1, node2);
+                }
+                return 0;
+            }
 
-function defaultGetNodeKey(node) {
-  if (node) {
-    return (node.getAttribute && node.getAttribute('id')) || node.id;
-  }
-}
+            function removeNode(tempNode, ctx) {
+                removeIdsFromConsideration(ctx, tempNode);
+                if (ctx.callbacks.beforeNodeRemoved(tempNode) === false) return;
 
-function morphdomFactory(morphAttrs) {
-
-  return function morphdom(fromNode, toNode, options) {
-    if (!options) {
-      options = {};
-    }
-
-    if (typeof toNode === 'string') {
-      if (fromNode.nodeName === '#document' || fromNode.nodeName === 'HTML' || fromNode.nodeName === 'BODY') {
-        var toNodeHtml = toNode;
-        toNode = doc.createElement('html');
-        toNode.innerHTML = toNodeHtml;
-      } else {
-        toNode = toElement(toNode);
-      }
-    } else if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE$1) {
-      toNode = toNode.firstElementChild;
-    }
-
-    var getNodeKey = options.getNodeKey || defaultGetNodeKey;
-    var onBeforeNodeAdded = options.onBeforeNodeAdded || noop;
-    var onNodeAdded = options.onNodeAdded || noop;
-    var onBeforeElUpdated = options.onBeforeElUpdated || noop;
-    var onElUpdated = options.onElUpdated || noop;
-    var onBeforeNodeDiscarded = options.onBeforeNodeDiscarded || noop;
-    var onNodeDiscarded = options.onNodeDiscarded || noop;
-    var onBeforeElChildrenUpdated = options.onBeforeElChildrenUpdated || noop;
-    var skipFromChildren = options.skipFromChildren || noop;
-    var addChild = options.addChild || function(parent, child){ return parent.appendChild(child); };
-    var childrenOnly = options.childrenOnly === true;
-
-    // This object is used as a lookup to quickly find all keyed elements in the original DOM tree.
-    var fromNodesLookup = Object.create(null);
-    var keyedRemovalList = [];
-
-    function addKeyedRemoval(key) {
-      keyedRemovalList.push(key);
-    }
-
-    function walkDiscardedChildNodes(node, skipKeyedNodes) {
-      if (node.nodeType === ELEMENT_NODE) {
-        var curChild = node.firstChild;
-        while (curChild) {
-
-          var key = undefined;
-
-          if (skipKeyedNodes && (key = getNodeKey(curChild))) {
-            // If we are skipping keyed nodes then we add the key
-            // to a list so that it can be handled at the very end.
-            addKeyedRemoval(key);
-          } else {
-            // Only report the node as discarded if it is not keyed. We do this because
-            // at the end we loop through all keyed elements that were unmatched
-            // and then discard them in one final pass.
-            onNodeDiscarded(curChild);
-            if (curChild.firstChild) {
-              walkDiscardedChildNodes(curChild, skipKeyedNodes);
-            }
-          }
-
-          curChild = curChild.nextSibling;
-        }
-      }
-    }
-
-    /**
-    * Removes a DOM node out of the original DOM
-    *
-    * @param  {Node} node The node to remove
-    * @param  {Node} parentNode The nodes parent
-    * @param  {Boolean} skipKeyedNodes If true then elements with keys will be skipped and not discarded.
-    * @return {undefined}
-    */
-    function removeNode(node, parentNode, skipKeyedNodes) {
-      if (onBeforeNodeDiscarded(node) === false) {
-        return;
-      }
-
-      if (parentNode) {
-        parentNode.removeChild(node);
-      }
-
-      onNodeDiscarded(node);
-      walkDiscardedChildNodes(node, skipKeyedNodes);
-    }
-
-    // // TreeWalker implementation is no faster, but keeping this around in case this changes in the future
-    // function indexTree(root) {
-    //     var treeWalker = document.createTreeWalker(
-    //         root,
-    //         NodeFilter.SHOW_ELEMENT);
-    //
-    //     var el;
-    //     while((el = treeWalker.nextNode())) {
-    //         var key = getNodeKey(el);
-    //         if (key) {
-    //             fromNodesLookup[key] = el;
-    //         }
-    //     }
-    // }
-
-    // // NodeIterator implementation is no faster, but keeping this around in case this changes in the future
-    //
-    // function indexTree(node) {
-    //     var nodeIterator = document.createNodeIterator(node, NodeFilter.SHOW_ELEMENT);
-    //     var el;
-    //     while((el = nodeIterator.nextNode())) {
-    //         var key = getNodeKey(el);
-    //         if (key) {
-    //             fromNodesLookup[key] = el;
-    //         }
-    //     }
-    // }
-
-    function indexTree(node) {
-      if (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE$1) {
-        var curChild = node.firstChild;
-        while (curChild) {
-          var key = getNodeKey(curChild);
-          if (key) {
-            fromNodesLookup[key] = curChild;
-          }
-
-          // Walk recursively
-          indexTree(curChild);
-
-          curChild = curChild.nextSibling;
-        }
-      }
-    }
-
-    indexTree(fromNode);
-
-    function handleNodeAdded(el) {
-      onNodeAdded(el);
-
-      var curChild = el.firstChild;
-      while (curChild) {
-        var nextSibling = curChild.nextSibling;
-
-        var key = getNodeKey(curChild);
-        if (key) {
-          var unmatchedFromEl = fromNodesLookup[key];
-          // if we find a duplicate #id node in cache, replace `el` with cache value
-          // and morph it to the child node.
-          if (unmatchedFromEl && compareNodeNames(curChild, unmatchedFromEl)) {
-            curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
-            morphEl(unmatchedFromEl, curChild);
-          } else {
-            handleNodeAdded(curChild);
-          }
-        } else {
-          // recursively call for curChild and it's children to see if we find something in
-          // fromNodesLookup
-          handleNodeAdded(curChild);
-        }
-
-        curChild = nextSibling;
-      }
-    }
-
-    function cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey) {
-      // We have processed all of the "to nodes". If curFromNodeChild is
-      // non-null then we still have some from nodes left over that need
-      // to be removed
-      while (curFromNodeChild) {
-        var fromNextSibling = curFromNodeChild.nextSibling;
-        if ((curFromNodeKey = getNodeKey(curFromNodeChild))) {
-          // Since the node is keyed it might be matched up later so we defer
-          // the actual removal to later
-          addKeyedRemoval(curFromNodeKey);
-        } else {
-          // NOTE: we skip nested keyed nodes from being removed since there is
-          //       still a chance they will be matched up later
-          removeNode(curFromNodeChild, fromEl, true /* skip keyed nodes */);
-        }
-        curFromNodeChild = fromNextSibling;
-      }
-    }
-
-    function morphEl(fromEl, toEl, childrenOnly) {
-      var toElKey = getNodeKey(toEl);
-
-      if (toElKey) {
-        // If an element with an ID is being morphed then it will be in the final
-        // DOM so clear it out of the saved elements collection
-        delete fromNodesLookup[toElKey];
-      }
-
-      if (!childrenOnly) {
-        // optional
-        if (onBeforeElUpdated(fromEl, toEl) === false) {
-          return;
-        }
-
-        // update attributes on original DOM element first
-        morphAttrs(fromEl, toEl);
-        // optional
-        onElUpdated(fromEl);
-
-        if (onBeforeElChildrenUpdated(fromEl, toEl) === false) {
-          return;
-        }
-      }
-
-      if (fromEl.nodeName !== 'TEXTAREA') {
-        morphChildren(fromEl, toEl);
-      } else {
-        specialElHandlers.TEXTAREA(fromEl, toEl);
-      }
-    }
-
-    function morphChildren(fromEl, toEl) {
-      var skipFrom = skipFromChildren(fromEl);
-      var curToNodeChild = toEl.firstChild;
-      var curFromNodeChild = fromEl.firstChild;
-      var curToNodeKey;
-      var curFromNodeKey;
-
-      var fromNextSibling;
-      var toNextSibling;
-      var matchingFromEl;
-
-      // walk the children
-      outer: while (curToNodeChild) {
-        toNextSibling = curToNodeChild.nextSibling;
-        curToNodeKey = getNodeKey(curToNodeChild);
-
-        // walk the fromNode children all the way through
-        while (!skipFrom && curFromNodeChild) {
-          fromNextSibling = curFromNodeChild.nextSibling;
-
-          if (curToNodeChild.isSameNode && curToNodeChild.isSameNode(curFromNodeChild)) {
-            curToNodeChild = toNextSibling;
-            curFromNodeChild = fromNextSibling;
-            continue outer;
-          }
-
-          curFromNodeKey = getNodeKey(curFromNodeChild);
-
-          var curFromNodeType = curFromNodeChild.nodeType;
-
-          // this means if the curFromNodeChild doesnt have a match with the curToNodeChild
-          var isCompatible = undefined;
-
-          if (curFromNodeType === curToNodeChild.nodeType) {
-            if (curFromNodeType === ELEMENT_NODE) {
-              // Both nodes being compared are Element nodes
-
-              if (curToNodeKey) {
-                // The target node has a key so we want to match it up with the correct element
-                // in the original DOM tree
-                if (curToNodeKey !== curFromNodeKey) {
-                  // The current element in the original DOM tree does not have a matching key so
-                  // let's check our lookup to see if there is a matching element in the original
-                  // DOM tree
-                  if ((matchingFromEl = fromNodesLookup[curToNodeKey])) {
-                    if (fromNextSibling === matchingFromEl) {
-                      // Special case for single element removals. To avoid removing the original
-                      // DOM node out of the tree (since that can break CSS transitions, etc.),
-                      // we will instead discard the current node and wait until the next
-                      // iteration to properly match up the keyed target element with its matching
-                      // element in the original tree
-                      isCompatible = false;
-                    } else {
-                      // We found a matching keyed element somewhere in the original DOM tree.
-                      // Let's move the original DOM node into the current position and morph
-                      // it.
-
-                      // NOTE: We use insertBefore instead of replaceChild because we want to go through
-                      // the `removeNode()` function for the node that is being discarded so that
-                      // all lifecycle hooks are correctly invoked
-                      fromEl.insertBefore(matchingFromEl, curFromNodeChild);
-
-                      // fromNextSibling = curFromNodeChild.nextSibling;
-
-                      if (curFromNodeKey) {
-                        // Since the node is keyed it might be matched up later so we defer
-                        // the actual removal to later
-                        addKeyedRemoval(curFromNodeKey);
-                      } else {
-                        // NOTE: we skip nested keyed nodes from being removed since there is
-                        //       still a chance they will be matched up later
-                        removeNode(curFromNodeChild, fromEl, true /* skip keyed nodes */);
-                      }
-
-                      curFromNodeChild = matchingFromEl;
+                tempNode.remove();
+                ctx.callbacks.afterNodeRemoved(tempNode);
+            }
+
+            //=============================================================================
+            // ID Set Functions
+            //=============================================================================
+
+            function isIdInConsideration(ctx, id) {
+                return !ctx.deadIds.has(id);
+            }
+
+            function idIsWithinNode(ctx, id, targetNode) {
+                let idSet = ctx.idMap.get(targetNode) || EMPTY_SET;
+                return idSet.has(id);
+            }
+
+            function removeIdsFromConsideration(ctx, node) {
+                let idSet = ctx.idMap.get(node) || EMPTY_SET;
+                for (const id of idSet) {
+                    ctx.deadIds.add(id);
+                }
+            }
+
+            function getIdIntersectionCount(ctx, node1, node2) {
+                let sourceSet = ctx.idMap.get(node1) || EMPTY_SET;
+                let matchCount = 0;
+                for (const id of sourceSet) {
+                    // a potential match is an id in the source and potentialIdsSet, but
+                    // that has not already been merged into the DOM
+                    if (isIdInConsideration(ctx, id) && idIsWithinNode(ctx, id, node2)) {
+                        ++matchCount;
                     }
-                  } else {
-                    // The nodes are not compatible since the "to" node has a key and there
-                    // is no matching keyed node in the source tree
-                    isCompatible = false;
-                  }
-                }
-              } else if (curFromNodeKey) {
-                // The original has a key
-                isCompatible = false;
-              }
-
-              isCompatible = isCompatible !== false && compareNodeNames(curFromNodeChild, curToNodeChild);
-              if (isCompatible) {
-                // We found compatible DOM elements so transform
-                // the current "from" node to match the current
-                // target DOM node.
-                // MORPH
-                morphEl(curFromNodeChild, curToNodeChild);
-              }
-
-            } else if (curFromNodeType === TEXT_NODE || curFromNodeType == COMMENT_NODE) {
-              // Both nodes being compared are Text or Comment nodes
-              isCompatible = true;
-              // Simply update nodeValue on the original node to
-              // change the text value
-              if (curFromNodeChild.nodeValue !== curToNodeChild.nodeValue) {
-                curFromNodeChild.nodeValue = curToNodeChild.nodeValue;
-              }
-
-            }
-          }
-
-          if (isCompatible) {
-            // Advance both the "to" child and the "from" child since we found a match
-            // Nothing else to do as we already recursively called morphChildren above
-            curToNodeChild = toNextSibling;
-            curFromNodeChild = fromNextSibling;
-            continue outer;
-          }
-
-          // No compatible match so remove the old node from the DOM and continue trying to find a
-          // match in the original DOM. However, we only do this if the from node is not keyed
-          // since it is possible that a keyed node might match up with a node somewhere else in the
-          // target tree and we don't want to discard it just yet since it still might find a
-          // home in the final DOM tree. After everything is done we will remove any keyed nodes
-          // that didn't find a home
-          if (curFromNodeKey) {
-            // Since the node is keyed it might be matched up later so we defer
-            // the actual removal to later
-            addKeyedRemoval(curFromNodeKey);
-          } else {
-            // NOTE: we skip nested keyed nodes from being removed since there is
-            //       still a chance they will be matched up later
-            removeNode(curFromNodeChild, fromEl, true /* skip keyed nodes */);
-          }
-
-          curFromNodeChild = fromNextSibling;
-        } // END: while(curFromNodeChild) {}
-
-        // If we got this far then we did not find a candidate match for
-        // our "to node" and we exhausted all of the children "from"
-        // nodes. Therefore, we will just append the current "to" node
-        // to the end
-        if (curToNodeKey && (matchingFromEl = fromNodesLookup[curToNodeKey]) && compareNodeNames(matchingFromEl, curToNodeChild)) {
-          // MORPH
-          if(!skipFrom){ addChild(fromEl, matchingFromEl); }
-          morphEl(matchingFromEl, curToNodeChild);
-        } else {
-          var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);
-          if (onBeforeNodeAddedResult !== false) {
-            if (onBeforeNodeAddedResult) {
-              curToNodeChild = onBeforeNodeAddedResult;
-            }
-
-            if (curToNodeChild.actualize) {
-              curToNodeChild = curToNodeChild.actualize(fromEl.ownerDocument || doc);
-            }
-            addChild(fromEl, curToNodeChild);
-            handleNodeAdded(curToNodeChild);
-          }
-        }
-
-        curToNodeChild = toNextSibling;
-        curFromNodeChild = fromNextSibling;
-      }
-
-      cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey);
-
-      var specialElHandler = specialElHandlers[fromEl.nodeName];
-      if (specialElHandler) {
-        specialElHandler(fromEl, toEl);
-      }
-    } // END: morphChildren(...)
-
-    var morphedNode = fromNode;
-    var morphedNodeType = morphedNode.nodeType;
-    var toNodeType = toNode.nodeType;
-
-    if (!childrenOnly) {
-      // Handle the case where we are given two DOM nodes that are not
-      // compatible (e.g. <div> --> <span> or <div> --> TEXT)
-      if (morphedNodeType === ELEMENT_NODE) {
-        if (toNodeType === ELEMENT_NODE) {
-          if (!compareNodeNames(fromNode, toNode)) {
-            onNodeDiscarded(fromNode);
-            morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI));
-          }
-        } else {
-          // Going from an element node to a text node
-          morphedNode = toNode;
-        }
-      } else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) { // Text or comment node
-        if (toNodeType === morphedNodeType) {
-          if (morphedNode.nodeValue !== toNode.nodeValue) {
-            morphedNode.nodeValue = toNode.nodeValue;
-          }
-
-          return morphedNode;
-        } else {
-          // Text node to something else
-          morphedNode = toNode;
-        }
-      }
-    }
-
-    if (morphedNode === toNode) {
-      // The "to node" was not compatible with the "from node" so we had to
-      // toss out the "from node" and use the "to node"
-      onNodeDiscarded(fromNode);
-    } else {
-      if (toNode.isSameNode && toNode.isSameNode(morphedNode)) {
-        return;
-      }
-
-      morphEl(morphedNode, toNode, childrenOnly);
-
-      // We now need to loop over any keyed nodes that might need to be
-      // removed. We only do the removal if we know that the keyed node
-      // never found a match. When a keyed node is matched up we remove
-      // it out of fromNodesLookup and we use fromNodesLookup to determine
-      // if a keyed node has been matched up or not
-      if (keyedRemovalList) {
-        for (var i=0, len=keyedRemovalList.length; i<len; i++) {
-          var elToRemove = fromNodesLookup[keyedRemovalList[i]];
-          if (elToRemove) {
-            removeNode(elToRemove, elToRemove.parentNode, false);
-          }
-        }
-      }
-    }
-
-    if (!childrenOnly && morphedNode !== fromNode && fromNode.parentNode) {
-      if (morphedNode.actualize) {
-        morphedNode = morphedNode.actualize(fromNode.ownerDocument || doc);
-      }
-      // If we had to swap out the from node with a new node because the old
-      // node was not compatible with the target node then we need to
-      // replace the old DOM node in the original DOM tree. This is only
-      // possible if the original DOM node was part of a DOM tree which
-      // we know is the case if it has a parent node.
-      fromNode.parentNode.replaceChild(morphedNode, fromNode);
-    }
-
-    return morphedNode;
-  };
-}
+                }
+                return matchCount;
+            }
+
+            /**
+             * A bottom up algorithm that finds all elements with ids inside of the node
+             * argument and populates id sets for those nodes and all their parents, generating
+             * a set of ids contained within all nodes for the entire hierarchy in the DOM
+             *
+             * @param node {Element}
+             * @param {Map<Node, Set<String>>} idMap
+             */
+            function populateIdMapForNode(node, idMap) {
+                let nodeParent = node.parentElement;
+                // find all elements with an id property
+                let idElements = node.querySelectorAll('[id]');
+                for (const elt of idElements) {
+                    let current = elt;
+                    // walk up the parent hierarchy of that element, adding the id
+                    // of element to the parent's id set
+                    while (current !== nodeParent && current != null) {
+                        let idSet = idMap.get(current);
+                        // if the id set doesn't exist, create it and insert it in the  map
+                        if (idSet == null) {
+                            idSet = new Set();
+                            idMap.set(current, idSet);
+                        }
+                        idSet.add(elt.id);
+                        current = current.parentElement;
+                    }
+                }
+            }
 
-var morphdom = morphdomFactory(morphAttrs);
+            /**
+             * This function computes a map of nodes to all ids contained within that node (inclusive of the
+             * node).  This map can be used to ask if two nodes have intersecting sets of ids, which allows
+             * for a looser definition of "matching" than tradition id matching, and allows child nodes
+             * to contribute to a parent nodes matching.
+             *
+             * @param {Element} oldContent  the old content that will be morphed
+             * @param {Element} newContent  the new content to morph to
+             * @returns {Map<Node, Set<String>>} a map of nodes to id sets for the
+             */
+            function createIdMap(oldContent, newContent) {
+                let idMap = new Map();
+                populateIdMapForNode(oldContent, idMap);
+                populateIdMapForNode(newContent, idMap);
+                return idMap;
+            }
+
+            //=============================================================================
+            // This is what ends up becoming the Idiomorph global object
+            //=============================================================================
+            return {
+                morph
+            }
+        })()
+    }));
 
 function normalizeAttributesForComparison(element) {
     const isFileInput = element instanceof HTMLInputElement && element.type === 'file';
@@ -1204,20 +1205,21 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
     childComponents.forEach((childComponent) => {
         childComponentMap.set(childComponent.element, childComponent);
     });
-    morphdom(rootFromElement, rootToElement, {
-        getNodeKey: (node) => {
-            if (!(node instanceof HTMLElement)) {
-                return;
-            }
-            if (externalMutationTracker.wasElementAdded(node)) {
-                return 'added_element_' + Math.random();
+    Idiomorph.morph(rootFromElement, rootToElement, {
+        beforeNodeMorphed: (fromEl, toEl) => {
+            if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
+                return true;
             }
-            return getKeyFromElement(node);
-        },
-        onBeforeElUpdated: (fromEl, toEl) => {
             if (fromEl === rootFromElement) {
                 return true;
             }
+            if (fromEl.hasAttribute('data-live-id')) {
+                if (fromEl.getAttribute('data-live-id') !== toEl.getAttribute('data-live-id')) {
+                    for (const child of fromEl.children) {
+                        child.setAttribute('parent-live-id-changed', '');
+                    }
+                }
+            }
             if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
                 if (typeof fromEl.__x !== 'undefined') {
                     if (!window.Alpine) {
@@ -1250,9 +1252,13 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
                     }
                 }
             }
+            if (fromEl.hasAttribute('parent-live-id-changed')) {
+                fromEl.removeAttribute('parent-live-id-changed');
+                return true;
+            }
             return !fromEl.hasAttribute('data-live-ignore');
         },
-        onBeforeNodeDiscarded(node) {
+        beforeNodeRemoved(node) {
             if (!(node instanceof HTMLElement)) {
                 return true;
             }
diff --git a/src/LiveComponent/assets/dist/morphdom.d.ts b/src/LiveComponent/assets/dist/morphdom.d.ts
index 20d83e7b3f5..ebd6ba4b06f 100644
--- a/src/LiveComponent/assets/dist/morphdom.d.ts
+++ b/src/LiveComponent/assets/dist/morphdom.d.ts
@@ -1,3 +1,4 @@
+import 'idiomorph';
 import Component from './Component';
 import ExternalMutationTracker from './Rendering/ExternalMutationTracker';
 export declare function executeMorphdom(rootFromElement: HTMLElement, rootToElement: HTMLElement, modifiedFieldElements: Array<HTMLElement>, getElementValue: (element: HTMLElement) => any, childComponents: Component[], findChildComponent: (id: string, element: HTMLElement) => HTMLElement | null, getKeyFromElement: (element: HTMLElement) => string | null, externalMutationTracker: ExternalMutationTracker): void;
diff --git a/src/LiveComponent/assets/package.json b/src/LiveComponent/assets/package.json
index 939c281a42a..f9d36091516 100644
--- a/src/LiveComponent/assets/package.json
+++ b/src/LiveComponent/assets/package.json
@@ -26,7 +26,7 @@
         }
     },
     "dependencies": {
-        "morphdom": "^2.6.1"
+        "idiomorph": "^0.0.9"
     },
     "peerDependencies": {
         "@hotwired/stimulus": "^3.0.0"
diff --git a/src/LiveComponent/assets/src/morphdom.ts b/src/LiveComponent/assets/src/morphdom.ts
index 61f4719e5ab..11f177038b1 100644
--- a/src/LiveComponent/assets/src/morphdom.ts
+++ b/src/LiveComponent/assets/src/morphdom.ts
@@ -1,5 +1,5 @@
 import { cloneHTMLElement, setValueOnElement } from './dom_utils';
-import morphdom from 'morphdom';
+import 'idiomorph';
 import { normalizeAttributesForComparison } from './normalize_attributes_for_comparison';
 import Component from './Component';
 import ExternalMutationTracker from './Rendering/ExternalMutationTracker';
@@ -19,27 +19,26 @@ export function executeMorphdom(
         childComponentMap.set(childComponent.element, childComponent);
     });
 
-    morphdom(rootFromElement, rootToElement, {
-        getNodeKey: (node: Node) => {
-            if (!(node instanceof HTMLElement)) {
-                return;
-            }
-
-            // Pretend an added element has a unique id so that morphdom treats
-            // it like a unique element, causing it to always attempt to remove
-            // it (which we can then prevent) instead of potentially updating
-            // it from an element that was added by the server in the same location.
-            if (externalMutationTracker.wasElementAdded(node)) {
-                return 'added_element_' + Math.random();
+    Idiomorph.morph(rootFromElement, rootToElement, {callbacks: {
+        beforeNodeMorphed: (fromEl: Element, toEl: Element) => {
+            // Idiomorph loop also over Text node
+            if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
+                return true;
             }
 
-            return getKeyFromElement(node);
-        },
-        onBeforeElUpdated: (fromEl: Element, toEl: Element) => {
             if (fromEl === rootFromElement) {
                 return true;
             }
 
+            // Track children if data-live-id changed
+            if (fromEl.hasAttribute('data-live-id')) {
+                if (fromEl.getAttribute('data-live-id') !== toEl.getAttribute('data-live-id')) {
+                    for (const child of fromEl.children) {
+                        child.setAttribute('parent-live-id-changed', '')
+                    }
+                }
+            }
+
             // skip special checking if this is, for example, an SVG
             if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
                 // We assume fromEl is an Alpine component if it has `__x` property.
@@ -100,11 +99,18 @@ export function executeMorphdom(
                 }
             }
 
+            // Update child if parent has his live-id changed
+            if (fromEl.hasAttribute('parent-live-id-changed')) {
+                fromEl.removeAttribute('parent-live-id-changed');
+
+                return true;
+            }
+
             // look for data-live-ignore, and don't update
             return !fromEl.hasAttribute('data-live-ignore');
         },
 
-        onBeforeNodeDiscarded(node) {
+        beforeNodeRemoved(node) {
             if (!(node instanceof HTMLElement)) {
                 // text element
                 return true;
@@ -117,5 +123,5 @@ export function executeMorphdom(
 
             return !node.hasAttribute('data-live-ignore');
         },
-    });
+    }});
 }
diff --git a/src/LiveComponent/assets/test/controller/render.test.ts b/src/LiveComponent/assets/test/controller/render.test.ts
index 16f6af31a89..cb93c578189 100644
--- a/src/LiveComponent/assets/test/controller/render.test.ts
+++ b/src/LiveComponent/assets/test/controller/render.test.ts
@@ -437,7 +437,7 @@ describe('LiveController rendering Tests', () => {
         const selectOption2 = test.element.querySelector('#select_option_2') as HTMLSelectElement;
 
         // verify the placeholder of the select option 2 is selected
-        expect(selectOption2.children[0].hasAttribute('selected')).toBe(true);
+        expect(selectOption2.children[0].selected).toBe(true);
 
         // verify the selectedIndex of the select option 2 is 0
         expect(selectOption2.selectedIndex).toBe(0);
diff --git a/yarn.lock b/yarn.lock
index 0d8a2b2be6c..2e461137dbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5366,6 +5366,11 @@ icss-utils@^5.0.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
+idiomorph@^0.0.9:
+  version "0.0.9"
+  resolved "https://npm.apple.com/idiomorph/-/idiomorph-0.0.9.tgz#938d5964031381b0713398fb283aa3754306fa1b"
+  integrity sha512-X7SGsldE5jQD+peLjNLAnIJDEZtGpuLrNRUBrTWMMnzrx9gwy5U+SCRhaifO2v2Z+8j09IY2J+EYaxHsOLTD0A==
+
 ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
@@ -6782,11 +6787,6 @@ moo-color@^1.0.2:
   dependencies:
     color-name "^1.1.4"
 
-morphdom@^2.6.1:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/morphdom/-/morphdom-2.7.0.tgz#9ef0c4bc15ac8725df398d127c6984f62e7f89e8"
-  integrity sha512-8L8DwbdjjWwM/aNqj7BSoSn4G7SQLNiDcxCnMWbf506jojR6lNQ5YOmQqXEIE8u3C492UlkN4d0hQwz97+M1oQ==
-
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"

From e5a187c2713f4c6212139551cb7bfd0b476c06af Mon Sep 17 00:00:00 2001
From: Matheo Daninos <matheo.daninos@gmail.com>
Date: Wed, 22 Nov 2023 17:42:23 +0100
Subject: [PATCH 2/6] fix last bugs

---
 .../assets/dist/live_controller.js            | 125 ++++++++++--------
 src/LiveComponent/assets/src/morphdom.ts      |  17 ++-
 2 files changed, 87 insertions(+), 55 deletions(-)

diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
index 7dc3231e910..fabc6b1f51b 100644
--- a/src/LiveComponent/assets/dist/live_controller.js
+++ b/src/LiveComponent/assets/dist/live_controller.js
@@ -592,6 +592,9 @@ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof win
                 let insertionPoint = oldParent.firstChild;
                 let newChild;
 
+                newParent.children;
+                oldParent.children;
+
                 // run through all the new content
                 while (nextNewChild) {
 
@@ -1205,68 +1208,82 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
     childComponents.forEach((childComponent) => {
         childComponentMap.set(childComponent.element, childComponent);
     });
-    Idiomorph.morph(rootFromElement, rootToElement, {
-        beforeNodeMorphed: (fromEl, toEl) => {
-            if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
-                return true;
-            }
-            if (fromEl === rootFromElement) {
-                return true;
-            }
-            if (fromEl.hasAttribute('data-live-id')) {
-                if (fromEl.getAttribute('data-live-id') !== toEl.getAttribute('data-live-id')) {
-                    for (const child of fromEl.children) {
-                        child.setAttribute('parent-live-id-changed', '');
+    Idiomorph.morph(rootFromElement, rootToElement, { callbacks: {
+            beforeNodeMorphed: (fromEl, toEl) => {
+                if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
+                    return true;
+                }
+                if (fromEl === rootFromElement) {
+                    return true;
+                }
+                let idChanged = false;
+                if (fromEl.hasAttribute('data-live-id')) {
+                    if (fromEl.getAttribute('data-live-id') !== toEl.getAttribute('data-live-id')) {
+                        for (const child of fromEl.children) {
+                            child.setAttribute('parent-live-id-changed', '');
+                        }
+                        idChanged = true;
                     }
                 }
-            }
-            if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
-                if (typeof fromEl.__x !== 'undefined') {
-                    if (!window.Alpine) {
-                        throw new Error('Unable to access Alpine.js though the global window.Alpine variable. Please make sure Alpine.js is loaded before Symfony UX LiveComponent.');
+                if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
+                    if (typeof fromEl.__x !== 'undefined') {
+                        if (!window.Alpine) {
+                            throw new Error('Unable to access Alpine.js though the global window.Alpine variable. Please make sure Alpine.js is loaded before Symfony UX LiveComponent.');
+                        }
+                        if (typeof window.Alpine.morph !== 'function') {
+                            throw new Error('Unable to access Alpine.js morph function. Please make sure the Alpine.js Morph plugin is installed and loaded, see https://alpinejs.dev/plugins/morph for more information.');
+                        }
+                        window.Alpine.morph(fromEl.__x, toEl);
                     }
-                    if (typeof window.Alpine.morph !== 'function') {
-                        throw new Error('Unable to access Alpine.js morph function. Please make sure the Alpine.js Morph plugin is installed and loaded, see https://alpinejs.dev/plugins/morph for more information.');
+                    if (childComponentMap.has(fromEl)) {
+                        const childComponent = childComponentMap.get(fromEl);
+                        return !childComponent.updateFromNewElementFromParentRender(toEl) && idChanged;
+                    }
+                    if (externalMutationTracker.wasElementAdded(fromEl)) {
+                        fromEl.insertAdjacentElement('afterend', toEl);
+                        return false;
+                    }
+                    if (modifiedFieldElements.includes(fromEl)) {
+                        setValueOnElement(toEl, getElementValue(fromEl));
+                    }
+                    const elementChanges = externalMutationTracker.getChangedElement(fromEl);
+                    if (elementChanges) {
+                        elementChanges.applyToElement(toEl);
+                    }
+                    if (fromEl.nodeName.toUpperCase() !== 'OPTION' && fromEl.isEqualNode(toEl)) {
+                        const normalizedFromEl = cloneHTMLElement(fromEl);
+                        normalizeAttributesForComparison(normalizedFromEl);
+                        const normalizedToEl = cloneHTMLElement(toEl);
+                        normalizeAttributesForComparison(normalizedToEl);
+                        if (normalizedFromEl.isEqualNode(normalizedToEl)) {
+                            return false;
+                        }
                     }
-                    window.Alpine.morph(fromEl.__x, toEl);
-                }
-                if (childComponentMap.has(fromEl)) {
-                    const childComponent = childComponentMap.get(fromEl);
-                    childComponent.updateFromNewElementFromParentRender(toEl);
-                    return false;
                 }
-                if (modifiedFieldElements.includes(fromEl)) {
-                    setValueOnElement(toEl, getElementValue(fromEl));
+                if (fromEl.hasAttribute('parent-live-id-changed')) {
+                    fromEl.removeAttribute('parent-live-id-changed');
+                    return true;
                 }
-                const elementChanges = externalMutationTracker.getChangedElement(fromEl);
-                if (elementChanges) {
-                    elementChanges.applyToElement(toEl);
+                return !fromEl.hasAttribute('data-live-ignore');
+            },
+            beforeNodeRemoved(node) {
+                if (!(node instanceof HTMLElement)) {
+                    return true;
                 }
-                if (fromEl.nodeName.toUpperCase() !== 'OPTION' && fromEl.isEqualNode(toEl)) {
-                    const normalizedFromEl = cloneHTMLElement(fromEl);
-                    normalizeAttributesForComparison(normalizedFromEl);
-                    const normalizedToEl = cloneHTMLElement(toEl);
-                    normalizeAttributesForComparison(normalizedToEl);
-                    if (normalizedFromEl.isEqualNode(normalizedToEl)) {
-                        return false;
-                    }
+                if (externalMutationTracker.wasElementAdded(node)) {
+                    return false;
                 }
-            }
-            if (fromEl.hasAttribute('parent-live-id-changed')) {
-                fromEl.removeAttribute('parent-live-id-changed');
-                return true;
-            }
-            return !fromEl.hasAttribute('data-live-ignore');
-        },
-        beforeNodeRemoved(node) {
-            if (!(node instanceof HTMLElement)) {
-                return true;
-            }
-            if (externalMutationTracker.wasElementAdded(node)) {
-                return false;
-            }
-            return !node.hasAttribute('data-live-ignore');
-        },
+                return !node.hasAttribute('data-live-ignore');
+            },
+        } });
+    childComponentMap.forEach((childComponent, element) => {
+        var _a;
+        const childComponentInResult = findChildComponent((_a = childComponent.id) !== null && _a !== void 0 ? _a : '', rootFromElement);
+        if (null === childComponentInResult || element === childComponentInResult) {
+            return;
+        }
+        childComponentInResult === null || childComponentInResult === void 0 ? void 0 : childComponentInResult.replaceWith(element);
+        childComponent.updateFromNewElementFromParentRender(childComponentInResult);
     });
 }
 
diff --git a/src/LiveComponent/assets/src/morphdom.ts b/src/LiveComponent/assets/src/morphdom.ts
index 11f177038b1..df5193c7b56 100644
--- a/src/LiveComponent/assets/src/morphdom.ts
+++ b/src/LiveComponent/assets/src/morphdom.ts
@@ -30,12 +30,14 @@ export function executeMorphdom(
                 return true;
             }
 
+            let idChanged = false;
             // Track children if data-live-id changed
             if (fromEl.hasAttribute('data-live-id')) {
                 if (fromEl.getAttribute('data-live-id') !== toEl.getAttribute('data-live-id')) {
                     for (const child of fromEl.children) {
                         child.setAttribute('parent-live-id-changed', '')
                     }
+                    idChanged = true;
                 }
             }
 
@@ -63,8 +65,11 @@ export function executeMorphdom(
                 if (childComponentMap.has(fromEl)) {
                     const childComponent = childComponentMap.get(fromEl) as Component;
 
-                    childComponent.updateFromNewElementFromParentRender(toEl);
+                    return !childComponent.updateFromNewElementFromParentRender(toEl) && idChanged;
+                }
 
+                if (externalMutationTracker.wasElementAdded(fromEl)) {
+                    fromEl.insertAdjacentElement('afterend', toEl);
                     return false;
                 }
 
@@ -124,4 +129,14 @@ export function executeMorphdom(
             return !node.hasAttribute('data-live-ignore');
         },
     }});
+
+    childComponentMap.forEach((childComponent, element) => {
+        const childComponentInResult = findChildComponent(childComponent.id ?? '', rootFromElement);
+        if (null === childComponentInResult || element === childComponentInResult) {
+            return;
+        }
+
+        childComponentInResult?.replaceWith(element);
+        childComponent.updateFromNewElementFromParentRender(childComponentInResult);
+    });
 }

From a9143ab259d4bb381a0ce15b61de2a9255128d1c Mon Sep 17 00:00:00 2001
From: Matheo Daninos <matheo.daninos@gmail.com>
Date: Wed, 22 Nov 2023 17:46:46 +0100
Subject: [PATCH 3/6] resolve yarn errors

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 2e461137dbf..2ba0c2ee0eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5368,7 +5368,7 @@ icss-utils@^5.0.0:
 
 idiomorph@^0.0.9:
   version "0.0.9"
-  resolved "https://npm.apple.com/idiomorph/-/idiomorph-0.0.9.tgz#938d5964031381b0713398fb283aa3754306fa1b"
+  resolved "https://registry.yarnpkg.com/idiomorph/-/idiomorph-0.0.9.tgz#938d5964031381b0713398fb283aa3754306fa1b"
   integrity sha512-X7SGsldE5jQD+peLjNLAnIJDEZtGpuLrNRUBrTWMMnzrx9gwy5U+SCRhaifO2v2Z+8j09IY2J+EYaxHsOLTD0A==
 
 ignore@^5.2.0:

From 0df4faa3f5e5d7831984686d4370ab3e5dd8ba3b Mon Sep 17 00:00:00 2001
From: Matheo Daninos <matheo.daninos@gmail.com>
Date: Wed, 22 Nov 2023 17:51:51 +0100
Subject: [PATCH 4/6] resolve prittier errors

---
 .../assets/dist/live_controller.js            |   6 +-
 src/LiveComponent/assets/src/morphdom.ts      | 180 +++++++++---------
 2 files changed, 95 insertions(+), 91 deletions(-)

diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
index fabc6b1f51b..02d20723673 100644
--- a/src/LiveComponent/assets/dist/live_controller.js
+++ b/src/LiveComponent/assets/dist/live_controller.js
@@ -1208,7 +1208,8 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
     childComponents.forEach((childComponent) => {
         childComponentMap.set(childComponent.element, childComponent);
     });
-    Idiomorph.morph(rootFromElement, rootToElement, { callbacks: {
+    Idiomorph.morph(rootFromElement, rootToElement, {
+        callbacks: {
             beforeNodeMorphed: (fromEl, toEl) => {
                 if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
                     return true;
@@ -1275,7 +1276,8 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
                 }
                 return !node.hasAttribute('data-live-ignore');
             },
-        } });
+        },
+    });
     childComponentMap.forEach((childComponent, element) => {
         var _a;
         const childComponentInResult = findChildComponent((_a = childComponent.id) !== null && _a !== void 0 ? _a : '', rootFromElement);
diff --git a/src/LiveComponent/assets/src/morphdom.ts b/src/LiveComponent/assets/src/morphdom.ts
index df5193c7b56..f28db968981 100644
--- a/src/LiveComponent/assets/src/morphdom.ts
+++ b/src/LiveComponent/assets/src/morphdom.ts
@@ -19,116 +19,118 @@ export function executeMorphdom(
         childComponentMap.set(childComponent.element, childComponent);
     });
 
-    Idiomorph.morph(rootFromElement, rootToElement, {callbacks: {
-        beforeNodeMorphed: (fromEl: Element, toEl: Element) => {
-            // Idiomorph loop also over Text node
-            if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
-                return true;
-            }
-
-            if (fromEl === rootFromElement) {
-                return true;
-            }
-
-            let idChanged = false;
-            // Track children if data-live-id changed
-            if (fromEl.hasAttribute('data-live-id')) {
-                if (fromEl.getAttribute('data-live-id') !== toEl.getAttribute('data-live-id')) {
-                    for (const child of fromEl.children) {
-                        child.setAttribute('parent-live-id-changed', '')
-                    }
-                    idChanged = true;
+    Idiomorph.morph(rootFromElement, rootToElement, {
+        callbacks: {
+            beforeNodeMorphed: (fromEl: Element, toEl: Element) => {
+                // Idiomorph loop also over Text node
+                if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
+                    return true;
                 }
-            }
-
-            // skip special checking if this is, for example, an SVG
-            if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
-                // We assume fromEl is an Alpine component if it has `__x` property.
-                // If it's the case, then we should morph `fromEl` to `ToEl` (thanks to https://alpinejs.dev/plugins/morph)
-                // in order to keep the component state and UI in sync.
-                if (typeof fromEl.__x !== 'undefined') {
-                    if (!window.Alpine) {
-                        throw new Error(
-                            'Unable to access Alpine.js though the global window.Alpine variable. Please make sure Alpine.js is loaded before Symfony UX LiveComponent.'
-                        );
-                    }
 
-                    if (typeof window.Alpine.morph !== 'function') {
-                        throw new Error(
-                            'Unable to access Alpine.js morph function. Please make sure the Alpine.js Morph plugin is installed and loaded, see https://alpinejs.dev/plugins/morph for more information.'
-                        );
-                    }
+                if (fromEl === rootFromElement) {
+                    return true;
+                }
 
-                    window.Alpine.morph(fromEl.__x, toEl);
+                let idChanged = false;
+                // Track children if data-live-id changed
+                if (fromEl.hasAttribute('data-live-id')) {
+                    if (fromEl.getAttribute('data-live-id') !== toEl.getAttribute('data-live-id')) {
+                        for (const child of fromEl.children) {
+                            child.setAttribute('parent-live-id-changed', '');
+                        }
+                        idChanged = true;
+                    }
                 }
 
-                if (childComponentMap.has(fromEl)) {
-                    const childComponent = childComponentMap.get(fromEl) as Component;
+                // skip special checking if this is, for example, an SVG
+                if (fromEl instanceof HTMLElement && toEl instanceof HTMLElement) {
+                    // We assume fromEl is an Alpine component if it has `__x` property.
+                    // If it's the case, then we should morph `fromEl` to `ToEl` (thanks to https://alpinejs.dev/plugins/morph)
+                    // in order to keep the component state and UI in sync.
+                    if (typeof fromEl.__x !== 'undefined') {
+                        if (!window.Alpine) {
+                            throw new Error(
+                                'Unable to access Alpine.js though the global window.Alpine variable. Please make sure Alpine.js is loaded before Symfony UX LiveComponent.'
+                            );
+                        }
+
+                        if (typeof window.Alpine.morph !== 'function') {
+                            throw new Error(
+                                'Unable to access Alpine.js morph function. Please make sure the Alpine.js Morph plugin is installed and loaded, see https://alpinejs.dev/plugins/morph for more information.'
+                            );
+                        }
+
+                        window.Alpine.morph(fromEl.__x, toEl);
+                    }
 
-                    return !childComponent.updateFromNewElementFromParentRender(toEl) && idChanged;
-                }
+                    if (childComponentMap.has(fromEl)) {
+                        const childComponent = childComponentMap.get(fromEl) as Component;
 
-                if (externalMutationTracker.wasElementAdded(fromEl)) {
-                    fromEl.insertAdjacentElement('afterend', toEl);
-                    return false;
-                }
+                        return !childComponent.updateFromNewElementFromParentRender(toEl) && idChanged;
+                    }
 
-                // if this field's value has been modified since this HTML was
-                // requested, set the toEl's value to match the fromEl
-                if (modifiedFieldElements.includes(fromEl)) {
-                    setValueOnElement(toEl, getElementValue(fromEl));
-                }
+                    if (externalMutationTracker.wasElementAdded(fromEl)) {
+                        fromEl.insertAdjacentElement('afterend', toEl);
+                        return false;
+                    }
 
-                // handle any external changes to this element
-                const elementChanges = externalMutationTracker.getChangedElement(fromEl);
-                if (elementChanges) {
-                    // apply the changes to the "to" element so it looks like the
-                    // external changes were already part of it
-                    elementChanges.applyToElement(toEl);
-                }
+                    // if this field's value has been modified since this HTML was
+                    // requested, set the toEl's value to match the fromEl
+                    if (modifiedFieldElements.includes(fromEl)) {
+                        setValueOnElement(toEl, getElementValue(fromEl));
+                    }
 
-                // https://github.com/patrick-steele-idem/morphdom#can-i-make-morphdom-blaze-through-the-dom-tree-even-faster-yes
-                if (fromEl.nodeName.toUpperCase() !== 'OPTION' && fromEl.isEqualNode(toEl)) {
-                    // the nodes are equal, but the "value" on some might differ
-                    // lets try to quickly compare a bit more deeply
-                    const normalizedFromEl = cloneHTMLElement(fromEl);
-                    normalizeAttributesForComparison(normalizedFromEl);
+                    // handle any external changes to this element
+                    const elementChanges = externalMutationTracker.getChangedElement(fromEl);
+                    if (elementChanges) {
+                        // apply the changes to the "to" element so it looks like the
+                        // external changes were already part of it
+                        elementChanges.applyToElement(toEl);
+                    }
 
-                    const normalizedToEl = cloneHTMLElement(toEl);
-                    normalizeAttributesForComparison(normalizedToEl);
+                    // https://github.com/patrick-steele-idem/morphdom#can-i-make-morphdom-blaze-through-the-dom-tree-even-faster-yes
+                    if (fromEl.nodeName.toUpperCase() !== 'OPTION' && fromEl.isEqualNode(toEl)) {
+                        // the nodes are equal, but the "value" on some might differ
+                        // lets try to quickly compare a bit more deeply
+                        const normalizedFromEl = cloneHTMLElement(fromEl);
+                        normalizeAttributesForComparison(normalizedFromEl);
 
-                    if (normalizedFromEl.isEqualNode(normalizedToEl)) {
-                        // don't bother updating
-                        return false;
+                        const normalizedToEl = cloneHTMLElement(toEl);
+                        normalizeAttributesForComparison(normalizedToEl);
+
+                        if (normalizedFromEl.isEqualNode(normalizedToEl)) {
+                            // don't bother updating
+                            return false;
+                        }
                     }
                 }
-            }
 
-            // Update child if parent has his live-id changed
-            if (fromEl.hasAttribute('parent-live-id-changed')) {
-                fromEl.removeAttribute('parent-live-id-changed');
+                // Update child if parent has his live-id changed
+                if (fromEl.hasAttribute('parent-live-id-changed')) {
+                    fromEl.removeAttribute('parent-live-id-changed');
 
-                return true;
-            }
+                    return true;
+                }
 
-            // look for data-live-ignore, and don't update
-            return !fromEl.hasAttribute('data-live-ignore');
-        },
+                // look for data-live-ignore, and don't update
+                return !fromEl.hasAttribute('data-live-ignore');
+            },
 
-        beforeNodeRemoved(node) {
-            if (!(node instanceof HTMLElement)) {
-                // text element
-                return true;
-            }
+            beforeNodeRemoved(node) {
+                if (!(node instanceof HTMLElement)) {
+                    // text element
+                    return true;
+                }
 
-            if (externalMutationTracker.wasElementAdded(node)) {
-                // this element was added by an external mutation, so we don't want to discard it
-                return false;
-            }
+                if (externalMutationTracker.wasElementAdded(node)) {
+                    // this element was added by an external mutation, so we don't want to discard it
+                    return false;
+                }
 
-            return !node.hasAttribute('data-live-ignore');
+                return !node.hasAttribute('data-live-ignore');
+            },
         },
-    }});
+    });
 
     childComponentMap.forEach((childComponent, element) => {
         const childComponentInResult = findChildComponent(childComponent.id ?? '', rootFromElement);

From 317d390e9229c9e3e7c20e45e4093f7822b60e4e Mon Sep 17 00:00:00 2001
From: Matheo Daninos <matheo.daninos@gmail.com>
Date: Wed, 22 Nov 2023 17:56:21 +0100
Subject: [PATCH 5/6] rebuild other ux packages

---
 src/Autocomplete/assets/dist/controller.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js
index bc12f0d3e50..f273e56485a 100644
--- a/src/Autocomplete/assets/dist/controller.js
+++ b/src/Autocomplete/assets/dist/controller.js
@@ -15,12 +15,19 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 function __classPrivateFieldGet(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeObjects, _default_1_createTomSelect;
 class default_1 extends Controller {

From d5fc3c3883faa55bab492169eb7bfa28c1441db4 Mon Sep 17 00:00:00 2001
From: Matheo Daninos <matheo.daninos@gmail.com>
Date: Wed, 22 Nov 2023 18:09:06 +0100
Subject: [PATCH 6/6] add missing build files

---
 src/LiveComponent/assets/dist/Component/index.d.ts | 2 +-
 src/LiveComponent/assets/dist/live_controller.js   | 3 ++-
 src/LiveComponent/assets/src/Component/index.ts    | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/LiveComponent/assets/dist/Component/index.d.ts b/src/LiveComponent/assets/dist/Component/index.d.ts
index 05f1666b389..7470b6e9da7 100644
--- a/src/LiveComponent/assets/dist/Component/index.d.ts
+++ b/src/LiveComponent/assets/dist/Component/index.d.ts
@@ -53,7 +53,7 @@ export default class Component {
     emitSelf(name: string, data: any): void;
     private performEmit;
     private doEmit;
-    updateFromNewElementFromParentRender(toEl: HTMLElement): void;
+    updateFromNewElementFromParentRender(toEl: HTMLElement): boolean;
     onChildComponentModelUpdate(modelName: string, value: any, childComponent: Component): void;
     private isTurboEnabled;
     private tryStartingRequest;
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
index 02d20723673..e44ad1692fc 100644
--- a/src/LiveComponent/assets/dist/live_controller.js
+++ b/src/LiveComponent/assets/dist/live_controller.js
@@ -1912,7 +1912,7 @@ class Component {
     updateFromNewElementFromParentRender(toEl) {
         const props = this.elementDriver.getComponentProps(toEl);
         if (props === null) {
-            return;
+            return false;
         }
         const isChanged = this.valueStore.storeNewPropsFromParent(props);
         const fingerprint = toEl.dataset.liveFingerprintValue;
@@ -1922,6 +1922,7 @@ class Component {
         if (isChanged) {
             this.render();
         }
+        return isChanged;
     }
     onChildComponentModelUpdate(modelName, value, childComponent) {
         if (!childComponent.id) {
diff --git a/src/LiveComponent/assets/src/Component/index.ts b/src/LiveComponent/assets/src/Component/index.ts
index f3c22905f8a..e6975d5ae73 100644
--- a/src/LiveComponent/assets/src/Component/index.ts
+++ b/src/LiveComponent/assets/src/Component/index.ts
@@ -285,13 +285,13 @@ export default class Component {
      *
      * @param toEl
      */
-    updateFromNewElementFromParentRender(toEl: HTMLElement): void {
+    updateFromNewElementFromParentRender(toEl: HTMLElement): boolean {
         const props = this.elementDriver.getComponentProps(toEl);
 
         // if no props are on the element, use the existing element completely
         // this means the parent is signaling that the child does not need to be re-rendered
         if (props === null) {
-            return;
+            return false;
         }
 
         // push props directly down onto the value store
@@ -305,6 +305,8 @@ export default class Component {
         if (isChanged) {
             this.render();
         }
+
+        return isChanged;
     }
 
     /**