live_cable 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20702ab1185b4176ee5c141e8d3aebf94f84c1125ea4dff99d77f1e811d291be
-  data.tar.gz: 0c98c9fb64b5cd6c0beb7c42d7a941f146159b176bcd1b794d4054387cfcd333
+  metadata.gz: a08ab617cc974271c9f4b2784bb52ca53d1430942fd72e761fe52cd650a86141
+  data.tar.gz: abd1b26ca97b149de015b9fb7b9b457ff6b6f21e224a61318788876115fcd9d9
 SHA512:
-  metadata.gz: 7d5fee026e4323afaa5341089f016e0444e830ad29cf06b2279a2861173bf7294c204a4429b5d02bc814e0a2a44abbfaad040fc6f6edd3979e990808f6c835bd
-  data.tar.gz: 1d59e9aa056f2a088f395214105a973c80d6d43ac354b31a9ac313db3fb9465e1773aeaa83017bc95be81b2f9ee91c0f00b8a1d7155e587411a51c675a9b43b4
+  metadata.gz: e3b932fcbdfcf3fb5d6b939320798eb151c82d0e6bc85c61c2452ff729233855b477752e10465c8098f4601651d04f9e67449293b9635cde3eefa47bde08733c
+  data.tar.gz: 6476ba238c1960655922da93588b175ed0468294364dd1252b05ad044eb26cb0d94360254581cb791ddc6def81155940c82d310835398b7c791b8cb3daf6884c

data/CHANGELOG.md

@@ -0,0 +1,82 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+
+The Ruby gem (`live_cable`) and the npm package (`@isometriks/live_cable`) are
+released together and share a single version number. Entries below note which
+side of the pair a change affects when it isn't both.
+
+## 0.2.0
+
+The gem and npm package versions are realigned in this release. The npm package
+jumps from 0.1.1 straight to 0.2.0, skipping 0.1.2, which was published for the
+gem only.
+
+### Added
+
+- **Server-dispatched DOM events.** Components can queue browser events with
+  `dispatch_event`, delivered with the next broadcast and fired after the DOM has
+  been morphed, so handlers observe the updated markup. Events are bubbling
+  `CustomEvent`s dispatched from the component root (or from `window` with
+  `window: true`), so they can be wired up with plain Stimulus `data-action`
+  syntax. (`LiveCable::Component::Events`)
+- **Loading states.** While a message is in flight, a `live-loading` attribute is
+  added to the component's root element and to the element that triggered the
+  message, so pending feedback can be styled with plain CSS. `live-disable-with`
+  on a button or submit button swaps its label and disables it for the duration
+  of the round trip; form values are serialized before anything is disabled.
+  Reactive inputs (`live-reactive`) receive `live-loading` but are never
+  disabled, so typing is not interrupted.
+- **Component test harness.** `LiveCable::Testing` can be included in specs to
+  mount and drive components without a browser, via `live_mount`.
+- `./loading` subpath export for the new loading module (npm).
+- Gemspec `homepage_uri`, `documentation_uri`, and `bug_tracker_uri` metadata.
+
+### Changed
+
+- Minimum Rails version raised from 7.0 to 7.1 (`actioncable`, `actionview`,
+  `activemodel`, `activesupport`) (gem).
+- Herb upgraded from `~> 0.8.10` to `~> 0.10.2`, and `prism >= 1.0` added as an
+  explicit dependency (gem).
+- Gem homepage now points at https://livecable.io rather than the RubyGems page.
+- The `Live` namespace for user components moved out of `lib/live_cable.rb` into
+  its own `lib/live.rb`, required explicitly and ignored by the gem's Zeitwerk
+  loader (gem).
+- Dev dependencies updated: Vitest 2.x to 4.x, happy-dom 15.x to 20.x (npm).
+
+### Fixed
+
+- Template compiler: block sentinel tokens now carry a newline value so Herb's
+  whitespace helpers (`at_line_start?`, `preceding_token_ends_with_newline?`)
+  treat them as a line boundary instead of raising on a `nil` value.
+- Template compiler: the closing `end` of an output block is emitted as plain
+  code instead of going through Herb's paren-balancing block-end helper, since
+  escaping is delegated to Rails' output buffer.
+
+## 0.1.2 - 2026-03-25
+
+Gem only; no corresponding npm release.
+
+### Added
+
+- JavaScript assets packaged so they can be consumed from package managers as
+  well as through the asset pipeline.
+
+## 0.1.1 - 2026-03-25
+
+### Added
+
+- Component generator.
+
+### Changed
+
+- Herb pinned to `0.8.*`, and other library versions pinned.
+
+### Fixed
+
+- `render` inside a live template.
+- Generator no longer creates `app/live` when the directory does not exist.
+
+## 0.1.0
+
+Initial public release.

