Cleanup and small improvements.

build.gradle

@@ -45,6 +45,6 @@ clientDependencies {
     installDir = 'src/main/resources/assets/vendor'
     npm {
         'bulma'('0.9.4', into: 'bulma') { include 'css/bulma.*' }
-        'htmx.org'('1.8.5', into: 'htmx') { include 'htmx.js', 'ext/preload.js' }
+        'htmx.org'('1.8.6', into: 'htmx') { include 'htmx.js', 'ext/preload.js' }
     }
 }

src/main/java/hello/HelloController.java

@@ -24,9 +24,10 @@ public class HelloController {
 
     private static final Logger log = LoggerFactory.getLogger(HelloController.class);
 
-    private static long counter = 0;
+    private long counter = 0;
-    private static Deque<String> msgDeque = new ArrayDeque<String>();
+    private Deque<String> msgDeque = new ArrayDeque<String>();
-    private static String hostname;
+    private String hostname;
+    private String helloMessage;
 
 
     @PostConstruct
@@ -40,19 +41,18 @@ public class HelloController {
             hostname = System.getenv("HOSTNAME");
         }
 
+        String osName = System.getProperty("os.name");
+        String osVersion = System.getProperty("os.version");
+        String osArch = System.getProperty("os.arch");
+        String javaName = System.getProperty("java.vm.name");
+        String javaVersion = System.getProperty("java.vm.version");
+        helloMessage = String.format("%s v%s, running %s %s on %s.", javaName, javaVersion, osName, osVersion, osArch);        
     }
 
 
     @Get("/")
     @View("index")
     public HttpResponse<?> index() {
-        String osName = System.getProperty("os.name");
-        String osVersion = System.getProperty("os.version");
-        String osArch = System.getProperty("os.arch");
-        String javaName = System.getProperty("java.vm.name");
-        String javaVersion = System.getProperty("java.vm.version");
-        String helloMessage = String.format("%s v%s, running %s %s on %s.", javaName, javaVersion, osName, osVersion, osArch);
-
         return HttpResponse.ok(CollectionUtils.mapOf("hostname", hostname, "info", helloMessage));
     }
    

src/main/resources/assets/vendor/htmx/htmx.js

@@ -1,10 +1,16 @@
-//AMD insanity
+// UMD insanity
+// This code sets up support for (in order) AMD, ES6 modules, and globals.
 (function (root, factory) {
     //@ts-ignore
     if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.
         //@ts-ignore
         define([], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node. Does not work with strict CommonJS, but
+        // only CommonJS-like environments that support module.exports,
+        // like Node.
+        module.exports = factory();
     } else {
         // Browser globals
         root.htmx = root.htmx || factory();
@@ -75,7 +81,7 @@ return (function () {
                 sock.binaryType = htmx.config.wsBinaryType;
                 return sock;
             },
-            version: "1.8.5"
+            version: "1.8.6"
         };
 
         /** @type {import("./htmx").HtmxInternalApi} */
@@ -786,7 +792,8 @@ return (function () {
         function handleAttributes(parentNode, fragment, settleInfo) {
             forEach(fragment.querySelectorAll("[id]"), function (newNode) {
                 if (newNode.id && newNode.id.length > 0) {
-                    var oldNode = parentNode.querySelector(newNode.tagName + "[id='" + newNode.id + "']");
+                    var normalizedId = newNode.id.replace("'", "\\'");
+                    var oldNode = parentNode.querySelector(newNode.tagName + "[id='" + normalizedId + "']");
                     if (oldNode && oldNode !== parentNode) {
                         var newAttributes = newNode.cloneNode();
                         cloneAttributes(newNode, oldNode);
@@ -1317,12 +1324,17 @@ return (function () {
         }
 
         function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
+            var elementData = getInternalData(elt);
             var eltsToListenOn;
             if (triggerSpec.from) {
                 eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from);
             } else {
                 eltsToListenOn = [elt];
             }
+            // store the initial value of the element so we can tell if it changes
+            if (triggerSpec.changed) {
+                elementData.lastValue = elt.value;
+            }
             forEach(eltsToListenOn, function (eltToListenOn) {
                 var eventListener = function (evt) {
                     if (!bodyContains(elt)) {
@@ -1343,7 +1355,6 @@ return (function () {
                     if (eventData.handledFor == null) {
                         eventData.handledFor = [];
                     }
-                    var elementData = getInternalData(elt);
                     if (eventData.handledFor.indexOf(elt) < 0) {
                         eventData.handledFor.push(elt);
                         if (triggerSpec.consume) {
@@ -1398,7 +1409,7 @@ return (function () {
                     on: eltToListenOn
                 })
                 eltToListenOn.addEventListener(triggerSpec.trigger, eventListener);
-            })
+            });
         }
 
         var windowIsScrolling = false // used by initScrollHandler
@@ -2884,7 +2895,7 @@ return (function () {
                     removeRequestIndicatorClasses(indicators);
                     triggerEvent(elt, 'htmx:afterRequest', responseInfo);
                     triggerEvent(elt, 'htmx:afterOnLoad', responseInfo);
-                    // if the body no longer contains the element, trigger the even on the closest parent
+                    // if the body no longer contains the element, trigger the event on the closest parent
                     // remaining in the DOM
                     if (!bodyContains(elt)) {
                         var secondaryTriggerElt = null;
@@ -3091,6 +3102,7 @@ return (function () {
             serverResponse = beforeSwapDetails.serverResponse; // allow updating content
             isError = beforeSwapDetails.isError; // allow updating error
 
+            responseInfo.target = target; // Make updated target available to response events
             responseInfo.failed = isError; // Make failed property available to response events
             responseInfo.successful = !isError; // Make successful property available to response events
 

src/main/resources/views/defaultLayout.html

@@ -40,7 +40,6 @@
     </div>
 
     <script src="/assets/vendor/htmx/htmx.js" type="text/javascript"></script>
-
 </body>
 
 </html>

src/main/resources/views/index.html

@@ -12,7 +12,7 @@
 
             <article class="message">
                 <div class="message-header">
-                    <p>Hello Micronaut from <span th:text="${hostname}"></span></span></p>
+                    <p>Hello from <span th:text="${hostname}"></span></span></p>
                 </div>
                 <div class="message-body" th:text="${info}">                    
                 </div>
@@ -21,16 +21,13 @@
             <div class="columns">
                 <div class="column is-full">
                     
-                    <form hx-post="/ping">
+                    <form hx-post="/ping" id="form" hx-target="#pong">
-                        <div class="field has-addons"  hx-target="#pong">
+                        <div class="field has-addons" >
-                            <div class="control">
+                            <div class="control" id="input">
-                                <input name="message" class="input" type="text" placeholder="Enter message" maxlength="128" size="64">
+                                <input name="message" class="input" type="text" placeholder="Enter message" maxlength="128" size="64" onfocus="this.value=''">
                             </div>
                             <div class="control">
-                                <a class="button is-info" hx-post="/ping" hx-include="[msg='message']" hx-indicator="#spinner">
+                                <a class="button is-info" hx-post="/ping">Submit</a>
-                                    Submit
-                                </a>
-                                <img  id="spinner" class="htmx-indicator" src="/img/spinner.svg"/>
                             </div>
                         </div>
                     </form>