Merge pull request #268 from benpate/pullrequest-ignore-extensions

Add "ignore:" command for extensions

thank you!

src/htmx.js

@@ -2181,24 +2181,33 @@ return (function () {
             delete extensions[name];
         }
 
-        function getExtensions(elt, extensionsToReturn) {
+        function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
-            if (elt == null) {
+            if (elt == undefined) {
                 return extensionsToReturn;
             }
-            if (extensionsToReturn == null) {
+            if (extensionsToReturn == undefined) {
                 extensionsToReturn = [];
             }
+            if (extensionsToIgnore == undefined) {
+                extensionsToIgnore = [];
+            }
             var extensionsForElement = getAttributeValue(elt, "hx-ext");
             if (extensionsForElement) {
                 forEach(extensionsForElement.split(","), function(extensionName){
                     extensionName = extensionName.replace(/ /g, '');
-                    var extension = extensions[extensionName];
+                    if (extensionName.slice(0, 7) == "ignore:") {
-                    if (extension && extensionsToReturn.indexOf(extension) < 0) {
+                        extensionsToIgnore.push(extensionName.slice(7));
-                        extensionsToReturn.push(extension);
+                        return;
+                    }
+                    if (extensionsToIgnore.indexOf(extensionName) < 0) {
+                        var extension = extensions[extensionName];
+                        if (extension && extensionsToReturn.indexOf(extension) < 0) {
+                            extensionsToReturn.push(extension);
+                        }
                     }
                 });
             }
-            return getExtensions(parentElt(elt), extensionsToReturn);
+            return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore);
         }
 
         //====================================================================

test/attributes/hx-ext.js

@@ -110,7 +110,29 @@ describe("hx-ext attribute", function() {
         ext2Calls.should.equal(0);
         ext3Calls.should.equal(0);
         ext4Calls.should.equal(1);
+
     });
 
+    it('Extensions are ignored properly', function () {
+        this.server.respondWith("GET", "/test", "Clicked!");
+
+        make('<div id="div-AA" hx-ext="ext-1, ext-2"><button id="btn-AA" hx-get="/test">Click Me!</button>' +
+            '<div id="div-BB" hx-ext="ignore:ext-1"><button id="btn-BB" hx-get="/test"></div></div>')
+
+        var btn1 = byId("btn-AA");
+        var btn2 = byId("btn-BB");
+
+        btn1.click();
+        this.server.respond();
+        ext1Calls.should.equal(1);
+        ext2Calls.should.equal(1);
+        ext3Calls.should.equal(0);
+
+        btn2.click();
+        this.server.respond();
+        ext1Calls.should.equal(1);
+        ext2Calls.should.equal(2);
+        ext3Calls.should.equal(0);
+    })
 
 });

www/attributes/hx-ext.md

@@ -16,3 +16,16 @@ and on the `body` tag for it to apply to all htmx requests.
 
 * `hx-ext` is both inherited and merged with parent elements, so you can specify extensions on any element in the DOM 
 hierarchy and it will apply to all child elements. 
+
+* You can ignore an extension that is defined by a parent node using `hx-ext="ignore:extensionName"` 
+
+
+```html
+<div ext="example">
+  "Example" extension is used in this part of the tree...
+  <div ext="ignore:example">
+    ... but it will not be used in this part.
+  </div>
+</div>
+```
+

www/docs.md

@@ -636,7 +636,10 @@ Htmx has an extension mechanism that allows you to customize the libraries' beha
 defined in javascript](/extensions#defining) and then used via the [`hx-ext`](/attributes/hx-ext) attribute:
 
 ```html
-  <button hx-post="/example" hx-ext="debug">This button uses the debug extension</button>
+<div hx-ext="debug">
+  <button hx-post="/example">This button used the debug extension</button>
+  <button hx-post="/example" hx-ext="ignore:debug">This button does not</button>
+</div>
 ```
 
 If you are interested in adding your own extension to htmx, please [see the extension docs](/extensions)

www/extensions.md

@@ -33,6 +33,18 @@ and on the `body` tag for it to apply to all htmx requests.
   <button hx-post="/example" hx-ext="debug, json-enc">This Button Uses Two Extensions</button>
 ```
 
+## <a name="ignore"></a> [Ignoring Extensions](#ignoring)
+
+By default, extensions are applied to the DOM node where it is invoked, along with all child elements inside of that parent node.
+If you need to disable an extension somewhere within the DOM tree, you can use the `ignore:` keyword to stop it from being used.
+
+```html
+<div hx-ext="debug">
+  <button hx-post="/example">This button used the debug extension</button>
+  <button hx-post="/example" hx-ext="ignore:debug">This button does not</button>
+</div>
+```
+
 ## <a name="included"></a> [Included Extensions](#included)
 
 htmx includes a set of extensions out of the box that address common developer needs.  These extensions are tested