htmx.org 4.0.0-alpha4 → 4.0.0-alpha6

package/dist/htmx.esm.js

@@ -6,17 +6,17 @@ var htmx = (() => {
         #q = []
 
         issue(ctx, queueStrategy) {
+            ctx.queueStrategy = queueStrategy
             if (!this.#c) {
                 this.#c = ctx
                 return true
             } else {
-                // Update ctx.status properly for replaced request contexts
-                if (queueStrategy === "replace") {
+                // Replace strategy OR current is abortable: abort current and issue new
+                if (queueStrategy === "replace" || (queueStrategy !== "abort" && this.#c.queueStrategy === "abort")) {
                     this.#q.map(value => value.status = "dropped");
                     this.#q = []
-                    if (this.#c) {
-                        this.#c.abort();
-                    }
+                    this.#c.request.abort();
+                    this.#c = ctx
                     return true
                 } else if (queueStrategy === "queue all") {
                     this.#q.push(ctx)
@@ -28,7 +28,7 @@ var htmx = (() => {
                     this.#q.map(value => value.status = "dropped");
                     this.#q = [ctx]
                     ctx.status = "queued";
-                } else if (this.#q.length === 0) {
+                } else if (this.#q.length === 0 && queueStrategy !== "abort") {
                     // default queue first
                     this.#q.push(ctx)
                     ctx.status = "queued";
@@ -80,7 +80,9 @@ var htmx = (() => {
                 determineMethodAndAction: this.#determineMethodAndAction.bind(this),
                 createRequestContext: this.#createRequestContext.bind(this),
                 collectFormData: this.#collectFormData.bind(this),
-                handleHxVals: this.#handleHxVals.bind(this)
+                handleHxVals: this.#handleHxVals.bind(this),
+                insertContent: this.#insertContent.bind(this),
+                morph: this.#morph.bind(this)
             };
             document.addEventListener("DOMContentLoaded", () => {
                 this.#initHistoryHandling();
@@ -90,12 +92,11 @@ var htmx = (() => {
 
         #initHtmxConfig() {
             this.config = {
-                version: '4.0.0-alpha3',
+                version: '4.0.0-alpha6',
                 logAll: false,
                 prefix: "",
-                transitions: true,
+                transitions: false,
                 history: true,
-                historyReload: false,
                 mode: 'same-origin',
                 defaultSwap: "innerHTML",
                 indicatorClass: "htmx-indicator",
@@ -112,22 +113,13 @@ var htmx = (() => {
                     pauseInBackground: false
                 },
                 morphIgnore: ["data-htmx-powered"],
+                morphScanLimit: 10,
                 noSwap: [204, 304],
                 implicitInheritance: false
             }
-            let metaConfig = document.querySelector('meta[name="htmx:config"]');
+            let metaConfig = document.querySelector('meta[name="htmx-config"]');
             if (metaConfig) {
-                let content = metaConfig.content;
-                let overrides = this.#parseConfig(content);
-                // Deep merge nested config objects
-                for (let key in overrides) {
-                    let val = overrides[key];
-                    if (val && typeof val === 'object' && !Array.isArray(val) && this.config[key]) {
-                        Object.assign(this.config[key], val);
-                    } else {
-                        this.config[key] = val;
-                    }
-                }
+                this.#mergeConfig(metaConfig.content, this.config);
             }
             this.#approvedExt = this.config.extensions;
         }
@@ -181,48 +173,60 @@ var htmx = (() => {
                    style === 'append' ? 'beforeend' : style;
         }
 
-        #attributeValue(elt, name, defaultVal, returnElt) {
+        #findThisElements(elt, attrName) {
+            let result = [];
+            this.#attributeValue(elt, attrName, undefined, (val, elt) => {
+                if (val?.split(/\s*,\s*/).includes('this')) result.push(elt);
+            });
+            return result;
+        }
+
+        #attributeValue(elt, name, defaultVal, eltCollector) {
             name = this.#prefix(name);
             let appendName = name + this.#maybeAdjustMetaCharacter(":append");
             let inheritName = name + (this.config.implicitInheritance ? "" : this.#maybeAdjustMetaCharacter(":inherited"));
             let inheritAppendName = name + this.#maybeAdjustMetaCharacter(":inherited:append");
 
             if (elt.hasAttribute(name)) {
-                return returnElt ? elt : elt.getAttribute(name);
+                let val = elt.getAttribute(name);
+                return eltCollector ? eltCollector(val, elt) : val;
             }
 
             if (elt.hasAttribute(inheritName)) {
-                return returnElt ? elt : elt.getAttribute(inheritName);
+                let val = elt.getAttribute(inheritName);
+                return eltCollector ? eltCollector(val, elt) : val;
             }
 
             if (elt.hasAttribute(appendName) || elt.hasAttribute(inheritAppendName)) {
                 let appendValue = elt.getAttribute(appendName) || elt.getAttribute(inheritAppendName);
                 let parent = elt.parentNode?.closest?.(`[${CSS.escape(inheritName)}],[${CSS.escape(inheritAppendName)}]`);
+                if (eltCollector) {
+                    eltCollector(appendValue, elt);
+                }
                 if (parent) {
-                    let inherited = this.#attributeValue(parent, name, undefined, returnElt);
-                    return returnElt ? inherited : (inherited ? inherited + "," + appendValue : appendValue);
-                } else {
-                    return returnElt ? elt : appendValue;
+                    let inherited = this.#attributeValue(parent, name, undefined, eltCollector);
+                    return inherited ? (inherited + "," + appendValue).replace(/[{}]/g, '') : appendValue;
                 }
+                return appendValue;
             }
 
             let parent = elt.parentNode?.closest?.(`[${CSS.escape(inheritName)}],[${CSS.escape(inheritAppendName)}]`);
             if (parent) {
-                let val = this.#attributeValue(parent, name, undefined, returnElt);
-                if (!returnElt && val && this.config.implicitInheritance) {
-                    this.#triggerExtensions(elt, "htmx:after:implicitInheritance", {elt, parent})
+                let val = this.#attributeValue(parent, name, undefined, eltCollector);
+                if (!eltCollector && val && this.config.implicitInheritance) {
+                    this.#triggerExtensions(elt, "htmx:after:implicitInheritance", {elt, name, parent})
                 }
                 return val;
             }
-            return returnElt ? elt : defaultVal;
+            return defaultVal;
         }
 
         #parseConfig(configString) {
             if (configString[0] === '{') return JSON.parse(configString);
-            let configPattern = /([^\s,]+?)(?:\s*:\s*(?:"([^"]*)"|'([^']*)'|<([^>]+)\/>|([^\s,]+)))?(?=\s|,|$)/g;
+            let configPattern = /(?:"([^"]+)"|([^\s,:]+))(?:\s*:\s*(?:"([^"]*)"|'([^']*)'|<([^>]+)\/>|([^\s,]+)))?(?=\s|,|$)/g;
             return [...configString.matchAll(configPattern)].reduce((result, match) => {
-                let keyPath = match[1].split('.');
-                let value = (match[2] ?? match[3] ?? match[4] ?? match[5] ?? 'true').trim();
+                let keyPath = (match[1] ?? match[2]).split('.');
+                let value = (match[3] ?? match[4] ?? match[5] ?? match[6] ?? 'true').trim();
                 if (value === 'true') value = true;
                 else if (value === 'false') value = false;
                 else if (/^\d+$/.test(value)) value = parseInt(value);
@@ -231,6 +235,19 @@ var htmx = (() => {
             }, {});
         }
 
+        #mergeConfig(configString, target) {
+            let parsed = this.#parseConfig(configString);
+            for (let key in parsed) {
+                let val = parsed[key];
+                if (val && typeof val === 'object' && !Array.isArray(val) && target[key]) {
+                    Object.assign(target[key], val);
+                } else {
+                    target[key] = val;
+                }
+            }
+            return target;
+        }
+
         #parseTriggerSpecs(spec) {
             return spec.split(',').map(s => {
                 let m = s.match(/^\s*(\S+\[[^\]]*\]|\S+)\s*(.*?)\s*$/);
@@ -305,44 +322,36 @@ var htmx = (() => {
                 status: "created",
                 select: this.#attributeValue(sourceElement, "hx-select"),
                 selectOOB: this.#attributeValue(sourceElement, "hx-select-oob"),
-                target: this.#resolveTarget(sourceElement, this.#attributeValue(sourceElement, "hx-target")),
-                swap: this.#attributeValue(sourceElement, "hx-swap", this.config.defaultSwap),
+                target: this.#attributeValue(sourceElement, "hx-target"),
+                swap: this.#attributeValue(sourceElement, "hx-swap") ?? this.config.defaultSwap,
                 push: this.#attributeValue(sourceElement, "hx-push-url"),
                 replace: this.#attributeValue(sourceElement, "hx-replace-url"),
                 transition: this.config.transitions,
                 confirm: this.#attributeValue(sourceElement, "hx-confirm"),
                 request: {
-                    validate: "true" === this.#attributeValue(sourceElement, "hx-validate", sourceElement.matches('form') ? "true" : "false"),
+                    validate: "true" === this.#attributeValue(sourceElement, "hx-validate", sourceElement.matches('form') && !sourceElement.noValidate && !sourceEvent.submitter?.formNoValidate ? "true" : "false"),
                     action: fullAction,
                     anchor,
                     method,
-                    headers: this.#determineHeaders(sourceElement),
+                    headers: this.#createCoreHeaders(sourceElement),
                     abort: ac.abort.bind(ac),
                     credentials: "same-origin",
                     signal: ac.signal,
                     mode: this.config.mode
                 }
             };
+            // Apply boost config overrides
+            if (sourceElement._htmx?.boosted) {
+                this.#mergeConfig(sourceElement._htmx.boosted, ctx);
+            }
+            ctx.target = this.#resolveTarget(sourceElement, ctx.target);
 
             // Apply hx-config overrides
             let configAttr = this.#attributeValue(sourceElement, "hx-config");
             if (configAttr) {
-                let configOverrides = this.#parseConfig(configAttr);
-                let req = ctx.request;
-                for (let key in configOverrides) {
-                    if (key.startsWith('+')) {
-                        let actualKey = key.substring(1);
-                        if (req[actualKey] && typeof req[actualKey] === 'object') {
-                            Object.assign(req[actualKey], configOverrides[key]);
-                        } else {
-                            req[actualKey] = configOverrides[key];
-                        }
-                    } else {
-                        req[key] = configOverrides[key];
-                    }
-                }
-                if (req.etag) {
-                    (sourceElement._htmx ||= {}).etag ||= req.etag
+                this.#mergeConfig(configAttr, ctx.request);
+                if (ctx.request.etag) {
+                    (sourceElement._htmx ||= {}).etag ||= ctx.request.etag
                 }
             }
             if (sourceElement._htmx?.etag) {
@@ -351,30 +360,34 @@ var htmx = (() => {
             return ctx;
         }
 
-        #determineHeaders(elt) {
+        #buildIdentifier(elt) {
+            return `${elt.tagName.toLowerCase()}${elt.id ? '#' + elt.id : ''}`;
+        }
+
+        #createCoreHeaders(elt) {
             let headers = {
                 "HX-Request": "true",
-                "HX-Source": elt.id || elt.name,
+                "HX-Source": this.#buildIdentifier(elt),
                 "HX-Current-URL": location.href,
                 "Accept": "text/html, text/event-stream"
             };
             if (this.#isBoosted(elt)) {
                 headers["HX-Boosted"] = "true"
             }
-            let headersAttribute = this.#attributeValue(elt, "hx-headers");
-            if (headersAttribute) {
-                Object.assign(headers, this.#parseConfig(headersAttribute));
-            }
             return headers;
         }
 
+        #handleHxHeaders(elt, headers) {
+            return this.#getAttributeObject(elt, "hx-headers", obj => {
+                for (let key in obj) headers[key] = String(obj[key]);
+            });
+        }
+
         #resolveTarget(elt, selector) {
             if (selector instanceof Element) {
                 return selector;
-            } else if (selector === 'this') {
-                return this.#attributeValue(elt, "hx-target", undefined, true);
             } else if (selector != null) {
-                return this.find(elt, selector);
+                return this.#findExt(elt, selector, "hx-target");
             } else if (this.#isBoosted(elt)) {
                 return document.body
             } else {
@@ -397,7 +410,8 @@ var htmx = (() => {
 
             // Build request body
             let form = elt.form || elt.closest("form")
-            let body = this.#collectFormData(elt, form, evt.submitter)
+            let body = this.#collectFormData(elt, form, evt.submitter, ctx.request.validate)
+            if (!body) return  // Validation failed
             let valsResult = this.#handleHxVals(elt, body)
             if (valsResult) await valsResult  // Only await if it returned a promise
             if (ctx.values) {
@@ -407,6 +421,16 @@ var htmx = (() => {
                 }
             }
 
+            // Handle dynamic headers
+            let headersResult = this.#handleHxHeaders(elt, ctx.request.headers)
+            if (headersResult) await headersResult  // Only await if it returned a promise
+
+            // Add HX-Request-Type and HX-Target headers
+            ctx.request.headers["HX-Request-Type"] = (ctx.target === document.body || ctx.select) ? "full" : "partial";
+            if (ctx.target) {
+                ctx.request.headers["HX-Target"] = this.#buildIdentifier(ctx.target);
+            }
+
             // Setup event-dependent request details
             Object.assign(ctx.request, {
                 form,
@@ -416,7 +440,6 @@ var htmx = (() => {
 
             if (!this.#trigger(elt, "htmx:config:request", {ctx: ctx})) return
             if (!this.#verbs.includes(ctx.request.method.toLowerCase())) return
-            if (ctx.request.validate && ctx.request.form && !ctx.request.form.reportValidity()) return
 
             let javascriptContent = this.#extractJavascriptContent(ctx.request.action);
             if (javascriptContent != null) {
@@ -425,15 +448,20 @@ var htmx = (() => {
                 return
             } else if (/GET|DELETE/.test(ctx.request.method)) {
                 let url = new URL(ctx.request.action, document.baseURI);
-                
+
                 for (let key of ctx.request.body.keys()) {
                     url.searchParams.delete(key);
                 }
                 for (let [key, value] of ctx.request.body) {
                     url.searchParams.append(key, value);
                 }
-                
-                ctx.request.action = url.pathname + url.search;
+
+                // Keep relative if same origin, otherwise use full URL
+                if (url.origin === location.origin) {
+                    ctx.request.action = url.pathname + url.search;
+                } else {
+                    ctx.request.action = url.href;
+                }
                 ctx.request.body = null;
             } else if (this.#attributeValue(elt, "hx-encoding") !== "multipart/form-data") {
                 ctx.request.body = new URLSearchParams(ctx.request.body);
@@ -452,10 +480,8 @@ var htmx = (() => {
             ctx.status = "issuing"
             this.#initTimeout(ctx);
 
-            let indicatorsSelector = this.#attributeValue(elt, "hx-indicator");
-            let indicators = this.#showIndicators(elt, indicatorsSelector);
-            let disableSelector = this.#attributeValue(elt, "hx-disable");
-            let disableElements = this.#disableElements(elt, disableSelector);
+            let indicators = this.#showIndicators(elt);
+            let disableElements = this.#disableElements(elt);
 
             try {
                 // Handle confirmation
@@ -739,7 +765,7 @@ var htmx = (() => {
             if (syncValue && syncValue.includes(":")) {
                 let strings = syncValue.split(":");
                 let selector = strings[0];
-                syncElt = this.#findExt(selector);
+                syncElt = this.#findExt(elt, selector, "hx-sync");
             }
             return syncElt._htmxRequestQueue ||= new ReqQ()
         }
@@ -1001,8 +1027,9 @@ var htmx = (() => {
         }
 
         #maybeBoost(elt) {
-            if (this.#attributeValue(elt, "hx-boost") === "true" && this.#shouldBoost(elt)) {
-                elt._htmx = {eventHandler: this.#createHtmxEventHandler(elt), requests: [], boosted: true}
+            let boostValue = this.#attributeValue(elt, "hx-boost");
+            if (boostValue && boostValue !== "false" && this.#shouldBoost(elt)) {
+                elt._htmx = {eventHandler: this.#createHtmxEventHandler(elt), requests: [], boosted: boostValue}
                 elt.setAttribute('data-htmx-powered', 'true');
                 if (elt.matches('a') && !elt.hasAttribute("target")) {
                     elt.addEventListener('click', (click) => {
@@ -1057,8 +1084,10 @@ var htmx = (() => {
                 }
                 this.#trigger(elt, "htmx:after:cleanup")
             }
-            for (let child of elt.querySelectorAll('[data-htmx-powered]')) {
-                this.#cleanup(child);
+            if (elt.firstChild) {
+                for (let child of elt.querySelectorAll('[data-htmx-powered]')) {
+                    this.#cleanup(child);
+                }
             }
         }
 
@@ -1069,10 +1098,12 @@ var htmx = (() => {
             let newPreservedElts = fragment.querySelectorAll?.(`[${this.#prefix('hx-preserve')}]`) || [];
             for (let preservedElt of newPreservedElts) {
                 let currentElt = document.getElementById(preservedElt.id);
-                if (pantry.moveBefore) {
-                    pantry.moveBefore(currentElt, null);
-                } else {
-                    pantry.appendChild(currentElt);
+                if (currentElt) {
+                    if (pantry.moveBefore) {
+                        pantry.moveBefore(currentElt, null);
+                    } else {
+                        pantry.appendChild(currentElt);
+                    }
                 }
             }
             return pantry
@@ -1081,13 +1112,15 @@ var htmx = (() => {
         #restorePreservedElements(pantry) {
             for (let preservedElt of pantry.children) {
                 let newElt = document.getElementById(preservedElt.id);
-                if (newElt.parentNode.moveBefore) {
-                    newElt.parentNode.moveBefore(preservedElt, newElt);
-                } else {
-                    newElt.replaceWith(preservedElt);
+                if (newElt) {
+                    if (newElt.parentNode.moveBefore) {
+                        newElt.parentNode.moveBefore(preservedElt, newElt);
+                    } else {
+                        newElt.replaceWith(preservedElt);
+                    }
+                    this.#cleanup(newElt)
+                    newElt.remove()
                 }
-                this.#cleanup(newElt)
-                newElt.remove()
             }
             pantry.remove();
         }
@@ -1187,13 +1220,11 @@ var htmx = (() => {
                 let type = templateElt.getAttribute('type');
                 
                 if (type === 'partial') {
-                    let swapSpec = this.#parseSwapSpec(templateElt.getAttribute(this.#prefix('hx-swap')) || this.config.defaultSwap);
-
                     tasks.push({
                         type: 'partial',
                         fragment: templateElt.content.cloneNode(true),
                         target: templateElt.getAttribute(this.#prefix('hx-target')),
-                        swapSpec,
+                        swapSpec: this.#parseSwapSpec(templateElt.getAttribute(this.#prefix('hx-swap')) || this.config.defaultSwap),
                         sourceElement: ctx.sourceElement
                     });
                 } else {
@@ -1210,18 +1241,18 @@ var htmx = (() => {
             autofocus?.focus?.()
         }
 
-        #handleScroll(task) {
-            if (task.swapSpec.scroll) {
-                let target = task.swapSpec.scrollTarget ? this.#findExt(task.swapSpec.scrollTarget) : task.target;
-                if (task.swapSpec.scroll === 'top') {
-                    target.scrollTop = 0;
-                } else if (task.swapSpec.scroll === 'bottom'){
-                    target.scrollTop = target.scrollHeight;
+        #handleScroll(swapSpec, target) {
+            if (swapSpec.scroll) {
+                let scrollTarget = swapSpec.scrollTarget ? this.#findExt(swapSpec.scrollTarget) : target;
+                if (swapSpec.scroll === 'top') {
+                    scrollTarget.scrollTop = 0;
+                } else if (swapSpec.scroll === 'bottom'){
+                    scrollTarget.scrollTop = scrollTarget.scrollHeight;
                 }
             }
-            if (task.swapSpec.show) {
-                let target = task.swapSpec.showTarget ? this.#findExt(task.swapSpec.showTarget) : task.target;
-                target.scrollIntoView(task.swapSpec.show === 'top')
+            if (swapSpec.show) {
+                let showTarget = swapSpec.showTarget ? this.#findExt(swapSpec.showTarget) : target;
+                showTarget.scrollIntoView(swapSpec.show === 'top')
             }
         }
 
@@ -1261,62 +1292,48 @@ var htmx = (() => {
             let partialTasks = this.#processPartials(fragment, ctx);
             tasks.push(...oobTasks, ...partialTasks);
 
-            // Process main swap
+            // Process main swap first
             let mainSwap = this.#processMainSwap(ctx, fragment, partialTasks);
             if (mainSwap) {
-                tasks.push(mainSwap);
+                tasks.unshift(mainSwap);
             }
 
-            // TODO - can we remove this and just let the function complete?
-            if (tasks.length === 0) return;
-
-            // Separate transition/nonTransition tasks
-            let transitionTasks = tasks.filter(t => t.transition);
-            let nonTransitionTasks = tasks.filter(t => !t.transition);
-
             if(!this.#trigger(document, "htmx:before:swap", {ctx, tasks})){
                 return
             }
 
-            // insert non-transition tasks immediately or with delay
-            for (let task of nonTransitionTasks) {
-                if (task.swapSpec?.swap) {
-                    setTimeout(() => this.#insertContent(task), this.parseInterval(task.swapSpec.swap));
+            let swapPromises = [];
+            let transitionTasks = [];
+            for (let task of tasks) {
+                if (task.swapSpec?.transition ?? mainSwap?.transition) {
+                    transitionTasks.push(task);
                 } else {
-                    this.#insertContent(task)
+                    swapPromises.push(this.#insertContent(task));
                 }
             }
 
-            // insert transition tasks in the transition queue
+            // submit all transition tasks in the transition queue w/no CSS transitions
             if (transitionTasks.length > 0) {
-                let tasksWrapper = ()=> {
+                let tasksWrapper = async ()=> {
                     for (let task of transitionTasks) {
-                        this.#insertContent(task)
+                        await this.#insertContent(task, false)
                     }
                 }
-                await this.#submitTransitionTask(tasksWrapper);
+                swapPromises.push(this.#submitTransitionTask(tasksWrapper));
             }
 
+            await Promise.all(swapPromises);
+
             this.#trigger(document, "htmx:after:swap", {ctx});
             if (ctx.title && !mainSwap?.swapSpec?.ignoreTitle) document.title = ctx.title;
-            await this.timeout(1);
-            // invoke restore tasks
-            for (let task of tasks) {
-                for (let restore of task.restoreTasks || []) {
-                    restore()
-                }
-            }
-            this.#trigger(document, "htmx:after:restore", { ctx });
             this.#handleAnchorScroll(ctx);
-            // TODO this stuff should be an extension
-            // if (ctx.hx?.triggerafterswap) this.#handleTriggerHeader(ctx.hx.triggerafterswap, ctx.sourceElement);
         }
 
         #processMainSwap(ctx, fragment, partialTasks) {
             // Create main task if needed
             let swapSpec = this.#parseSwapSpec(ctx.swap || this.config.defaultSwap);
             // skip creating main swap if extracting partials resulted in empty response except for delete style
-            if (swapSpec.style === 'delete' || /\S/.test(fragment.innerHTML || '') || !partialTasks.length) {
+            if (swapSpec.style === 'delete' || fragment.childElementCount > 0 || /\S/.test(fragment.textContent) || !partialTasks.length) {
                 if (ctx.select) {
                     let selected = fragment.querySelectorAll(ctx.select);
                     fragment = document.createDocumentFragment();
@@ -1337,70 +1354,122 @@ var htmx = (() => {
             }
         }
 
-        #insertContent(task) {
+        async #insertContent(task, cssTransition = true) {
             let {target, swapSpec, fragment} = task;
             if (typeof target === 'string') {
                 target = document.querySelector(target);
             }
             if (!target) return;
+            if (typeof swapSpec === 'string') {
+                swapSpec = this.#parseSwapSpec(swapSpec);
+            }
+            if (swapSpec.style === 'none') return;
             if (swapSpec.strip && fragment.firstElementChild) {
-                task.unstripped = fragment;
                 fragment = document.createDocumentFragment();
                 fragment.append(...(task.fragment.firstElementChild.content || task.fragment.firstElementChild).childNodes);
             }
 
+            target.classList.add("htmx-swapping")
+            if (cssTransition && task.swapSpec?.swap) {
+                await this.timeout(task.swapSpec?.swap)
+            }
+
+            if (swapSpec.style === 'delete') {
+                if (target.parentNode) {
+                    this.#cleanup(target);
+                    target.parentNode.removeChild(target);
+                }
+                return;
+            }
+
+            if (swapSpec.style === 'textContent') {
+                target.textContent = fragment.textContent;
+                target.classList.remove("htmx-swapping")
+                return;
+            }
+
             let pantry = this.#handlePreservedElements(fragment);
             let parentNode = target.parentNode;
             let newContent = [...fragment.childNodes]
-            if (swapSpec.style === 'innerHTML') {
-                this.#captureCSSTransitions(task, target);
-                for (const child of target.children) {
-                    this.#cleanup(child)
-                }
-                target.replaceChildren(...fragment.childNodes);
-            } else if (swapSpec.style === 'outerHTML') {
-                if (parentNode) {
-                    this.#captureCSSTransitions(task, parentNode);
-                    this.#insertNodes(parentNode, target, fragment);
-                    this.#cleanup(target)
-                    parentNode.removeChild(target);
-                }
-            } else if (swapSpec.style === 'innerMorph') {
-                this.#morph(target, fragment, true);
-            } else if (swapSpec.style === 'outerMorph') {
-                this.#morph(target, fragment, false);
-            } else if (swapSpec.style === 'beforebegin') {
-                if (parentNode) {
-                    this.#insertNodes(parentNode, target, fragment);
-                }
-            } else if (swapSpec.style === 'afterbegin') {
-                this.#insertNodes(target, target.firstChild, fragment);
-            } else if (swapSpec.style === 'beforeend') {
-                this.#insertNodes(target, null, fragment);
-            } else if (swapSpec.style === 'afterend') {
-                if (parentNode) {
-                    this.#insertNodes(parentNode, target.nextSibling, fragment);
-                }
-            } else if (swapSpec.style === 'delete') {
-                if (parentNode) {
-                    this.#cleanup(target)
-                    parentNode.removeChild(target)
+            let settleTasks = []
+            try {
+                if (swapSpec.style === 'innerHTML') {
+                    settleTasks = cssTransition ? this.#startCSSTransitions(fragment, target) : []
+                    for (const child of target.children) {
+                        this.#cleanup(child)
+                    }
+                    target.replaceChildren(...fragment.childNodes);
+                } else if (swapSpec.style === 'outerHTML') {
+                    if (parentNode) {
+                        settleTasks = cssTransition ? this.#startCSSTransitions(fragment, target) : []
+                        this.#insertNodes(parentNode, target, fragment);
+                        this.#cleanup(target)
+                        parentNode.removeChild(target);
+                    }
+                } else if (swapSpec.style === 'innerMorph') {
+                    this.#morph(target, fragment, true);
+                    newContent = [...target.childNodes];
+                } else if (swapSpec.style === 'outerMorph') {
+                    this.#morph(target, fragment, false);
+                    newContent.push(target);
+                } else if (swapSpec.style === 'beforebegin') {
+                    if (parentNode) {
+                        this.#insertNodes(parentNode, target, fragment);
+                    }
+                } else if (swapSpec.style === 'afterbegin') {
+                    this.#insertNodes(target, target.firstChild, fragment);
+                } else if (swapSpec.style === 'beforeend') {
+                    this.#insertNodes(target, null, fragment);
+                } else if (swapSpec.style === 'afterend') {
+                    if (parentNode) {
+                        this.#insertNodes(parentNode, target.nextSibling, fragment);
+                    }
+                } else {
+                    let methods = this.#extMethods.get('handle_swap')
+                    let handled = false;
+                    for (const method of methods) {
+                        let result = method(swapSpec.style, target, fragment, swapSpec);
+                        if (result) {
+                            handled = true;
+                            if (Array.isArray(result)) {
+                                newContent = result;
+                            }
+                            break;
+                        }
+                    }
+                    if (!handled) {
+                        throw new Error(`Unknown swap style: ${swapSpec.style}`);
+                    }
                 }
-                return;
-            } else if (swapSpec.style === 'none') {
-                return;
-            } else {
-                task.target = target;
-                task.fragment = fragment;
-                if (!this.#triggerExtensions(target, 'htmx:handle:swap', task)) return;
-                throw new Error(`Unknown swap style: ${swapSpec.style}`);
+            } finally {
+                target.classList.remove("htmx-swapping")
             }
             this.#restorePreservedElements(pantry);
+
+            this.#trigger(target, "htmx:before:settle", {task, newContent, settleTasks})
+
             for (const elt of newContent) {
+                elt.classList?.add?.("htmx-added")
+            }
+
+            if (cssTransition) {
+                target.classList.add("htmx-settling")
+                await this.timeout(swapSpec.settle ?? 1);
+                // invoke settle tasks
+                for (let settleTask of settleTasks) {
+                    settleTask()
+                }
+                target.classList.remove("htmx-settling")
+            }
+
+            this.#trigger(target, "htmx:after:settle", {task, newContent, settleTasks})
+
+            for (const elt of newContent) {
+                elt.classList?.remove?.("htmx-added")
                 this.process(elt);
                 this.#handleAutoFocus(elt);
             }
-            this.#handleScroll(task);
+            this.#handleScroll(swapSpec, target);
         }
 
         #trigger(on, eventName, detail = {}, bubbles = true) {
@@ -1409,7 +1478,7 @@ var htmx = (() => {
             }
             on = this.#normalizeElement(on)
             this.#triggerExtensions(on, eventName, detail);
-            return this.trigger(on, eventName, detail, bubbles)
+            return this.trigger(on, this.#maybeAdjustMetaCharacter(eventName), detail, bubbles)
         }
 
         #triggerExtensions(elt, eventName, detail = {}) {
@@ -1456,7 +1525,7 @@ var htmx = (() => {
         }
 
         takeClass(element, className, container = element.parentElement) {
-            for (let elt of this.findAll(this.#normalizeElement(container), "." + className)) {
+            for (let elt of this.#findAllExt(this.#normalizeElement(container), "." + className)) {
                 elt.classList.remove(className);
             }
             element.classList.add(className);
@@ -1567,7 +1636,7 @@ var htmx = (() => {
         #restoreHistory(path) {
             path = path || location.pathname + location.search;
             if (this.#trigger(document, "htmx:before:restore:history", {path, cacheMiss: true})) {
-                if (this.config.historyReload) {
+                if (this.config.history === "reload") {
                     location.reload();
                 } else {
                     this.ajax('GET', path, {
@@ -1595,7 +1664,9 @@ var htmx = (() => {
             if (!path || path === 'false' || path === false) return;
 
             if (path === 'true') {
-                path = ctx.request.action + (ctx.request.anchor ? '#' + ctx.request.anchor : '');
+                let finalUrl = response?.raw?.url || ctx.request.action;
+                let url = new URL(finalUrl, location.href);
+                path = url.pathname + url.search + (ctx.request.anchor ? '#' + ctx.request.anchor : '');
             }
 
             let type = push ? 'push' : 'replace';
@@ -1631,15 +1702,18 @@ var htmx = (() => {
             }
         }
 
-        #showIndicators(elt, indicatorsSelector) {
-            let indicatorElements = []
-            if (indicatorsSelector) {
-                indicatorElements = [elt, ...this.#queryEltAndDescendants(elt, indicatorsSelector)];
-                for (const indicator of indicatorElements) {
-                    indicator._htmxReqCount ||= 0
-                    indicator._htmxReqCount++
-                    indicator.classList.add(this.config.requestClass)
-                }
+        #showIndicators(elt) {
+            let indicatorsSelector = this.#attributeValue(elt, "hx-indicator");
+            let indicatorElements;
+            if (!indicatorsSelector) {
+                indicatorElements = [elt]
+            } else {
+                indicatorElements = this.#findAllExt(elt, indicatorsSelector, "hx-indicator");
+            }
+            for (const indicator of indicatorElements) {
+                indicator._htmxReqCount ||= 0
+                indicator._htmxReqCount++
+                indicator.classList.add(this.config.requestClass)
             }
             return indicatorElements
         }
@@ -1656,10 +1730,11 @@ var htmx = (() => {
             }
         }
 
-        #disableElements(elt, disabledSelector) {
+        #disableElements(elt) {
+            let disabledSelector = this.#attributeValue(elt, "hx-disable");
             let disabledElements = []
             if (disabledSelector) {
-                disabledElements = this.#queryEltAndDescendants(elt, disabledSelector);
+                disabledElements = this.#findAllExt(elt, disabledSelector, "hx-disable");
                 for (let indicator of disabledElements) {
                     indicator._htmxDisableCount ||= 0
                     indicator._htmxDisableCount++
@@ -1681,10 +1756,13 @@ var htmx = (() => {
             }
         }
 
-        #collectFormData(elt, form, submitter) {
+        #collectFormData(elt, form, submitter, validate) {
+            if (validate && form && !form.reportValidity()) return
+            
             let formData = form ? new FormData(form) : new FormData()
             let included = form ? new Set(form.elements) : new Set()
             if (!form && elt.name) {
+                if (validate && elt.reportValidity && !elt.reportValidity()) return
                 formData.append(elt.name, elt.value)
                 included.add(elt);
             }
@@ -1694,8 +1772,8 @@ var htmx = (() => {
             }
             let includeSelector = this.#attributeValue(elt, "hx-include");
             if (includeSelector) {
-                let includeNodes = this.#findAllExt(elt, includeSelector);
-                for (let node of includeNodes) {
+                for (let node of this.#findAllExt(elt, includeSelector)) {
+                    if (validate && node.reportValidity && !node.reportValidity()) return
                     this.#addInputValues(node, included, formData);
                 }
             }
@@ -1732,37 +1810,42 @@ var htmx = (() => {
             }
         }
 
-        #handleHxVals(elt, body) {
-            let hxValsValue = this.#attributeValue(elt, "hx-vals");
-            if (hxValsValue) {
-                let javascriptContent = this.#extractJavascriptContent(hxValsValue);
-                if (javascriptContent) {
-                    // Return promise for async evaluation
-                    return this.#executeJavaScriptAsync(elt, {}, javascriptContent, true).then(obj => {
-                        for (let key in obj) {
-                            body.append(key, obj[key])
-                        }
-                    });
-                } else {
-                    // Synchronous path
-                    let obj = this.#parseConfig(hxValsValue);
-                    for (let key in obj) {
-                        body.append(key, obj[key])
-                    }
+        #getAttributeObject(elt, attrName, callback) {
+            let attrValue = this.#attributeValue(elt, attrName);
+            if (!attrValue) return null;
+
+            let javascriptContent = this.#extractJavascriptContent(attrValue);
+            if (javascriptContent) {
+                // Wrap in braces if not already wrapped (for htmx 2.x compatibility)
+                if (javascriptContent.indexOf('{') !== 0) {
+                    javascriptContent = '{' + javascriptContent + '}';
                 }
+                // Return promise for async evaluation
+                return this.#executeJavaScriptAsync(elt, {}, javascriptContent, true).then(obj => {
+                    callback(obj);
+                });
+            } else {
+                // Synchronous path - return the parsed object directly
+                callback(this.#parseConfig(attrValue));
             }
         }
 
+        #handleHxVals(elt, body) {
+            return this.#getAttributeObject(elt, "hx-vals", obj => {
+                for (let key in obj) body.set(key, obj[key]);
+            });
+        }
+
         #stringHyperscriptStyleSelector(selector) {
             let s = selector.trim();
             return s.startsWith('<') && s.endsWith('/>') ? s.slice(1, -2) : s;
         }
 
-        #findAllExt(eltOrSelector, maybeSelector, global) {
+        #findAllExt(eltOrSelector, maybeSelector, thisAttr, global) {
             let selector = maybeSelector ?? eltOrSelector;
             let elt = maybeSelector ? this.#normalizeElement(eltOrSelector) : document;
             if (selector.startsWith('global ')) {
-                return this.#findAllExt(elt, selector.slice(7), true);
+                return this.#findAllExt(elt, selector.slice(7), thisAttr, true);
             }
             let parts = selector ? selector.replace(/<[^>]+\/>/g, m => m.replace(/,/g, '%2C'))
                 .split(',').map(p => p.replace(/%2C/g, ',')) : [];
@@ -1774,7 +1857,9 @@ var htmx = (() => {
                 if (selector.startsWith('closest ')) {
                     item = elt.closest(selector.slice(8))
                 } else if (selector.startsWith('find ')) {
-                    item = document.querySelector(elt, selector.slice(5))
+                    item = elt.querySelector(selector.slice(5))
+                } else if (selector.startsWith('findAll ')) {
+                    result.push(...elt.querySelectorAll(selector.slice(8)))
                 } else if (selector === 'next' || selector === 'nextElementSibling') {
                     item = elt.nextElementSibling
                 } else if (selector.startsWith('next ')) {
@@ -1789,10 +1874,14 @@ var htmx = (() => {
                     item = window
                 } else if (selector === 'body') {
                     item = document.body
-                } else if (selector === 'root') {
-                    item = this.#getRootNode(elt, !!global)
                 } else if (selector === 'host') {
                     item = (elt.getRootNode()).host
+                } else if (selector === 'this') {
+                    if (thisAttr) {
+                        result.push(...this.#findThisElements(elt, thisAttr));
+                        continue;
+                    }
+                    item = elt
                 } else {
                     unprocessedParts.push(selector)
                 }
@@ -1808,7 +1897,7 @@ var htmx = (() => {
                 result.push(...rootNode.querySelectorAll(standardSelector))
             }
 
-            return result
+            return [...new Set(result)]
         }
 
         #scanForwardQuery(start, match, global) {
@@ -1836,8 +1925,8 @@ var htmx = (() => {
             }
         }
 
-        #findExt(eltOrSelector, selector) {
-            return this.#findAllExt(eltOrSelector, selector)[0]
+        #findExt(eltOrSelector, selector, thisAttr) {
+            return this.#findAllExt(eltOrSelector, selector, thisAttr)[0]
         }
 
         #extractJavascriptContent(string) {
@@ -1937,26 +2026,35 @@ var htmx = (() => {
         }
 
         #findBestMatch(ctx, node, startPoint, endPoint) {
-            let softMatch = null, nextSibling = node.nextSibling, siblingSoftMatchCount = 0, displaceMatchCount = 0;
+            let softMatch = null, nextSibling = node.nextSibling, siblingMatchCount = 0, displaceMatchCount = 0, scanLimit = this.config.morphScanLimit;
+            // Get ID count for this node to prioritize ID-based matches
             let newSet = ctx.idMap.get(node), nodeMatchCount = newSet?.size || 0;
             let cursor = startPoint;
             while (cursor && cursor != endPoint) {
                 let oldSet = ctx.idMap.get(cursor);
                 if (this.#isSoftMatch(cursor, node)) {
+                    // Hard match: matching IDs found in both nodes
                     if (oldSet && newSet && [...oldSet].some(id => newSet.has(id))) return cursor;
-                    if (softMatch === null && !oldSet) {
-                        if (!nodeMatchCount) return cursor;
-                        else softMatch = cursor;
+                    if (!oldSet) {
+                        // Exact match: nodes are identical
+                        if (scanLimit > 0 && cursor.isEqualNode(node)) return cursor;
+                        // Soft match: same tag/type, save as fallback
+                        if (!softMatch) softMatch = cursor;
                     }
                 }
+                // Stop if too many ID elements would be displaced
                 displaceMatchCount += oldSet?.size || 0;
                 if (displaceMatchCount > nodeMatchCount) break;
-                if (softMatch === null && nextSibling && this.#isSoftMatch(cursor, nextSibling)) {
-                    siblingSoftMatchCount++;
+                // Look ahead: if next siblings match exactly, abort to let them match instead
+                if (nextSibling && scanLimit > 0 && cursor.isEqualNode(nextSibling)) {
+                    siblingMatchCount++;
                     nextSibling = nextSibling.nextSibling;
-                    if (siblingSoftMatchCount >= 2) softMatch = undefined;
+                    if (siblingMatchCount >= 2) return null;
                 }
+                // Don't move elements containing focus
                 if (cursor.contains(document.activeElement)) break;
+                // Stop scanning if limit reached and no IDs to match
+                if (--scanLimit < 1 && nodeMatchCount === 0) break;
                 cursor = cursor.nextSibling;
             }
             return softMatch || null;
@@ -1992,8 +2090,8 @@ var htmx = (() => {
             let type = newNode.nodeType;
 
             if (type === 1) {
-                let noMorph = this.config.morphIgnore || [];
-                this.#copyAttributes(oldNode, newNode, noMorph);
+                if (this.config.morphSkip && oldNode.matches?.(this.config.morphSkip)) return;
+                this.#copyAttributes(oldNode, newNode);
                 if (oldNode instanceof HTMLTextAreaElement && oldNode.defaultValue != newNode.defaultValue) {
                     oldNode.value = newNode.value;
                 }
@@ -2002,10 +2100,13 @@ var htmx = (() => {
             if ((type === 8 || type === 3) && oldNode.nodeValue !== newNode.nodeValue) {
                 oldNode.nodeValue = newNode.nodeValue;
             }
-            if (!oldNode.isEqualNode(newNode)) this.#morphChildren(ctx, oldNode, newNode);
+            
+            let skipChildren = this.config.morphSkipChildren && oldNode.matches?.(this.config.morphSkipChildren);
+            if (!skipChildren && !oldNode.isEqualNode(newNode)) this.#morphChildren(ctx, oldNode, newNode);
         }
 
-        #copyAttributes(destination, source, attributesToIgnore = []) {
+        #copyAttributes(destination, source) {
+            let attributesToIgnore = this.config.morphIgnore || [];
             for (const attr of source.attributes) {
                 if (!attributesToIgnore.includes(attr.name) && destination.getAttribute(attr.name) !== attr.value) {
                     destination.setAttribute(attr.name, attr.value);
@@ -2075,7 +2176,7 @@ var htmx = (() => {
                 }
                 let statusValue = this.#attributeValue(ctx.sourceElement, "hx-status:" + pattern);
                 if (statusValue) {
-                    Object.assign(ctx, this.#parseConfig(statusValue));
+                    this.#mergeConfig(statusValue, ctx);
                     return;
                 }
             }
@@ -2116,21 +2217,22 @@ var htmx = (() => {
             }
         }
 
-        #captureCSSTransitions(task, root) {
+        #startCSSTransitions(fragment, root) {
             let idElements = root.querySelectorAll("[id]");
             let existingElementsById = Object.fromEntries([...idElements].map(e => [e.id, e]));
-            let newElementsWithIds = task.fragment.querySelectorAll("[id]");
-            task.restoreTasks = []
+            let newElementsWithIds = fragment.querySelectorAll("[id]");
+            let restoreTasks = []
             for (let elt of newElementsWithIds) {
                 let existing = existingElementsById[elt.id];
                 if (existing?.tagName === elt.tagName) {
                     let clone = elt.cloneNode(false); // shallow clone node
-                    this.#copyAttributes(elt, existing, this.config.morphIgnore)
-                    task.restoreTasks.push(()=>{
-                        this.#copyAttributes(elt, clone, this.config.morphIgnore)
+                    this.#copyAttributes(elt, existing)
+                    restoreTasks.push(()=>{
+                        this.#copyAttributes(elt, clone)
                     })
                 }
             }
+            return restoreTasks;
         }
 
         #normalizeElement(cssOrElement) {