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

src/ext/class-tools.js

@@ -69,7 +69,7 @@
 
     htmx.defineExtension('class-tools', {
         onEvent: function (name, evt) {
-            if (name === "htmx:processedNode") {
+            if (name === "htmx:afterProcessNode") {
                 var elt = evt.detail.elt;
                 maybeProcessClasses(elt);
                 if (elt.querySelectorAll) {

src/ext/preload.js

@@ -6,8 +6,8 @@ htmx.defineExtension("preload", {
 
 	onEvent: function(name, event) {
 
-		// Only take actions on "htmx:processedNode"
+		// Only take actions on "htmx:afterProcessNode"
-		if (name !== "htmx:processedNode") {
+		if (name !== "htmx:afterProcessNode") {
 			return;
 		}
 

src/ext/remove-me.js

@@ -10,7 +10,7 @@
 
     htmx.defineExtension('remove-me', {
         onEvent: function (name, evt) {
-            if (name === "htmx:processedNode") {
+            if (name === "htmx:afterProcessNode") {
                 var elt = evt.detail.elt;
                 if (elt.getAttribute) {
                     maybeRemoveMe(elt);

src/htmx.js

@@ -1250,6 +1250,7 @@ return (function () {
             var nodeData = getInternalData(elt);
             if (!nodeData.initialized) {
                 nodeData.initialized = true;
+                triggerEvent(elt, "htmx:beforeProcessNode")
 
                 if (elt.value) {
                     nodeData.lastValue = elt.value;
@@ -1271,7 +1272,7 @@ return (function () {
                 if (wsInfo) {
                     processWebSocketInfo(elt, nodeData, wsInfo);
                 }
-                triggerEvent(elt, "htmx:processedNode");
+                triggerEvent(elt, "htmx:afterProcessNode");
             }
         }
 
@@ -1305,7 +1306,7 @@ return (function () {
         }
 
         function ignoreEventForLogging(eventName) {
-            return eventName === "htmx:processedNode"
+            return eventName === "htmx:afterProcessNode"
         }
 
         function withExtensions(elt, toDo) {

test/core/events.js

@@ -292,5 +292,59 @@ describe("Core htmx Events", function() {
         }
     });
 
+    it("htmx:beforeProcessNode is called when replacing outerHTML", function () {
+        var called = false;
+        var handler = htmx.on("htmx:beforeProcessNode", function (evt) {
+            called = true;
+        });
+        try {
+            this.server.respondWith("POST", "/test", function (xhr) {
+                xhr.respond(200, {}, "<button>Bar</button>");
+            });
+            var div = make("<button hx-post='/test' hx-swap='outerHTML'>Foo</button>");
+            div.click();
+            this.server.respond();
+            should.equal(called, true);
+        } finally {
+            htmx.off("htmx:beforeProcessNode", handler);
+        }
+    });
+
+    it("htmx:beforeProcessNode allows htmx attribute tweaking", function () {
+        var called = false;
+        var handler = htmx.on("htmx:beforeProcessNode", function (evt) {
+            evt.target.setAttribute("hx-post", "/success")
+            called = true;
+        });
+        try {
+            this.server.respondWith("POST", "/success", function (xhr) {
+                xhr.respond(200, {}, "<button>Bar</button>");
+            });
+            var div = make("<button hx-post='/fail' hx-swap='outerHTML'>Foo</button>");
+            div.click();
+            this.server.respond();
+            should.equal(called, true);
+        } finally {
+            htmx.off("htmx:beforeProcessNode", handler);
+        }
+    });
+
+    it("htmx:afterProcessNode is called after replacing outerHTML", function () {
+        var called = false;
+        var handler = htmx.on("htmx:afterProcessNode", function (evt) {
+            called = true;
+        });
+        try {
+            this.server.respondWith("POST", "/test", function (xhr) {
+                xhr.respond(200, {}, "<button>Bar</button>");
+            });
+            var div = make("<button hx-post='/test' hx-swap='outerHTML'>Foo</button>");
+            div.click();
+            this.server.respond();
+            should.equal(called, true);
+        } finally {
+            htmx.off("htmx:afterProcessNode", handler);
+        }
+    });
 });
 

www/events.md

@@ -20,6 +20,14 @@ has been swapped or settled yet, only that the request has finished.
 * `detail.target` - the target of the request
 * `detail.requestConfig` - the configuration of the AJAX request
 
+### <a name="htmx:afterProcessNode"></a> Event - [`htmx:afterProcessNode`](#htmx:afterProcessNode)
+
+This event is triggered after htmx has initialized a DOM node.  It can be useful for extensions to build additional features onto a node.
+
+##### Details
+
+* `detail.elt` - the element that dispatched the request
+
 ### <a name="htmx:afterRequest"></a> Event - [`htmx:afterRequest`](#htmx:afterRequest)
 
 This event is triggered after an AJAX request has finished either in the case of a successful request (although
@@ -66,6 +74,14 @@ This event is triggered before any response processing occurs.  If the event is
 * `detail.target` - the target of the request
 * `detail.requestConfig` - the configuration of the AJAX request
 
+### <a name="htmx:beforeProcessNode"></a> Event - [`htmx:beforeProcessNode`](#htmx:beforeProcessNode)
+
+This event is triggered before htmx initializes a DOM node and has processed all of its `hx-` attributes.  This gives extensions and other external code the ability to modify the contents of a DOM node before it is processed.
+
+##### Details
+
+* `detail.elt` - the element that dispatched the request
+
 ### <a name="htmx:beforeRequest"></a> Event - [`htmx:beforeRequest`](#htmx:beforeRequest)
 
 This event is triggered before an AJAX request is issued.  If the event is cancelled, no request will occur.

www/reference.md

@@ -104,10 +104,12 @@ title: </> htmx - Attributes
 | Event | Description |
 |-------|-------------|
 | [`htmx:afterOnLoad`](/events#htmx:afterOnLoad) | triggered after an AJAX request has completed processing a successful response
+| [`htmx:afterProcessNode`](/events#htmx:afterProcessNode) | triggered after htmx has initialized a node
 | [`htmx:afterRequest`](/events#htmx:afterRequest)  | triggered after an AJAX request has completed
 | [`htmx:afterSettle`](/events#htmx:afterSettle)  | triggered after the DOM has settled
 | [`htmx:afterSwap`](/events#htmx:afterSwap)  | triggered after new content has been swapped in
 | [`htmx:beforeOnLoad`](/events#htmx:beforeOnLoad)  | triggered before any response processing occurs
+| [`htmx:beforeProcessNode`](/events#htmx:afterProcessNode) | triggered before htmx initializes a node
 | [`htmx:beforeRequest`](/events#htmx:beforeRequest)  | triggered before an AJAX request is made
 | [`htmx:beforeSwap`](/events#htmx:beforeSwap)  | triggered before a swap is done
 | [`htmx:configRequest`](/events#htmx:configRequest)  | triggered before the request, allows you to customize parameters, headers

www/test/1.1.0/src/ext/class-tools.js

@@ -69,7 +69,7 @@
 
     htmx.defineExtension('class-tools', {
         onEvent: function (name, evt) {
-            if (name === "htmx:processedNode") {
+            if (name === "htmx:afterProcessNode") {
                 var elt = evt.detail.elt;
                 maybeProcessClasses(elt);
                 if (elt.querySelectorAll) {