mirror of
https://github.com/bigskysoftware/htmx.git
synced 2026-01-25 05:06:13 +00:00
make hx-headers dynamic like hx-vals and port 2.x tests
This commit is contained in:
Carson Gross
63
src/htmx.js
63
src/htmx.js
@@ -319,7 +319,7 @@ var htmx = (() => {
|
||||
action: fullAction,
|
||||
anchor,
|
||||
method,
|
||||
headers: this.__determineHeaders(sourceElement),
|
||||
headers: this.__createCoreHeaders(sourceElement),
|
||||
abort: ac.abort.bind(ac),
|
||||
credentials: "same-origin",
|
||||
signal: ac.signal,
|
||||
@@ -350,7 +350,7 @@ var htmx = (() => {
|
||||
return `${elt.tagName.toLowerCase()}${elt.id ? '#' + elt.id : ''}`;
|
||||
}
|
||||
|
||||
__determineHeaders(elt) {
|
||||
__createCoreHeaders(elt) {
|
||||
let headers = {
|
||||
"HX-Request": "true",
|
||||
"HX-Source": this.__buildIdentifier(elt),
|
||||
@@ -360,13 +360,26 @@ var htmx = (() => {
|
||||
if (this.__isBoosted(elt)) {
|
||||
headers["HX-Boosted"] = "true"
|
||||
}
|
||||
let headersAttribute = this.__attributeValue(elt, "hx-headers");
|
||||
if (headersAttribute) {
|
||||
this.__mergeConfig(headersAttribute, headers);
|
||||
}
|
||||
return headers;
|
||||
}
|
||||
|
||||
__handleHxHeaders(elt, headers) {
|
||||
let result = this.__getAttributeObject(elt, "hx-headers");
|
||||
if (result) {
|
||||
if (result instanceof Promise) {
|
||||
return result.then(obj => {
|
||||
for (let key in obj) {
|
||||
headers[key] = String(obj[key]);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
for (let key in result) {
|
||||
headers[key] = String(result[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
__resolveTarget(elt, selector) {
|
||||
if (selector instanceof Element) {
|
||||
return selector;
|
||||
@@ -406,6 +419,10 @@ var htmx = (() => {
|
||||
}
|
||||
}
|
||||
|
||||
// Handle dynamic headers
|
||||
let headersResult = this.__handleHxHeaders(elt, ctx.request.headers)
|
||||
if (headersResult) await headersResult // Only await if it returned a promise
|
||||
|
||||
// Add HX-Request-Type and HX-Target headers
|
||||
ctx.request.headers["HX-Request-Type"] = (ctx.target === document.body || ctx.select) ? "full" : "partial";
|
||||
if (ctx.target) {
|
||||
@@ -1760,22 +1777,36 @@ var htmx = (() => {
|
||||
}
|
||||
}
|
||||
|
||||
__getAttributeObject(elt, attrName) {
|
||||
let attrValue = this.__attributeValue(elt, attrName);
|
||||
if (!attrValue) return null;
|
||||
|
||||
let javascriptContent = this.__extractJavascriptContent(attrValue);
|
||||
if (javascriptContent) {
|
||||
// Wrap in braces if not already wrapped (for htmx 2.x compatibility)
|
||||
if (javascriptContent.indexOf('{') !== 0) {
|
||||
javascriptContent = '{' + javascriptContent + '}';
|
||||
}
|
||||
// Return promise for async evaluation
|
||||
return this.__executeJavaScriptAsync(elt, {}, javascriptContent, true);
|
||||
} else {
|
||||
// Synchronous path - return the parsed object directly
|
||||
return this.__parseConfig(attrValue);
|
||||
}
|
||||
}
|
||||
|
||||
__handleHxVals(elt, body) {
|
||||
let hxValsValue = this.__attributeValue(elt, "hx-vals");
|
||||
if (hxValsValue) {
|
||||
let javascriptContent = this.__extractJavascriptContent(hxValsValue);
|
||||
if (javascriptContent) {
|
||||
// Return promise for async evaluation
|
||||
return this.__executeJavaScriptAsync(elt, {}, javascriptContent, true).then(obj => {
|
||||
let result = this.__getAttributeObject(elt, "hx-vals");
|
||||
if (result) {
|
||||
if (result instanceof Promise) {
|
||||
return result.then(obj => {
|
||||
for (let key in obj) {
|
||||
body.set(key, obj[key])
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Synchronous path
|
||||
let obj = this.__parseConfig(hxValsValue);
|
||||
for (let key in obj) {
|
||||
body.set(key, obj[key])
|
||||
for (let key in result) {
|
||||
body.set(key, result[key])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
107
test/tests/attributes/hx-headers.js
Normal file
107
test/tests/attributes/hx-headers.js
Normal file
@@ -0,0 +1,107 @@
|
||||
describe('hx-headers attribute', function() {
|
||||
|
||||
beforeEach(() => {
|
||||
setupTest(this.currentTest)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
cleanupTest(this.currentTest)
|
||||
})
|
||||
|
||||
it('basic hx-headers works', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
let div = createProcessedHTML("<div hx-post='/vars' hx-headers='\"i1\":\"test\"'></div>")
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('test');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('basic hx-headers works with braces', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
let div = createProcessedHTML('<div hx-post="/vars" hx-headers=\'{"i1":"test"}\'></div>')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('test');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('multiple hx-headers works', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
let div = createProcessedHTML('<div hx-post="/vars" hx-headers=\'{"v1":"test", "v2":"42"}\'></div>')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.v1.should.equal('test');
|
||||
fetchMock.calls[0].request.headers.v2.should.equal('42');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('hx-headers can be inherited from parents', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
createProcessedHTML("<div hx-headers:inherited='\"i1\":\"test\"'><div id='d1' hx-post='/vars'></div></div>")
|
||||
let div = find('#d1')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('test');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('child hx-headers can override parent', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
createProcessedHTML("<div hx-headers:inherited='\"i1\":\"test\"'><div id='d1' hx-headers='\"i1\":\"best\"' hx-post='/vars'></div></div>")
|
||||
let div = find('#d1')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('best');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('basic hx-headers javascript: works', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
let div = createProcessedHTML('<div hx-post="/vars" hx-headers="javascript:i1:\'test\'"></div>')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('test');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('hx-headers works with braces and javascript:', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
let div = createProcessedHTML('<div hx-post="/vars" hx-headers="javascript:{i1:\'test\'}"></div>')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('test');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('multiple hx-headers works with javascript', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
let div = createProcessedHTML('<div hx-post="/vars" hx-headers="javascript:v1:\'test\', v2:42"></div>')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.v1.should.equal('test');
|
||||
fetchMock.calls[0].request.headers.v2.should.equal('42');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('hx-headers can be inherited from parents with javascript', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
createProcessedHTML('<div hx-headers:inherited="javascript:i1:\'test\'"><div id="d1" hx-post="/vars"></div></div>')
|
||||
let div = find('#d1')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('test');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
it('child hx-headers can override parent with javascript', async function() {
|
||||
mockResponse('POST', '/vars', 'Clicked!')
|
||||
createProcessedHTML('<div hx-headers:inherited="javascript:i1:\'test\'"><div id="d1" hx-headers="javascript:i1:\'best\'" hx-post="/vars"></div></div>')
|
||||
let div = find('#d1')
|
||||
div.click()
|
||||
await forRequest()
|
||||
fetchMock.calls[0].request.headers.i1.should.equal('best');
|
||||
div.innerHTML.should.equal('Clicked!')
|
||||
})
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user