@symfony/ux-live-component 2.26.1 → 2.27.0

package/dist/live_controller.js

@@ -195,680 +195,363 @@ const findParent = (currentComponent) => {
     return null;
 };
 
-class HookManager {
-    constructor() {
-        this.hooks = new Map();
-    }
-    register(hookName, callback) {
-        const hooks = this.hooks.get(hookName) || [];
-        hooks.push(callback);
-        this.hooks.set(hookName, hooks);
+function parseDirectives(content) {
+    const directives = [];
+    if (!content) {
+        return directives;
     }
-    unregister(hookName, callback) {
-        const hooks = this.hooks.get(hookName) || [];
-        const index = hooks.indexOf(callback);
-        if (index === -1) {
-            return;
+    let currentActionName = '';
+    let currentArgumentValue = '';
+    let currentArguments = [];
+    let currentModifiers = [];
+    let state = 'action';
+    const getLastActionName = () => {
+        if (currentActionName) {
+            return currentActionName;
+        }
+        if (directives.length === 0) {
+            throw new Error('Could not find any directives');
+        }
+        return directives[directives.length - 1].action;
+    };
+    const pushInstruction = () => {
+        directives.push({
+            action: currentActionName,
+            args: currentArguments,
+            modifiers: currentModifiers,
+            getString: () => {
+                return content;
+            },
+        });
+        currentActionName = '';
+        currentArgumentValue = '';
+        currentArguments = [];
+        currentModifiers = [];
+        state = 'action';
+    };
+    const pushArgument = () => {
+        currentArguments.push(currentArgumentValue.trim());
+        currentArgumentValue = '';
+    };
+    const pushModifier = () => {
+        if (currentArguments.length > 1) {
+            throw new Error(`The modifier "${currentActionName}()" does not support multiple arguments.`);
+        }
+        currentModifiers.push({
+            name: currentActionName,
+            value: currentArguments.length > 0 ? currentArguments[0] : null,
+        });
+        currentActionName = '';
+        currentArguments = [];
+        state = 'action';
+    };
+    for (let i = 0; i < content.length; i++) {
+        const char = content[i];
+        switch (state) {
+            case 'action':
+                if (char === '(') {
+                    state = 'arguments';
+                    break;
+                }
+                if (char === ' ') {
+                    if (currentActionName) {
+                        pushInstruction();
+                    }
+                    break;
+                }
+                if (char === '|') {
+                    pushModifier();
+                    break;
+                }
+                currentActionName += char;
+                break;
+            case 'arguments':
+                if (char === ')') {
+                    pushArgument();
+                    state = 'after_arguments';
+                    break;
+                }
+                if (char === ',') {
+                    pushArgument();
+                    break;
+                }
+                currentArgumentValue += char;
+                break;
+            case 'after_arguments':
+                if (char === '|') {
+                    pushModifier();
+                    break;
+                }
+                if (char !== ' ') {
+                    throw new Error(`Missing space after ${getLastActionName()}()`);
+                }
+                pushInstruction();
+                break;
         }
-        hooks.splice(index, 1);
-        this.hooks.set(hookName, hooks);
     }
-    triggerHook(hookName, ...args) {
-        const hooks = this.hooks.get(hookName) || [];
-        hooks.forEach((callback) => callback(...args));
+    switch (state) {
+        case 'action':
+        case 'after_arguments':
+            if (currentActionName) {
+                pushInstruction();
+            }
+            break;
+        default:
+            throw new Error(`Did you forget to add a closing ")" after "${currentActionName}"?`);
     }
+    return directives;
 }
 
-class ChangingItemsTracker {
-    constructor() {
-        this.changedItems = new Map();
-        this.removedItems = new Map();
-    }
-    setItem(itemName, newValue, previousValue) {
-        if (this.removedItems.has(itemName)) {
-            const removedRecord = this.removedItems.get(itemName);
-            this.removedItems.delete(itemName);
-            if (removedRecord.original === newValue) {
-                return;
+function combineSpacedArray(parts) {
+    const finalParts = [];
+    parts.forEach((part) => {
+        finalParts.push(...trimAll(part).split(' '));
+    });
+    return finalParts;
+}
+function trimAll(str) {
+    return str.replace(/[\s]+/g, ' ').trim();
+}
+function normalizeModelName(model) {
+    return (model
+        .replace(/\[]$/, '')
+        .split('[')
+        .map((s) => s.replace(']', ''))
+        .join('.'));
+}
+
+function getValueFromElement(element, valueStore) {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === 'checkbox') {
+            const modelNameData = getModelDirectiveFromElement(element, false);
+            if (modelNameData !== null) {
+                const modelValue = valueStore.get(modelNameData.action);
+                if (Array.isArray(modelValue)) {
+                    return getMultipleCheckboxValue(element, modelValue);
+                }
+                if (Object(modelValue) === modelValue) {
+                    return getMultipleCheckboxValue(element, Object.values(modelValue));
+                }
             }
-        }
-        if (this.changedItems.has(itemName)) {
-            const originalRecord = this.changedItems.get(itemName);
-            if (originalRecord.original === newValue) {
-                this.changedItems.delete(itemName);
-                return;
+            if (element.hasAttribute('value')) {
+                return element.checked ? element.getAttribute('value') : null;
             }
-            this.changedItems.set(itemName, { original: originalRecord.original, new: newValue });
-            return;
+            return element.checked;
         }
-        this.changedItems.set(itemName, { original: previousValue, new: newValue });
+        return inputValue(element);
     }
-    removeItem(itemName, currentValue) {
-        let trueOriginalValue = currentValue;
-        if (this.changedItems.has(itemName)) {
-            const originalRecord = this.changedItems.get(itemName);
-            trueOriginalValue = originalRecord.original;
-            this.changedItems.delete(itemName);
-            if (trueOriginalValue === null) {
-                return;
-            }
-        }
-        if (!this.removedItems.has(itemName)) {
-            this.removedItems.set(itemName, { original: trueOriginalValue });
+    if (element instanceof HTMLSelectElement) {
+        if (element.multiple) {
+            return Array.from(element.selectedOptions).map((el) => el.value);
         }
+        return element.value;
     }
-    getChangedItems() {
-        return Array.from(this.changedItems, ([name, { new: value }]) => ({ name, value }));
+    if (element.dataset.value) {
+        return element.dataset.value;
     }
-    getRemovedItems() {
-        return Array.from(this.removedItems.keys());
+    if ('value' in element) {
+        return element.value;
     }
-    isEmpty() {
-        return this.changedItems.size === 0 && this.removedItems.size === 0;
+    if (element.hasAttribute('value')) {
+        return element.getAttribute('value');
     }
+    return null;
 }
-
-class ElementChanges {
-    constructor() {
-        this.addedClasses = new Set();
-        this.removedClasses = new Set();
-        this.styleChanges = new ChangingItemsTracker();
-        this.attributeChanges = new ChangingItemsTracker();
-    }
-    addClass(className) {
-        if (!this.removedClasses.delete(className)) {
-            this.addedClasses.add(className);
+function setValueOnElement(element, value) {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === 'file') {
+            return;
         }
-    }
-    removeClass(className) {
-        if (!this.addedClasses.delete(className)) {
-            this.removedClasses.add(className);
+        if (element.type === 'radio') {
+            element.checked = element.value == value;
+            return;
+        }
+        if (element.type === 'checkbox') {
+            if (Array.isArray(value)) {
+                element.checked = value.some((val) => val == element.value);
+            }
+            else if (element.hasAttribute('value')) {
+                element.checked = element.value == value;
+            }
+            else {
+                element.checked = value;
+            }
+            return;
         }
     }
-    addStyle(styleName, newValue, originalValue) {
-        this.styleChanges.setItem(styleName, newValue, originalValue);
+    if (element instanceof HTMLSelectElement) {
+        const arrayWrappedValue = [].concat(value).map((value) => {
+            return `${value}`;
+        });
+        Array.from(element.options).forEach((option) => {
+            option.selected = arrayWrappedValue.includes(option.value);
+        });
+        return;
     }
-    removeStyle(styleName, originalValue) {
-        this.styleChanges.removeItem(styleName, originalValue);
+    value = value === undefined ? '' : value;
+    element.value = value;
+}
+function getAllModelDirectiveFromElements(element) {
+    if (!element.dataset.model) {
+        return [];
     }
-    addAttribute(attributeName, newValue, originalValue) {
-        this.attributeChanges.setItem(attributeName, newValue, originalValue);
-    }
-    removeAttribute(attributeName, originalValue) {
-        this.attributeChanges.removeItem(attributeName, originalValue);
+    const directives = parseDirectives(element.dataset.model);
+    directives.forEach((directive) => {
+        if (directive.args.length > 0) {
+            throw new Error(`The data-model="${element.dataset.model}" format is invalid: it does not support passing arguments to the model.`);
+        }
+        directive.action = normalizeModelName(directive.action);
+    });
+    return directives;
+}
+function getModelDirectiveFromElement(element, throwOnMissing = true) {
+    const dataModelDirectives = getAllModelDirectiveFromElements(element);
+    if (dataModelDirectives.length > 0) {
+        return dataModelDirectives[0];
     }
-    getAddedClasses() {
-        return [...this.addedClasses];
+    if (element.getAttribute('name')) {
+        const formElement = element.closest('form');
+        if (formElement && 'model' in formElement.dataset) {
+            const directives = parseDirectives(formElement.dataset.model || '*');
+            const directive = directives[0];
+            if (directive.args.length > 0) {
+                throw new Error(`The data-model="${formElement.dataset.model}" format is invalid: it does not support passing arguments to the model.`);
+            }
+            directive.action = normalizeModelName(element.getAttribute('name'));
+            return directive;
+        }
     }
-    getRemovedClasses() {
-        return [...this.removedClasses];
+    if (!throwOnMissing) {
+        return null;
     }
-    getChangedStyles() {
-        return this.styleChanges.getChangedItems();
+    throw new Error(`Cannot determine the model name for "${getElementAsTagText(element)}": the element must either have a "data-model" (or "name" attribute living inside a <form data-model="*">).`);
+}
+function elementBelongsToThisComponent(element, component) {
+    if (component.element === element) {
+        return true;
     }
-    getRemovedStyles() {
-        return this.styleChanges.getRemovedItems();
+    if (!component.element.contains(element)) {
+        return false;
     }
-    getChangedAttributes() {
-        return this.attributeChanges.getChangedItems();
+    const closestLiveComponent = element.closest('[data-controller~="live"]');
+    return closestLiveComponent === component.element;
+}
+function cloneHTMLElement(element) {
+    const newElement = element.cloneNode(true);
+    if (!(newElement instanceof HTMLElement)) {
+        throw new Error('Could not clone element');
     }
-    getRemovedAttributes() {
-        return this.attributeChanges.getRemovedItems();
+    return newElement;
+}
+function htmlToElement(html) {
+    const template = document.createElement('template');
+    html = html.trim();
+    template.innerHTML = html;
+    if (template.content.childElementCount > 1) {
+        throw new Error(`Component HTML contains ${template.content.childElementCount} elements, but only 1 root element is allowed.`);
     }
-    applyToElement(element) {
-        element.classList.add(...this.addedClasses);
-        element.classList.remove(...this.removedClasses);
-        this.styleChanges.getChangedItems().forEach((change) => {
-            element.style.setProperty(change.name, change.value);
-            return;
-        });
-        this.styleChanges.getRemovedItems().forEach((styleName) => {
-            element.style.removeProperty(styleName);
-        });
-        this.attributeChanges.getChangedItems().forEach((change) => {
-            element.setAttribute(change.name, change.value);
-        });
-        this.attributeChanges.getRemovedItems().forEach((attributeName) => {
-            element.removeAttribute(attributeName);
-        });
+    const child = template.content.firstElementChild;
+    if (!child) {
+        throw new Error('Child not found');
     }
-    isEmpty() {
-        return (this.addedClasses.size === 0 &&
-            this.removedClasses.size === 0 &&
-            this.styleChanges.isEmpty() &&
-            this.attributeChanges.isEmpty());
+    if (!(child instanceof HTMLElement)) {
+        throw new Error(`Created element is not an HTMLElement: ${html.trim()}`);
     }
+    return child;
 }
-
-class ExternalMutationTracker {
-    constructor(element, shouldTrackChangeCallback) {
-        this.changedElements = new WeakMap();
-        this.changedElementsCount = 0;
-        this.addedElements = [];
-        this.removedElements = [];
-        this.isStarted = false;
-        this.element = element;
-        this.shouldTrackChangeCallback = shouldTrackChangeCallback;
-        this.mutationObserver = new MutationObserver(this.onMutations.bind(this));
-    }
-    start() {
-        if (this.isStarted) {
-            return;
+const getMultipleCheckboxValue = (element, currentValues) => {
+    const finalValues = [...currentValues];
+    const value = inputValue(element);
+    const index = currentValues.indexOf(value);
+    if (element.checked) {
+        if (index === -1) {
+            finalValues.push(value);
         }
-        this.mutationObserver.observe(this.element, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeOldValue: true,
-        });
-        this.isStarted = true;
+        return finalValues;
     }
-    stop() {
-        if (this.isStarted) {
-            this.mutationObserver.disconnect();
-            this.isStarted = false;
-        }
+    if (index > -1) {
+        finalValues.splice(index, 1);
     }
-    getChangedElement(element) {
-        return this.changedElements.has(element) ? this.changedElements.get(element) : null;
+    return finalValues;
+};
+const inputValue = (element) => element.dataset.value ? element.dataset.value : element.value;
+
+class HookManager {
+    constructor() {
+        this.hooks = new Map();
     }
-    getAddedElements() {
-        return this.addedElements;
+    register(hookName, callback) {
+        const hooks = this.hooks.get(hookName) || [];
+        hooks.push(callback);
+        this.hooks.set(hookName, hooks);
     }
-    wasElementAdded(element) {
-        return this.addedElements.includes(element);
+    unregister(hookName, callback) {
+        const hooks = this.hooks.get(hookName) || [];
+        const index = hooks.indexOf(callback);
+        if (index === -1) {
+            return;
+        }
+        hooks.splice(index, 1);
+        this.hooks.set(hookName, hooks);
     }
-    handlePendingChanges() {
-        this.onMutations(this.mutationObserver.takeRecords());
+    triggerHook(hookName, ...args) {
+        const hooks = this.hooks.get(hookName) || [];
+        hooks.forEach((callback) => callback(...args));
     }
-    onMutations(mutations) {
-        const handledAttributeMutations = new WeakMap();
-        for (const mutation of mutations) {
-            const element = mutation.target;
-            if (!this.shouldTrackChangeCallback(element)) {
-                continue;
-            }
-            if (this.isElementAddedByTranslation(element)) {
-                continue;
-            }
-            let isChangeInAddedElement = false;
-            for (const addedElement of this.addedElements) {
-                if (addedElement.contains(element)) {
-                    isChangeInAddedElement = true;
-                    break;
-                }
+}
+
+// base IIFE to define idiomorph
+var Idiomorph = (function () {
+
+        //=============================================================================
+        // AND NOW IT BEGINS...
+        //=============================================================================
+        let EMPTY_SET = new Set();
+
+        // default configuration values, updatable by users now
+        let defaults = {
+            morphStyle: "outerHTML",
+            callbacks : {
+                beforeNodeAdded: noOp,
+                afterNodeAdded: noOp,
+                beforeNodeMorphed: noOp,
+                afterNodeMorphed: noOp,
+                beforeNodeRemoved: noOp,
+                afterNodeRemoved: noOp,
+                beforeAttributeUpdated: noOp,
+
+            },
+            head: {
+                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,
             }
-            if (isChangeInAddedElement) {
-                continue;
+        };
+
+        //=============================================================================
+        // Core Morphing Algorithm - morph, morphNormalizedContent, morphOldNodeTo, morphChildren
+        //=============================================================================
+        function morph(oldNode, newContent, config = {}) {
+
+            if (oldNode instanceof Document) {
+                oldNode = oldNode.documentElement;
             }
-            switch (mutation.type) {
-                case 'childList':
-                    this.handleChildListMutation(mutation);
-                    break;
-                case 'attributes':
-                    if (!handledAttributeMutations.has(element)) {
-                        handledAttributeMutations.set(element, []);
-                    }
-                    if (!handledAttributeMutations.get(element).includes(mutation.attributeName)) {
-                        this.handleAttributeMutation(mutation);
-                        handledAttributeMutations.set(element, [
-                            ...handledAttributeMutations.get(element),
-                            mutation.attributeName,
-                        ]);
-                    }
-                    break;
+
+            if (typeof newContent === 'string') {
+                newContent = parseContent(newContent);
             }
-        }
-    }
-    handleChildListMutation(mutation) {
-        mutation.addedNodes.forEach((node) => {
-            if (!(node instanceof Element)) {
-                return;
-            }
-            if (this.removedElements.includes(node)) {
-                this.removedElements.splice(this.removedElements.indexOf(node), 1);
-                return;
-            }
-            if (this.isElementAddedByTranslation(node)) {
-                return;
-            }
-            this.addedElements.push(node);
-        });
-        mutation.removedNodes.forEach((node) => {
-            if (!(node instanceof Element)) {
-                return;
-            }
-            if (this.addedElements.includes(node)) {
-                this.addedElements.splice(this.addedElements.indexOf(node), 1);
-                return;
-            }
-            this.removedElements.push(node);
-        });
-    }
-    handleAttributeMutation(mutation) {
-        const element = mutation.target;
-        if (!this.changedElements.has(element)) {
-            this.changedElements.set(element, new ElementChanges());
-            this.changedElementsCount++;
-        }
-        const changedElement = this.changedElements.get(element);
-        switch (mutation.attributeName) {
-            case 'class':
-                this.handleClassAttributeMutation(mutation, changedElement);
-                break;
-            case 'style':
-                this.handleStyleAttributeMutation(mutation, changedElement);
-                break;
-            default:
-                this.handleGenericAttributeMutation(mutation, changedElement);
-        }
-        if (changedElement.isEmpty()) {
-            this.changedElements.delete(element);
-            this.changedElementsCount--;
-        }
-    }
-    handleClassAttributeMutation(mutation, elementChanges) {
-        const element = mutation.target;
-        const previousValue = mutation.oldValue || '';
-        const previousValues = previousValue.match(/(\S+)/gu) || [];
-        const newValues = [].slice.call(element.classList);
-        const addedValues = newValues.filter((value) => !previousValues.includes(value));
-        const removedValues = previousValues.filter((value) => !newValues.includes(value));
-        addedValues.forEach((value) => {
-            elementChanges.addClass(value);
-        });
-        removedValues.forEach((value) => {
-            elementChanges.removeClass(value);
-        });
-    }
-    handleStyleAttributeMutation(mutation, elementChanges) {
-        const element = mutation.target;
-        const previousValue = mutation.oldValue || '';
-        const previousStyles = this.extractStyles(previousValue);
-        const newValue = element.getAttribute('style') || '';
-        const newStyles = this.extractStyles(newValue);
-        const addedOrChangedStyles = Object.keys(newStyles).filter((key) => previousStyles[key] === undefined || previousStyles[key] !== newStyles[key]);
-        const removedStyles = Object.keys(previousStyles).filter((key) => !newStyles[key]);
-        addedOrChangedStyles.forEach((style) => {
-            elementChanges.addStyle(style, newStyles[style], previousStyles[style] === undefined ? null : previousStyles[style]);
-        });
-        removedStyles.forEach((style) => {
-            elementChanges.removeStyle(style, previousStyles[style]);
-        });
-    }
-    handleGenericAttributeMutation(mutation, elementChanges) {
-        const attributeName = mutation.attributeName;
-        const element = mutation.target;
-        let oldValue = mutation.oldValue;
-        let newValue = element.getAttribute(attributeName);
-        if (oldValue === attributeName) {
-            oldValue = '';
-        }
-        if (newValue === attributeName) {
-            newValue = '';
-        }
-        if (!element.hasAttribute(attributeName)) {
-            if (oldValue === null) {
-                return;
-            }
-            elementChanges.removeAttribute(attributeName, mutation.oldValue);
-            return;
-        }
-        if (newValue === oldValue) {
-            return;
-        }
-        elementChanges.addAttribute(attributeName, element.getAttribute(attributeName), mutation.oldValue);
-    }
-    extractStyles(styles) {
-        const styleObject = {};
-        styles.split(';').forEach((style) => {
-            const parts = style.split(':');
-            if (parts.length === 1) {
-                return;
-            }
-            const property = parts[0].trim();
-            styleObject[property] = parts.slice(1).join(':').trim();
-        });
-        return styleObject;
-    }
-    isElementAddedByTranslation(element) {
-        return element.tagName === 'FONT' && element.getAttribute('style') === 'vertical-align: inherit;';
-    }
-}
-
-function parseDirectives(content) {
-    const directives = [];
-    if (!content) {
-        return directives;
-    }
-    let currentActionName = '';
-    let currentArgumentValue = '';
-    let currentArguments = [];
-    let currentModifiers = [];
-    let state = 'action';
-    const getLastActionName = () => {
-        if (currentActionName) {
-            return currentActionName;
-        }
-        if (directives.length === 0) {
-            throw new Error('Could not find any directives');
-        }
-        return directives[directives.length - 1].action;
-    };
-    const pushInstruction = () => {
-        directives.push({
-            action: currentActionName,
-            args: currentArguments,
-            modifiers: currentModifiers,
-            getString: () => {
-                return content;
-            },
-        });
-        currentActionName = '';
-        currentArgumentValue = '';
-        currentArguments = [];
-        currentModifiers = [];
-        state = 'action';
-    };
-    const pushArgument = () => {
-        currentArguments.push(currentArgumentValue.trim());
-        currentArgumentValue = '';
-    };
-    const pushModifier = () => {
-        if (currentArguments.length > 1) {
-            throw new Error(`The modifier "${currentActionName}()" does not support multiple arguments.`);
-        }
-        currentModifiers.push({
-            name: currentActionName,
-            value: currentArguments.length > 0 ? currentArguments[0] : null,
-        });
-        currentActionName = '';
-        currentArguments = [];
-        state = 'action';
-    };
-    for (let i = 0; i < content.length; i++) {
-        const char = content[i];
-        switch (state) {
-            case 'action':
-                if (char === '(') {
-                    state = 'arguments';
-                    break;
-                }
-                if (char === ' ') {
-                    if (currentActionName) {
-                        pushInstruction();
-                    }
-                    break;
-                }
-                if (char === '|') {
-                    pushModifier();
-                    break;
-                }
-                currentActionName += char;
-                break;
-            case 'arguments':
-                if (char === ')') {
-                    pushArgument();
-                    state = 'after_arguments';
-                    break;
-                }
-                if (char === ',') {
-                    pushArgument();
-                    break;
-                }
-                currentArgumentValue += char;
-                break;
-            case 'after_arguments':
-                if (char === '|') {
-                    pushModifier();
-                    break;
-                }
-                if (char !== ' ') {
-                    throw new Error(`Missing space after ${getLastActionName()}()`);
-                }
-                pushInstruction();
-                break;
-        }
-    }
-    switch (state) {
-        case 'action':
-        case 'after_arguments':
-            if (currentActionName) {
-                pushInstruction();
-            }
-            break;
-        default:
-            throw new Error(`Did you forget to add a closing ")" after "${currentActionName}"?`);
-    }
-    return directives;
-}
-
-function combineSpacedArray(parts) {
-    const finalParts = [];
-    parts.forEach((part) => {
-        finalParts.push(...trimAll(part).split(' '));
-    });
-    return finalParts;
-}
-function trimAll(str) {
-    return str.replace(/[\s]+/g, ' ').trim();
-}
-function normalizeModelName(model) {
-    return (model
-        .replace(/\[]$/, '')
-        .split('[')
-        .map((s) => s.replace(']', ''))
-        .join('.'));
-}
-
-function getValueFromElement(element, valueStore) {
-    if (element instanceof HTMLInputElement) {
-        if (element.type === 'checkbox') {
-            const modelNameData = getModelDirectiveFromElement(element, false);
-            if (modelNameData !== null) {
-                const modelValue = valueStore.get(modelNameData.action);
-                if (Array.isArray(modelValue)) {
-                    return getMultipleCheckboxValue(element, modelValue);
-                }
-                if (Object(modelValue) === modelValue) {
-                    return getMultipleCheckboxValue(element, Object.values(modelValue));
-                }
-            }
-            if (element.hasAttribute('value')) {
-                return element.checked ? element.getAttribute('value') : null;
-            }
-            return element.checked;
-        }
-        return inputValue(element);
-    }
-    if (element instanceof HTMLSelectElement) {
-        if (element.multiple) {
-            return Array.from(element.selectedOptions).map((el) => el.value);
-        }
-        return element.value;
-    }
-    if (element.dataset.value) {
-        return element.dataset.value;
-    }
-    if ('value' in element) {
-        return element.value;
-    }
-    if (element.hasAttribute('value')) {
-        return element.getAttribute('value');
-    }
-    return null;
-}
-function setValueOnElement(element, value) {
-    if (element instanceof HTMLInputElement) {
-        if (element.type === 'file') {
-            return;
-        }
-        if (element.type === 'radio') {
-            element.checked = element.value == value;
-            return;
-        }
-        if (element.type === 'checkbox') {
-            if (Array.isArray(value)) {
-                element.checked = value.some((val) => val == element.value);
-            }
-            else if (element.hasAttribute('value')) {
-                element.checked = element.value == value;
-            }
-            else {
-                element.checked = value;
-            }
-            return;
-        }
-    }
-    if (element instanceof HTMLSelectElement) {
-        const arrayWrappedValue = [].concat(value).map((value) => {
-            return `${value}`;
-        });
-        Array.from(element.options).forEach((option) => {
-            option.selected = arrayWrappedValue.includes(option.value);
-        });
-        return;
-    }
-    value = value === undefined ? '' : value;
-    element.value = value;
-}
-function getAllModelDirectiveFromElements(element) {
-    if (!element.dataset.model) {
-        return [];
-    }
-    const directives = parseDirectives(element.dataset.model);
-    directives.forEach((directive) => {
-        if (directive.args.length > 0) {
-            throw new Error(`The data-model="${element.dataset.model}" format is invalid: it does not support passing arguments to the model.`);
-        }
-        directive.action = normalizeModelName(directive.action);
-    });
-    return directives;
-}
-function getModelDirectiveFromElement(element, throwOnMissing = true) {
-    const dataModelDirectives = getAllModelDirectiveFromElements(element);
-    if (dataModelDirectives.length > 0) {
-        return dataModelDirectives[0];
-    }
-    if (element.getAttribute('name')) {
-        const formElement = element.closest('form');
-        if (formElement && 'model' in formElement.dataset) {
-            const directives = parseDirectives(formElement.dataset.model || '*');
-            const directive = directives[0];
-            if (directive.args.length > 0) {
-                throw new Error(`The data-model="${formElement.dataset.model}" format is invalid: it does not support passing arguments to the model.`);
-            }
-            directive.action = normalizeModelName(element.getAttribute('name'));
-            return directive;
-        }
-    }
-    if (!throwOnMissing) {
-        return null;
-    }
-    throw new Error(`Cannot determine the model name for "${getElementAsTagText(element)}": the element must either have a "data-model" (or "name" attribute living inside a <form data-model="*">).`);
-}
-function elementBelongsToThisComponent(element, component) {
-    if (component.element === element) {
-        return true;
-    }
-    if (!component.element.contains(element)) {
-        return false;
-    }
-    const closestLiveComponent = element.closest('[data-controller~="live"]');
-    return closestLiveComponent === component.element;
-}
-function cloneHTMLElement(element) {
-    const newElement = element.cloneNode(true);
-    if (!(newElement instanceof HTMLElement)) {
-        throw new Error('Could not clone element');
-    }
-    return newElement;
-}
-function htmlToElement(html) {
-    const template = document.createElement('template');
-    html = html.trim();
-    template.innerHTML = html;
-    if (template.content.childElementCount > 1) {
-        throw new Error(`Component HTML contains ${template.content.childElementCount} elements, but only 1 root element is allowed.`);
-    }
-    const child = template.content.firstElementChild;
-    if (!child) {
-        throw new Error('Child not found');
-    }
-    if (!(child instanceof HTMLElement)) {
-        throw new Error(`Created element is not an HTMLElement: ${html.trim()}`);
-    }
-    return child;
-}
-const getMultipleCheckboxValue = (element, currentValues) => {
-    const finalValues = [...currentValues];
-    const value = inputValue(element);
-    const index = currentValues.indexOf(value);
-    if (element.checked) {
-        if (index === -1) {
-            finalValues.push(value);
-        }
-        return finalValues;
-    }
-    if (index > -1) {
-        finalValues.splice(index, 1);
-    }
-    return finalValues;
-};
-const inputValue = (element) => element.dataset.value ? element.dataset.value : element.value;
-
-// base IIFE to define idiomorph
-var Idiomorph = (function () {
-
-        //=============================================================================
-        // AND NOW IT BEGINS...
-        //=============================================================================
-        let EMPTY_SET = new Set();
-
-        // default configuration values, updatable by users now
-        let defaults = {
-            morphStyle: "outerHTML",
-            callbacks : {
-                beforeNodeAdded: noOp,
-                afterNodeAdded: noOp,
-                beforeNodeMorphed: noOp,
-                afterNodeMorphed: noOp,
-                beforeNodeRemoved: noOp,
-                afterNodeRemoved: noOp,
-                beforeAttributeUpdated: noOp,
-
-            },
-            head: {
-                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,
-            }
-        };
-
-        //=============================================================================
-        // Core Morphing Algorithm - morph, morphNormalizedContent, morphOldNodeTo, morphChildren
-        //=============================================================================
-        function morph(oldNode, newContent, config = {}) {
-
-            if (oldNode instanceof Document) {
-                oldNode = oldNode.documentElement;
-            }
-
-            if (typeof newContent === 'string') {
-                newContent = parseContent(newContent);
-            }
-
-            let normalizedContent = normalizeContent(newContent);
-
-            let ctx = createMorphContext(oldNode, normalizedContent, config);
-
-            return morphNormalizedContent(oldNode, normalizedContent, ctx);
+
+            let normalizedContent = normalizeContent(newContent);
+
+            let ctx = createMorphContext(oldNode, normalizedContent, config);
+
+            return morphNormalizedContent(oldNode, normalizedContent, ctx);
         }
 
         function morphNormalizedContent(oldNode, normalizedNewContent, ctx) {
@@ -1442,352 +1125,669 @@ var Idiomorph = (function () {
                         return null;
                     }
                 }
-
-                // advanced to the next old content child
-                potentialSoftMatch = potentialSoftMatch.nextSibling;
+
+                // 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
+            }
+        }
+
+        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;
+            }
+        }
+
+        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 scoreElement(node1, node2, ctx) {
+            if (isSoftMatch(node1, node2)) {
+                return .5 + getIdIntersectionCount(ctx, node1, node2);
+            }
+            return 0;
+        }
+
+        function removeNode(tempNode, ctx) {
+            removeIdsFromConsideration(ctx, tempNode);
+            if (ctx.callbacks.beforeNodeRemoved(tempNode) === false) return;
+
+            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;
+                }
+            }
+            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;
+                }
             }
+        }
 
-            return potentialSoftMatch;
+        /**
+         * 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;
         }
 
-        function parseContent(newContent) {
-            let parser = new DOMParser();
+        //=============================================================================
+        // This is what ends up becoming the Idiomorph global object
+        //=============================================================================
+        return {
+            morph,
+            defaults
+        }
+    })();
 
-            // remove svgs to avoid false-positive matches on head, etc.
-            let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
+function normalizeAttributesForComparison(element) {
+    const isFileInput = element instanceof HTMLInputElement && element.type === 'file';
+    if (!isFileInput) {
+        if ('value' in element) {
+            element.setAttribute('value', element.value);
+        }
+        else if (element.hasAttribute('value')) {
+            element.setAttribute('value', '');
+        }
+    }
+    Array.from(element.children).forEach((child) => {
+        normalizeAttributesForComparison(child);
+    });
+}
 
-            // 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;
+const syncAttributes = (fromEl, toEl) => {
+    for (let i = 0; i < fromEl.attributes.length; i++) {
+        const attr = fromEl.attributes[i];
+        toEl.setAttribute(attr.name, attr.value);
+    }
+};
+function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements, getElementValue, externalMutationTracker) {
+    const originalElementIdsToSwapAfter = [];
+    const originalElementsToPreserve = new Map();
+    const markElementAsNeedingPostMorphSwap = (id, replaceWithClone) => {
+        const oldElement = originalElementsToPreserve.get(id);
+        if (!(oldElement instanceof HTMLElement)) {
+            throw new Error(`Original element with id ${id} not found`);
+        }
+        originalElementIdsToSwapAfter.push(id);
+        if (!replaceWithClone) {
+            return null;
+        }
+        const clonedOldElement = cloneHTMLElement(oldElement);
+        oldElement.replaceWith(clonedOldElement);
+        return clonedOldElement;
+    };
+    rootToElement.querySelectorAll('[data-live-preserve]').forEach((newElement) => {
+        const id = newElement.id;
+        if (!id) {
+            throw new Error('The data-live-preserve attribute requires an id attribute to be set on the element');
+        }
+        const oldElement = rootFromElement.querySelector(`#${id}`);
+        if (!(oldElement instanceof HTMLElement)) {
+            throw new Error(`The element with id "${id}" was not found in the original HTML`);
+        }
+        newElement.removeAttribute('data-live-preserve');
+        originalElementsToPreserve.set(id, oldElement);
+        syncAttributes(newElement, oldElement);
+    });
+    Idiomorph.morph(rootFromElement, rootToElement, {
+        callbacks: {
+            beforeNodeMorphed: (fromEl, toEl) => {
+                if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
+                    return true;
+                }
+                if (fromEl === rootFromElement) {
+                    return true;
+                }
+                if (fromEl.id && originalElementsToPreserve.has(fromEl.id)) {
+                    if (fromEl.id === toEl.id) {
+                        return false;
+                    }
+                    const clonedFromEl = markElementAsNeedingPostMorphSwap(fromEl.id, true);
+                    if (!clonedFromEl) {
+                        throw new Error('missing clone');
                     }
+                    Idiomorph.morph(clonedFromEl, toEl);
+                    return false;
                 }
-            } 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
-            }
-        }
-
-        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);
+                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 (externalMutationTracker.wasElementAdded(fromEl)) {
+                        fromEl.insertAdjacentElement('afterend', toEl);
+                        return false;
+                    }
+                    if (modifiedFieldElements.includes(fromEl)) {
+                        setValueOnElement(toEl, getElementValue(fromEl));
+                    }
+                    if (fromEl === document.activeElement &&
+                        fromEl !== document.body &&
+                        null !== getModelDirectiveFromElement(fromEl, false)) {
+                        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;
+                        }
+                    }
                 }
-                return dummyParent;
-            }
+                if (fromEl.hasAttribute('data-skip-morph') || (fromEl.id && fromEl.id !== toEl.id)) {
+                    fromEl.innerHTML = toEl.innerHTML;
+                    return true;
+                }
+                if (fromEl.parentElement?.hasAttribute('data-skip-morph')) {
+                    return false;
+                }
+                return !fromEl.hasAttribute('data-live-ignore');
+            },
+            beforeNodeRemoved(node) {
+                if (!(node instanceof HTMLElement)) {
+                    return true;
+                }
+                if (node.id && originalElementsToPreserve.has(node.id)) {
+                    markElementAsNeedingPostMorphSwap(node.id, false);
+                    return true;
+                }
+                if (externalMutationTracker.wasElementAdded(node)) {
+                    return false;
+                }
+                return !node.hasAttribute('data-live-ignore');
+            },
+        },
+    });
+    originalElementIdsToSwapAfter.forEach((id) => {
+        const newElement = rootFromElement.querySelector(`#${id}`);
+        const originalElement = originalElementsToPreserve.get(id);
+        if (!(newElement instanceof HTMLElement) || !(originalElement instanceof HTMLElement)) {
+            throw new Error('Missing elements.');
         }
+        newElement.replaceWith(originalElement);
+    });
+}
 
-        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;
+class ChangingItemsTracker {
+    constructor() {
+        this.changedItems = new Map();
+        this.removedItems = new Map();
+    }
+    setItem(itemName, newValue, previousValue) {
+        if (this.removedItems.has(itemName)) {
+            const removedRecord = this.removedItems.get(itemName);
+            this.removedItems.delete(itemName);
+            if (removedRecord.original === newValue) {
+                return;
             }
-            while (stack.length > 0) {
-                morphedNode.parentElement.insertBefore(stack.pop(), morphedNode.nextSibling);
+        }
+        if (this.changedItems.has(itemName)) {
+            const originalRecord = this.changedItems.get(itemName);
+            if (originalRecord.original === newValue) {
+                this.changedItems.delete(itemName);
+                return;
             }
-            return added;
+            this.changedItems.set(itemName, { original: originalRecord.original, new: newValue });
+            return;
         }
-
-        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;
+        this.changedItems.set(itemName, { original: previousValue, new: newValue });
+    }
+    removeItem(itemName, currentValue) {
+        let trueOriginalValue = currentValue;
+        if (this.changedItems.has(itemName)) {
+            const originalRecord = this.changedItems.get(itemName);
+            trueOriginalValue = originalRecord.original;
+            this.changedItems.delete(itemName);
+            if (trueOriginalValue === null) {
+                return;
             }
-            return bestElement;
         }
-
-        function scoreElement(node1, node2, ctx) {
-            if (isSoftMatch(node1, node2)) {
-                return .5 + getIdIntersectionCount(ctx, node1, node2);
-            }
-            return 0;
+        if (!this.removedItems.has(itemName)) {
+            this.removedItems.set(itemName, { original: trueOriginalValue });
         }
+    }
+    getChangedItems() {
+        return Array.from(this.changedItems, ([name, { new: value }]) => ({ name, value }));
+    }
+    getRemovedItems() {
+        return Array.from(this.removedItems.keys());
+    }
+    isEmpty() {
+        return this.changedItems.size === 0 && this.removedItems.size === 0;
+    }
+}
 
-        function removeNode(tempNode, ctx) {
-            removeIdsFromConsideration(ctx, tempNode);
-            if (ctx.callbacks.beforeNodeRemoved(tempNode) === false) return;
-
-            tempNode.remove();
-            ctx.callbacks.afterNodeRemoved(tempNode);
+class ElementChanges {
+    constructor() {
+        this.addedClasses = new Set();
+        this.removedClasses = new Set();
+        this.styleChanges = new ChangingItemsTracker();
+        this.attributeChanges = new ChangingItemsTracker();
+    }
+    addClass(className) {
+        if (!this.removedClasses.delete(className)) {
+            this.addedClasses.add(className);
         }
-
-        //=============================================================================
-        // ID Set Functions
-        //=============================================================================
-
-        function isIdInConsideration(ctx, id) {
-            return !ctx.deadIds.has(id);
+    }
+    removeClass(className) {
+        if (!this.addedClasses.delete(className)) {
+            this.removedClasses.add(className);
         }
+    }
+    addStyle(styleName, newValue, originalValue) {
+        this.styleChanges.setItem(styleName, newValue, originalValue);
+    }
+    removeStyle(styleName, originalValue) {
+        this.styleChanges.removeItem(styleName, originalValue);
+    }
+    addAttribute(attributeName, newValue, originalValue) {
+        this.attributeChanges.setItem(attributeName, newValue, originalValue);
+    }
+    removeAttribute(attributeName, originalValue) {
+        this.attributeChanges.removeItem(attributeName, originalValue);
+    }
+    getAddedClasses() {
+        return [...this.addedClasses];
+    }
+    getRemovedClasses() {
+        return [...this.removedClasses];
+    }
+    getChangedStyles() {
+        return this.styleChanges.getChangedItems();
+    }
+    getRemovedStyles() {
+        return this.styleChanges.getRemovedItems();
+    }
+    getChangedAttributes() {
+        return this.attributeChanges.getChangedItems();
+    }
+    getRemovedAttributes() {
+        return this.attributeChanges.getRemovedItems();
+    }
+    applyToElement(element) {
+        element.classList.add(...this.addedClasses);
+        element.classList.remove(...this.removedClasses);
+        this.styleChanges.getChangedItems().forEach((change) => {
+            element.style.setProperty(change.name, change.value);
+            return;
+        });
+        this.styleChanges.getRemovedItems().forEach((styleName) => {
+            element.style.removeProperty(styleName);
+        });
+        this.attributeChanges.getChangedItems().forEach((change) => {
+            element.setAttribute(change.name, change.value);
+        });
+        this.attributeChanges.getRemovedItems().forEach((attributeName) => {
+            element.removeAttribute(attributeName);
+        });
+    }
+    isEmpty() {
+        return (this.addedClasses.size === 0 &&
+            this.removedClasses.size === 0 &&
+            this.styleChanges.isEmpty() &&
+            this.attributeChanges.isEmpty());
+    }
+}
 
-        function idIsWithinNode(ctx, id, targetNode) {
-            let idSet = ctx.idMap.get(targetNode) || EMPTY_SET;
-            return idSet.has(id);
+class ExternalMutationTracker {
+    constructor(element, shouldTrackChangeCallback) {
+        this.changedElements = new WeakMap();
+        this.changedElementsCount = 0;
+        this.addedElements = [];
+        this.removedElements = [];
+        this.isStarted = false;
+        this.element = element;
+        this.shouldTrackChangeCallback = shouldTrackChangeCallback;
+        this.mutationObserver = new MutationObserver(this.onMutations.bind(this));
+    }
+    start() {
+        if (this.isStarted) {
+            return;
         }
-
-        function removeIdsFromConsideration(ctx, node) {
-            let idSet = ctx.idMap.get(node) || EMPTY_SET;
-            for (const id of idSet) {
-                ctx.deadIds.add(id);
-            }
+        this.mutationObserver.observe(this.element, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeOldValue: true,
+        });
+        this.isStarted = true;
+    }
+    stop() {
+        if (this.isStarted) {
+            this.mutationObserver.disconnect();
+            this.isStarted = false;
         }
-
-        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;
-                }
+    }
+    getChangedElement(element) {
+        return this.changedElements.has(element) ? this.changedElements.get(element) : null;
+    }
+    getAddedElements() {
+        return this.addedElements;
+    }
+    wasElementAdded(element) {
+        return this.addedElements.includes(element);
+    }
+    handlePendingChanges() {
+        this.onMutations(this.mutationObserver.takeRecords());
+    }
+    onMutations(mutations) {
+        const handledAttributeMutations = new WeakMap();
+        for (const mutation of mutations) {
+            const element = mutation.target;
+            if (!this.shouldTrackChangeCallback(element)) {
+                continue;
             }
-            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;
+            if (this.isElementAddedByTranslation(element)) {
+                continue;
+            }
+            let isChangeInAddedElement = false;
+            for (const addedElement of this.addedElements) {
+                if (addedElement.contains(element)) {
+                    isChangeInAddedElement = true;
+                    break;
                 }
             }
+            if (isChangeInAddedElement) {
+                continue;
+            }
+            switch (mutation.type) {
+                case 'childList':
+                    this.handleChildListMutation(mutation);
+                    break;
+                case 'attributes':
+                    if (!handledAttributeMutations.has(element)) {
+                        handledAttributeMutations.set(element, []);
+                    }
+                    if (!handledAttributeMutations.get(element).includes(mutation.attributeName)) {
+                        this.handleAttributeMutation(mutation);
+                        handledAttributeMutations.set(element, [
+                            ...handledAttributeMutations.get(element),
+                            mutation.attributeName,
+                        ]);
+                    }
+                    break;
+            }
         }
-
-        /**
-         * 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,
-            defaults
+    }
+    handleChildListMutation(mutation) {
+        mutation.addedNodes.forEach((node) => {
+            if (!(node instanceof Element)) {
+                return;
+            }
+            if (this.removedElements.includes(node)) {
+                this.removedElements.splice(this.removedElements.indexOf(node), 1);
+                return;
+            }
+            if (this.isElementAddedByTranslation(node)) {
+                return;
+            }
+            this.addedElements.push(node);
+        });
+        mutation.removedNodes.forEach((node) => {
+            if (!(node instanceof Element)) {
+                return;
+            }
+            if (this.addedElements.includes(node)) {
+                this.addedElements.splice(this.addedElements.indexOf(node), 1);
+                return;
+            }
+            this.removedElements.push(node);
+        });
+    }
+    handleAttributeMutation(mutation) {
+        const element = mutation.target;
+        if (!this.changedElements.has(element)) {
+            this.changedElements.set(element, new ElementChanges());
+            this.changedElementsCount++;
         }
-    })();
-
-function normalizeAttributesForComparison(element) {
-    const isFileInput = element instanceof HTMLInputElement && element.type === 'file';
-    if (!isFileInput) {
-        if ('value' in element) {
-            element.setAttribute('value', element.value);
+        const changedElement = this.changedElements.get(element);
+        switch (mutation.attributeName) {
+            case 'class':
+                this.handleClassAttributeMutation(mutation, changedElement);
+                break;
+            case 'style':
+                this.handleStyleAttributeMutation(mutation, changedElement);
+                break;
+            default:
+                this.handleGenericAttributeMutation(mutation, changedElement);
         }
-        else if (element.hasAttribute('value')) {
-            element.setAttribute('value', '');
+        if (changedElement.isEmpty()) {
+            this.changedElements.delete(element);
+            this.changedElementsCount--;
         }
     }
-    Array.from(element.children).forEach((child) => {
-        normalizeAttributesForComparison(child);
-    });
-}
-
-const syncAttributes = (fromEl, toEl) => {
-    for (let i = 0; i < fromEl.attributes.length; i++) {
-        const attr = fromEl.attributes[i];
-        toEl.setAttribute(attr.name, attr.value);
+    handleClassAttributeMutation(mutation, elementChanges) {
+        const element = mutation.target;
+        const previousValue = mutation.oldValue || '';
+        const previousValues = previousValue.match(/(\S+)/gu) || [];
+        const newValues = [].slice.call(element.classList);
+        const addedValues = newValues.filter((value) => !previousValues.includes(value));
+        const removedValues = previousValues.filter((value) => !newValues.includes(value));
+        addedValues.forEach((value) => {
+            elementChanges.addClass(value);
+        });
+        removedValues.forEach((value) => {
+            elementChanges.removeClass(value);
+        });
     }
-};
-function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements, getElementValue, externalMutationTracker) {
-    const originalElementIdsToSwapAfter = [];
-    const originalElementsToPreserve = new Map();
-    const markElementAsNeedingPostMorphSwap = (id, replaceWithClone) => {
-        const oldElement = originalElementsToPreserve.get(id);
-        if (!(oldElement instanceof HTMLElement)) {
-            throw new Error(`Original element with id ${id} not found`);
-        }
-        originalElementIdsToSwapAfter.push(id);
-        if (!replaceWithClone) {
-            return null;
+    handleStyleAttributeMutation(mutation, elementChanges) {
+        const element = mutation.target;
+        const previousValue = mutation.oldValue || '';
+        const previousStyles = this.extractStyles(previousValue);
+        const newValue = element.getAttribute('style') || '';
+        const newStyles = this.extractStyles(newValue);
+        const addedOrChangedStyles = Object.keys(newStyles).filter((key) => previousStyles[key] === undefined || previousStyles[key] !== newStyles[key]);
+        const removedStyles = Object.keys(previousStyles).filter((key) => !newStyles[key]);
+        addedOrChangedStyles.forEach((style) => {
+            elementChanges.addStyle(style, newStyles[style], previousStyles[style] === undefined ? null : previousStyles[style]);
+        });
+        removedStyles.forEach((style) => {
+            elementChanges.removeStyle(style, previousStyles[style]);
+        });
+    }
+    handleGenericAttributeMutation(mutation, elementChanges) {
+        const attributeName = mutation.attributeName;
+        const element = mutation.target;
+        let oldValue = mutation.oldValue;
+        let newValue = element.getAttribute(attributeName);
+        if (oldValue === attributeName) {
+            oldValue = '';
         }
-        const clonedOldElement = cloneHTMLElement(oldElement);
-        oldElement.replaceWith(clonedOldElement);
-        return clonedOldElement;
-    };
-    rootToElement.querySelectorAll('[data-live-preserve]').forEach((newElement) => {
-        const id = newElement.id;
-        if (!id) {
-            throw new Error('The data-live-preserve attribute requires an id attribute to be set on the element');
+        if (newValue === attributeName) {
+            newValue = '';
         }
-        const oldElement = rootFromElement.querySelector(`#${id}`);
-        if (!(oldElement instanceof HTMLElement)) {
-            throw new Error(`The element with id "${id}" was not found in the original HTML`);
+        if (!element.hasAttribute(attributeName)) {
+            if (oldValue === null) {
+                return;
+            }
+            elementChanges.removeAttribute(attributeName, mutation.oldValue);
+            return;
         }
-        newElement.removeAttribute('data-live-preserve');
-        originalElementsToPreserve.set(id, oldElement);
-        syncAttributes(newElement, oldElement);
-    });
-    Idiomorph.morph(rootFromElement, rootToElement, {
-        callbacks: {
-            beforeNodeMorphed: (fromEl, toEl) => {
-                if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {
-                    return true;
-                }
-                if (fromEl === rootFromElement) {
-                    return true;
-                }
-                if (fromEl.id && originalElementsToPreserve.has(fromEl.id)) {
-                    if (fromEl.id === toEl.id) {
-                        return false;
-                    }
-                    const clonedFromEl = markElementAsNeedingPostMorphSwap(fromEl.id, true);
-                    if (!clonedFromEl) {
-                        throw new Error('missing clone');
-                    }
-                    Idiomorph.morph(clonedFromEl, toEl);
-                    return false;
-                }
-                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 (externalMutationTracker.wasElementAdded(fromEl)) {
-                        fromEl.insertAdjacentElement('afterend', toEl);
-                        return false;
-                    }
-                    if (modifiedFieldElements.includes(fromEl)) {
-                        setValueOnElement(toEl, getElementValue(fromEl));
-                    }
-                    if (fromEl === document.activeElement &&
-                        fromEl !== document.body &&
-                        null !== getModelDirectiveFromElement(fromEl, false)) {
-                        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;
-                        }
-                    }
-                }
-                if (fromEl.hasAttribute('data-skip-morph') || (fromEl.id && fromEl.id !== toEl.id)) {
-                    fromEl.innerHTML = toEl.innerHTML;
-                    return true;
-                }
-                if (fromEl.parentElement?.hasAttribute('data-skip-morph')) {
-                    return false;
-                }
-                return !fromEl.hasAttribute('data-live-ignore');
-            },
-            beforeNodeRemoved(node) {
-                if (!(node instanceof HTMLElement)) {
-                    return true;
-                }
-                if (node.id && originalElementsToPreserve.has(node.id)) {
-                    markElementAsNeedingPostMorphSwap(node.id, false);
-                    return true;
-                }
-                if (externalMutationTracker.wasElementAdded(node)) {
-                    return false;
-                }
-                return !node.hasAttribute('data-live-ignore');
-            },
-        },
-    });
-    originalElementIdsToSwapAfter.forEach((id) => {
-        const newElement = rootFromElement.querySelector(`#${id}`);
-        const originalElement = originalElementsToPreserve.get(id);
-        if (!(newElement instanceof HTMLElement) || !(originalElement instanceof HTMLElement)) {
-            throw new Error('Missing elements.');
+        if (newValue === oldValue) {
+            return;
         }
-        newElement.replaceWith(originalElement);
-    });
+        elementChanges.addAttribute(attributeName, element.getAttribute(attributeName), mutation.oldValue);
+    }
+    extractStyles(styles) {
+        const styleObject = {};
+        styles.split(';').forEach((style) => {
+            const parts = style.split(':');
+            if (parts.length === 1) {
+                return;
+            }
+            const property = parts[0].trim();
+            styleObject[property] = parts.slice(1).join(':').trim();
+        });
+        return styleObject;
+    }
+    isElementAddedByTranslation(element) {
+        return element.tagName === 'FONT' && element.getAttribute('style') === 'vertical-align: inherit;';
+    }
 }
 
 class UnsyncedInputsTracker {
@@ -2798,7 +2798,7 @@ function fromQueryString(search) {
     const entries = search.split('&').map((i) => i.split('='));
     const data = {};
     entries.forEach(([key, value]) => {
-        value = decodeURIComponent(value.replace(/\+/g, '%20'));
+        value = decodeURIComponent(String(value || '').replace(/\+/g, '%20'));
         if (!key.includes('[')) {
             data[key] = value;
         }