htmx.org 4.0.0-alpha1 → 4.0.0-alpha2

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-alpha2',
                 logAll: false,
                 prefix: "",
                 transitions: true,
@@ -109,7 +111,8 @@ 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) {
@@ -124,7 +127,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 +147,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,31 +179,40 @@ 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);
+                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 defaultVal;
+            return returnElt ? elt : defaultVal;
         }
 
         #tokenize(str) {
@@ -263,13 +277,13 @@ var htmx = (() => {
             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;
                         }
@@ -342,8 +356,8 @@ var htmx = (() => {
                 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 (requestConfig[actualKey] && typeof requestConfig[actualKey] === 'object') {
+                            Object.assign(requestConfig[actualKey], configOverrides[key]);
                         } else {
                             requestConfig[actualKey] = configOverrides[key];
                         }
@@ -351,8 +365,14 @@ var htmx = (() => {
                         requestConfig[key] = configOverrides[key];
                     }
                 }
+                if (requestConfig.etag) {
+                    sourceElement._htmx ||= {}
+                    sourceElement._htmx.etag ||= requestConfig.etag
+                }
+            }
+            if (sourceElement._htmx?.etag) {
+                ctx.request.headers["If-none-match"] = sourceElement._htmx.etag
             }
-
             return ctx;
         }
 
@@ -375,11 +395,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 +406,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
@@ -419,7 +435,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 +468,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);
@@ -469,11 +485,11 @@ var htmx = (() => {
 
             try {
                 // Confirm dialog
-                let confirmVal = this.#attributeValue(elt, 'hx-confirm')
+                let confirmVal = this.#attributeValue(elt, 'hx-confirm');
                 if (confirmVal) {
                     let js = this.#extractJavascriptContent(confirmVal);
                     if (js) {
-                        if (!await this.#executeJavaScriptAsync(ctx.elt, {}, js, true)) {
+                        if (!await this.#executeJavaScriptAsync(elt, {}, js, true)) {
                             return
                         }
                     } else {
@@ -483,10 +499,10 @@ var htmx = (() => {
                     }
                 }
 
-                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 +510,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 +526,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.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 +554,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 +564,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);
             }
@@ -570,9 +587,13 @@ 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) {
+        async #handleSSE(ctx, elt, response) {
             let config = elt._htmx?.streamConfig || {...this.config.streams};
 
             let waitForVisible = () => new Promise(r => {
@@ -650,9 +671,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,23 +688,56 @@ 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();
             }
         }
 
@@ -961,7 +1013,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 +1054,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 +1150,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-partial(\s+|>)/gi, '<template partial$1').replace(/<\/hx-partial>/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 +1167,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 +1197,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);
                     }
@@ -1222,13 +1274,42 @@ var htmx = (() => {
             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;
+                let [selectorOrValue, value] = task.swapSpec.scroll.split(":");
+                if (value) {
+                    target = this.#findExt(selectorOrValue);
+                } else {
+                    target = task.target;
+                    value = selectorOrValue
+                }
+                if (value === 'top') {
+                    target.scrollTop = 0;
+                } else if (value === 'bottom'){
+                    target.scrollTop = target.scrollHeight;
+                }
+            }
+            if (task.swapSpec.show) {
+                let target;
+                let [selectorOrValue, value] = task.swapSpec.show.split(":");
+                if (value) {
+                    target = this.#findExt(selectorOrValue);
+                } else {
+                    target = task.target;
+                    value = selectorOrValue
+                }
+                target.scrollIntoView(value === '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,7 +1335,9 @@ var htmx = (() => {
         //============================================================================================
 
         async swap(ctx) {
+            this.#handleHistoryUpdate(ctx);
             let {fragment, title} = this.#makeFragment(ctx.text);
+            ctx.title = title;
             let tasks = [];
 
             // Process OOB and partials
@@ -1263,7 +1346,7 @@ var htmx = (() => {
             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);
             }
@@ -1299,7 +1382,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 +1390,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,
+                    fragment,
                     target: 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 +1427,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 +1473,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)
         }
 
@@ -1449,8 +1535,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;
@@ -1482,7 +1579,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,14 +1599,18 @@ var htmx = (() => {
 
             let sourceElt = typeof context.source === 'string' ?
                 document.querySelector(context.source) : context.source;
+
+            // TODO we have a contradiction here: the tests say that we should default to the source element
+            // but the logic here targets the source element
             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 (!targetElt) {
+                return Promise.reject(new Error('Target not found'));
             }
 
-            sourceElt = sourceElt || targetElt || document.body;
+            // TODO is this logic correct?
+            sourceElt ||= targetElt || document.body;
 
             let ctx = this.#createRequestContext(sourceElt, context.event || {});
             Object.assign(ctx, context, {target: targetElt});
@@ -1526,11 +1626,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 +1656,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);
             }
         }
 
@@ -1597,8 +1700,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 {
@@ -2060,16 +2164,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
                 }
+                if (swap) {
+                    ctx.swap = swap;
+                    return;
+                }
             }
         }
 
@@ -2083,7 +2189,7 @@ var htmx = (() => {
             });
         }
 
-        async __processTransitionQueue() {
+        async #processTransitionQueue() {
             if (this.#transitionQueue.length === 0 || this.#processingTransition) {
                 return;
             }
@@ -2093,9 +2199,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 +2238,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