prep 1.9.5 release

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [1.9.5] - 2023-08-25
+
 ## [1.9.4] - 2023-07-25
 
 * This is a bug-fix release for the most part, w/a heavy dose of @telroshan

README.md

@@ -33,7 +33,7 @@ By removing these arbitrary constraints htmx completes HTML as a
 ## quick start
 
 ```html
-  <script src="https://unpkg.com/htmx.org@1.9.4"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
   <!-- have a button POST a click via AJAX -->
   <button hx-post="/clicked" hx-swap="outerHTML">
     Click Me

dist/ext/response-targets.js

@@ -3,43 +3,55 @@
     /** @type {import("../htmx").HtmxInternalApi} */
     var api;
 
-    const targetAttrPrefix = 'hx-target-';
-    const targetAttrMinLen = targetAttrPrefix.length - 1;
+    var attrPrefix = 'hx-target-';
 
     /**
      * @param {HTMLElement} elt
      * @param {number} respCode
      * @returns {HTMLElement | null}
      */
-    function getRespCodeTarget(elt, respCode) {
-        if (!elt || !respCode) return null;
+    function getRespCodeTarget(elt, respCodeNumber) {
+        if (!elt || !respCodeNumber) return null;
 
-        var targetAttr = targetAttrPrefix + respCode;
-        var targetStr  = api.getClosestAttributeValue(elt, targetAttr);
+        var respCode = respCodeNumber.toString();
 
-        if (targetStr) {
-            if (targetStr === "this") {
-                return api.findThisElement(elt, targetAttr);
-            } else {
-                return api.querySelectorExt(elt, targetStr);
-            }
-        } else {
-            for (let l = targetAttr.length - 1; l > targetAttrMinLen; l--) {
-                targetAttr = targetAttr.substring(0, l) + '*';
-                targetStr  = api.getClosestAttributeValue(elt, targetAttr);
-                if (targetStr) break;
-            }
-        }
+        // '*' is the original syntax, as the obvious character for a wildcard.
+        // The 'x' alternative was added for maximum compatibility with HTML
+        // templating engines, due to ambiguity around which characters are
+        // supported in HTML attributes.
+        //
+        // Start with the most specific possible attribute and generalize from
+        // there.
+        var attrPossibilities = [
+            respCode,
+
+            respCode.substr(0, 2) + '*',
+            respCode.substr(0, 2) + 'x',
 
-        if (targetStr) {
-            if (targetStr === "this") {
-                return api.findThisElement(elt, targetAttr);
-            } else {
-                return api.querySelectorExt(elt, targetStr);
+            respCode.substr(0, 1) + '*',
+            respCode.substr(0, 1) + 'x',
+            respCode.substr(0, 1) + '**',
+            respCode.substr(0, 1) + 'xx',
+
+            '*',
+            'x',
+            '***',
+            'xxx',
+        ];
+
+        for (var i = 0; i < attrPossibilities.length; i++) {
+            var attr = attrPrefix + attrPossibilities[i];
+            var attrValue = api.getClosestAttributeValue(elt, attr);
+            if (attrValue) {
+                if (attrValue === "this") {
+                    return api.findThisElement(elt, attr);
+                } else {
+                    return api.querySelectorExt(elt, attrValue);
+                }
             }
-        } else {
-            return null;
         }
+
+        return null;
     }
 
     /** @param {Event} evt */

dist/ext/ws.js

@@ -341,7 +341,7 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
 
 				/** @type {WebSocketWrapper} */
 				var socketWrapper = api.getInternalData(socketElt).webSocket;
-				var headers = api.getHeaders(sendElt, socketElt);
+				var headers = api.getHeaders(sendElt, api.getTarget(sendElt));
 				var results = api.getInputValues(sendElt, 'post');
 				var errors = results.errors;
 				var rawParameters = results.values;

dist/htmx.js

@@ -60,6 +60,7 @@ return (function () {
                 settlingClass:'htmx-settling',
                 swappingClass:'htmx-swapping',
                 allowEval:true,
+                allowScriptTags:true,
                 inlineScriptNonce:'',
                 attributesToSettle:["class", "style", "width", "height"],
                 withCredentials:false,
@@ -73,6 +74,7 @@ return (function () {
                 getCacheBusterParam: false,
                 globalViewTransitions: false,
                 methodsThatUseUrlParams: ["get"],
+                selfRequestsOnly: false
             },
             parseInterval:parseInterval,
             _:internalEval,
@@ -84,7 +86,7 @@ return (function () {
                 sock.binaryType = htmx.config.wsBinaryType;
                 return sock;
             },
-            version: "1.9.4"
+            version: "1.9.5"
         };
 
         /** @type {import("./htmx").HtmxInternalApi} */
@@ -593,6 +595,8 @@ return (function () {
                 return [document];
             } else if (selector === 'window') {
                 return [window];
+            } else if (selector === 'body') {
+                return [document.body];
             } else {
                 return getDocument().querySelectorAll(normalizeSelector(selector));
             }
@@ -1821,7 +1825,7 @@ return (function () {
         }
 
         function evalScript(script) {
-            if (script.type === "text/javascript" || script.type === "module" || script.type === "") {
+            if (htmx.config.allowScriptTags && (script.type === "text/javascript" || script.type === "module" || script.type === "") ) {
                 var newScript = getDocument().createElement("script");
                 forEach(script.attributes, function (attr) {
                     newScript.setAttribute(attr.name, attr.value);
@@ -1925,18 +1929,22 @@ return (function () {
         function addHxOnEventHandler(elt, eventName, code) {
             var nodeData = getInternalData(elt);
             nodeData.onHandlers = [];
-            var func = new Function("event", code + "; return;");
+            var func;
             var listener = function (e) {
-                return func.call(elt, e);
+                return maybeEval(elt, function() {
+                    if (!func) {
+                        func = new Function("event", code);
+                    }
+                    func.call(elt, e);
+                });
             };
             elt.addEventListener(eventName, listener);
             nodeData.onHandlers.push({event:eventName, listener:listener});
-            return {nodeData:nodeData, code:code, func:func, listener:listener};
         }
 
         function processHxOn(elt) {
             var hxOnValue = getAttributeValue(elt, 'hx-on');
-            if (hxOnValue && htmx.config.allowEval) {
+            if (hxOnValue) {
                 var handlers = {}
                 var lines = hxOnValue.split("\n");
                 var currentEvent = null;
@@ -2844,6 +2852,18 @@ return (function () {
             return arr;
         }
 
+        function verifyPath(elt, path, requestConfig) {
+            var url = new URL(path, document.location.href);
+            var origin = document.location.origin;
+            var sameHost = origin === url.origin;
+            if (htmx.config.selfRequestsOnly) {
+                if (!sameHost) {
+                    return false;
+                }
+            }
+            return triggerEvent(elt, "htmx:validateUrl", mergeObjects({url: url, sameHost: sameHost}, requestConfig));
+        }
+
         function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
             var resolve = null;
             var reject = null;
@@ -3072,6 +3092,11 @@ return (function () {
                 }
             }
 
+            if (!verifyPath(elt, finalPath, requestConfig)) {
+                triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
+                return;
+            };
+
             xhr.open(verb.toUpperCase(), finalPath, true);
             xhr.overrideMimeType("text/html");
             xhr.withCredentials = requestConfig.withCredentials;
@@ -3582,9 +3607,22 @@ return (function () {
         //====================================================================
         // Initialization
         //====================================================================
+        var isReady = false
+        getDocument().addEventListener('DOMContentLoaded', function() {
+            isReady = true
+        })
 
+        /**
+         * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+         *
+         * This function uses isReady because there is no realiable way to ask the browswer whether
+         * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+         * firing and readystate=complete.
+         */
         function ready(fn) {
-            if (getDocument().readyState !== 'loading') {
+            // Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
+            // some means other than the initial page load.
+            if (isReady || getDocument().readyState === 'complete') {
                 fn();
             } else {
                 getDocument().addEventListener('DOMContentLoaded', fn);

package.json

@@ -5,7 +5,7 @@
     "AJAX",
     "HTML"
   ],
-  "version": "1.9.4",
+  "version": "1.9.5",
   "homepage": "https://htmx.org/",
   "bugs": {
     "url": "https://github.com/bigskysoftware/htmx/issues"

src/htmx.js

@@ -86,7 +86,7 @@ return (function () {
                 sock.binaryType = htmx.config.wsBinaryType;
                 return sock;
             },
-            version: "1.9.4"
+            version: "1.9.5"
         };
 
         /** @type {import("./htmx").HtmxInternalApi} */

www/content/_index.md

@@ -35,7 +35,7 @@ By removing these arbitrary constraints, htmx completes HTML as a [hypertext](ht
 <h2>quick start</h2>
 
 ```html
-  <script src="https://unpkg.com/htmx.org@1.9.4"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
   <!-- have a button POST a click via AJAX -->
   <button hx-post="/clicked" hx-swap="outerHTML">
     Click Me

www/content/docs.md

@@ -114,7 +114,7 @@ The fastest way to get going with htmx is to load it via a CDN. You can simply a
 and get going:
 
 ```html
-<script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-TODO" crossorigin="anonymous"></script>
 ```
 
 While the CDN approach is extremely simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn).