live_cable 0.3.0 → 0.4.0

data/app/assets/javascript/controllers/live_controller.js

@@ -4,7 +4,9 @@ import LoadingState from "@isometriks/live_cable/loading"
 
 export default class extends Controller {
   static values = {
-    defaults: Object,
+    // Opaque signed blob produced by the server; forwarded verbatim to the
+    // channel on subscribe, where it is verified and decoded.
+    defaults: String,
     status: String,
     component: String,
     actions: Array,
@@ -24,7 +26,7 @@ export default class extends Controller {
   }
 
   connect() {
-    this.#loading = new LoadingState(this.element)
+    this.#loading = new LoadingState(this.element, { onStalled: () => this.#stalled() })
     this.element.addEventListener("call", this.#callActionCallback)
 
     this.#subscription = SubscriptionManager.subscribe(
@@ -34,6 +36,12 @@ export default class extends Controller {
       this
     )
 
+    // The subscription outlives a controller, so messages held from before a
+    // disconnect need this controller's watchdog
+    for (let i = this.#subscription.pendingCount; i > 0; i--) {
+      this.#loading.start()
+    }
+
     // Create callbacks for each action or form
     this.actionsValue.forEach((action) => {
       this[`action_$${action}`] = ({ params, currentTarget }) => {
@@ -48,6 +56,9 @@ export default class extends Controller {
 
   disconnect() {
     this.element.removeEventListener("call", this.#callActionCallback)
+    // A new controller brings its own loading state; don't leave this one's
+    // watchdog to fire on an element that has gone
+    this.#loading?.reset()
   }
 
   sendCall(action, params = {}, trigger = null) {
@@ -57,11 +68,12 @@ export default class extends Controller {
     )
   }
 
-  // Called by the subscription when the server answers a message
-  // (refresh, ack, or error). Restores any live-loading / live-disable-with
-  // state once all in-flight messages have been answered.
+  // Called by the subscription when the server answers a message (its
+  // reply, an ack, or an error). Restores any live-loading / live-disable-with
+  // state once all in-flight messages have been answered, and returns true
+  // when it did.
   finishLoading() {
-    this.#loading?.finish()
+    return this.#loading?.finish() ?? false
   }
 
   // Whether any message is still awaiting a server response
@@ -69,11 +81,31 @@ export default class extends Controller {
     return this.#loading?.active ?? false
   }
 
+  // How many messages are still awaiting a server response
+  get inFlight() {
+    return this.#loading?.inFlight ?? 0
+  }
+
   // Called by the subscription when the component is being torn down.
   resetLoading() {
     this.#loading?.reset()
   }
 
+  // The loading state gave up waiting for a reply. Anything still held for a
+  // reconnect is dropped with it, so a message the page has said didn't go
+  // through can't go through later - the user would click again, and it
+  // would run twice. A message already sent can't be recalled; the event
+  // says how many were dropped so the page can word its message.
+  #stalled() {
+    const discarded = this.#subscription?.discardPending() ?? 0
+
+    this.statusValue = 'stalled'
+    this.element.dispatchEvent(new CustomEvent('live:stalled', {
+      bubbles: true,
+      detail: { discarded },
+    }))
+  }
+
   #callMessage(params, action) {
     return {
       _action: action,
@@ -115,8 +147,20 @@ export default class extends Controller {
     return {
       _action: '_reactive',
       name: target.name,
-      value: target.value,
+      value: this.#reactiveValue(target),
+    }
+  }
+
+  #reactiveValue(target) {
+    if (target.type === 'checkbox') {
+      return target.checked
     }
+
+    if (target.type === 'select-multiple') {
+      return Array.from(target.selectedOptions, (option) => option.value)
+    }
+
+    return target.value
   }
 
   #form(action, { currentTarget, params }) {

data/app/assets/javascript/live_cable.js

@@ -4,8 +4,10 @@ import DOM from '@isometriks/live_cable/dom'
 
 const observer = new LiveObserver()
 observer.start()
+SubscriptionManager.syncIdentity()
 
 document.addEventListener('turbo:before-render', (event) => {
+  SubscriptionManager.syncIdentity()
   SubscriptionManager.prune(event.detail.newBody)
 })
 

data/app/assets/javascript/loading.js

@@ -12,12 +12,26 @@
  *   message is in flight. If the attribute has a value, the element's label
  *   (textContent, or value for inputs) is swapped for it.
  *
- * The state is cleared when the server responds with a refresh, an error,
- * or an ack (sent when an action didn't change any reactive variables).
- * Multiple in-flight messages are counted; the DOM is only restored once
- * all of them have been answered.
+ * The state is cleared when the server replies with the component's own
+ * re-render, an error, or an ack (sent when the action didn't re-render the
+ * component by itself). Multiple in-flight messages are counted; the DOM is
+ * only restored once all of them have been answered.
+ *
+ * If no reply comes for `LoadingState.timeout` milliseconds while a message
+ * is in flight, the state gives up: it resets and calls `onStalled`. That is
+ * the backstop for a reply that is never coming - the server stopped while
+ * running the message, say - which would otherwise leave a button disabled
+ * until the page is reloaded.
  */
 export default class LoadingState {
+  /**
+   * Milliseconds to wait for any reply before giving up. Long enough to
+   * cover a reconnect after a deploy, since messages held for one count too.
+   * Set it before components connect to change it everywhere.
+   * @type {number}
+   */
+  static timeout = 30_000
+
   /** @type {HTMLElement} */
   #root
   /** @type {number} */
@@ -26,12 +40,20 @@ export default class LoadingState {
   #markedElements = new Set()
   /** @type {Map<Element, Object>} - Original state of disabled elements */
   #disabledElements = new Map()
+  /** @type {Function|null} */
+  #onStalled
+  /** @type {number|null} */
+  #timer = null
 
   /**
    * @param {HTMLElement} root - The component's root element
+   * @param {Object} options
+   * @param {Function} [options.onStalled] - Called after the state gives up
+   *   waiting and resets itself
    */
-  constructor(root) {
+  constructor(root, { onStalled = null } = {}) {
     this.#root = root
+    this.#onStalled = onStalled
   }
 
   /**
@@ -42,6 +64,14 @@ export default class LoadingState {
     return this.#inFlight > 0
   }
 
+  /**
+   * How many messages are awaiting a server response.
+   * @returns {number}
+   */
+  get inFlight() {
+    return this.#inFlight
+  }
+
   /**
    * Mark the component as loading.
    * Called right before a message is sent to the server.
@@ -52,7 +82,9 @@ export default class LoadingState {
    *   elements. Disabled for reactive inputs so typing doesn't lose focus.
    */
   start(trigger = null, { disable = true } = {}) {
-    this.#inFlight++
+    if (this.#inFlight++ === 0) {
+      this.#arm()
+    }
 
     this.#mark(this.#root)
 
@@ -79,9 +111,12 @@ export default class LoadingState {
     this.#inFlight--
 
     if (this.#inFlight > 0) {
+      // Still waiting on others, but the server is evidently answering
+      this.#arm()
       return false
     }
 
+    this.#disarm()
     this.#restore()
     return true
   }
@@ -92,9 +127,26 @@ export default class LoadingState {
    */
   reset() {
     this.#inFlight = 0
+    this.#disarm()
     this.#restore()
   }
 
+  #arm() {
+    this.#disarm()
+    this.#timer = setTimeout(() => this.#stall(), LoadingState.timeout)
+  }
+
+  #disarm() {
+    clearTimeout(this.#timer)
+    this.#timer = null
+  }
+
+  #stall() {
+    this.#timer = null
+    this.reset()
+    this.#onStalled?.()
+  }
+
   #mark(element) {
     element.setAttribute('live-loading', '')
     this.#markedElements.add(element)