Merge branch 'bigskysoftware:main' into main

Author: marisst

src/json-enc/json-enc.js

@@ -14,21 +14,24 @@
     encodeParameters: function(xhr, parameters, elt) {
       xhr.overrideMimeType('text/json')
 
-      const vals = api.getExpressionVars(elt)
       const object = {}
       parameters.forEach(function(value, key) {
-        // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types
-        const typedValue = Object.hasOwn(vals, key) ? vals[key] : value
         if (Object.hasOwn(object, key)) {
           if (!Array.isArray(object[key])) {
             object[key] = [object[key]]
           }
-          object[key].push(typedValue)
+          object[key].push(value)
         } else {
-          object[key] = typedValue
+          object[key] = value
         }
       })
 
+      const vals = api.getExpressionVars(elt)
+      Object.keys(object).forEach(function(key) {
+        // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types
+        object[key] = Object.hasOwn(vals, key) ? vals[key] : object[key]
+      })
+
       return (JSON.stringify(object))
     }
   })

src/json-enc/test/ext/json-enc.js

@@ -143,7 +143,7 @@ describe('json-enc extension', function() {
       xhr.respond(200, {}, 'clicked')
     })
 
-    make(`<form hx-ext="json-enc" hx-post="/test" hx-vals="js:{'obj': {'x': 123}, 'number': 5000, 'numberString': '5000'}">
+    make(`<form hx-ext="json-enc" hx-post="/test" hx-vals="js:{'obj': {'x': 123}, 'number': 5000, 'numberString': '5000', 'array': ['text', 123, {'key': 'value'}]}">
              <button id="btn" type="submit">Submit</button>
           </form>`)
     var btn = byId('btn')
@@ -153,6 +153,7 @@ describe('json-enc extension', function() {
     values.number.should.equal(5000)
     values.numberString.should.equal('5000')
     chai.assert.deepEqual(values.obj, {'x': 123})
+    chai.assert.deepEqual(values.array, ['text', 123, {'key': 'value'}])
   })
 
   it('handles multiple values per key', function() {

src/ws/test/ext/ws.js

@@ -629,6 +629,32 @@ describe('web-sockets extension', function() {
     this.tickMock()
   })
 
+  it('re-establishes closed connections using reconnect()', function() {
+    var handledEventTypes = []
+    var handler = function(evt) { handledEventTypes.push(evt.detail.event.type) }
+    var reconnect = function(evt) { setTimeout(() => evt.detail.socketWrapper.reconnect()) }
+
+    htmx.on('htmx:wsConnecting', handler)
+
+    var div = make('<div hx-get="/test" hx-swap="outerHTML" hx-ext="ws" ws-connect="ws://localhost:8080">')
+
+    htmx.on(div, 'htmx:wsClose', handler)
+    htmx.on(div, 'htmx:wsClose', reconnect)
+
+    this.tickMock()
+    this.socketServer.close()
+
+    this.tickMock()
+    handledEventTypes.should.eql(['connecting', 'close', 'connecting'])
+
+    this.tickMock()
+    this.socketServer.close()
+
+    htmx.off('htmx:wsConnecting', handler)
+    htmx.off(div, 'htmx:wsClose', handler)
+    htmx.off(div, 'htmx:wsClose', reconnect)
+  })
+
   describe('Send immediately', function() {
     function checkCallForWsBeforeSend(spy, wrapper, message, target) {
       // Utility function to always check the same for htmx:wsBeforeSend caught by a spy

src/ws/ws.js

@@ -289,6 +289,7 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
     wrapper.publicInterface = {
       send: wrapper.send.bind(wrapper),
       sendImmediately: wrapper.sendImmediately.bind(wrapper),
+      reconnect: wrapper.init.bind(wrapper),
       queue: wrapper.messageQueue
     }