htmx.org 4.0.0-alpha1 → 4.0.0-alpha3

package/dist/htmx.esm.js

@@ -59,7 +59,8 @@ var htmx = (() => {
     class Htmx {
 
         #extMethods = new Map();
-        #approvedExt = new Set();
+        #approvedExt = '';
+        #registeredExt = new Set();
         #internalAPI;
         #actionSelector
         #boostSelector = "a,form";
@@ -72,7 +73,7 @@ var htmx = (() => {
             this.#initHtmxConfig();
             this.#initRequestIndicatorCss();
             this.#actionSelector = `[${this.#prefix("hx-action")}],[${this.#prefix("hx-get")}],[${this.#prefix("hx-post")}],[${this.#prefix("hx-put")}],[${this.#prefix("hx-patch")}],[${this.#prefix("hx-delete")}]`;
-            this.#hxOnQuery = new XPathEvaluator().createExpression(`.//*[@*[ starts-with(name(), "${this.#prefix("hx-on:")}")]]`);
+            this.#hxOnQuery = new XPathEvaluator().createExpression(`.//*[@*[ starts-with(name(), "${this.#prefix("hx-on")}")]]`);
             this.#internalAPI = {
                 attributeValue: this.#attributeValue.bind(this),
                 parseTriggerSpecs: this.#parseTriggerSpecs.bind(this),
@@ -89,6 +90,7 @@ var htmx = (() => {
 
         #initHtmxConfig() {
             this.config = {
+                version: '4.0.0-alpha3',
                 logAll: false,
                 prefix: "",
                 transitions: true,
@@ -101,7 +103,7 @@ var htmx = (() => {
                 includeIndicatorCSS: true,
                 defaultTimeout: 60000, /* 60 second default timeout */
                 extensions: '',
-                streams: {
+                sse: {
                     mode: 'once',
                     maxRetries: Infinity,
                     initialDelay: 500,
@@ -109,11 +111,13 @@ var htmx = (() => {
                     pauseHidden: false
                 },
                 morphIgnore: ["data-htmx-powered"],
-                noSwap: [204],
+                noSwap: [204, 304],
+                implicitInheritance: false
             }
             let metaConfig = document.querySelector('meta[name="htmx:config"]');
             if (metaConfig) {
-                let overrides = JSON.parse(metaConfig.content);
+                let content = metaConfig.content;
+                let overrides = this.#parseConfig(content);
                 // Deep merge nested config objects
                 for (let key in overrides) {
                     let val = overrides[key];
@@ -124,7 +128,7 @@ var htmx = (() => {
                     }
                 }
             }
-            this.#approvedExt = new Set(this.config.extensions.split(',').map(s => s.trim()).filter(Boolean));
+            this.#approvedExt = this.config.extensions;
         }
 
         #initRequestIndicatorCss() {
@@ -144,7 +148,9 @@ var htmx = (() => {
         }
 
         defineExtension(name, extension) {
-            if (!this.#approvedExt.delete(name)) return false;
+            if (this.#approvedExt && !this.#approvedExt.split(/,\s*/).includes(name)) return false;
+            if (this.#registeredExt.has(name)) return false;
+            this.#registeredExt.add(name);
             if (extension.init) extension.init(this.#internalAPI);
             Object.entries(extension).forEach(([key, value]) => {
                 if(!this.#extMethods.get(key)?.push(value)) this.#extMethods.set(key, [value]);
@@ -174,102 +180,78 @@ var htmx = (() => {
                    style === 'append' ? 'beforeend' : style;
         }
 
-        #attributeValue(elt, name, defaultVal) {
+        #attributeValue(elt, name, defaultVal, returnElt) {
             name = this.#prefix(name);
-            let appendName = name + ":append";
-            let inheritName = name + ":inherited";
-            let inheritAppendName = name + ":inherited:append";
+            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) || elt.hasAttribute(inheritName)) {
-                return elt.getAttribute(name) || elt.getAttribute(inheritName);
+            if (elt.hasAttribute(name)) {
+                return returnElt ? elt : elt.getAttribute(name);
+            }
+
+            if (elt.hasAttribute(inheritName)) {
+                return returnElt ? elt : elt.getAttribute(inheritName);
             }
 
             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 (parent) {
-                    let inheritedValue = this.#attributeValue(parent, name);
-                    return inheritedValue ? inheritedValue + "," + appendValue : appendValue;
+                    let inherited = this.#attributeValue(parent, name, undefined, returnElt);
+                    return returnElt ? inherited : (inherited ? inherited + "," + appendValue : appendValue);
+                } else {
+                    return returnElt ? elt : appendValue;
                 }
-                return appendValue;
             }
 
             let parent = elt.parentNode?.closest?.(`[${CSS.escape(inheritName)}],[${CSS.escape(inheritAppendName)}]`);
             if (parent) {
-                return this.#attributeValue(parent, name);
-            }
-            return defaultVal;
-        }
-
-        #tokenize(str) {
-            let tokens = [], i = 0;
-            while (i < str.length) {
-                let c = str[i];
-                if (c === '"' || c === "'") {
-                    let q = c, s = c;
-                    i++;
-                    while (i < str.length) {
-                        c = str[i];
-                        s += c;
-                        i++;
-                        if (c === '\\' && i < str.length) {
-                            s += str[i];
-                            i++;
-                        } else if (c === q) break;
-                    }
-                    tokens.push(s);
-                } else if (/\s/.test(c)) {
-                    while (i < str.length && /\s/.test(str[i])) i++;
-                } else if (c === ':' || c === ',') {
-                    tokens.push(c);
-                    i++;
-                } else {
-                    let t = '';
-                    while (i < str.length && !/[\s"':,]/.test(str[i])) t += str[i++];
-                    tokens.push(t);
+                let val = this.#attributeValue(parent, name, undefined, returnElt);
+                if (!returnElt && val && this.config.implicitInheritance) {
+                    this.#triggerExtensions(elt, "htmx:after:implicitInheritance", {elt, parent})
                 }
+                return val;
             }
-            return tokens;
+            return returnElt ? elt : defaultVal;
         }
 
-        #parseTriggerSpecs(spec) {
-            let specs = []
-            let currentSpec = null
-            let tokens = this.#tokenize(spec);
-            for (let i = 0; i < tokens.length; i++) {
-                let token = tokens[i];
-                if (token === ",") {
-                    currentSpec = null;
-                } else if (!currentSpec) {
-                    while (token.includes("[") && !token.includes("]") && i + 1 < tokens.length) {
-                        token += tokens[++i];
-                    }
-                    if (token.includes("[") && !token.includes("]")) {
-                        throw "unterminated:" + token;
-                    }
-                    currentSpec = {name: token};
-                    specs.push(currentSpec);
-                } else if (tokens[i + 1] === ":") {
-                    currentSpec[token] = tokens[i += 2];
-                } else {
-                    currentSpec[token] = true;
-                }
-            }
+        #parseConfig(configString) {
+            if (configString[0] === '{') return JSON.parse(configString);
+            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();
+                if (value === 'true') value = true;
+                else if (value === 'false') value = false;
+                else if (/^\d+$/.test(value)) value = parseInt(value);
+                keyPath.slice(0, -1).reduce((obj, key) => obj[key] ??= {}, result)[keyPath.at(-1)] = value;
+                return result;
+            }, {});
+        }
 
-            return specs;
+        #parseTriggerSpecs(spec) {
+            return spec.split(',').map(s => {
+                let m = s.match(/^\s*(\S+\[[^\]]*\]|\S+)\s*(.*?)\s*$/);
+                if (!m || !m[1]) return null;
+                if (m[1].includes('[') && !m[1].includes(']')) throw "unterminated:" + m[1];
+                let result = m[2] ? this.#parseConfig(m[2]) : {};
+                result.name = m[1];
+                return result;
+            }).filter(s => s);
         }
 
         #determineMethodAndAction(elt, evt) {
             if (this.#isBoosted(elt)) {
                 return this.#boostedMethodAndAction(elt, evt)
             } else {
-                let method = this.#attributeValue(elt, "hx-method") || "get";
+                let method = this.#attributeValue(elt, "hx-method") || "GET"
                 let action = this.#attributeValue(elt, "hx-action");
                 if (!action) {
                     for (let verb of this.#verbs) {
-                        let verbAttribute = this.#attributeValue(elt, "hx-" + verb);
-                        if (verbAttribute) {
-                            action = verbAttribute;
+                        let verbAction = this.#attributeValue(elt, "hx-" + verb);
+                        if (verbAction) {
+                            action = verbAction;
                             method = verb;
                             break;
                         }
@@ -295,7 +277,6 @@ var htmx = (() => {
                 elt._htmx = {eventHandler: this.#createHtmxEventHandler(elt)}
                 elt.setAttribute('data-htmx-powered', 'true');
                 this.#initializeTriggers(elt);
-                this.#initializeStreamConfig(elt);
                 this.#initializeAbortListener(elt)
                 this.#trigger(elt, "htmx:after:init", {}, true)
                 this.#trigger(elt, "load", {}, false)
@@ -321,11 +302,12 @@ var htmx = (() => {
                 status: "created",
                 select: this.#attributeValue(sourceElement, "hx-select"),
                 selectOOB: this.#attributeValue(sourceElement, "hx-select-oob"),
-                target: this.#attributeValue(sourceElement, "hx-target"),
+                target: this.#resolveTarget(sourceElement, 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"),
                     action,
@@ -337,28 +319,35 @@ var htmx = (() => {
             // Apply hx-config overrides
             let configAttr = this.#attributeValue(sourceElement, "hx-config");
             if (configAttr) {
-                let configOverrides = JSON.parse(configAttr);
-                let requestConfig = ctx.request;
+                let configOverrides = this.#parseConfig(configAttr);
+                let req = ctx.request;
                 for (let key in configOverrides) {
                     if (key.startsWith('+')) {
                         let actualKey = key.substring(1);
-                        if (requestConfig[actualKey] && typeof ctx[actualKey] === 'object') {
-                            Object.assign(ctx[actualKey], configOverrides[key]);
+                        if (req[actualKey] && typeof req[actualKey] === 'object') {
+                            Object.assign(req[actualKey], configOverrides[key]);
                         } else {
-                            requestConfig[actualKey] = configOverrides[key];
+                            req[actualKey] = configOverrides[key];
                         }
                     } else {
-                        requestConfig[key] = configOverrides[key];
+                        req[key] = configOverrides[key];
                     }
                 }
+                if (req.etag) {
+                    (sourceElement._htmx ||= {}).etag ||= req.etag
+                }
+            }
+            if (sourceElement._htmx?.etag) {
+                ctx.request.headers["If-none-match"] = sourceElement._htmx.etag
             }
-
             return ctx;
         }
 
         #determineHeaders(elt) {
             let headers = {
                 "HX-Request": "true",
+                "HX-Source": elt.id || elt.name,
+                "HX-Current-URL": location.href,
                 "Accept": "text/html, text/event-stream"
             };
             if (this.#isBoosted(elt)) {
@@ -366,7 +355,7 @@ var htmx = (() => {
             }
             let headersAttribute = this.#attributeValue(elt, "hx-headers");
             if (headersAttribute) {
-                Object.assign(headers, JSON.parse(headersAttribute));
+                Object.assign(headers, this.#parseConfig(headersAttribute));
             }
             return headers;
         }
@@ -375,11 +364,7 @@ var htmx = (() => {
             if (selector instanceof Element) {
                 return selector;
             } else if (selector === 'this') {
-                if (elt.hasAttribute(this.#prefix("hx-target"))) {
-                    return elt;
-                } else {
-                    return elt.closest(`[${this.#prefix("hx-target")}\\:inherited='this']`)
-                }
+                return this.#attributeValue(elt, "hx-target", undefined, true);
             } else if (selector != null) {
                 return this.find(elt, selector);
             } else if (this.#isBoosted(elt)) {
@@ -390,10 +375,10 @@ var htmx = (() => {
         }
 
         #isBoosted(elt) {
-            return elt._htmx?.boosted;
+            return elt?._htmx?.boosted;
         }
 
-        async __handleTriggerEvent(ctx) {
+        async #handleTriggerEvent(ctx) {
             let elt = ctx.sourceElement
             let evt = ctx.sourceEvent
             if (!elt.isConnected) return
@@ -402,13 +387,11 @@ var htmx = (() => {
 
             if (this.#shouldCancel(evt)) evt.preventDefault()
 
-            // Resolve swap target
-            ctx.target = this.#resolveTarget(elt, ctx.target);
-
             // Build request body
             let form = elt.form || elt.closest("form")
             let body = this.#collectFormData(elt, form, evt.submitter)
-            this.#handleHxVals(elt, body)
+            let valsResult = this.#handleHxVals(elt, body)
+            if (valsResult) await valsResult  // Only await if it returned a promise
             if (ctx.values) {
                 for (let k in ctx.values) {
                     body.delete(k);
@@ -419,7 +402,7 @@ var htmx = (() => {
             // Setup abort controller and action
             let ac = new AbortController()
             let action = ctx.request.action.replace?.(/#.*$/, '')
-            // TODO - consider how this works with hx-config, move most to __createRequestContext?
+            // TODO - consider how this works with hx-config, move most to #createRequestContext?
             Object.assign(ctx.request, {
                 originalAction: ctx.request.action,
                 action,
@@ -452,7 +435,7 @@ var htmx = (() => {
             await this.#issueRequest(ctx);
         }
 
-        async __issueRequest(ctx) {
+        async #issueRequest(ctx) {
             let elt = ctx.sourceElement
             let syncStrategy = this.#determineSyncStrategy(elt);
             let requestQueue = this.#getRequestQueue(elt);
@@ -468,25 +451,23 @@ var htmx = (() => {
             let disableElements = this.#disableElements(elt, disableSelector);
 
             try {
-                // Confirm dialog
-                let confirmVal = this.#attributeValue(elt, 'hx-confirm')
-                if (confirmVal) {
-                    let js = this.#extractJavascriptContent(confirmVal);
-                    if (js) {
-                        if (!await this.#executeJavaScriptAsync(ctx.elt, {}, js, true)) {
-                            return
-                        }
-                    } else {
-                        if (!window.confirm(confirmVal)) {
-                            return;
+                // Handle confirmation
+                if (ctx.confirm) {
+                    let issueRequest = null;
+                    let confirmed = await new Promise(resolve => {
+                        issueRequest = resolve;
+                        if (this.#trigger(elt, "htmx:confirm", {ctx, issueRequest: (skip) => issueRequest?.(skip !== false)})) {
+                            let js = this.#extractJavascriptContent(ctx.confirm);
+                            resolve(js ? this.#executeJavaScriptAsync(elt, {}, js, true) : window.confirm(ctx.confirm));
                         }
-                    }
+                    });
+                    if (!confirmed) return;
                 }
-
-                ctx.fetch ||= window.fetch
+                
+                ctx.fetch ||= window.fetch.bind(window)
                 if (!this.#trigger(elt, "htmx:before:request", {ctx})) return;
 
-                let response = await (ctx.fetchOverride || ctx.fetch(ctx.request.action, ctx.request));
+                let response = await ctx.fetch(ctx.request.action, ctx.request);
 
                 ctx.response = {
                     raw: response,
@@ -494,9 +475,13 @@ var htmx = (() => {
                     headers: response.headers,
                 }
                 this.#extractHxHeaders(ctx);
+                ctx.isSSE = response.headers.get("Content-Type")?.includes('text/event-stream');
+                if (!ctx.isSSE) {
+                    ctx.text = await response.text();
+                }
                 if (!this.#trigger(elt, "htmx:after:request", {ctx})) return;
 
-                if(this.#handleHxHeadersAndMaybeReturnEarly(ctx)){
+                if(this.#handleHeadersAndMaybeReturnEarly(ctx)){
                     return
                 }
 
@@ -506,16 +491,13 @@ var htmx = (() => {
                     await this.#handleSSE(ctx, elt, response);
                 } else {
                     // HTTP response
-                    ctx.text = await response.text();
                     if (ctx.status === "issuing") {
-                        if (ctx.hx.retarget) ctx.target = this.#resolveTarget(elt, ctx.hx.retarget);
+                        if (ctx.hx.retarget) ctx.target = ctx.hx.retarget;
                         if (ctx.hx.reswap) ctx.swap = ctx.hx.reswap;
                         if (ctx.hx.reselect) ctx.select = ctx.hx.reselect;
                         ctx.status = "response received";
                         this.#handleStatusCodes(ctx);
-                        this.#handleHistoryUpdate(ctx);
                         await this.swap(ctx);
-                        this.#handleAnchorScroll(ctx)
                         ctx.status = "swapped";
                     }
                 }
@@ -537,7 +519,7 @@ var htmx = (() => {
         }
 
         // Extract HX-* headers into ctx.hx
-        #extractHxHeaders(ctx, response) {
+        #extractHxHeaders(ctx) {
             ctx.hx = {}
             for (let [k, v] of ctx.response.raw.headers) {
                 if (k.toLowerCase().startsWith('hx-')) {
@@ -547,7 +529,7 @@ var htmx = (() => {
         }
 
         // returns true if the header aborts the current response handling
-        #handleHxHeadersAndMaybeReturnEarly(ctx) {
+        #handleHeadersAndMaybeReturnEarly(ctx) {
             if (ctx.hx.trigger) {
                 this.#handleTriggerHeader(ctx.hx.trigger, ctx.sourceElement);
             }
@@ -561,8 +543,8 @@ var htmx = (() => {
             }
             if (ctx.hx.location) {
                 let path = ctx.hx.location, opts = {};
-                if (path[0] === '{') {
-                    opts = JSON.parse(path);
+                if (path[0] === '{' || /[\s,]/.test(path)) {
+                    opts = this.#parseConfig(path);
                     path = opts.path;
                     delete opts.path;
                 }
@@ -570,10 +552,16 @@ var htmx = (() => {
                 this.ajax('GET', path, opts);
                 return true // TODO this seems legit
             }
+            if(ctx.response?.headers?.get?.("Etag")) {
+                ctx.sourceElement._htmx ||= {}
+                ctx.sourceElement._htmx.etag = ctx.response.headers.get("Etag");
+            }
         }
 
-        async __handleSSE(ctx, elt, response) {
-            let config = elt._htmx?.streamConfig || {...this.config.streams};
+        async #handleSSE(ctx, elt, response) {
+            let config = {...this.config.sse, ...ctx.request.sse};
+            if (config.once) config.mode = 'once';
+            if (config.continuous) config.mode = 'continuous';
 
             let waitForVisible = () => new Promise(r => {
                 let onVisible = () => !document.hidden && (document.removeEventListener('visibilitychange', onVisible), r());
@@ -592,7 +580,7 @@ var htmx = (() => {
                         if (!elt.isConnected) break;
                     }
 
-                    let delay = Math.min(config.initialDelay * Math.pow(2, attempt - 1), config.maxDelay);
+                    let delay = Math.min(this.parseInterval(config.initialDelay) * Math.pow(2, attempt - 1), this.parseInterval(config.maxDelay));
                     let reconnect = {attempt, delay, lastEventId, cancelled: false};
 
                     ctx.status = "reconnecting to stream";
@@ -650,9 +638,7 @@ var htmx = (() => {
                         ctx.status = "stream message received";
 
                         if (!ctx.response.cancelled) {
-                            this.#handleHistoryUpdate(ctx);
                             await this.swap(ctx);
-                            this.#handleAnchorScroll(ctx);
                             ctx.status = "swapped";
                         }
                         this.#trigger(elt, "htmx:after:sse:message", {ctx, message: msg});
@@ -669,30 +655,63 @@ var htmx = (() => {
             }
         }
 
-        async* __parseSSE(res) {
-            let r = res.body.getReader(), d = new TextDecoder(), b = '', m = {data: '', event: '', id: '', retry: null},
-                ls, i, n, f, v;
+        async* #parseSSE(response) {
+            let reader = response.body.getReader();
+            let decoder = new TextDecoder();
+            let buffer = '';
+            let message = {data: '', event: '', id: '', retry: null};
+
             try {
-                while (1) {
-                    let {done, value} = await r.read();
+                while (true) {
+                    let {done, value} = await reader.read();
                     if (done) break;
-                    for (let l of (b += d.decode(value, {stream: 1}), ls = b.split('\n'), b = ls.pop() || '', ls))
-                        !l || l === '\r' ? m.data && (yield m, m = {data: '', event: '', id: '', retry: null}) :
-                            (i = l.indexOf(':')) > 0 && (f = l.slice(0, i), v = l.slice(i + 1).trimStart(),
-                                f === 'data' ? m.data += (m.data ? '\n' : '') + v :
-                                    f === 'event' ? m.event = v :
-                                        f === 'id' ? m.id = v :
-                                            f === 'retry' && (n = parseInt(v, 10), !isNaN(n)) ? m.retry = n : 0);
+
+                    // Decode chunk and add to buffer
+                    buffer += decoder.decode(value, {stream: true});
+                    let lines = buffer.split('\n');
+                    // Keep incomplete line in buffer
+                    buffer = lines.pop() || '';
+
+                    for (let line of lines) {
+                        // Empty line or carriage return indicates end of message
+                        if (!line || line === '\r') {
+                            if (message.data) {
+                                yield message;
+                                message = {data: '', event: '', id: '', retry: null};
+                            }
+                            continue;
+                        }
+
+                        // Parse field: value
+                        let colonIndex = line.indexOf(':');
+                        if (colonIndex <= 0) continue;
+
+                        let field = line.slice(0, colonIndex);
+                        let value = line.slice(colonIndex + 1).trimStart();
+
+                        if (field === 'data') {
+                            message.data += (message.data ? '\n' : '') + value;
+                        } else if (field === 'event') {
+                            message.event = value;
+                        } else if (field === 'id') {
+                            message.id = value;
+                        } else if (field === 'retry') {
+                            let retryValue = parseInt(value, 10);
+                            if (!isNaN(retryValue)) {
+                                message.retry = retryValue;
+                            }
+                        }
+                    }
                 }
             } finally {
-                r.releaseLock();
+                reader.releaseLock();
             }
         }
 
         #initTimeout(ctx) {
             let timeoutInterval;
             if (ctx.request.timeout) {
-                timeoutInterval = typeof ctx.request.timeout == "string" ? this.parseInterval(ctx.request.timeout) : ctx.request.timeout;
+                timeoutInterval = this.parseInterval(ctx.request.timeout);
             } else {
                 timeoutInterval = this.config.defaultTimeout;
             }
@@ -891,35 +910,7 @@ var htmx = (() => {
             }
         }
 
-        #initializeStreamConfig(elt) {
-            let streamSpec = this.#attributeValue(elt, 'hx-stream');
-            if (!streamSpec) return;
-
-            // Start with global defaults
-            let streamConfig = {...this.config.streams};
-            let tokens = this.#tokenize(streamSpec);
-
-            for (let i = 0; i < tokens.length; i++) {
-                let token = tokens[i];
-                // Main value: once or continuous
-                if (token === 'once' || token === 'continuous') {
-                    streamConfig.mode = token;
-                } else if (token === 'pauseHidden') {
-                    streamConfig.pauseHidden = true;
-                } else if (tokens[i + 1] === ':') {
-                    let key = token, value = tokens[i + 2];
-                    if (key === 'mode') streamConfig.mode = value;
-                    else if (key === 'maxRetries') streamConfig.maxRetries = parseInt(value);
-                    else if (key === 'initialDelay') streamConfig.initialDelay = this.parseInterval(value);
-                    else if (key === 'maxDelay') streamConfig.maxDelay = this.parseInterval(value);
-                    else if (key === 'pauseHidden') streamConfig.pauseHidden = value === 'true';
-                    i += 2;
-                }
-            }
 
-            if (!elt._htmx) elt._htmx = {};
-            elt._htmx.streamConfig = streamConfig;
-        }
 
         #extractFilter(str) {
             let match = str.match(/^([^\[]*)\[([^\]]*)]/);
@@ -929,7 +920,7 @@ var htmx = (() => {
 
         #handleTriggerHeader(value, elt) {
             if (value[0] === '{') {
-                let triggers = JSON.parse(value);
+                let triggers = this.#parseConfig(value);
                 for (let name in triggers) {
                     let detail = triggers[name];
                     if (detail?.target) elt = this.find(detail.target) || elt;
@@ -961,7 +952,7 @@ var htmx = (() => {
             return bound;
         }
 
-        async __executeJavaScriptAsync(thisArg, obj, code, expression = true) {
+        async #executeJavaScriptAsync(thisArg, obj, code, expression = true) {
             let args = {}
             Object.assign(args, this.#apiMethods(thisArg))
             Object.assign(args, obj)
@@ -1002,23 +993,45 @@ var htmx = (() => {
         }
 
         #maybeBoost(elt) {
-            if (this.#attributeValue(elt, "hx-boost") === "true") {
-                if (this.#shouldInitialize(elt)) {
-                    elt._htmx = {eventHandler: this.#createHtmxEventHandler(elt), requests: [], boosted: true}
-                    elt.setAttribute('data-htmx-powered', 'true');
-                    if (elt.matches('a') && !elt.hasAttribute("target")) {
-                        elt.addEventListener('click', (click) => {
-                            elt._htmx.eventHandler(click)
-                        })
-                    } else {
-                        elt.addEventListener('submit', (submit) => {
-                            elt._htmx.eventHandler(submit)
-                        })
+            if (this.#attributeValue(elt, "hx-boost") === "true" && this.#shouldBoost(elt)) {
+                elt._htmx = {eventHandler: this.#createHtmxEventHandler(elt), requests: [], boosted: true}
+                elt.setAttribute('data-htmx-powered', 'true');
+                if (elt.matches('a') && !elt.hasAttribute("target")) {
+                    elt.addEventListener('click', (click) => {
+                        elt._htmx.eventHandler(click)
+                    })
+                } else {
+                    elt.addEventListener('submit', (submit) => {
+                        elt._htmx.eventHandler(submit)
+                    })
+                }
+                this.#trigger(elt, "htmx:after:init", {}, true)
+            }
+        }
+
+        #shouldBoost(elt) {
+            if (this.#shouldInitialize(elt)) {
+                if (elt.tagName === "A") {
+                    if (elt.target === '' || elt.target === '_self') {
+                        return !elt.getAttribute('href')?.startsWith?.("#") && this.#isSameOrigin(elt.href)
                     }
+                } else if (elt.tagName === "FORM") {
+                    return elt.method !== 'dialog' &&  this.#isSameOrigin(elt.action);
                 }
             }
         }
 
+        #isSameOrigin(url) {
+            try {
+                // URL constructor handles both relative and absolute URLs
+                const parsed = new URL(url, window.location.href);
+                return parsed.origin === window.location.origin;
+            } catch (e) {
+                // If URL parsing fails, assume not same-origin
+                return false;
+            }
+        }
+
         #shouldInitialize(elt) {
             return !elt._htmx && !this.#ignore(elt);
         }
@@ -1076,8 +1089,9 @@ var htmx = (() => {
         }
 
         #makeFragment(text) {
-            let response = text.replace(/<partial(\s+|>)/gi, '<template partial$1').replace(/<\/partial>/gi, '</template>');
-            // TODO - store any head tag content on the fragment for head extension
+            let response = text.replace(/<hx-([a-z]+)(\s+|>)/gi, '<template hx type="$1"$2').replace(/<\/hx-[a-z]+>/gi, '</template>');
+            let title = '';
+            response = response.replace(/<title[^>]*>[\s\S]*?<\/title>/i, m => (title = this.#parseHTML(m).title, ''));
             let responseWithNoHead = response.replace(/<head(\s[^>]*)?>[\s\S]*?<\/head>/i, '');
             let startTag = responseWithNoHead.match(/<([a-z][^\/>\x20\t\r\n\f]*)/i)?.[1]?.toLowerCase();
 
@@ -1092,49 +1106,28 @@ var htmx = (() => {
                 doc = this.#parseHTML(`<template>${responseWithNoHead}</template>`);
                 fragment = doc.querySelector('template').content;
             }
+            this.#processScripts(fragment);
 
             return {
                 fragment,
-                title: doc.title
+                title
             };
         }
 
         #createOOBTask(tasks, elt, oobValue, sourceElement) {
-            // Handle legacy format: swapStyle:target (only if no spaces, which indicate modifiers)
             let target = elt.id ? '#' + CSS.escape(elt.id) : null;
             if (oobValue !== 'true' && oobValue && !oobValue.includes(' ')) {
-                let colonIdx = oobValue.indexOf(':');
-                if (colonIdx !== -1) {
-                    target = oobValue.substring(colonIdx + 1);
-                    oobValue = oobValue.substring(0, colonIdx);
-                }
+                [oobValue, target = target] = oobValue.split(/:(.*)/);
             }
             if (oobValue === 'true' || !oobValue) oobValue = 'outerHTML';
 
             let swapSpec = this.#parseSwapSpec(oobValue);
-            if (swapSpec.target) target = swapSpec.target;
-
-            let oobElementClone = elt.cloneNode(true);
-            let fragment;
-            if (swapSpec.strip === undefined && swapSpec.style !== 'outerHTML') {
-                swapSpec.strip = true;
-            }
-            if (swapSpec.strip) {
-                fragment = oobElementClone.content || oobElementClone;
-            } else {
-                fragment = document.createDocumentFragment();
-                fragment.appendChild(oobElementClone);
-            }
-            elt.remove();
-            if (!target && !oobValue.includes('target:')) return;
-
-            tasks.push({
-                type: 'oob',
-                fragment,
-                target,
-                swapSpec,
-                sourceElement
-            });
+            target = swapSpec.target || target;
+            swapSpec.strip ??= !swapSpec.style.startsWith('outer');
+            if (!target) return;
+            let fragment = document.createDocumentFragment();
+            fragment.append(elt);
+            tasks.push({type: 'oob', fragment, target, swapSpec, sourceElement});
         }
 
         #processOOB(fragment, sourceElement, selectOOB) {
@@ -1143,9 +1136,7 @@ var htmx = (() => {
             // Process hx-select-oob first (select elements from response)
             if (selectOOB) {
                 for (let spec of selectOOB.split(',')) {
-                    let [selector, ...rest] = spec.split(':');
-                    let oobValue = rest.length ? rest.join(':') : 'true';
-
+                    let [selector, oobValue = 'true'] = spec.split(/:(.*)/);
                     for (let elt of fragment.querySelectorAll(selector)) {
                         this.#createOOBTask(tasks, elt, oobValue, sourceElement);
                     }
@@ -1171,64 +1162,63 @@ var htmx = (() => {
         }
 
         #parseSwapSpec(swapStr) {
-            let tokens = this.#tokenize(swapStr);
-            let config = {style: tokens[1] === ':' ? this.config.defaultSwap : (tokens[0] || this.config.defaultSwap)};
-            config.style = this.#normalizeSwapStyle(config.style);
-            let startIdx = tokens[1] === ':' ? 0 : 1;
-
-            for (let i = startIdx; i < tokens.length; i++) {
-                if (tokens[i + 1] === ':') {
-                    let key = tokens[i], value = tokens[i = i + 2];
-                    if (key === 'swap') config.swapDelay = this.parseInterval(value);
-                    else if (key === 'transition' || key === 'ignoreTitle' || key === 'strip') config[key] = value === 'true';
-                    else if (key === 'focus-scroll') config.focusScroll = value === 'true';
-                    else if (key === 'scroll' || key === 'show') {
-                        let parts = [value];
-                        while (tokens[i + 1] === ':') {
-                            parts.push(tokens[i + 2]);
-                            i += 2;
-                        }
-                        config[key] = parts.length === 1 ? parts[0] : parts.pop();
-                        if (parts.length > 1) config[key + 'Target'] = parts.join(':');
-                    } else if (key === 'target') {
-                        let parts = [value];
-                        while (i + 1 < tokens.length && tokens[i + 1] !== ':' && tokens[i + 2] !== ':') {
-                            parts.push(tokens[i + 1]);
-                            i++;
-                        }
-                        config[key] = parts.join(' ');
-                    }
-                }
+            swapStr = swapStr.trim();
+            let style = this.config.defaultSwap
+            if (swapStr && !/^\S*:/.test(swapStr)) {
+                let m = swapStr.match(/^(\S+)\s*(.*)$/);
+                style = m[1];
+                swapStr = m[2];
             }
-            return config;
+            return {style: this.#normalizeSwapStyle(style), ...this.#parseConfig(swapStr)};
         }
 
-        #processPartials(fragment, sourceElement) {
+        #processPartials(fragment, ctx) {
             let tasks = [];
 
-            for (let partialElt of fragment.querySelectorAll('template[partial]')) {
-                let swapSpec = this.#parseSwapSpec(partialElt.getAttribute(this.#prefix('hx-swap')) || this.config.defaultSwap);
-
-                tasks.push({
-                    type: 'partial',
-                    fragment: partialElt.content.cloneNode(true),
-                    target: partialElt.getAttribute(this.#prefix('hx-target')),
-                    swapSpec,
-                    sourceElement
-                });
-                partialElt.remove();
+            for (let templateElt of fragment.querySelectorAll('template[hx]')) {
+                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,
+                        sourceElement: ctx.sourceElement
+                    });
+                } else {
+                    this.#triggerExtensions(templateElt, 'htmx:process:' + type, { ctx, tasks });
+                }
+                templateElt.remove();
             }
 
             return tasks;
         }
 
-        #handleScroll(target, scroll) {
-            if (scroll === 'top') target.scrollTop = 0;
-            else if (scroll === 'bottom') target.scrollTop = target.scrollHeight;
+        #handleAutoFocus(elt) {
+            let autofocus = this.find(elt, "[autofocus]");
+            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;
+                }
+            }
+            if (task.swapSpec.show) {
+                let target = task.swapSpec.showTarget ? this.#findExt(task.swapSpec.showTarget) : task.target;
+                target.scrollIntoView(task.swapSpec.show === 'top')
+            }
         }
 
         #handleAnchorScroll(ctx) {
-            let anchor = ctx.request.originalAction?.split('#')[1];
+            let anchor = ctx.request?.originalAction?.split('#')[1];
             if (anchor) {
                 document.getElementById(anchor)?.scrollIntoView({block: 'start', behavior: 'auto'});
             }
@@ -1254,16 +1244,18 @@ var htmx = (() => {
         //============================================================================================
 
         async swap(ctx) {
+            this.#handleHistoryUpdate(ctx);
             let {fragment, title} = this.#makeFragment(ctx.text);
+            ctx.title = title;
             let tasks = [];
 
             // Process OOB and partials
             let oobTasks = this.#processOOB(fragment, ctx.sourceElement, ctx.selectOOB);
-            let partialTasks = this.#processPartials(fragment, ctx.sourceElement);
+            let partialTasks = this.#processPartials(fragment, ctx);
             tasks.push(...oobTasks, ...partialTasks);
 
             // Process main swap
-            let mainSwap = this.#processMainSwap(ctx, fragment, partialTasks, title);
+            let mainSwap = this.#processMainSwap(ctx, fragment, partialTasks);
             if (mainSwap) {
                 tasks.push(mainSwap);
             }
@@ -1281,8 +1273,8 @@ var htmx = (() => {
 
             // insert non-transition tasks immediately or with delay
             for (let task of nonTransitionTasks) {
-                if (task.swapSpec?.swapDelay) {
-                    setTimeout(() => this.#insertContent(task), task.swapSpec.swapDelay);
+                if (task.swapSpec?.swap) {
+                    setTimeout(() => this.#insertContent(task), this.parseInterval(task.swapSpec.swap));
                 } else {
                     this.#insertContent(task)
                 }
@@ -1299,7 +1291,7 @@ var htmx = (() => {
             }
 
             this.#trigger(document, "htmx:after:swap", {ctx});
-            if (mainSwap?.title) document.title = mainSwap.title;
+            if (ctx.title && !mainSwap?.swapSpec?.ignoreTitle) document.title = ctx.title;
             await this.timeout(1);
             // invoke restore tasks
             for (let task of tasks) {
@@ -1307,38 +1299,32 @@ var htmx = (() => {
                     restore()
                 }
             }
-            this.#trigger(document, "htmx:after:restore", {ctx});
+            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, title) {
+        #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) {
-                let resultFragment = document.createDocumentFragment();
                 if (ctx.select) {
-                    let selected = fragment.querySelector(ctx.select);
-                    if (selected) {
-                        if (swapSpec.strip === false) {
-                            resultFragment.append(selected);
-                        } else {
-                            resultFragment.append(...selected.childNodes);
-                        }
-                    }
-                } else {
-                    resultFragment.append(...fragment.childNodes);
+                    let selected = fragment.querySelectorAll(ctx.select);
+                    fragment = document.createDocumentFragment();
+                    fragment.append(...selected);
+                }
+                if (this.#isBoosted(ctx.sourceElement)) {
+                    swapSpec.show ||= 'top';
                 }
-
                 let mainSwap = {
                     type: 'main',
-                    fragment: resultFragment,
-                    target: swapSpec.target || ctx.target,
+                    fragment,
+                    target: this.#resolveTarget(ctx.sourceElement || document.body, swapSpec.target || ctx.target),
                     swapSpec,
                     sourceElement: ctx.sourceElement,
-                    transition: (ctx.transition !== false) && (swapSpec.transition !== false),
-                    title
+                    transition: (ctx.transition !== false) && (swapSpec.transition !== false)
                 };
                 return mainSwap;
             }
@@ -1350,8 +1336,13 @@ var htmx = (() => {
                 target = document.querySelector(target);
             }
             if (!target) return;
+            if (swapSpec.strip && fragment.firstElementChild) {
+                task.unstripped = fragment;
+                fragment = document.createDocumentFragment();
+                fragment.append(...(task.fragment.firstElementChild.content || task.fragment.firstElementChild).childNodes);
+            }
+
             let pantry = this.#handlePreservedElements(fragment);
-            this.#processScripts(fragment);
             let parentNode = target.parentNode;
             let newContent = [...fragment.childNodes]
             if (swapSpec.style === 'innerHTML') {
@@ -1391,22 +1382,26 @@ var htmx = (() => {
                 return;
             } else if (swapSpec.style === 'none') {
                 return;
-            } else if (!this.#triggerExtensions(target, 'htmx:handle:swap', task)) {
-                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}`);
             }
             this.#restorePreservedElements(pantry);
             for (const elt of newContent) {
-                this.process(elt); // maybe only if isConnected?
+                this.process(elt);
+                this.#handleAutoFocus(elt);
             }
-            if (swapSpec.scroll) this.#handleScroll(target, swapSpec.scroll);
+            this.#handleScroll(task);
         }
 
         #trigger(on, eventName, detail = {}, bubbles = true) {
             if (this.config.logAll) {
                 console.log(eventName, detail, on)
             }
+            on = this.#normalizeElement(on)
+            this.#triggerExtensions(on, this.#maybeAdjustMetaCharacter(eventName), detail);
             return this.trigger(on, eventName, detail, bubbles)
         }
 
@@ -1425,9 +1420,7 @@ var htmx = (() => {
         }
 
         timeout(time) {
-            if (typeof time === "string") {
-                time = this.parseInterval(time)
-            }
+            time = this.parseInterval(time);
             if (time > 0) {
                 return new Promise(resolve => setTimeout(resolve, time));
             }
@@ -1449,8 +1442,19 @@ var htmx = (() => {
             })
         }
 
-        // on(elt, evt, callback)
-        // on(evt, callback)
+        onLoad(callback) {
+            this.on("htmx:after:init", (evt) => {
+                callback(evt.target)
+            })
+        }
+
+        takeClass(element, className, container = element.parentElement) {
+            for (let elt of this.findAll(this.#normalizeElement(container), "." + className)) {
+                elt.classList.remove(className);
+            }
+            element.classList.add(className);
+        }
+
         on(eventOrElt, eventOrCallback, callback) {
             let event;
             let elt = document;
@@ -1474,6 +1478,7 @@ var htmx = (() => {
         }
 
         parseInterval(str) {
+            if (typeof str === 'number') return str;
             let m = {ms: 1, s: 1000, m: 60000};
             let [, n, u] = str?.match(/^([\d.]+)(ms|s|m)?$/) || [];
             let v = parseFloat(n) * (m[u] || 1);
@@ -1482,7 +1487,6 @@ var htmx = (() => {
 
         trigger(on, eventName, detail = {}, bubbles = true) {
             on = this.#normalizeElement(on)
-            this.#triggerExtensions(on, eventName, detail);
             let evt = new CustomEvent(eventName, {
                 detail,
                 cancelable: true,
@@ -1503,17 +1507,22 @@ var htmx = (() => {
 
             let sourceElt = typeof context.source === 'string' ?
                 document.querySelector(context.source) : context.source;
-            let targetElt = context.target ?
-                this.#resolveTarget(sourceElt || document.body, context.target) : sourceElt;
 
-            if ((context.target && !targetElt) || (context.source && !sourceElt)) {
-                return Promise.reject(new Error('Element not found'));
+            // If source selector was provided but didn't match, reject
+            if (typeof context.source === 'string' && !sourceElt) {
+                return Promise.reject(new Error('Source not found'));
+            }
+
+            // Resolve target, defaulting to body only if no source or target provided
+            let target = this.#resolveTarget(document.body, context.target || sourceElt);
+            if (!target) {
+                return Promise.reject(new Error('Target not found'));
             }
 
-            sourceElt = sourceElt || targetElt || document.body;
+            sourceElt ||= target;
 
             let ctx = this.#createRequestContext(sourceElt, context.event || {});
-            Object.assign(ctx, context, {target: targetElt});
+            Object.assign(ctx, context, {target});
             Object.assign(ctx.request, {action: path, method: verb.toUpperCase()});
             if (context.headers) Object.assign(ctx.request.headers, context.headers);
 
@@ -1526,11 +1535,13 @@ var htmx = (() => {
 
         #initHistoryHandling() {
             if (!this.config.history) return;
-            // Handle browser back/forward navigation
+            if (!history.state) {
+                history.replaceState({htmx: true}, '', location.pathname + location.search);
+            }
             window.addEventListener('popstate', (event) => {
                 if (event.state && event.state.htmx) {
                     this.#restoreHistory();
-                }
+                } 
             });
         }
 
@@ -1554,10 +1565,11 @@ var htmx = (() => {
                 } else {
                     this.ajax('GET', path, {
                         target: 'body',
-                        swap: 'outerHTML',
                         request: {headers: {'HX-History-Restore-Request': 'true'}}
                     });
                 }
+            } else if (elt.tagName === "FORM") {
+                return elt.method !== 'dialog' &&  this.#isSameOrigin(elt.action);
             }
         }
 
@@ -1573,7 +1585,7 @@ var htmx = (() => {
             }
 
             let path = push || replace;
-            if (!path || path === 'false') return;
+            if (!path || path === 'false' || path === false) return;
 
             if (path === 'true') {
                 path = ctx.request.originalAction;
@@ -1597,8 +1609,9 @@ var htmx = (() => {
 
         #handleHxOnAttributes(node) {
             for (let attr of node.getAttributeNames()) {
-                if (attr.startsWith(this.#prefix("hx-on:"))) {
-                    let evtName = attr.substring(this.#prefix("hx-on:").length)
+                var searchString = this.#maybeAdjustMetaCharacter(this.#prefix("hx-on:"));
+                if (attr.startsWith(searchString)) {
+                    let evtName = attr.substring(searchString.length)
                     let code = node.getAttribute(attr);
                     node.addEventListener(evtName, async (evt) => {
                         try {
@@ -1662,11 +1675,9 @@ var htmx = (() => {
         }
 
         #collectFormData(elt, form, submitter) {
-            let formData = new FormData()
-            let included = new Set()
-            if (form) {
-                this.#addInputValues(form, included, formData)
-            } else if (elt.name) {
+            let formData = form ? new FormData(form) : new FormData()
+            let included = form ? new Set(form.elements) : new Set()
+            if (!form && elt.name) {
                 formData.append(elt.name, elt.value)
                 included.add(elt);
             }
@@ -1688,21 +1699,21 @@ var htmx = (() => {
             let inputs = this.#queryEltAndDescendants(elt, 'input:not([disabled]), select:not([disabled]), textarea:not([disabled])');
 
             for (let input of inputs) {
-                // Skip elements without a name or already seen
                 if (!input.name || included.has(input)) continue;
                 included.add(input);
 
-                if (input.matches('input[type=checkbox], input[type=radio]')) {
+                let type = input.type;
+                if (type === 'checkbox' || type === 'radio') {
                     // Only add if checked
                     if (input.checked) {
                         formData.append(input.name, input.value);
                     }
-                } else if (input.matches('input[type=file]')) {
+                } else if (type === 'file') {
                     // Add all selected files
                     for (let file of input.files) {
                         formData.append(input.name, file);
                     }
-                } else if (input.matches('select[multiple]')) {
+                } else if (type === 'select-multiple') {
                     // Add all selected options
                     for (let option of input.selectedOptions) {
                         formData.append(input.name, option.value);
@@ -1717,12 +1728,20 @@ var htmx = (() => {
         #handleHxVals(elt, body) {
             let hxValsValue = this.#attributeValue(elt, "hx-vals");
             if (hxValsValue) {
-                if (!hxValsValue.includes('{')) {
-                    hxValsValue = `{${hxValsValue}}`
-                }
-                let obj = JSON.parse(hxValsValue);
-                for (let key in obj) {
-                    body.append(key, obj[key])
+                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])
+                    }
                 }
             }
         }
@@ -1733,11 +1752,13 @@ var htmx = (() => {
         }
 
         #findAllExt(eltOrSelector, maybeSelector, global) {
-            let [elt, selector] = this.#normalizeElementAndSelector(eltOrSelector, maybeSelector)
+            let selector = maybeSelector ?? eltOrSelector;
+            let elt = maybeSelector ? this.#normalizeElement(eltOrSelector) : document;
             if (selector.startsWith('global ')) {
                 return this.#findAllExt(elt, selector.slice(7), true);
             }
-            let parts = this.#tokenizeExtendedSelector(selector);
+            let parts = selector ? selector.replace(/<[^>]+\/>/g, m => m.replace(/,/g, '%2C'))
+                .split(',').map(p => p.replace(/%2C/g, ',')) : [];
             let result = []
             let unprocessedParts = []
             for (const part of parts) {
@@ -1783,28 +1804,6 @@ var htmx = (() => {
             return result
         }
 
-        #normalizeElementAndSelector(eltOrSelector, selector) {
-            if (selector === undefined) {
-                return [document, eltOrSelector];
-            } else {
-                return [this.#normalizeElement(eltOrSelector), selector];
-            }
-        }
-
-        #tokenizeExtendedSelector(selector) {
-            let parts = [], depth = 0, start = 0;
-            for (let i = 0; i <= selector.length; i++) {
-                let c = selector[i];
-                if (c === '<') depth++;
-                else if (c === '/' && selector[i + 1] === '>') depth--;
-                else if ((c === ',' && !depth) || i === selector.length) {
-                    if (i > start) parts.push(selector.substring(start, i));
-                    start = i + 1;
-                }
-            }
-            return parts;
-        }
-
         #scanForwardQuery(start, match, global) {
             return this.#scanUntilComparison(this.#getRootNode(start, global).querySelectorAll(match), start, Node.DOCUMENT_POSITION_PRECEDING);
         }
@@ -2060,16 +2059,18 @@ var htmx = (() => {
 
         #handleStatusCodes(ctx) {
             let status = ctx.response.raw.status;
-            if (this.config.noSwap.includes(status)) {
-                ctx.swap = "none";
-            }
+            let noSwapStrings = this.config.noSwap.map(x => x + "");
             let str = status + ""
             for (let pattern of [str, str.slice(0, 2) + 'x', str[0] + 'xx']) {
-                let swap = this.#attributeValue(ctx.sourceElement, "hx-status:" + pattern);
-                if (swap) {
-                    ctx.swap = swap
+                if (noSwapStrings.includes(pattern)) {
+                    ctx.swap = "none";
                     return
                 }
+                let statusValue = this.#attributeValue(ctx.sourceElement, "hx-status:" + pattern);
+                if (statusValue) {
+                    Object.assign(ctx, this.#parseConfig(statusValue));
+                    return;
+                }
             }
         }
 
@@ -2083,7 +2084,7 @@ var htmx = (() => {
             });
         }
 
-        async __processTransitionQueue() {
+        async #processTransitionQueue() {
             if (this.#transitionQueue.length === 0 || this.#processingTransition) {
                 return;
             }
@@ -2093,9 +2094,8 @@ var htmx = (() => {
 
             try {
                 if (document.startViewTransition) {
-                    let finished = document.startViewTransition(task).finished;
-                    this.#trigger(document, "htmx:before:viewTransition", {task, finished})
-                    await finished;
+                    this.#trigger(document, "htmx:before:viewTransition", {task})
+                    await document.startViewTransition(task).finished;
                     this.#trigger(document, "htmx:after:viewTransition", {task})
                 } else {
                     task();
@@ -2133,8 +2133,17 @@ var htmx = (() => {
                 return cssOrElement
             }
         }
+
+        #maybeAdjustMetaCharacter(string) {
+            if (this.config.metaCharacter) {
+                return string.replace(/:/g, this.config.metaCharacter);
+            } else {
+                return string;
+            }
+        }
     }
 
     return new Htmx()
 })()
+
 export default htmx