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.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.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.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.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 @@

Mocha Test Suite

+ + + 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 diff --git a/www/content/extensions/path-params.md b/www/content/extensions/path-params.md new file mode 100644 index 000000000..6832f1ae9 --- /dev/null +++ b/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 +