From 5bee1a49bab5298fa3654fa2d9b4fa68c34b7e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jyri-Matti=20La=CC=88hteenma=CC=88ki?=
 <jyri-matti.lahteenmaki@solita.fi>
Date: Sat, 25 Feb 2023 20:56:47 +0200
Subject: [PATCH 1/2] add extension to populate path variables with request
 parameters

---
 src/ext/path-params.js                | 11 ++++++
 test/ext/path-params.js               | 51 +++++++++++++++++++++++++++
 test/index.html                       |  3 ++
 www/content/extensions/path-params.md | 24 +++++++++++++
 4 files changed, 89 insertions(+)
 create mode 100644 src/ext/path-params.js
 create mode 100644 test/ext/path-params.js
 create mode 100644 www/content/extensions/path-params.md

diff --git a/src/ext/path-params.js b/src/ext/path-params.js
new file mode 100644
index 000000000..e251b8927
--- /dev/null
+++ b/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);
+          })
+        }
+    }
+});
\ No newline at end of file
diff --git a/test/ext/path-params.js b/test/ext/path-params.js
new file mode 100644
index 000000000..3f0ac3a3c
--- /dev/null
+++ b/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}');
+    });
+});
diff --git a/test/index.html b/test/index.html
index eb6f15b18..88b113150 100644
--- a/test/index.html
+++ b/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>
 
diff --git a/www/content/extensions/path-params.md b/www/content/extensions/path-params.md
new file mode 100644
index 000000000..6746ea4b6
--- /dev/null
+++ b/www/content/extensions/path-params.md
@@ -0,0 +1,24 @@
+---
+layout: layout.njk
+title: </> htmx - high power tools for html
+---
+
+## The `path-params` Extension
+
+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>
+```

From 51678d7d0ec5ec51559f36eb33346e8089489705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jyri-Matti=20La=CC=88hteenma=CC=88ki?=
 <jyri-matti.lahteenmaki@solita.fi>
Date: Mon, 4 Dec 2023 21:30:55 +0200
Subject: [PATCH 2/2] update extension readme

---
 www/content/extensions/_index.md      |  1 +
 www/content/extensions/path-params.md | 13 +++++--------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/www/content/extensions/_index.md b/www/content/extensions/_index.md
index f76cafb4d..67b179cfb 100644
--- a/www/content/extensions/_index.md
+++ b/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>
 
diff --git a/www/content/extensions/path-params.md b/www/content/extensions/path-params.md
index 6746ea4b6..6832f1ae9 100644
--- a/www/content/extensions/path-params.md
+++ b/www/content/extensions/path-params.md
@@ -1,19 +1,16 @@
----
-layout: layout.njk
-title: </> htmx - high power tools for html
----
-
-## The `path-params` Extension
++++
+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
+## Install
 
 ```html
 <script src="https://unpkg.com/htmx.org/dist/ext/path-params.js">
 ```
 
-### Usage
+## Usage
 
 This would invoke URL `/items/42?foo=bar`