Merge remote-tracking branch 'origin/four-dev' into four-dev

Author: 1cg

src/htmx.js

@@ -343,34 +343,23 @@ var htmx = (() => {
         }
 
         __determineMethodAndAction(elt, evt) {
-            if (this.__isBoosted(elt)) {
-                return this.__boostedMethodAndAction(elt, evt)
-            } else {
-                let method = this.__attributeValue(elt, "hx-method") || "GET"
-                let action = this.__attributeValue(elt, "hx-action");
-                if (!action) {
-                    for (let verb of this.#verbs) {
-                        let verbAction = this.__attributeValue(elt, "hx-" + verb);
-                        if (verbAction != null) {
-                            action = verbAction;
-                            method = verb;
-                            break;
-                        }
+            let method = this.__attributeValue(elt, "hx-method");
+            let action = this.__attributeValue(elt, "hx-action");
+            if (!action) {
+                for (let verb of this.#verbs) {
+                    let verbAction = this.__attributeValue(elt, "hx-" + verb);
+                    if (verbAction != null) {
+                        action = verbAction;
+                        method = verb;
+                        break;
                     }
                 }
-                method = method.toUpperCase()
-                return {action, method}
             }
-        }
-
-        __boostedMethodAndAction(elt, evt) {
-            if (elt.matches("a")) {
-                return {action: elt.getAttribute("href"), method: "GET"}
-            } else {
-                let action = evt.submitter?.getAttribute?.("formAction") || elt.getAttribute("action");
-                let method = evt.submitter?.getAttribute?.("formMethod") || elt.getAttribute("method") || "GET";
-                return {action, method: method.toUpperCase()}
+            if (this.__isBoosted(elt)) {
+                action ||= evt.submitter?.getAttribute?.("formAction") || elt.getAttribute(elt.matches("a") ? "href" : "action");
             }
+            method ||= evt.submitter?.getAttribute?.("formmethod") || elt.getAttribute("method") || "GET";
+            return {action, method: method.toUpperCase()};
         }
 
         __htmxProp(elt) {
@@ -2060,6 +2049,7 @@ var htmx = (() => {
                     let placeholder = document.createElement(newChild.tagName);
                     oldParent.insertBefore(placeholder, insertionPoint);
                     this.__morphNode(placeholder, newChild, ctx);
+                    this.process(placeholder);
                     insertionPoint = placeholder.nextSibling;
                 } else {
                     oldParent.insertBefore(newChild, insertionPoint);
@@ -2127,10 +2117,6 @@ var htmx = (() => {
             }
             // Script tags must be identical to match - never patch a script with different content
             if (oldNode.tagName === 'SCRIPT' && !oldNode.isEqualNode(newNode)) return false;
-            // If both have Alpine reactive ID bindings, ignore ID mismatch
-            if (oldNode._x_bindings?.id && newNode.matches?.('[\\:id], [x-bind\\:id]')) {
-                return true;
-            }
             return !oldNode.id || oldNode.id === newNode.id;
         }
 

test/lib/helpers.js

@@ -52,6 +52,7 @@ function setupTest(test) {
 function cleanupTest() {
     let pg = playground()
     if (pg && !testDebugging) {
+        htmx.__cleanup(pg)
         pg.innerHTML = ''
     }
     testDebugging = false;

test/test.html

@@ -131,6 +131,7 @@
     <!-- ============================================ -->
     <!-- Attribute Tests -->
     <!-- ============================================ -->
+    <script src="./tests/attributes/hx-action.js"></script>
     <script src="./tests/attributes/hx-boost.js"></script>
     <script src="./tests/attributes/hx-config.js"></script>
     <script src="./tests/attributes/hx-confirm.js"></script>

test/tests/attributes/hx-action.js

@@ -0,0 +1,56 @@
+describe('hx-action attribute', function() {
+
+    beforeEach(() => {
+        setupTest(this.currentTest)
+    })
+
+    afterEach(() => {
+        cleanupTest(this.currentTest)
+    })
+
+    it('hx-action alone defaults to GET', async function() {
+        mockResponse('GET', '/test', 'Clicked!')
+        let btn = createProcessedHTML('<button hx-action="/test">Click Me!</button>')
+        btn.click()
+        await forRequest()
+        fetchMock.calls[0].request.method.should.equal('GET')
+        btn.innerHTML.should.equal('Clicked!')
+    })
+
+    it('hx-action with hx-method uses specified method', async function() {
+        mockResponse('POST', '/test', 'Posted!')
+        let btn = createProcessedHTML('<button hx-action="/test" hx-method="post">Click Me!</button>')
+        btn.click()
+        await forRequest()
+        fetchMock.calls[0].request.method.should.equal('POST')
+        btn.innerHTML.should.equal('Posted!')
+    })
+
+    it('hx-action on form picks up native method attribute', async function() {
+        mockResponse('POST', '/test', 'Posted!')
+        let form = createProcessedHTML('<form hx-action="/test" hx-swap="outerHTML" method="post"><button>Submit</button></form>')
+        form.requestSubmit()
+        await forRequest()
+        fetchMock.calls[0].request.method.should.equal('POST')
+        playground().innerHTML.should.equal('Posted!')
+    })
+
+    it('hx-action on form with submitter formmethod uses formmethod', async function() {
+        mockResponse('POST', '/test', 'Posted!')
+        let form = createProcessedHTML('<form hx-action="/test" hx-swap="outerHTML" method="get"><button id="b1" formmethod="post">Submit</button></form>')
+        find('#b1').click()
+        await forRequest()
+        fetchMock.calls[0].request.method.should.equal('POST')
+        playground().innerHTML.should.equal('Posted!')
+    })
+
+    it('hx-action with hx-method takes priority over native method attribute', async function() {
+        mockResponse('PUT', '/test', 'Put!')
+        let form = createProcessedHTML('<form hx-action="/test" hx-method="put" hx-swap="outerHTML" method="post"><button>Submit</button></form>')
+        form.requestSubmit()
+        await forRequest()
+        fetchMock.calls[0].request.method.should.equal('PUT')
+        playground().innerHTML.should.equal('Put!')
+    })
+
+})

test/tests/ext/hx-live.js

@@ -1470,6 +1470,26 @@ describe('hx-live extension', function () {
         window.__spreadDataLive.should.not.have.property('htmxPowered');
     });
 
+    it('spreads cascading data values into hx-vals', async function() {
+        mockResponse('POST', '/cursor', 'OK');
+        playground().innerHTML = `
+            <section data-x="1" data-y="2">
+                <button data-y="3"
+                        hx-post="/cursor"
+                        hx-vals="js:{ ...data }">
+                    Send cursor
+                </button>
+            </section>
+        `;
+        htmx.process(playground());
+
+        playground().querySelector('button').click();
+        await forRequest();
+
+        fetchMock.calls[0].request.body.get('x').should.equal('1');
+        fetchMock.calls[0].request.body.get('y').should.equal('3');
+    });
+
     it('data proxy supports Object.keys/Object.values/Object.entries', async function() {
         playground().innerHTML = `
             <section data-x="1" data-y="2">
@@ -1522,6 +1542,44 @@ describe('hx-live extension', function () {
         div.classList.contains('darkmode').should.equal(true);
     });
 
+    it('updates and clears flash state from a targeted server event', async function() {
+        let originalSetTimeout = window.setTimeout;
+        window.setTimeout = (fn, delay, ...args) => originalSetTimeout(fn, delay === 3000 ? 20 : delay, ...args);
+
+        try {
+            playground().innerHTML = `
+                <button id="source"></button>
+                <div id="flash"
+                     data-message=""
+                     data-level=""
+                     hx-on="flash -> data.message = message; data.level = level;
+                                     await timeout(3000);
+                                     data.message = ''"
+                     :text="data.message"
+                     :.success="data.level === 'success'"
+                     :.error="data.level === 'error'"></div>
+            `;
+            htmx.process(playground());
+            let source = playground().querySelector('#source');
+            let flash = playground().querySelector('#flash');
+
+            htmx.__handleTriggerHeader('{"flash":{"target":"#flash", "level":"success", "message":"Saved"}}', source);
+            flash.dataset.message.should.equal('Saved');
+            flash.dataset.level.should.equal('success');
+
+            await htmx.timeout(5);
+            flash.textContent.should.equal('Saved');
+            flash.classList.contains('success').should.equal(true);
+            flash.classList.contains('error').should.equal(false);
+
+            await htmx.timeout(30);
+            flash.dataset.message.should.equal('');
+            flash.textContent.should.equal('');
+        } finally {
+            window.setTimeout = originalSetTimeout;
+        }
+    });
+
     it('style scope helper accesses this.style', async function() {
         playground().innerHTML = `
             <div id="me" hx-on:click="style.color = 'red'">x</div>

test/tests/unit/__handleTriggerHeader.js

@@ -141,4 +141,81 @@ describe('__handleTriggerHeader unit tests', function() {
         assert.equal(eventDetail.value, 42)
     })
 
+    it('works with hx-on listeners using from:body', function () {
+        let root = createProcessedHTML(`
+            <div>
+                <button id="source"></button>
+                <div id="listener" hx-on="myEvent from:body -> this.classList.add('updated')"></div>
+            </div>
+        `)
+        let source = root.querySelector('#source')
+        let listener = root.querySelector('#listener')
+
+        htmx.__handleTriggerHeader('myEvent', source)
+
+        assert.isTrue(listener.classList.contains('updated'))
+    })
+
+    it('exposes scalar event detail as value in hx-on handlers', function () {
+        let root = createProcessedHTML(`
+            <div>
+                <button id="source"></button>
+                <div id="listener" hx-on="notification from:body -> this.dataset.value = value"></div>
+            </div>
+        `)
+        let source = root.querySelector('#source')
+        let listener = root.querySelector('#listener')
+
+        htmx.__handleTriggerHeader('{"notification":"Hello World"}', source)
+
+        assert.equal(listener.dataset.value, 'Hello World')
+    })
+
+    it('exposes nested event detail properties in hx-on handlers', function () {
+        let root = createProcessedHTML(`
+            <div>
+                <button id="source"></button>
+                <div id="listener" hx-on="notification from:body -> this.dataset.level = level; this.textContent = message"></div>
+            </div>
+        `)
+        let source = root.querySelector('#source')
+        let listener = root.querySelector('#listener')
+
+        htmx.__handleTriggerHeader('{"notification":{"level":"info", "message":"Saved"}}', source)
+
+        assert.equal(listener.dataset.level, 'info')
+        assert.equal(listener.textContent, 'Saved')
+    })
+
+    it('fires multiple events with independent detail values for hx-on handlers', function () {
+        let root = createProcessedHTML(`
+            <div>
+                <button id="source"></button>
+                <div id="listener" hx-on="notification from:body -> this.textContent = value; refreshList from:body -> this.dataset.refresh = value"></div>
+            </div>
+        `)
+        let source = root.querySelector('#source')
+        let listener = root.querySelector('#listener')
+
+        htmx.__handleTriggerHeader('{"notification":"Saved", "refreshList":true}', source)
+
+        assert.equal(listener.textContent, 'Saved')
+        assert.equal(listener.dataset.refresh, 'true')
+    })
+
+    it('dispatches targeted events to the selected element', function () {
+        let root = createProcessedHTML(`
+            <div>
+                <button id="source"></button>
+                <div id="notifications" hx-on="notification -> this.textContent = message"></div>
+            </div>
+        `)
+        let source = root.querySelector('#source')
+        let notifications = root.querySelector('#notifications')
+
+        htmx.__handleTriggerHeader('{"notification":{"target":"#notifications", "message":"Saved"}}', source)
+
+        assert.equal(notifications.textContent, 'Saved')
+    })
+
 });

test/tests/unit/morph.js

@@ -638,6 +638,37 @@ describe('Morph Swap Styles Tests', function() {
             assert.equal(container.querySelector('#result').textContent, 'Clicked!', 'htmx actions on new div should work');
         });
 
+        it('processes hx-* on tag-changing outerMorph when new root has a persistent child id (issue #3882)', async function() {
+            // The bug: when outerMorph changes the root tag (div→form) AND the new root
+            // contains a child with a persistent id, __morphChildren creates a placeholder
+            // element instead of reusing the fragment node. newContent then holds the
+            // detached fragment node, so process() bails on !isConnected and hx-* attrs
+            // on the new root are never initialized.
+            mockResponse('GET', '/test',
+                '<form id="target" hx-post="/submit"><input id="same-child-id" name="q"></form>');
+            const container = createProcessedHTML(
+                '<div><div id="target"><input id="same-child-id" name="q"></div><div id="result"></div></div>');
+            const childInput = container.querySelector('#same-child-id');
+
+            await htmx.ajax('GET', '/test', {target: '#target', swap: 'outerMorph'});
+
+            const newForm = container.querySelector('#target');
+            assert.isNotNull(newForm, 'new form should be in the DOM');
+            assert.equal(newForm.tagName, 'FORM', 'root tag should have changed to FORM');
+            assert.equal(container.querySelector('#same-child-id'), childInput,
+                'persistent child should be the same node');
+            assert.equal(newForm.getAttribute('data-htmx-powered'), 'true',
+                'new form root must be processed so hx-post works');
+
+            mockResponse('POST', '/submit', 'Submitted!');
+            newForm.dispatchEvent(new Event('submit', {bubbles: true}));
+            await waitForEvent('htmx:after:swap', 100);
+
+            assert.equal(container.querySelector('#result') ??
+                container.querySelector('#target'), container.querySelector('#result') ??
+                newForm, 'swap target should be reachable');
+        });
+
         it('does not stack hx-on:click handlers across innerMorph', async function() {
             window._calls = 0;
             mockResponse('GET', '/test', '<button id="btn" hx-on:click="window._calls++">v</button>');

www/src/components/PageHeader.astro

@@ -144,6 +144,7 @@ const primaryAuthor = byline?.authors[0];
     h1 {
         flex: 1;
         min-width: 0;
+        overflow-wrap: anywhere;
         font-family: var(--font-chicago);
         letter-spacing: var(--tracking-tightest);
         font-size: 1.5rem;

www/src/content/docs.mdx

@@ -357,7 +357,7 @@ All events follow a new pattern: `htmx:phase:action[:sub-action]`. Most error ev
 | `HX-Trigger-Name` | [`HX-Source`](/reference/headers/HX-Source)             | removed         | —                                                     |
 | `HX-Prompt`       | [`hx-prompt` extension](/extensions/hx-prompt)          | restored by ext | Load the extension.                                   |
 | —                 | [`HX-Request-Type`](/reference/headers/HX-Request-Type) | new             | `"full"` or `"partial"`.                          |
-| —                 | [`Accept`](/reference/headers/Accept)                   | new             | Now explicitly `text/html`.                           |
+| —                 | `Accept`                                                | new             | Core requests send `text/html`; [`hx-sse`](/extensions/hx-sse#request-headers) adds `text/event-stream`. |
 
 #### Response headers
 
@@ -400,8 +400,8 @@ Still available: `htmx.ajax()`, `htmx.config`, `htmx.find()`, `htmx.findAll()`,
 
 | Attribute                                          | Purpose                                                               |
 |----------------------------------------------------|-----------------------------------------------------------------------|
-| [`hx-action`](/reference/attributes/hx-action)     | Specify URL (use with [`hx-method`](/reference/attributes/hx-method)) |
-| [`hx-method`](/reference/attributes/hx-method)     | Specify HTTP method                                                   |
+| [`hx-action`](/reference/attributes/hx-action)     | Specify URL, with optional [`hx-method`](/reference/attributes/hx-method). Supports progressive enhancement via native `action`/`method` fallback |
+| [`hx-method`](/reference/attributes/hx-method)     | Specify HTTP method (overrides native `method` and `formmethod`)      |
 | [`hx-config`](/reference/attributes/hx-config)     | Per-element request config (JSON or `key:value` syntax)               |
 | [`hx-ignore`](/reference/attributes/hx-ignore)     | Disable htmx processing (was `hx-disable`)                            |
 | [`hx-validate`](/reference/attributes/hx-validate) | Control form validation behavior                                      |
@@ -1027,7 +1027,7 @@ Use different attributes for different operations:
 <button hx-delete="/users/1">Delete User</button>
 ```
 
-Each attribute combines the URL and HTTP method.
+Each attribute combines the URL and HTTP method. Alternatively, use [`hx-action`](/reference/attributes/hx-action) and [`hx-method`](/reference/attributes/hx-method) to separate them — useful when the method is dynamic, or when you want progressive enhancement with native `action`/`method` fallback.
 
 #### Common Patterns
 

www/src/content/extensions/02-hx-sse.md

@@ -23,6 +23,16 @@ The SSE extension hooks into htmx's request pipeline. When any htmx request rece
 
 This means **any [`hx-get`](/reference/attributes/hx-get), [`hx-post`](/reference/attributes/hx-post), etc. that returns an SSE stream will just work**, no special attributes needed beyond loading the extension.
 
+## Request Headers
+
+With this extension loaded, outgoing htmx requests advertise SSE support:
+
+```http
+Accept: text/html, text/event-stream
+```
+
+Core htmx requests set `Accept: text/html`. The SSE extension adds `text/event-stream` so the server can return an SSE stream for any htmx request.
+
 ## `hx-sse:connect`
 
 For persistent SSE connections (auto-connect on load, reconnect on failure), use `hx-sse:connect`: