Merge pull request #287 from jvosloo/patch-1

Extend path-deps extension to handle explicit path refreshes

src/ext/path-deps.js

@@ -1,4 +1,9 @@
-(function(){
+(function(undefined){
+    'use strict';
+
+    // Save a reference to the global object (window in the browser)
+    var _root = this;
+  
     function dependsOn(pathSpec, url) {
         var dependencyPath = pathSpec.split("/");
         var urlPath = url.split("/");
@@ -15,21 +20,39 @@
         return false;
     }
 
+    function refreshPath(path) {
+        var eltsWithDeps = htmx.findAll("[path-deps]");
+        for (var i = 0; i < eltsWithDeps.length; i++) {
+            var elt = eltsWithDeps[i];
+            if (dependsOn(elt.getAttribute('path-deps'), path)) {
+                htmx.trigger(elt, "path-deps");
+            }
+        }      
+    }    
+
     htmx.defineExtension('path-deps', {
         onEvent: function (name, evt) {
             if (name === "htmx:afterRequest") {
                 var config = evt.detail.requestConfig;
                 // mutating call
                 if (config.verb !== "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'), config.path)) {
-                            htmx.trigger(elt, "path-deps");
-                        }
-                    }
+                    refreshPath(config.path);
                 }
-            }
+            } 
         }
     });
-})();
+
+    /**
+     *  ********************
+     *  Expose functionality
+     *  ********************
+     */    
+
+    _root.PathDeps = {
+            
+        PathDeps.refresh: function(path) {
+            refreshPath(path);
+        }
+    };
+            
+}).call(this);

test/ext/path-deps.js

@@ -138,5 +138,24 @@ describe("path-deps extension", function() {
         div.innerHTML.should.equal("Deps fired!");
     });
 
+    it('path-deps api basic refresh case works', function () {
+        this.server.respondWith("GET", "/test", "Path deps fired!");
+        var div = make('<div hx-get="/test" hx-trigger="path-deps" path-deps="/test">FOO</div>')
+        PathDeps.refresh("/test");
+        this.server.respond();
+        div.innerHTML.should.equal("Path deps fired!");
+    });
 
-});
+    it('path-deps api parent path case works', function () {
+        this.server.respondWith("GET", "/test1", "Path deps 1 fired!");
+        this.server.respondWith("GET", "/test2", "Path deps 2 fired!");
+        var div = make('<div hx-get="/test1" hx-trigger="path-deps" path-deps="/test/child">FOO</div>')
+        var div2 = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">BAR</div>')
+        PathDeps.refresh("/test/child");
+        this.server.respond();
+        div.innerHTML.should.equal("Path deps 1 fired!");
+        this.server.respond();
+        div2.innerHTML.should.equal("Path deps 2 fired!");
+    });
+
+});

www/extensions/path-deps.md

@@ -5,14 +5,14 @@ title: </> htmx - high power tools for html
 
 ## The `path-deps` Extension
 
-This extension supports expressing inter-element dependencies based on paths, inspired by the 
+This extension supports expressing inter-element dependencies based on paths, inspired by the
 [intercooler.js dependencies mechanism.](http://intercoolerjs.org/docs.html#dependencies).  When this
 extension is installed an element can express a dependency on another path by using the `path-deps` property
 and then setting `hx-trigger` to `path-deps`:
 
 ```html
-  <div hx-get="/example" 
-       hx-trigger="path-deps" 
+  <div hx-get="/example"
+       hx-trigger="path-deps"
        path-deps="/foo/bar">...</div>
 ```
 
@@ -22,8 +22,8 @@ request like a `POST`) to `/foo/bar` or any sub-paths of that path.
 You can use a `*` to match any path component:
 
 ```html
-  <div hx-get="/example" 
-       hx-trigger="path-deps" 
+  <div hx-get="/example"
+       hx-trigger="path-deps"
        path-deps="/contacts/*">...</div>
 ```
 
@@ -39,6 +39,23 @@ You can use a `*` to match any path component:
 </div>
 ```
 
+#### Javascript API
+
+### <a name="refresh"></a> Method -  [`PathDeps.refresh()`](#refresh)
+
+This method manually triggers a refresh for the given path.
+
+##### Parameters
+
+* `path` - the path to refresh
+
+##### Example
+
+```js
+  // Trigger a refresh on all elements with the path-deps attribute '/path/to/refresh', including elements with a parent path, e.g. '/path'
+  PathDeps.refresh('/path/to/refresh');
+```
+
 #### Source
 
 <https://unpkg.com/htmx.org/dist/ext/path-deps.js>