From d01025823eb7b4800b1a712c14b29c460ca378d0 Mon Sep 17 00:00:00 2001 From: acnebs Date: Thu, 28 May 2020 01:25:42 +0100 Subject: [PATCH] Rename custom HTTP headers to no longer start with `X-` This convention is deprecated, as per this RFC from the IETF: https://tools.ietf.org/html/rfc6648 --- src/htmx.js | 24 +++++++++++----------- test/attributes/hx-ws.js | 2 +- test/core/headers.js | 32 ++++++++++++++--------------- test/manual/confirm-and-prompt.html | 2 +- www/attributes/hx-prompt.md | 2 +- www/attributes/hx-push-url.md | 2 +- www/docs.md | 24 +++++++++++----------- www/examples/dialogs.md | 4 ++-- www/headers/x-hx-trigger.md | 14 ++++++------- www/js/htmx.js | 24 +++++++++++----------- www/reference.md | 24 +++++++++++----------- 11 files changed, 77 insertions(+), 77 deletions(-) diff --git a/src/htmx.js b/src/htmx.js index 7864e4e2..e8f39740 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -1200,23 +1200,23 @@ return (function () { function getHeaders(elt, target, prompt, eventTarget) { var headers = { - "X-HX-Request" : "true", - "X-HX-Trigger" : getRawAttribute(elt, "id"), - "X-HX-Trigger-Name" : getRawAttribute(elt, "name"), - "X-HX-Target" : getAttributeValue(target, "id"), - "X-HX-Current-URL" : getDocument().location.href, + "HX-Request" : "true", + "HX-Trigger" : getRawAttribute(elt, "id"), + "HX-Trigger-Name" : getRawAttribute(elt, "name"), + "HX-Target" : getAttributeValue(target, "id"), + "HX-Current-URL" : getDocument().location.href, } if (prompt !== undefined) { - headers["X-HX-Prompt"] = prompt; + headers["HX-Prompt"] = prompt; } if (eventTarget) { - headers["X-HX-Event-Target"] = getRawAttribute(eventTarget, "id"); + headers["HX-Event-Target"] = getRawAttribute(eventTarget, "id"); } if (getDocument().activeElement) { - headers["X-HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id"); - headers["X-HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name"); + headers["HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id"); + headers["HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name"); if (getDocument().activeElement.value) { - headers["X-HX-Active-Element-Value"] = getRawAttribute(getDocument().activeElement, "value"); + headers["HX-Active-Element-Value"] = getRawAttribute(getDocument().activeElement, "value"); } } return headers; @@ -1385,8 +1385,8 @@ return (function () { try { if (!triggerEvent(elt, 'beforeOnLoad.htmx', eventDetail)) return; - handleTrigger(elt, this.getResponseHeader("X-HX-Trigger")); - var pushedUrl = this.getResponseHeader("X-HX-Push"); + handleTrigger(elt, this.getResponseHeader("HX-Trigger")); + var pushedUrl = this.getResponseHeader("HX-Push"); var shouldSaveHistory = shouldPush(elt) || pushedUrl; diff --git a/test/attributes/hx-ws.js b/test/attributes/hx-ws.js index f1feb1f0..3dc1c327 100644 --- a/test/attributes/hx-ws.js +++ b/test/attributes/hx-ws.js @@ -51,7 +51,7 @@ describe("hx-ws attribute", function() { byId("d1").click(); var lastSent = this.socket.getLastSent(); var data = JSON.parse(lastSent); - data.HEADERS["X-HX-Request"].should.equal("true"); + data.HEADERS["HX-Request"].should.equal("true"); }) it('is closed after removal', function () { diff --git a/test/core/headers.js b/test/core/headers.js index 0edd0fab..56527b4c 100644 --- a/test/core/headers.js +++ b/test/core/headers.js @@ -8,9 +8,9 @@ describe("Core htmx AJAX headers", function() { clearWorkArea(); }); - it("should include the X-HX-Request header", function(){ + it("should include the HX-Request header", function(){ this.server.respondWith("GET", "/test", function(xhr){ - xhr.requestHeaders['X-HX-Request'].should.be.equal('true'); + xhr.requestHeaders['HX-Request'].should.be.equal('true'); xhr.respond(200, {}, ""); }); var div = make('
'); @@ -18,9 +18,9 @@ describe("Core htmx AJAX headers", function() { this.server.respond(); }) - it("should include the X-HX-Trigger header", function(){ + it("should include the HX-Trigger header", function(){ this.server.respondWith("GET", "/test", function(xhr){ - xhr.requestHeaders['X-HX-Trigger'].should.equal('d1'); + xhr.requestHeaders['HX-Trigger'].should.equal('d1'); xhr.respond(200, {}, ""); }); var div = make('
'); @@ -28,9 +28,9 @@ describe("Core htmx AJAX headers", function() { this.server.respond(); }) - it("should include the X-HX-Trigger-Name header", function(){ + it("should include the HX-Trigger-Name header", function(){ this.server.respondWith("GET", "/test", function(xhr){ - xhr.requestHeaders['X-HX-Trigger-Name'].should.equal('n1'); + xhr.requestHeaders['HX-Trigger-Name'].should.equal('n1'); xhr.respond(200, {}, ""); }); var div = make(''); @@ -38,9 +38,9 @@ describe("Core htmx AJAX headers", function() { this.server.respond(); }) - it("should include the X-HX-Target header", function(){ + it("should include the HX-Target header", function(){ this.server.respondWith("GET", "/test", function(xhr){ - xhr.requestHeaders['X-HX-Target'].should.equal('d1'); + xhr.requestHeaders['HX-Target'].should.equal('d1'); xhr.respond(200, {}, ""); }); var div = make('
'); @@ -48,8 +48,8 @@ describe("Core htmx AJAX headers", function() { this.server.respond(); }) - it("should handle simple string X-HX-Trigger response header properly", function(){ - this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "foo"}, ""]); + it("should handle simple string HX-Trigger response header properly", function(){ + this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "foo"}, ""]); var div = make('
'); var invokedEvent = false; @@ -61,8 +61,8 @@ describe("Core htmx AJAX headers", function() { invokedEvent.should.equal(true); }) - it("should handle basic JSON X-HX-Trigger response header properly", function(){ - this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "{\"foo\":null}"}, ""]); + it("should handle basic JSON HX-Trigger response header properly", function(){ + this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "{\"foo\":null}"}, ""]); var div = make('
'); var invokedEvent = false; @@ -76,8 +76,8 @@ describe("Core htmx AJAX headers", function() { invokedEvent.should.equal(true); }) - it("should handle JSON with array arg X-HX-Trigger response header properly", function(){ - this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "{\"foo\":[1, 2, 3]}"}, ""]); + it("should handle JSON with array arg HX-Trigger response header properly", function(){ + this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "{\"foo\":[1, 2, 3]}"}, ""]); var div = make('
'); var invokedEvent = false; @@ -91,8 +91,8 @@ describe("Core htmx AJAX headers", function() { invokedEvent.should.equal(true); }) - it("should handle JSON with array arg X-HX-Trigger response header properly", function(){ - this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "{\"foo\":{\"a\":1, \"b\":2}}"}, ""]); + it("should handle JSON with array arg HX-Trigger response header properly", function(){ + this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "{\"foo\":{\"a\":1, \"b\":2}}"}, ""]); var div = make('
'); var invokedEvent = false; diff --git a/test/manual/confirm-and-prompt.html b/test/manual/confirm-and-prompt.html index 622f58df..6233b837 100644 --- a/test/manual/confirm-and-prompt.html +++ b/test/manual/confirm-and-prompt.html @@ -12,7 +12,7 @@ server = makeServer(); server.autoRespond = true; server.respondWith("GET", "/prompt", function(xhr){ - xhr.respond(200, {}, "You entered: " + xhr.requestHeaders["X-HX-Prompt"]); + xhr.respond(200, {}, "You entered: " + xhr.requestHeaders["HX-Prompt"]); }) server.respondWith("GET", "/confirm", function(xhr){ xhr.respond(200, {}, "Confirmed") diff --git a/www/attributes/hx-prompt.md b/www/attributes/hx-prompt.md index ea2d1ff6..22ca312f 100644 --- a/www/attributes/hx-prompt.md +++ b/www/attributes/hx-prompt.md @@ -6,7 +6,7 @@ title: htmx - hx-prompt ## `hx-prompt` The `hx-prompt` attribute allows you to show a prompt before issuing a request. The value of -the prompt will be included in the requst in the `X-HX-Prompt` header. +the prompt will be included in the requst in the `HX-Prompt` header. Here is an example: diff --git a/www/attributes/hx-push-url.md b/www/attributes/hx-push-url.md index 674c1a62..98b9bd3b 100644 --- a/www/attributes/hx-push-url.md +++ b/www/attributes/hx-push-url.md @@ -23,4 +23,4 @@ location bar. ### Notes * `hx-push-url` is inherited and can be placed on a parent element -* see also the `X-HX-Push` response header +* see also the `HX-Push` response header diff --git a/www/docs.md b/www/docs.md index 3775a5f1..3fbfbe3f 100644 --- a/www/docs.md +++ b/www/docs.md @@ -457,24 +457,24 @@ htmx includes a number of useful headers in requests: | Header | Description |--------|-------------- -| `X-HX-Request` | will be set to "true" -| `X-HX-Trigger` | will be set to the id of the element that triggered the request -| `X-HX-Trigger-Name` | will be set to the name of the element that triggered the request -| `X-HX-Target` | will be set to the id of the target element -| `X-HX-Current-URL` | will be set to the URL of the browser -| `X-HX-Prompt` | will be set to the value entered by the user when prompted via [hx-prompt](/attributes/hx-prompt) -| `X-HX-Event-Target` | the id of the original target of the event that triggered the request -| `X-HX-Active-Element` | the id of the current active element -| `X-HX-Active-Element-Name` | the name of the current active element -| `X-HX-Active-Element-Value` | the value of the current active element +| `HX-Request` | will be set to "true" +| `HX-Trigger` | will be set to the id of the element that triggered the request +| `HX-Trigger-Name` | will be set to the name of the element that triggered the request +| `HX-Target` | will be set to the id of the target element +| `HX-Current-URL` | will be set to the URL of the browser +| `HX-Prompt` | will be set to the value entered by the user when prompted via [hx-prompt](/attributes/hx-prompt) +| `HX-Event-Target` | the id of the original target of the event that triggered the request +| `HX-Active-Element` | the id of the current active element +| `HX-Active-Element-Name` | the name of the current active element +| `HX-Active-Element-Value` | the value of the current active element | `X-HTTP-Method-Override` | the HTTP verb for non-`GET` and `POST` requests ### [Response Headers](#response-headers) htmx supports two special response headers: -* `X-HX-Trigger` - can be used to trigger client side events, see the [documentation](/headers/x-hx-trigger) for examples. -* `X-HX-Push` - can be used to push a new URL into the browsers address bar +* `HX-Trigger` - can be used to trigger client side events, see the [documentation](/headers/x-hx-trigger) for examples. +* `HX-Push` - can be used to push a new URL into the browsers address bar ### Request Order of Operations diff --git a/www/examples/dialogs.md b/www/examples/dialogs.md index f9a2a211..3a33a99f 100644 --- a/www/examples/dialogs.md +++ b/www/examples/dialogs.md @@ -19,7 +19,7 @@ Dialogs can be triggered with the [`hx-prompt`](/attributes/hx-prompt) and [`hx- ``` -The value provided by the user to the prompt dialog is sent to the server in a `X-HX-Prompt` header. In this case, the server simply echos the user input back. +The value provided by the user to the prompt dialog is sent to the server in a `HX-Prompt` header. In this case, the server simply echos the user input back. ```html User entered ${response} @@ -39,7 +39,7 @@ User entered ${response} }); onPost("/submit", function(request, params){ - var response = request.requestHeaders['X-HX-Prompt']; + var response = request.requestHeaders['HX-Prompt']; return promptSubmit(response); }); diff --git a/www/headers/x-hx-trigger.md b/www/headers/x-hx-trigger.md index bf3ff036..8a8533e2 100644 --- a/www/headers/x-hx-trigger.md +++ b/www/headers/x-hx-trigger.md @@ -1,16 +1,16 @@ --- layout: layout.njk -title: htmx - X-HX-Trigger +title: htmx - HX-Trigger --- -## `X-HX-Trigger` Response Header +## `HX-Trigger` Response Header -The `X-HX-Trigger` response header can be used to trigger client side actions from a response to htmx. You can +The `HX-Trigger` response header can be used to trigger client side actions from a response to htmx. You can trigger a single event or as many uniquely named events as you would like. To trigger a single event with no additional details you can simply send the header like so: -`X-HX-Trigger: myEvent` +`HX-Trigger: myEvent` This will trigger `myEvent` on the triggering element and will bubble up to the body. As an example you could listen for this event like this: @@ -23,7 +23,7 @@ document.body.addEventListener("myEvent", function(evt){ If you want to pass details along with the event, you can move to JSON for the value of the trigger: -`X-HX-Trigger: {"showMessage":"Here Is A Message"}` +`HX-Trigger: {"showMessage":"Here Is A Message"}` To handle this event you would write the following code: @@ -36,7 +36,7 @@ document.body.addEventListener("showMessage", function(evt){ Note that the value of the message was put into the `detail.value` slot. If you wish to pass multiple pieces of data you can use a nested JSON object on the right hand side of the JSON object: -`X-HX-Trigger: {"showMessage":{"level" : "info", "message" : "Here Is A Message"}}` +`HX-Trigger: {"showMessage":{"level" : "info", "message" : "Here Is A Message"}}` And handle this event like so: @@ -53,6 +53,6 @@ Each property of the JSON object on the right hand side will be copied onto the Finally, if you wish to invoke multiple events, you can simply add additional properties to the top level JSON object: -`X-HX-Trigger: {"event1":"A message", "event2":"Another message"}` +`HX-Trigger: {"event1":"A message", "event2":"Another message"}` Using events gives you a lot of flexibility to add functionality to normal htmx responses. diff --git a/www/js/htmx.js b/www/js/htmx.js index 52116ab3..f00c0f4c 100644 --- a/www/js/htmx.js +++ b/www/js/htmx.js @@ -1191,23 +1191,23 @@ return (function () { function getHeaders(elt, target, prompt, eventTarget) { var headers = { - "X-HX-Request" : "true", - "X-HX-Trigger" : getRawAttribute(elt, "id"), - "X-HX-Trigger-Name" : getRawAttribute(elt, "name"), - "X-HX-Target" : getAttributeValue(target, "id"), - "X-HX-Current-URL" : getDocument().location.href, + "HX-Request" : "true", + "HX-Trigger" : getRawAttribute(elt, "id"), + "HX-Trigger-Name" : getRawAttribute(elt, "name"), + "HX-Target" : getAttributeValue(target, "id"), + "HX-Current-URL" : getDocument().location.href, } if (prompt !== undefined) { - headers["X-HX-Prompt"] = prompt; + headers["HX-Prompt"] = prompt; } if (eventTarget) { - headers["X-HX-Event-Target"] = getRawAttribute(eventTarget, "id"); + headers["HX-Event-Target"] = getRawAttribute(eventTarget, "id"); } if (getDocument().activeElement) { - headers["X-HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id"); - headers["X-HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name"); + headers["HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id"); + headers["HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name"); if (getDocument().activeElement.value) { - headers["X-HX-Active-Element-Value"] = getRawAttribute(getDocument().activeElement, "value"); + headers["HX-Active-Element-Value"] = getRawAttribute(getDocument().activeElement, "value"); } } return headers; @@ -1374,8 +1374,8 @@ return (function () { try { if (!triggerEvent(elt, 'beforeOnLoad.htmx', eventDetail)) return; - handleTrigger(elt, this.getResponseHeader("X-HX-Trigger")); - var pushedUrl = this.getResponseHeader("X-HX-Push"); + handleTrigger(elt, this.getResponseHeader("HX-Trigger")); + var pushedUrl = this.getResponseHeader("HX-Push"); var shouldSaveHistory = shouldPush(elt) || pushedUrl; diff --git a/www/reference.md b/www/reference.md index 2cf7927d..873715f6 100644 --- a/www/reference.md +++ b/www/reference.md @@ -57,16 +57,16 @@ title: htmx - Attributes | Header | Description | |-------|-------------| | `X-HTTP-Method-Override` | the HTTP verb for non-`GET` and `POST` requests -| `X-HX-Active-Element-Name` | the `name` of the active element if it exists -| `X-HX-Active-Element-Value` | the `value` of the active element if it exists -| `X-HX-Active-Element` | the `id` of the active element if it exists -| `X-HX-Current-URL` | the current URL of the browser -| `X-HX-Event-Target` | the `id` of the original event target -| `X-HX-Prompt` | the user response to an [ic-prompt](/attributes/hx-prompt) -| `X-HX-Request` | always `true` -| `X-HX-Target` | the `id` of the target element if it exists -| `X-HX-Trigger-Name` | the `name` of the triggered element if it exists -| `X-HX-Trigger` | the `id` of the triggered element if it exists +| `HX-Active-Element-Name` | the `name` of the active element if it exists +| `HX-Active-Element-Value` | the `value` of the active element if it exists +| `HX-Active-Element` | the `id` of the active element if it exists +| `HX-Current-URL` | the current URL of the browser +| `HX-Event-Target` | the `id` of the original event target +| `HX-Prompt` | the user response to an [ic-prompt](/attributes/hx-prompt) +| `HX-Request` | always `true` +| `HX-Target` | the `id` of the target element if it exists +| `HX-Trigger-Name` | the `name` of the triggered element if it exists +| `HX-Trigger` | the `id` of the triggered element if it exists @@ -76,8 +76,8 @@ title: htmx - Attributes | Header | Description | |-------|-------------| -| `X-HX-Push` | pushes a new url into the history stack -| [`X-HX-Trigger`](/headers/x-hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/x-hx-trigger) for more info +| `HX-Push` | pushes a new url into the history stack +| [`HX-Trigger`](/headers/x-hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/x-hx-trigger) for more info