From 815a37c0d231d325f5e793cf92c4baea73420af9 Mon Sep 17 00:00:00 2001 From: carson Date: Fri, 5 Feb 2021 20:20:57 -0700 Subject: [PATCH] 1.2.0 release prep --- dist/ext/path-deps.js | 2 +- dist/ext/preload.js | 33 ++-- www/test/1.2.0/test/attributes/hx-headers.js | 164 +++++++++++++++++++ 3 files changed, 185 insertions(+), 14 deletions(-) create mode 100644 www/test/1.2.0/test/attributes/hx-headers.js diff --git a/dist/ext/path-deps.js b/dist/ext/path-deps.js index 942ad1e7..5b40aaca 100644 --- a/dist/ext/path-deps.js +++ b/dist/ext/path-deps.js @@ -32,7 +32,7 @@ htmx.defineExtension('path-deps', { onEvent: function (name, evt) { - if (name === "htmx:afterRequest") { + if (name === "htmx:beforeOnLoad") { var config = evt.detail.requestConfig; // mutating call if (config.verb !== "get") { diff --git a/dist/ext/preload.js b/dist/ext/preload.js index 46355d2f..b7ff0ae3 100644 --- a/dist/ext/preload.js +++ b/dist/ext/preload.js @@ -13,16 +13,26 @@ htmx.defineExtension("preload", { // SOME HELPER FUNCTIONS WE'LL NEED ALONG THE WAY - // config gets the closest non-empty value from the preload="" attribute. (default = "mousedown") - var config = function(node) { + // attr gets the closest non-empty value from the attribute. + var attr = function(node, property) { if (node == undefined) {return undefined;} - return node.getAttribute("preload") || node.getAttribute("data-preload") || config(node.parentElement) || "mousedown" + return node.getAttribute(property) || node.getAttribute("data-" + property) || attr(node.parentElement, property) } // load handles the actual HTTP fetch, and uses htmx.ajax in cases where we're // preloading an htmx resource (this sends the same HTTP headers as a regular htmx request) var load = function(node) { + // Called after a successful AJAX request, to mark the + // content as loaded (and prevent additional AJAX calls.) + var done = function(html) { + node.preloadState = "DONE" + + if (attr(node, "preload-images") == "true") { + document.createElement("div").innerHTML = html // create and populate a node to load linked resources, too. + } + } + return function() { // If this value has already been loaded, then do not try again. @@ -30,18 +40,15 @@ htmx.defineExtension("preload", { return; } - // This is used after a successful AJAX request, to mark the - // content as loaded (and prevent additional AJAX calls.) - var done = function() { - node.preloadState = "DONE" - } - // Special handling for HX-GET - use built-in htmx.ajax function // so that headers match other htmx requests, then set // node.preloadState = TRUE so that requests are not duplicated // in the future - if (node.getAttribute("hx-get")) { - htmx.ajax("GET", node.getAttribute("hx-get"), {handler:done}); + var hxGet = node.getAttribute("hx-get") || node.getAttribute("data-hx-get") + if (hxGet) { + htmx.ajax("GET", hxGet, {handler:function(elt, info) { + done(info.xhr.responseText); + }}); return; } @@ -51,7 +58,7 @@ htmx.defineExtension("preload", { if (node.getAttribute("href")) { var r = new XMLHttpRequest(); r.open("GET", node.getAttribute("href")); - r.onload = done; + r.onload = function() {done(r.responseText);}; r.send(); return; } @@ -73,7 +80,7 @@ htmx.defineExtension("preload", { } // Get event name from config. - var on = config(node) + var on = attr(node, "preload") || "mousedown" // FALL THROUGH to here means we need to add an EventListener diff --git a/www/test/1.2.0/test/attributes/hx-headers.js b/www/test/1.2.0/test/attributes/hx-headers.js new file mode 100644 index 00000000..0333533c --- /dev/null +++ b/www/test/1.2.0/test/attributes/hx-headers.js @@ -0,0 +1,164 @@ +describe("hx-headers attribute", function() { + beforeEach(function () { + this.server = makeServer(); + clearWorkArea(); + }); + afterEach(function () { + this.server.restore(); + clearWorkArea(); + }); + + it('basic hx-headers works', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("test"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make("
") + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('basic hx-headers works with braces', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("test"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make("
") + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('multiple hx-headers works', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['v1'].should.equal("test"); + xhr.requestHeaders['v2'].should.equal("42"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make("
") + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('hx-headers can be on parents', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("test"); + xhr.respond(200, {}, "Clicked!") + }); + make("
"); + var div = byId("d1"); + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('hx-headers can override parents', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("best"); + xhr.respond(200, {}, "Clicked!") + }); + make("
"); + var div = byId("d1"); + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('hx-headers overrides inputs', function () { + this.server.respondWith("POST", "/include", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("best"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make("
") + var input = byId("i1") + input.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('basic hx-headers javascript: works', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("test"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make('
') + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('hx-headers works with braces', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("test"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make('
') + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('multiple hx-headers works', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['v1'].should.equal("test"); + xhr.requestHeaders['v2'].should.equal("42"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make('
') + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('hx-headers can be on parents', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("test"); + xhr.respond(200, {}, "Clicked!") + }); + make('
') + var div = byId("d1"); + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('hx-headers can override parents', function () { + this.server.respondWith("POST", "/vars", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("best"); + xhr.respond(200, {}, "Clicked!") + }); + make('
') + var div = byId("d1"); + div.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + it('hx-headers overrides inputs', function () { + this.server.respondWith("POST", "/include", function (xhr) { + + xhr.requestHeaders['i1'].should.equal("best"); + xhr.respond(200, {}, "Clicked!") + }); + var div = make('
') + var input = byId("i1") + input.click(); + this.server.respond(); + div.innerHTML.should.equal("Clicked!"); + }); + + +}); \ No newline at end of file