data/README.md

@@ -3,7 +3,7 @@
 LiveCable is a Phoenix LiveView-style live component system for Ruby on Rails that tracks state server-side and allows
 you to call actions from the frontend using Stimulus with a React style state management API.
 
-**Full documentation: [livecable.io](https://livecable.io)**
+**Full documentation: [livecable.io](https://livecable.io)** | **Sandbox app: [live_cable_app](https://github.com/isometriks/live_cable_app)**
 
 ## Features
 
@@ -48,14 +48,32 @@ end
 
 ## JavaScript Setup
 
-### 1. Register the LiveController
+LiveCable works with both **importmap-rails** (default for Rails 7+) and **JavaScript bundlers** (esbuild, Vite, webpack, Rollup via jsbundling-rails or vite_ruby).
 
-Register the `LiveController` in your Stimulus application (`app/javascript/controllers/application.js`):
+### Using importmap-rails (default)
+
+The gem automatically pins all necessary modules when you install it. No additional setup is needed.
+
+### Using a JavaScript bundler (yarn/npm)
+
+Install the npm package:
+
+```bash
+yarn add @isometriks/live_cable
+# or
+npm install @isometriks/live_cable
+```
+
+This will also install the required peer dependencies (`@rails/actioncable`, `@hotwired/stimulus`, and `morphdom`).
+
+### Register the LiveController
+
+Register the `LiveController` in your Stimulus application (`app/javascript/controllers/application.js`). The imports are the same regardless of whether you use importmap or a bundler:
 
 ```javascript
 import { Application } from "@hotwired/stimulus"
-import LiveController from "live_cable_controller"
-import "live_cable"  // Automatically starts DOM observer
+import LiveController from "@isometriks/live_cable/controller"
+import "@isometriks/live_cable"  // Automatically starts DOM observer
 
 const application = Application.start()
 application.register("live", LiveController)
@@ -69,9 +87,9 @@ If you want to call LiveCable actions from your own Stimulus controllers, add th
 
 ```javascript
 import { Application, Controller } from "@hotwired/stimulus"
-import LiveController from "live_cable_controller"
-import LiveCableBlessing from "live_cable_blessing"
-import "live_cable"  // Automatically starts DOM observer
+import LiveController from "@isometriks/live_cable/controller"
+import LiveCableBlessing from "@isometriks/live_cable/blessing"
+import "@isometriks/live_cable"  // Automatically starts DOM observer
 
 // Enable the blessing for all controllers
 Controller.blessings = [
@@ -982,6 +1000,53 @@ The `live-key` attribute acts as a hint for the diffing algorithm to identify el
 <% end %>
 ```
 
+## Loading States
+
+Every interaction is a round trip to the server. While a message is in flight, LiveCable adds a `live-loading` attribute to the component's root element and to the element that triggered the message, so you can show pending feedback with plain CSS:
+
+```css
+button[live-loading] { opacity: 0.5; cursor: wait; }
+
+.spinner { display: none; }
+[live-loading] .spinner { display: inline-block; }
+```
+
+To prevent double-clicks, mark buttons with `live-disable-with`. The element is disabled while the message is in flight and restored when the server responds. Give the attribute a value to also swap the label:
+
+```erb
+<button live-action="checkout" live-disable-with="Processing...">Checkout</button>
+
+<form live-form="save">
+  <input type="text" name="title">
+  <button type="submit" live-disable-with="Saving...">Save</button>
+</form>
+```
+
+For forms, put `live-disable-with` on the submit button(s); form values are serialized before anything is disabled. Reactive inputs (`live-reactive`) get the `live-loading` attribute but are never disabled, so typing is not interrupted.
+
+The loading state is cleared when the server responds — with a re-render, an error, or a lightweight acknowledgement when the action didn't change any state — so it never gets stuck.
+
+## Server Events
+
+Components can trigger DOM events on the client with `dispatch_event` — for scroll-to-bottom, closing modals, toasts, or anything else the client should do after the server finishes:
+
+```ruby
+def send_message(params)
+  messages << { text: params[:text] }
+  dispatch_event('chat:message-sent')
+end
+```
+
+Events fire as bubbling `CustomEvent`s from the component's root element **after the DOM has been morphed**, so handlers see the updated markup. Plain Stimulus `data-action` syntax handles them — no LiveCable-specific JavaScript:
+
+```erb
+<div data-controller="chat" data-action="chat:message-sent->chat#scrollToBottom">
+  ...
+</div>
+```
+
+Pass a payload (`dispatch_event('toast:show', message: 'Saved')`, available as `event.detail`) or target global listeners with `dispatch_event('analytics:tracked', window: true)`. Events work from actions, lifecycle callbacks, and `stream_from` callbacks, and are delivered exactly once, in order, whether or not the action re-rendered.
+
 ## Compound Components
 
 By default, components render the partial at `app/views/live/component_name.html.live.erb`. You can organize your templates differently by marking a component as `compound`.
@@ -1219,6 +1284,27 @@ When a broadcast is received:
 - **Live dashboards**: Update metrics and charts in real-time
 - **Presence tracking**: Show who's currently online or viewing a resource
 
+## Testing Components
+
+LiveCable includes a test harness for fast, browser-free component tests. Actions go through the real message pipeline (whitelisting, parameter parsing, change tracking, re-rendering), so tests exercise what production runs:
+
+```ruby
+RSpec.describe Live::Counter do
+  include LiveCable::Testing
+
+  it 'increments by the step size' do
+    counter = live_mount('counter', step: 2)
+
+    counter.perform(:increment)
+
+    expect(counter.count).to eq(2)
+    expect(counter.rendered).to have_css('[data-testid="counter-value"]', text: '2')
+  end
+end
+```
+
+The harness supports client reactive updates (`set_reactive`), broadcast assertions (`broadcasts(:_refresh)`), simulated stream broadcasts (`receive_stream`), shared state across components mounted on the same connection, connection identifiers like `current_user`, and lifecycle testing via `unmount`. See the [testing guide](https://livecable.io/guide/testing) for the full API.
+
 ## Error Handling
 
 When an unhandled exception is raised inside a component action, LiveCable replaces the component in the DOM with an error message and cleans up the server-side component.

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

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import SubscriptionManager from "live_cable_subscriptions"
+import SubscriptionManager from "@isometriks/live_cable/subscriptions"
+import LoadingState from "@isometriks/live_cable/loading"
 
 export default class extends Controller {
   static values = {
@@ -12,16 +13,18 @@ export default class extends Controller {
 
   #subscription
   #debounces = new Map()
+  #loading
 
   #callActionCallback = (event) => {
     event.stopPropagation()
 
     const { action, params } = event.detail
 
-    this.sendCall(action, params)
+    this.sendCall(action, params, event.target)
   }
 
   connect() {
+    this.#loading = new LoadingState(this.element)
     this.element.addEventListener("call", this.#callActionCallback)
 
     this.#subscription = SubscriptionManager.subscribe(
@@ -33,8 +36,8 @@ export default class extends Controller {
 
     // Create callbacks for each action or form
     this.actionsValue.forEach((action) => {
-      this[`action_$${action}`] = ({ params }) => {
-        this.sendCall(action, this.#convertKeysToSnakeCase(params))
+      this[`action_$${action}`] = ({ params, currentTarget }) => {
+        this.sendCall(action, this.#convertKeysToSnakeCase(params), currentTarget)
       }
 
       this[`form_$${action}`] = (event) => {
@@ -47,12 +50,30 @@ export default class extends Controller {
     this.element.removeEventListener("call", this.#callActionCallback)
   }
 
-  sendCall(action, params = {}) {
+  sendCall(action, params = {}, trigger = null) {
+    this.#loading.start(trigger)
     this.#subscription.send(
       this.#flushDebounced(this.#callMessage(params, action))
     )
   }
 
+  // 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.
+  finishLoading() {
+    this.#loading?.finish()
+  }
+
+  // Whether any message is still awaiting a server response
+  get isLoading() {
+    return this.#loading?.active ?? false
+  }
+
+  // Called by the subscription when the component is being torn down.
+  resetLoading() {
+    this.#loading?.reset()
+  }
+
   #callMessage(params, action) {
     return {
       _action: action,
@@ -83,6 +104,8 @@ export default class extends Controller {
 
   sendReactive(target) {
     this.#clearDebounce(target)
+    // Never disable reactive inputs while in flight - it would drop focus
+    this.#loading.start(target, { disable: false })
     this.#subscription.send(
       this.#flushDebounced(this.#reactiveMessage(target))
     )
@@ -114,9 +137,13 @@ export default class extends Controller {
   sendForm(action, formEl) {
     this.#clearDebounce(formEl)
 
+    // Serialize before starting the loading state - disabled controls
+    // (live-disable-with) are excluded from FormData
     const formData = new FormData(formEl)
     const params = new URLSearchParams(formData).toString()
 
+    this.#loading.start(formEl)
+
     this.#subscription.send(
       this.#flushDebounced(this.#callMessage(params, action))
     )

data/app/assets/javascript/live_cable.js

@@ -1,6 +1,6 @@
-import LiveObserver from 'live_cable_observer'
-import SubscriptionManager from 'live_cable_subscriptions'
-import DOM from 'live_cable_dom'
+import LiveObserver from '@isometriks/live_cable/observer'
+import SubscriptionManager from '@isometriks/live_cable/subscriptions'
+import DOM from '@isometriks/live_cable/dom'
 
 const observer = new LiveObserver()
 observer.start()

data/app/assets/javascript/live_cable_blessing.js

@@ -1,4 +1,4 @@
-import LiveController from "live_cable_controller"
+import LiveController from "@isometriks/live_cable/controller"
 
 export default function LiveCableBlessing(constructor) {
   Object.assign(constructor.prototype, {

data/app/assets/javascript/loading.js

@@ -0,0 +1,162 @@
+/**
+ * Loading state tracking for LiveCable components.
+ *
+ * Tracks in-flight messages for a single component and reflects them in the
+ * DOM so users can style pending states with CSS:
+ *
+ * - The component root element gets a `live-loading` attribute while any
+ *   message is awaiting a server response.
+ * - The element that triggered the message (button, form, input) also gets
+ *   a `live-loading` attribute.
+ * - Elements with a `live-disable-with` attribute are disabled while the
+ *   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.
+ */
+export default class LoadingState {
+  /** @type {HTMLElement} */
+  #root
+  /** @type {number} */
+  #inFlight = 0
+  /** @type {Set<Element>} - Elements marked with the live-loading attribute */
+  #markedElements = new Set()
+  /** @type {Map<Element, Object>} - Original state of disabled elements */
+  #disabledElements = new Map()
+
+  /**
+   * @param {HTMLElement} root - The component's root element
+   */
+  constructor(root) {
+    this.#root = root
+  }
+
+  /**
+   * Whether any message is currently awaiting a server response.
+   * @returns {boolean}
+   */
+  get active() {
+    return this.#inFlight > 0
+  }
+
+  /**
+   * Mark the component as loading.
+   * Called right before a message is sent to the server.
+   *
+   * @param {Element|null} trigger - The element that triggered the message
+   * @param {Object} options
+   * @param {boolean} options.disable - Whether to process live-disable-with
+   *   elements. Disabled for reactive inputs so typing doesn't lose focus.
+   */
+  start(trigger = null, { disable = true } = {}) {
+    this.#inFlight++
+
+    this.#mark(this.#root)
+
+    if (trigger instanceof Element && trigger !== this.#root) {
+      this.#mark(trigger)
+
+      if (disable) {
+        this.#disableElements(trigger)
+      }
+    }
+  }
+
+  /**
+   * Record a server response for this component.
+   * Restores the DOM once all in-flight messages have been answered.
+   *
+   * @returns {boolean} true if the loading state was fully cleared
+   */
+  finish() {
+    if (this.#inFlight === 0) {
+      return false
+    }
+
+    this.#inFlight--
+
+    if (this.#inFlight > 0) {
+      return false
+    }
+
+    this.#restore()
+    return true
+  }
+
+  /**
+   * Clear all loading state immediately, regardless of in-flight count.
+   * Used when the component is being torn down (e.g. on error).
+   */
+  reset() {
+    this.#inFlight = 0
+    this.#restore()
+  }
+
+  #mark(element) {
+    element.setAttribute('live-loading', '')
+    this.#markedElements.add(element)
+  }
+
+  /**
+   * Disable the trigger and/or its descendants marked with live-disable-with.
+   * For a button the attribute lives on the button itself; for a form it
+   * usually lives on the submit button(s) inside it.
+   */
+  #disableElements(trigger) {
+    const elements = []
+
+    if (trigger.hasAttribute('live-disable-with')) {
+      elements.push(trigger)
+    }
+
+    elements.push(...trigger.querySelectorAll('[live-disable-with]'))
+
+    elements.forEach(element => {
+      // Already disabled by an earlier in-flight message
+      if (this.#disabledElements.has(element)) {
+        return
+      }
+
+      const text = element.getAttribute('live-disable-with')
+      const isInput = element instanceof HTMLInputElement
+
+      this.#disabledElements.set(element, {
+        disabled: element.disabled,
+        content: text ? (isInput ? element.value : element.textContent) : null,
+      })
+
+      element.disabled = true
+
+      if (text) {
+        if (isInput) {
+          element.value = text
+        } else {
+          element.textContent = text
+        }
+      }
+    })
+  }
+
+  #restore() {
+    this.#markedElements.forEach(element => {
+      element.removeAttribute('live-loading')
+    })
+    this.#markedElements.clear()
+
+    this.#disabledElements.forEach(({ disabled, content }, element) => {
+      element.disabled = disabled
+
+      if (content !== null) {
+        if (element instanceof HTMLInputElement) {
+          element.value = content
+        } else {
+          element.textContent = content
+        }
+      }
+    })
+    this.#disabledElements.clear()
+  }
+}

data/app/assets/javascript/observer.js

@@ -1,4 +1,4 @@
-import DOM from "live_cable_dom"
+import DOM from "@isometriks/live_cable/dom"
 
 /**
  * LiveCable DOM Observer

data/app/assets/javascript/subscriptions.js

@@ -20,7 +20,7 @@
 
 import { createConsumer } from "@rails/actioncable"
 import morphdom from "morphdom"
-import DOM from "live_cable_dom"
+import DOM from "@isometriks/live_cable/dom"
 
 const consumer = createConsumer()
 
@@ -396,6 +396,10 @@ class Subscription {
    * @param {string} [data._status] - Status update (e.g., 'subscribed', 'destroy')
    * @param {string} [data._refresh] - HTML to morph into the DOM
    * @param {string} [data._error] - Raw error HTML to replace the component with
+   * @param {boolean} [data._ack] - Acknowledgement that a message was processed
+   *   without producing a re-render; clears the loading state
+   * @param {Array} [data._events] - Events to dispatch as CustomEvents; when
+   *   attached to a _refresh they fire after the DOM has been morphed
    * @private
    */
   #received = (data) => {
@@ -405,7 +409,32 @@ class Subscription {
       this.#handleRefresh(data['_refresh'])
     } else if (data['_error']) {
       this.#handleError(data['_error'])
+    } else if (data['_ack']) {
+      this.#controller?.finishLoading()
     }
+
+    // Dispatch after the branch above so events attached to a refresh fire
+    // once the morph has completed and handlers see the updated DOM
+    if (data['_events']) {
+      this.#dispatchEvents(data['_events'])
+    }
+  }
+
+  /**
+   * Fire server-dispatched events as bubbling CustomEvents from the
+   * component's root element, or from window when the event asks for it.
+   *
+   * @param {Array<{name: string, detail: Object, window: boolean}>} events
+   * @private
+   */
+  #dispatchEvents(events) {
+    events.forEach(({ name, detail, window: onWindow }) => {
+      const target = onWindow ? window : this.#controller?.element
+
+      if (target) {
+        target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }))
+      }
+    })
   }
 
   /**
@@ -420,6 +449,7 @@ class Subscription {
       return
     }
 
+    this.#controller.resetLoading()
     this.#controller.element.outerHTML = html
     this.unsubscribe()
   }
@@ -458,10 +488,40 @@ class Subscription {
       return
     }
 
-    morphdom(this.#controller.element, this.#buildRefreshDOM(refresh), {
+    // Restore live-loading / live-disable-with state before morphing so the
+    // morph applies the server-rendered truth on top of the original DOM.
+    // With multiple messages in flight this only restores once the last
+    // response arrives - until then the morph below preserves the pending
+    // elements so live-disable-with buttons can't be clicked early.
+    this.#controller.finishLoading()
+
+    const rootElement = this.#controller.element
+    const stillLoading = this.#controller.isLoading
+
+    const refreshDOM = this.#buildRefreshDOM(refresh)
+
+    if (stillLoading) {
+      refreshDOM.setAttribute('live-loading', '')
+    }
+
+    morphdom(rootElement, refreshDOM, {
       // Preserve elements marked with live-ignore attribute
       onBeforeElUpdated(fromEl, toEl) {
-        return fromEl.hasAttribute && !fromEl.hasAttribute('live-ignore')
+        if (!fromEl.hasAttribute) {
+          return true
+        }
+
+        if (fromEl.hasAttribute('live-ignore')) {
+          return false
+        }
+
+        // Keep elements that are still awaiting a server response untouched
+        // (the root is handled above so the rest of the tree still morphs)
+        if (stillLoading && fromEl !== rootElement && fromEl.hasAttribute('live-loading')) {
+          return false
+        }
+
+        return true
       },
       // Use stable keys for better morphing performance and state preservation
       getNodeKey(node) {

data/config/importmap.rb

@@ -3,9 +3,10 @@
 pin '@rails/actioncable', to: 'actioncable.esm.js'
 pin 'morphdom', to: 'https://ga.jspm.io/npm:morphdom@2.7.8/dist/morphdom-esm.js'
 
-pin 'live_cable_controller', to: 'controllers/live_controller.js'
-pin 'live_cable_blessing', to: 'live_cable_blessing.js'
-pin 'live_cable_subscriptions', to: 'subscriptions.js'
-pin 'live_cable_observer', to: 'observer.js'
-pin 'live_cable_dom', to: 'dom.js'
-pin 'live_cable', to: 'live_cable.js'
+pin '@isometriks/live_cable/controller', to: 'controllers/live_controller.js'
+pin '@isometriks/live_cable/blessing', to: 'live_cable_blessing.js'
+pin '@isometriks/live_cable/subscriptions', to: 'subscriptions.js'
+pin '@isometriks/live_cable/loading', to: 'loading.js'
+pin '@isometriks/live_cable/observer', to: 'observer.js'
+pin '@isometriks/live_cable/dom', to: 'dom.js'
+pin '@isometriks/live_cable', to: 'live_cable.js'

data/lib/live.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Live
+  # For components to live in
+end

data/lib/live_cable/component/broadcasting.rb

@@ -13,6 +13,12 @@ module LiveCable
         broadcast({ _status: 'subscribed', id: live_id })
       end
 
+      # Sent when a received message didn't change any reactive variables,
+      # so the client can clear its loading state without a re-render.
+      def broadcast_ack
+        broadcast({ _ack: true })
+      end
+
       def broadcast_destroy
         broadcast({ _status: 'destroy' })
         @subscribed = false
@@ -20,9 +26,14 @@ module LiveCable
 
       def broadcast_render
         run_callbacks :render do
-          broadcast(
-            _refresh: render.as_json
-          )
+          data = { _refresh: render.as_json }
+
+          # Events ride along with the render so the client can fire them
+          # after the DOM has been morphed
+          events = flush_events
+          data[:_events] = events if events.any?
+
+          broadcast(data)
         end
       end
     end