remove legacy `hx-on=` syntax

author: Carson Gross <carson@bigsky.software> 2023-12-13 14:59:48 -0700
committer: Carson Gross <carson@bigsky.software> 2023-12-13 14:59:48 -0700
commit: cd176d61d7ebaf91368ab4428e995d933275cda9 (patch)
tree: 06ebde23265d721592934c92e14dd27cacab9b9a
parent: 22fde35674f17122863bd300e3c394cc23efe642 (diff)
download: htmx-cd176d61d7ebaf91368ab4428e995d933275cda9.tar.gz
htmx-cd176d61d7ebaf91368ab4428e995d933275cda9.zip
5 files changed, 25 insertions, 45 deletions
diff --git a/src/htmx.js b/src/htmx.js
index e9905fa6..278534ba 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -1934,7 +1934,7 @@ return (function () {
             if (elt.querySelectorAll) {
                 var boostedSelector = ", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";
                 var results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit'], [hx-sse], [data-hx-sse], [hx-ws]," +
-                    " [data-hx-ws], [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger], [hx-on], [data-hx-on]");
+                    " [data-hx-ws], [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]");
                 return results;
             } else {
                 return [];
@@ -2008,32 +2008,6 @@ return (function () {
             nodeData.onHandlers.push({event:eventName, listener:listener});
         }
 
-        function processHxOn(elt) {
-            var hxOnValue = getAttributeValue(elt, 'hx-on');
-            if (hxOnValue) {
-                var handlers = {}
-                var lines = hxOnValue.split("\n");
-                var currentEvent = null;
-                var curlyCount = 0;
-                while (lines.length > 0) {
-                    var line = lines.shift();
-                    var match = line.match(/^\s*([a-zA-Z:\-\.]+:)(.*)/);
-                    if (curlyCount === 0 && match) {
-                        line.split(":")
-                        currentEvent = match[1].slice(0, -1); // strip last colon
-                        handlers[currentEvent] = match[2];
-                    } else {
-                        handlers[currentEvent] += line;
-                    }
-                    curlyCount += countCurlies(line);
-                }
-
-                for (var eventName in handlers) {
-                    addHxOnEventHandler(elt, eventName, handlers[eventName]);
-                }
-            }
-        }
-
         function processHxOnWildcard(elt) {
             // wipe any previous on handlers so that this function takes precedence
             deInitOnHandlers(elt)
@@ -2073,8 +2047,6 @@ return (function () {
 
                 nodeData.initHash = attributeHash(elt);
 
-                processHxOn(elt);
-
                 triggerEvent(elt, "htmx:beforeProcessNode")
 
                 if (elt.value) {
@@ -2123,8 +2095,6 @@ return (function () {
             }
             initNode(elt);
             forEach(findElementsToProcess(elt), function(child) { initNode(child) });
-            // Because it happens second, the new way of adding onHandlers superseeds the old one
-            // i.e. if there are any hx-on:eventName attributes, the hx-on attribute will be ignored
             forEach(findHxOnWildcardElements(elt), processHxOnWildcard);
         }
 
diff --git a/test/index.html b/test/index.html
index 6559420a..940a4a8e 100644
--- a/test/index.html
+++ b/test/index.html
@@ -80,7 +80,6 @@
 <script src="attributes/hx-indicator.js"></script>
 <script src="attributes/hx-disabled-elt.js"></script>
 <script src="attributes/hx-disinherit.js"></script>
-<script src="attributes/hx-on.js"></script>
 <script src="attributes/hx-on-wildcard.js"></script>
 <script src="attributes/hx-params.js"></script>
 <script src="attributes/hx-patch.js"></script>
diff --git a/test/scratch/demo.html b/test/scratch/demo.html
index 19102815..379e718a 100644
--- a/test/scratch/demo.html
+++ b/test/scratch/demo.html
@@ -1 +1,5 @@
-foo
-\ No newline at end of file
+<html>
+<body>
+<div id="foo" fooBar="10">asdfasdf</div>
+</body>
+</html>
diff --git a/www/content/attributes/hx-on.md b/www/content/attributes/hx-on.md
index 60a13725..2934fd4d 100644
--- a/www/content/attributes/hx-on.md
+++ b/www/content/attributes/hx-on.md
@@ -9,23 +9,15 @@ The `hx-on*` attributes improve upon `onevent` by enabling the handling of any a
 for enhanced [Locality of Behaviour (LoB)](/essays/locality-of-behaviour/) even when dealing with non-standard DOM events. For example, these
 attributes allow you to handle [htmx events](/reference#events).
 
-There are two forms of `hx-on` attributes:
-
-* In the primary form, you specify the event name as part of the attribute name, after a colon.  So, for example, if
-  you want to respond to a `click` event, you would use the attribute `hx-on:click`.
-
-* The second, deprecated form, uses the `hx-on` attribute directly. This latter form should only be used if IE11 support
-  is required, and will be removed in htmx 2.0
-
-### hx-on:* (recommended)
-
-In this form, the event name follows a colon `:` in the attribute, and the attribute value is the script to be executed:
+With `hx-on` attributes, you specify the event name as part of the attribute name, after a colon.  So, for example, if
+you want to respond to a `click` event, you would use the attribute `hx-on:click`:
 
 ```html
 <div hx-on:click="alert('Clicked!')">Click</div>
 ```
 
-Note that, in addition to the standard DOM events, all htmx and other custom events can be captured, too! 
+Note that this syntax can be used to capture all htmx events, as well as most other custom events, in addition to the
+standard DOM events.
 
 One gotcha to note is that DOM attributes do not preserve case. This means, unfortunately, an attribute like
 `hx-on:htmx:beforeRequest` **will not work**, because the DOM lowercases the attribute names.  Fortunately, htmx supports
diff --git a/www/content/docs.md b/www/content/docs.md
index 975db01f..1ec6486d 100644
--- a/www/content/docs.md
+++ b/www/content/docs.md
@@ -183,6 +183,21 @@ To upgrade to htmx 2.0 from htmx 1.0, you will need to do the following:
     `htmx.config.methodsThatUseUrlParams` to `["get"]` (it's a little crazy, but `DELETE`, according to the spec, should
      use request parameters.)
   * If you want to make cross-domain requests with htmx, revert `htmx.config.selfRequestsOnly` to `false`
+* Convert any `hx-on` attributes to their `hx-on:` equivalent:
+  ```html
+     <button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
+                                   htmx:afterRequest: alert('Done making a request!')">
+      Get Info!
+     </button>
+  ```
+  becomes:
+  ```html
+     <button hx-get="/info" hx-on:htmx:before-request="alert('Making a request!')"
+                            hx-on:htmx:after-request="alert('Done making a request!')">
+      Get Info!
+     </button>
+  Note that you must use the kebab-case of the event name due to the fact that attributes are case-insensitive in HTML.
+  ```
 
 here is a meta tag to revert to htmx 1.x defaults:
author	Carson Gross <carson@bigsky.software>	2023-12-13 14:59:48 -0700
committer	Carson Gross <carson@bigsky.software>	2023-12-13 14:59:48 -0700
commit	cd176d61d7ebaf91368ab4428e995d933275cda9 (patch)
tree	06ebde23265d721592934c92e14dd27cacab9b9a
parent	22fde35674f17122863bd300e3c394cc23efe642 (diff)
download	htmx-cd176d61d7ebaf91368ab4428e995d933275cda9.tar.gz htmx-cd176d61d7ebaf91368ab4428e995d933275cda9.zip