itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #46 from acnebs/dev

Browse Source 
Rename custom HTTP headers to no longer start with `X-`
This commit is contained in:
chg20 2020-05-27 17:37:24 -07:00 committed by GitHub
commit c39e902cfd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 77 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/htmx.js
View File

@ -1200,23 +1200,23 @@ return (function () {
function getHeaders(elt, target, prompt, eventTarget) { function getHeaders(elt, target, prompt, eventTarget) {
var headers = { var headers = {
"X-HX-Request" : "true", "HX-Request" : "true",
"X-HX-Trigger" : getRawAttribute(elt, "id"), "HX-Trigger" : getRawAttribute(elt, "id"),
"X-HX-Trigger-Name" : getRawAttribute(elt, "name"), "HX-Trigger-Name" : getRawAttribute(elt, "name"),
"X-HX-Target" : getAttributeValue(target, "id"), "HX-Target" : getAttributeValue(target, "id"),
"X-HX-Current-URL" : getDocument().location.href, "HX-Current-URL" : getDocument().location.href,
} }
if (prompt !== undefined) { if (prompt !== undefined) {
headers["X-HX-Prompt"] = prompt; headers["HX-Prompt"] = prompt;
} }
if (eventTarget) { if (eventTarget) {
headers["X-HX-Event-Target"] = getRawAttribute(eventTarget, "id"); headers["HX-Event-Target"] = getRawAttribute(eventTarget, "id");
} }
if (getDocument().activeElement) { if (getDocument().activeElement) {
headers["X-HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id"); headers["HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id");
headers["X-HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name"); headers["HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name");
if (getDocument().activeElement.value) { 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; return headers;
@ -1385,8 +1385,8 @@ return (function () {
try { try {
if (!triggerEvent(elt, 'beforeOnLoad.htmx', eventDetail)) return; if (!triggerEvent(elt, 'beforeOnLoad.htmx', eventDetail)) return;
handleTrigger(elt, this.getResponseHeader("X-HX-Trigger")); handleTrigger(elt, this.getResponseHeader("HX-Trigger"));
var pushedUrl = this.getResponseHeader("X-HX-Push"); var pushedUrl = this.getResponseHeader("HX-Push");
var shouldSaveHistory = shouldPush(elt) || pushedUrl; var shouldSaveHistory = shouldPush(elt) || pushedUrl;

2
test/attributes/hx-ws.js
View File

@ -51,7 +51,7 @@ describe("hx-ws attribute", function() {
byId("d1").click(); byId("d1").click();
var lastSent = this.socket.getLastSent(); var lastSent = this.socket.getLastSent();
var data = JSON.parse(lastSent); 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 () { it('is closed after removal', function () {

32
test/core/headers.js
View File

@ -8,9 +8,9 @@ describe("Core htmx AJAX headers", function() {
clearWorkArea(); 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){ 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, {}, ""); xhr.respond(200, {}, "");
}); });
var div = make('<div hx-get="/test"></div>'); var div = make('<div hx-get="/test"></div>');
@ -18,9 +18,9 @@ describe("Core htmx AJAX headers", function() {
this.server.respond(); 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){ 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, {}, ""); xhr.respond(200, {}, "");
}); });
var div = make('<div id="d1" hx-get="/test"></div>'); var div = make('<div id="d1" hx-get="/test"></div>');
@ -28,9 +28,9 @@ describe("Core htmx AJAX headers", function() {
this.server.respond(); 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){ 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, {}, ""); xhr.respond(200, {}, "");
}); });
var div = make('<button name="n1" hx-get="/test"></button>'); var div = make('<button name="n1" hx-get="/test"></button>');
@ -38,9 +38,9 @@ describe("Core htmx AJAX headers", function() {
this.server.respond(); 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){ 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, {}, ""); xhr.respond(200, {}, "");
}); });
var div = make('<div hx-target="#d1" hx-get="/test"></div><div id="d1" ></div>'); var div = make('<div hx-target="#d1" hx-get="/test"></div><div id="d1" ></div>');
@ -48,8 +48,8 @@ describe("Core htmx AJAX headers", function() {
this.server.respond(); this.server.respond();
}) })
it("should handle simple string X-HX-Trigger response header properly", function(){ it("should handle simple string HX-Trigger response header properly", function(){
this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "foo"}, ""]); this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "foo"}, ""]);
var div = make('<div hx-get="/test"></div>'); var div = make('<div hx-get="/test"></div>');
var invokedEvent = false; var invokedEvent = false;
@ -61,8 +61,8 @@ describe("Core htmx AJAX headers", function() {
invokedEvent.should.equal(true); invokedEvent.should.equal(true);
}) })
it("should handle basic JSON X-HX-Trigger response header properly", function(){ it("should handle basic JSON HX-Trigger response header properly", function(){
this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "{\"foo\":null}"}, ""]); this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "{\"foo\":null}"}, ""]);
var div = make('<div hx-get="/test"></div>'); var div = make('<div hx-get="/test"></div>');
var invokedEvent = false; var invokedEvent = false;
@ -76,8 +76,8 @@ describe("Core htmx AJAX headers", function() {
invokedEvent.should.equal(true); invokedEvent.should.equal(true);
}) })
it("should handle JSON with array arg X-HX-Trigger response header properly", function(){ it("should handle JSON with array arg HX-Trigger response header properly", function(){
this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "{\"foo\":[1, 2, 3]}"}, ""]); this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "{\"foo\":[1, 2, 3]}"}, ""]);
var div = make('<div hx-get="/test"></div>'); var div = make('<div hx-get="/test"></div>');
var invokedEvent = false; var invokedEvent = false;
@ -91,8 +91,8 @@ describe("Core htmx AJAX headers", function() {
invokedEvent.should.equal(true); invokedEvent.should.equal(true);
}) })
it("should handle JSON with array arg X-HX-Trigger response header properly", function(){ it("should handle JSON with array arg HX-Trigger response header properly", function(){
this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "{\"foo\":{\"a\":1, \"b\":2}}"}, ""]); this.server.respondWith("GET", "/test", [200, {"HX-Trigger" : "{\"foo\":{\"a\":1, \"b\":2}}"}, ""]);
var div = make('<div hx-get="/test"></div>'); var div = make('<div hx-get="/test"></div>');
var invokedEvent = false; var invokedEvent = false;

2
test/manual/confirm-and-prompt.html
View File

@ -12,7 +12,7 @@
server = makeServer(); server = makeServer();
server.autoRespond = true; server.autoRespond = true;
server.respondWith("GET", "/prompt", function(xhr){ 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){ server.respondWith("GET", "/confirm", function(xhr){
xhr.respond(200, {}, "Confirmed") xhr.respond(200, {}, "Confirmed")

2
www/attributes/hx-prompt.md
View File

@ -6,7 +6,7 @@ title: </> htmx - hx-prompt
## `hx-prompt` ## `hx-prompt`
The `hx-prompt` attribute allows you to show a prompt before issuing a request. The value of 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: Here is an example:

2
www/attributes/hx-push-url.md
View File

@ -23,4 +23,4 @@ location bar.
### Notes ### Notes
* `hx-push-url` is inherited and can be placed on a parent element * `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

24
www/docs.md
View File

@ -457,24 +457,24 @@ htmx includes a number of useful headers in requests:
| Header | Description | Header | Description
|--------|-------------- |--------|--------------
| `X-HX-Request` | will be set to "true" | `HX-Request` | will be set to "true"
| `X-HX-Trigger` | will be set to the id of the element that triggered the request | `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 | `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 | `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 | `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) | `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 | `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 | `HX-Active-Element` | the id of the current active element
| `X-HX-Active-Element-Name` | the name of the current active element | `HX-Active-Element-Name` | the name of the current active element
| `X-HX-Active-Element-Value` | the value 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 | `X-HTTP-Method-Override` | the HTTP verb for non-`GET` and `POST` requests
### <a name="response-header"></a> [Response Headers](#response-headers) ### <a name="response-header"></a> [Response Headers](#response-headers)
htmx supports two special 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. * `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-Push` - can be used to push a new URL into the browsers address bar
### Request Order of Operations ### Request Order of Operations

4
www/examples/dialogs.md
View File

@ -19,7 +19,7 @@ Dialogs can be triggered with the [`hx-prompt`](/attributes/hx-prompt) and [`hx-
</div> </div>
``` ```
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 ```html
User entered <i>${response}</i> User entered <i>${response}</i>
@ -39,7 +39,7 @@ User entered <i>${response}</i>
}); });
onPost("/submit", function(request, params){ onPost("/submit", function(request, params){
var response = request.requestHeaders['X-HX-Prompt']; var response = request.requestHeaders['HX-Prompt'];
return promptSubmit(response); return promptSubmit(response);
}); });

14
www/headers/x-hx-trigger.md
View File

@ -1,16 +1,16 @@
--- ---
layout: layout.njk 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. 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: 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 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: 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: 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: 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 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: 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: 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 Finally, if you wish to invoke multiple events, you can simply add additional properties to the top level JSON
object: 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. Using events gives you a lot of flexibility to add functionality to normal htmx responses.

24
www/js/htmx.js
View File

@ -1191,23 +1191,23 @@ return (function () {
function getHeaders(elt, target, prompt, eventTarget) { function getHeaders(elt, target, prompt, eventTarget) {
var headers = { var headers = {
"X-HX-Request" : "true", "HX-Request" : "true",
"X-HX-Trigger" : getRawAttribute(elt, "id"), "HX-Trigger" : getRawAttribute(elt, "id"),
"X-HX-Trigger-Name" : getRawAttribute(elt, "name"), "HX-Trigger-Name" : getRawAttribute(elt, "name"),
"X-HX-Target" : getAttributeValue(target, "id"), "HX-Target" : getAttributeValue(target, "id"),
"X-HX-Current-URL" : getDocument().location.href, "HX-Current-URL" : getDocument().location.href,
} }
if (prompt !== undefined) { if (prompt !== undefined) {
headers["X-HX-Prompt"] = prompt; headers["HX-Prompt"] = prompt;
} }
if (eventTarget) { if (eventTarget) {
headers["X-HX-Event-Target"] = getRawAttribute(eventTarget, "id"); headers["HX-Event-Target"] = getRawAttribute(eventTarget, "id");
} }
if (getDocument().activeElement) { if (getDocument().activeElement) {
headers["X-HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id"); headers["HX-Active-Element"] = getRawAttribute(getDocument().activeElement, "id");
headers["X-HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name"); headers["HX-Active-Element-Name"] = getRawAttribute(getDocument().activeElement, "name");
if (getDocument().activeElement.value) { 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; return headers;
@ -1374,8 +1374,8 @@ return (function () {
try { try {
if (!triggerEvent(elt, 'beforeOnLoad.htmx', eventDetail)) return; if (!triggerEvent(elt, 'beforeOnLoad.htmx', eventDetail)) return;
handleTrigger(elt, this.getResponseHeader("X-HX-Trigger")); handleTrigger(elt, this.getResponseHeader("HX-Trigger"));
var pushedUrl = this.getResponseHeader("X-HX-Push"); var pushedUrl = this.getResponseHeader("HX-Push");
var shouldSaveHistory = shouldPush(elt) || pushedUrl; var shouldSaveHistory = shouldPush(elt) || pushedUrl;

24
www/reference.md
View File

@ -57,16 +57,16 @@ title: </> htmx - Attributes
| Header | Description | | Header | Description |
|-------|-------------| |-------|-------------|
| `X-HTTP-Method-Override` | the HTTP verb for non-`GET` and `POST` requests | `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 | `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 | `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 | `HX-Active-Element` | the `id` of the active element if it exists
| `X-HX-Current-URL` | the current URL of the browser | `HX-Current-URL` | the current URL of the browser
| `X-HX-Event-Target` | the `id` of the original event target | `HX-Event-Target` | the `id` of the original event target
| `X-HX-Prompt` | the user response to an [ic-prompt](/attributes/hx-prompt) | `HX-Prompt` | the user response to an [ic-prompt](/attributes/hx-prompt)
| `X-HX-Request` | always `true` | `HX-Request` | always `true`
| `X-HX-Target` | the `id` of the target element if it exists | `HX-Target` | the `id` of the target element if it exists
| `X-HX-Trigger-Name` | the `name` of the triggered element if it exists | `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-Trigger` | the `id` of the triggered element if it exists
</div> </div>
@ -76,8 +76,8 @@ title: </> htmx - Attributes
| Header | Description | | Header | Description |
|-------|-------------| |-------|-------------|
| `X-HX-Push` | pushes a new url into the history stack | `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-Trigger`](/headers/x-hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/x-hx-trigger) for more info
</div> </div>