path-deps extension

fixes #21
bigskysoftware · May 24, 2020 · 23a9a33 · 23a9a33
1 parent 2996827
commit 23a9a33
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 1 deletion.
diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js
@@ -0,0 +1,36 @@
+(function(){
+    function dependsOn(pathSpec, url) {
+        var dependencyPath = pathSpec.split("/");
+        var urlPath = url.split("/");
+        for (var i = 0; i < urlPath.length; i++) {
+            var dependencyElement = dependencyPath.shift();
+            var pathElement = urlPath[i];
+            if (dependencyElement !== pathElement && dependencyElement !== "*") {
+                return false;
+            }
+            if (dependencyPath.length === 0 || (dependencyPath.length === 1 && dependencyPath[0] === "")) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    htmx.defineExtension('path-deps', {
+        onEvent: function (name, evt) {
+            if (name === "afterRequest.htmx") {
+                var xhr = evt.detail.xhr;
+                console.log(xhr);
+                // mutating call
+                if (xhr.method !== "GET") {
+                    var eltsWithDeps = htmx.findAll("[path-deps]");
+                    for (var i = 0; i < eltsWithDeps.length; i++) {
+                        var elt = eltsWithDeps[i];
+                        if (dependsOn(elt.getAttribute('path-deps'), xhr.url)) {
+                            htmx.trigger(elt, "path-deps");
+                        }
+                    }
+                }
+            }
+        }
+    });
+})();
diff --git a/src/htmx.js b/src/htmx.js
@@ -804,6 +804,9 @@ var htmx = htmx || (function () {
         }
 
         function triggerEvent(elt, eventName, detail) {
+            if (detail == null) {
+                detail = {};
+            }
             detail["elt"] = elt;
             var event = makeEvent(eventName, detail);
             if (htmx.logger) {

diff --git a/test/core/api.js b/test/core/api.js
@@ -38,6 +38,16 @@ describe("Core htmx API test", function(){
         detailStr.should.equal("foo");
     });
 
+    it('triggers with no details properly', function () {
+        var div = make("<div/>");
+        var myEventCalled = false;
+        htmx.on("myEvent", function(evt){
+            myEventCalled = true;
+        })
+        htmx.trigger(div, "myEvent")
+        myEventCalled.should.equal(true);
+    });
+
     it('should find properly', function(){
         var div = make("<div id='d1' class='c1 c2'>");
         div.should.equal(htmx.find("#d1"));

diff --git a/test/ext/path-deps.js b/test/ext/path-deps.js
@@ -0,0 +1,142 @@
+describe("path-deps extension", function() {
+    beforeEach(function () {
+        this.server = makeServer();
+        clearWorkArea();
+    });
+    afterEach(function () {
+        this.server.restore();
+        clearWorkArea();
+    });
+
+    it('path-deps basic case works', function () {
+        this.server.respondWith("POST", "/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("Deps fired!");
+    });
+
+    it('path-deps works with trailing slash', function () {
+        this.server.respondWith("POST", "/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("Deps fired!");
+    });
+
+    it('path-deps GET does not trigger', function () {
+        this.server.respondWith("GET", "/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-get="/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("FOO");
+    });
+
+    it('path-deps dont trigger on path mismatch', function () {
+        this.server.respondWith("POST", "/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test2">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("FOO");
+    });
+
+    it('path-deps dont trigger on path longer than request', function () {
+        this.server.respondWith("POST", "/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/child">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("FOO");
+    });
+
+    it('path-deps trigger on path shorter than request', function () {
+        this.server.respondWith("POST", "/test/child", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test/child" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("Deps fired!");
+    });
+
+    it('path-deps trigger on *-at-start path', function () {
+        this.server.respondWith("POST", "/test/child/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/*/child/test">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("Deps fired!");
+    });
+
+    it('path-deps trigger on *-in-middle path', function () {
+        this.server.respondWith("POST", "/test/child/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/*/test">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("Deps fired!");
+    });
+
+    it('path-deps trigger on *-at-end path', function () {
+        this.server.respondWith("POST", "/test/child/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/child/*">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("Deps fired!");
+    });
+
+    it('path-deps trigger all *s path', function () {
+        this.server.respondWith("POST", "/test/child/test", "Clicked!");
+        this.server.respondWith("GET", "/test2", "Deps fired!");
+        var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
+        var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/*/*/*">FOO</div>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+        div.innerHTML.should.equal("FOO");
+        this.server.respond();
+        div.innerHTML.should.equal("Deps fired!");
+    });
+
+
+});
diff --git a/test/index.html b/test/index.html
@@ -13,7 +13,7 @@
 </head>
 <body style="padding:20px;font-family: sans-serif">
 
-<h1>htmx.js test suite</h1>
+<h1 style="margin-top: 40px">htmx.js test suite</h1>
 
 <h2>Scratch Page</h2>
 <ul>
@@ -99,6 +99,9 @@ <h2>Mocha Test Suite</h2>
 <script src="../src/ext/client-side-templates.js"></script>
 <script src="ext/client-side-templates.js"></script>
 
+<script src="../src/ext/path-deps.js"></script>
+<script src="ext/path-deps.js"></script>
+
 <!-- events last so they don't screw up other tests -->
 <script src="core/events.js"></script>