itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2026-03-06 05:59:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move X-HTTP-Method-Override out to an extension

Browse Source 
fixes https://github.com/bigskysoftware/htmx/issues/86
This commit is contained in:
carson 2020-06-10 16:01:56 -07:00
parent 86f1334d30
commit 2305aed18e
12 changed files with 102 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/ext/method-override.js Normal file
View File

@ -0,0 +1,11 @@
htmx.defineExtension('method-override', {
onEvent: function (name, evt) {
if (name === "configRequest.htmx") {
var method = evt.detail.verb;
if (method !== "get" || method !== "post") {
evt.detail.headers['X-HTTP-Method-Override'] = method.toUpperCase();
evt.detail.verb = "post";
}
}
}
});

10
src/ext/rails-method.js
View File

@ -1,10 +0,0 @@
htmx.defineExtension('rails-method', {
onEvent: function (name, evt) {
if (name === "configRequest.htmx") {
var methodOverride = evt.detail.headers['X-HTTP-Method-Override'];
if (methodOverride) {
evt.detail.parameters['_method'] = methodOverride;
}
}
}
});

9
src/htmx.js
View File

@ -1337,9 +1337,6 @@ return (function () {
if (verb !== 'get') {
headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
if (verb !== 'post') {
headers['X-HTTP-Method-Override'] = verb.toUpperCase();
}
}
// behavior of anchors w/ empty href is to use the current URL
@ -1356,7 +1353,11 @@ return (function () {
path:path
};
if(!triggerEvent(elt, 'configRequest.htmx', requestConfig)) return endRequestLock();
// copy out in case the object was overwritten
path = requestConfig.path;
verb = requestConfig.verb;
headers = requestConfig.headers;
filteredParameters = requestConfig.parameters;
var splitPath = path.split("#");
var pathNoAnchor = splitPath[0];
@ -1377,7 +1378,7 @@ return (function () {
}
xhr.open('GET', finalPathForGet, true);
} else {
xhr.open('POST', path, true);
xhr.open(verb.toUpperCase(), path, true);
}
xhr.overrideMimeType("text/html");

6
test/attributes/hx-delete.js
View File

@ -8,10 +8,9 @@ describe("hx-delete attribute", function(){
clearWorkArea();
});
it('issues a DELETE request with proper headers', function()
it('issues a DELETE request', function()
{
this.server.respondWith("DELETE", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('DELETE');
xhr.respond(200, {}, "Deleted!");
});
@ -21,10 +20,9 @@ describe("hx-delete attribute", function(){
btn.innerHTML.should.equal("Deleted!");
});
it('issues a DELETE request with proper headers w/ data-* prefix', function()
it('issues a DELETE request w/ data-* prefix', function()
{
this.server.respondWith("DELETE", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('DELETE');
xhr.respond(200, {}, "Deleted!");
});

6
test/attributes/hx-patch.js
View File

@ -8,10 +8,9 @@ describe("hx-patch attribute", function(){
clearWorkArea();
});
it('issues a PATCH request with proper headers', function()
it('issues a PATCH request', function()
{
this.server.respondWith("PATCH", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PATCH');
xhr.respond(200, {}, "Patched!");
});
@ -21,10 +20,9 @@ describe("hx-patch attribute", function(){
btn.innerHTML.should.equal("Patched!");
});
it('issues a PATCH request with proper headers w/ data-* prefix', function()
it('issues a PATCH request w/ data-* prefix', function()
{
this.server.respondWith("PATCH", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PATCH');
xhr.respond(200, {}, "Patched!");
});

6
test/attributes/hx-put.js
View File

@ -8,10 +8,9 @@ describe("hx-put attribute", function(){
clearWorkArea();
});
it('issues a PUT request with proper headers', function()
it('issues a PUT request', function()
{
this.server.respondWith("PUT", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PUT');
xhr.respond(200, {}, "Putted!");
});
@ -21,10 +20,9 @@ describe("hx-put attribute", function(){
btn.innerHTML.should.equal("Putted!");
});
it('issues a PUT request with proper headers', function()
it('issues a PUT request w/ data-* prefix', function()
{
this.server.respondWith("PUT", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PUT');
xhr.respond(200, {}, "Putted!");
});

53
test/ext/method-override.js Normal file
View File

@ -0,0 +1,53 @@
describe("method-override extension", function(){
beforeEach(function() {
this.server = makeServer();
clearWorkArea();
});
afterEach(function() {
this.server.restore();
clearWorkArea();
});
it('issues a DELETE request with proper headers', function()
{
this.server.respondWith("DELETE", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('DELETE');
xhr.method.should.equal("POST")
xhr.respond(200, {}, "Deleted!");
});
var btn = make('<button hx-ext="method-override" hx-delete="/test">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("Deleted!");
});
it('issues a PATCH request with proper headers', function()
{
this.server.respondWith("PATCH", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PATCH');
xhr.method.should.equal("POST")
xhr.respond(200, {}, "Patched!");
});
var btn = make('<button hx-ext="method-override" hx-patch="/test">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("Patched!");
});
it('issues a PUT request with proper headers', function()
{
this.server.respondWith("PUT", "/test", function(xhr){
xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PUT');
xhr.method.should.equal("POST")
xhr.respond(200, {}, "Putted!");
});
var btn = make('<button hx-ext="method-override" hx-put="/test">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("Putted!");
});
})

61
test/ext/rails-method.js
View File

@ -1,61 +0,0 @@
describe("rails-method extension", function() {
beforeEach(function () {
this.server = makeServer();
clearWorkArea();
});
afterEach(function () {
this.server.restore();
clearWorkArea();
});
it('Does not affect a GET request', function () {
this.server.respondWith("GET", "/test", function (xhr) {
xhr.respond(200, {}, xhr.url)
});
var btn = make('<button hx-get="/test" hx-ext="rails-method">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("/test");
});
it('Does not affect a POST request', function () {
this.server.respondWith("POST", "/test", function (xhr) {
xhr.respond(200, {}, getParameters(xhr)['_method']);
});
var btn = make('<button hx-post="/test" hx-ext="rails-method">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("");
});
it('Adds proper _method param to PUT request', function () {
this.server.respondWith("PUT", "/test", function (xhr) {
xhr.respond(200, {}, getParameters(xhr)['_method']);
});
var btn = make('<button hx-put="/test" hx-ext="rails-method">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("PUT");
});
it('Adds proper _method param to PATCH request', function () {
this.server.respondWith("PATCH", "/test", function (xhr) {
xhr.respond(200, {}, getParameters(xhr)['_method']);
});
var btn = make('<button hx-patch="/test" hx-ext="rails-method">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("PATCH");
});
it('Adds proper _method param to DELETE request', function () {
this.server.respondWith("DELETE", "/test", function (xhr) {
xhr.respond(200, {}, getParameters(xhr)['_method']);
});
var btn = make('<button hx-delete="/test" hx-ext="rails-method">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("DELETE");
});
});

4
test/index.html
View File

@ -83,8 +83,8 @@
<script src="attributes/hx-ws.js"></script>
<!-- extension tests -->
<script src="../src/ext/rails-method.js"></script>
<script src="ext/rails-method.js"></script>
<script src="../src/ext/method-override.js"></script>
<script src="ext/method-override.js"></script>
<script src="../src/ext/debug.js"></script>
<script src="ext/debug.js"></script>

1
www/extensions.md
View File

@ -33,6 +33,7 @@ The following extensions that are tested and distributed with htmx:
| Extension | Description
|-----------|-------------
| [`json-enc`](/extensions/json-enc) | use JSON encoding in the body of requests, rather than the default `x-www-form-urlencoded`
| [`method-override`](/extensions/method-override) | use the `X-HTTP-Method-Override` header for non-`GET` and `POST` requests
| [`morphdom-swap`](/extensions/morphdom-swap) | an extension for using the [morphdom](https://github.com/patrick-steele-idem/morphdom) library as the swapping mechanism in htmx.
| [`client-side-templates`](/extensions/client-side-templates) | support for client side template processing of JSON responses
| [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx

24
www/extensions/method-override.md Normal file
View File

@ -0,0 +1,24 @@
---
layout: layout.njk
title: </> htmx - high power tools for html
---
## The `method-override` Extension
This extension makes non-`GET` and `POST` requests use a `POST` with the `X-HTTP-Method-Override` header set to the
actual HTTP method. This is necessary when dealing with some firewall or proxy situations.
#### Usage
```html
<body hx-ext="method-override">
<button hx-put="/update">
This request will be made as a POST w/ the X-HTTP-Method-Override Header Set
</button>
</body>
```
#### Source
<https://unpkg.com/htmx.org/dist/ext/method-override.js>

20
www/extensions/rails-method.md
View File

@ -1,20 +0,0 @@
---
layout: layout.njk
title: </> htmx - high power tools for html
---
## The `rails-method` Extension
This extension includes the rails `_method` parameter in non-`GET` or `POST` requests.
### Usage
```html
<body hx-ext="rails-method">
...
</body>
```
### Source
<https://unpkg.com/htmx.org/dist/ext/rails-method.js>