add extension to populate path variables with request parameters (big…

…skysoftware#1307)

* add extension to populate path variables with request parameters

* update extension readme

src/ext/path-params.js

@@ -0,0 +1,11 @@
+htmx.defineExtension('path-params', {
+    onEvent: function(name, evt) {
+        if (name === "htmx:configRequest") {
+            evt.detail.path = evt.detail.path.replace(/{([^}]+)}/g, function (_, param) {
+                var val = evt.detail.parameters[param];
+                delete evt.detail.parameters[param];
+                return val === undefined ? "{" + param + "}" : encodeURIComponent(val);
+          })
+        }
+    }
+});

test/ext/path-params.js

@@ -0,0 +1,51 @@
+describe("path-params extension", function() {
+    beforeEach(function () {
+        this.server = makeServer();
+        clearWorkArea();
+    });
+    afterEach(function () {
+        this.server.restore();
+        clearWorkArea();
+    });
+
+    it('uses parameter to populate path variable', function () {
+        var request;
+        htmx.on("htmx:beforeRequest", function (evt) {
+            request = evt;
+        });
+        var div = make("<div hx-ext='path-params' hx-get='/items/{itemId}' hx-vals='{\"itemId\":42}'></div>")
+        div.click();
+        should.equal(request.detail.requestConfig.path, '/items/42');
+    });
+
+    it('parameter is removed when used', function () {
+        var request;
+        htmx.on("htmx:beforeRequest", function (evt) {
+            request = evt;
+        });
+        var div = make("<div hx-ext='path-params' hx-get='/items/{itemId}' hx-vals='{\"itemId\":42, \"other\":43}'></div>")
+        div.click();
+        should.equal(request.detail.requestConfig.parameters.other, 43);
+        should.equal(request.detail.requestConfig.parameters.itemId, undefined);
+    });
+
+    it('parameter value is encoded', function () {
+        var request;
+        htmx.on("htmx:beforeRequest", function (evt) {
+            request = evt;
+        });
+        var div = make("<div hx-ext='path-params' hx-get='/items/{itemId}' hx-vals='{\"itemId\":\"a/b\"}'></div>")
+        div.click();
+        should.equal(request.detail.requestConfig.path, '/items/a%2Fb');
+    });
+
+    it('missing variables are ignored', function () {
+        var request;
+        htmx.on("htmx:beforeRequest", function (evt) {
+            request = evt;
+        });
+        var div = make("<div hx-ext='path-params' hx-get='/items/{itemId}/{subitem}' hx-vals='{\"itemId\":42}'></div>")
+        div.click();
+        should.equal(request.detail.requestConfig.path, '/items/42/{subitem}');
+    });
+});

test/index.html

@@ -161,6 +161,9 @@ <h2>Mocha Test Suite</h2>
 <script src="../src/ext/response-targets.js"></script>
 <script src="ext/response-targets.js"></script>
 
+<script src="../src/ext/path-params.js"></script>
+<script src="ext/path-params.js"></script>
+
 <!-- events last so they don't screw up other tests -->
 <script src="core/events.js"></script>
 

www/content/extensions/_index.md

@@ -82,6 +82,7 @@ See the individual extension documentation for more details.
 | [`restored`](@/extensions/restored.md)                           | allows you to trigger events when the back button has been pressed
 | [`server-sent-events`](@/extensions/server-sent-events.md)       | uni-directional server push messaging via [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource)
 | [`web-sockets`](@/extensions/web-sockets.md)                     | bi-directional connection to WebSocket servers
+| [`path-params`](@/extensions/path-params.md)                     | allows to use parameters for path variables instead of sending them in query or body
 
 </div>
 

www/content/extensions/path-params.md

@@ -0,0 +1,21 @@
++++
+title = path-params
++++
+
+This extension uses request parameters to populate path variables. Used parameters are removed so they won't be sent in the query string or body anymore.
+
+## Install
+
+```html
+<script src="https://unpkg.com/htmx.org/dist/ext/path-params.js">
+```
+
+## Usage
+
+This would invoke URL `/items/42?foo=bar`
+
+```html
+<div hx-ext="path-params">
+    <a hx-get="/items/{itemId}" hx-vals='{"itemId": "42", "foo": "bar"}'>test</div>
+</div>
+```