live_cable 0.1.2 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0376ac919c3ed29e3c63181364e512f51aa39aeeb84f1b8a0584b42e1c89985
-  data.tar.gz: 8bb42eb86866bddf18fb83e0a16770c4ddb48c3ec22524b680e272d155e22431
+  metadata.gz: 9328496395172b7689b680c9fc54f222f26da2cc2d5a1cd25683fbcbdbe3c2bf
+  data.tar.gz: c824da0a8a7cc10f3ca84a2965d264d88b879944b108d57e37599b0865b07b9d
 SHA512:
-  metadata.gz: 4f95c867c6f65a85ceca7fad4c23cc572bc1cfb6c90e008ebb24403dbc7624cd9977ae711bc133484612b0e3ac16440f3d18bf365c656c8d537f009387dfd0fe
-  data.tar.gz: 01d716fd63f39335bbaaed9aa8b0643f5b9a1493b9f1ca449635b4aa7f3cecc6d67992f31503412cbba6fd53860778918627430365af614b8598beb0666306b4
+  metadata.gz: ed7c3db367dea001f0d50cfd0d05dd5c7ba837800438924e944c7a92041dd0b252293682792b17bb8730934a659ba2839a1c6ad283469fdacc00bfa4771f4a79
+  data.tar.gz: a97bb8a0096edb1a4daa016b59051aef62a1d93eb1e8635d4a5462b5b6444ae5bdf28ae997b141f0e3ff0dfafde71fdcb08d98d322921c4e527e8e2c3ed416b6

data/CHANGELOG.md

@@ -0,0 +1,118 @@
+# 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.1 - 2026-08-13
+
+### Removed
+
+- `Component#channel_name` and `Connection#channel_name`. A component no longer
+  subscribes to a stream of its own now that payloads are written straight to its
+  channel, so the name identified a stream nothing published to or read from.
+  Subscribing to external streams with `stream_from` is unaffected (gem).
+
+### Fixed
+
+- **The opening payload from `LiveChannel#subscribed` could be dropped.**
+  Payloads were published through the pubsub adapter, but ActionCable registers
+  `stream_from` asynchronously — so the initial render could be published before
+  the subscription it targets existed, and pubsub delivers only to subscribers
+  present at that moment, with no buffering or retry. The component was left
+  showing `data-live-status-value="disconnected"`, with no cached render on the
+  client for a Turbo reattach to replay, until some later action happened to
+  produce a refresh. When a subscribe render raised, the `_error` payload was
+  lost outright and the failure never surfaced in the browser at all. A
+  component's stream belongs to exactly one connection, so payloads are now
+  written straight to that connection rather than published, which removes the
+  race along with a pubsub round trip (gem).
+- **Components not reattaching after a Turbo Drive navigation.** Navigating to a
+  page containing a component that is already subscribed deliberately keeps the
+  existing subscription, so `LiveChannel#subscribed` does not run again and the
+  server sends nothing. The newly rendered element was left with its
+  server-rendered status of `disconnected` and never received the component's
+  current state. A reconnecting controller now re-syncs the subscription's status
+  and replays the last render into the new element (npm).
+- Building DOM from a server render used iterator helpers
+  (`childNodes.values().find(...)`), an ES2025 feature, which raised
+  `TypeError: ... .find is not a function` on runtimes that do not implement them
+  — Node 20 and earlier, and browsers older than Chrome 122 / Firefox 131 /
+  Safari 18.4. Rewritten with `Array.from` (npm).
+
+## 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
 
@@ -1000,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`.
@@ -1237,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 "@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/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/subscriptions.js

@@ -34,8 +34,7 @@ function createDOMFromHTML(html) {
   template.innerHTML = html
 
   // Find a node that isn't a comment
-  const node = template.content.childNodes
-    .values()
+  const node = Array.from(template.content.childNodes)
     .find(n => n.nodeName !== '#comment')
 
   if (node) {
@@ -230,6 +229,15 @@ class ComponentState {
     return this.#element
   }
 
+  /**
+   * Whether a render has been received and cached, and can therefore be
+   * replayed into a freshly attached element.
+   * @returns {boolean}
+   */
+  get hasRender() {
+    return this.#lastTemplate !== null && Boolean(this.#partsByTemplate[this.#lastTemplate])
+  }
+
   /**
    * Create a DOM element from stored state.
    * @param {Object} refresh - Optional refresh data to update state
@@ -345,12 +353,44 @@ class Subscription {
 
   /**
    * Update the controller reference.
-   * Called when a Stimulus controller reconnects to an existing subscription.
+   * Called when a Stimulus controller reconnects to an existing subscription —
+   * most importantly after a Turbo Drive navigation to a page that contains the
+   * same component, where prune() deliberately keeps the subscription alive.
+   *
+   * In that case the ActionCable subscription is never recreated, so
+   * LiveChannel#subscribed does not run again and the server sends nothing.
+   * Without re-syncing here, the newly rendered element keeps the
+   * server-rendered status of "disconnected" forever and never receives the
+   * component's current state.
    *
    * @param {Object} controller - Stimulus controller instance
    */
   set controller(controller) {
+    const previous = this.#controller
+
     this.#controller = controller
+    this.#componentState.element = controller.element
+
+    if (previous && previous !== controller) {
+      this.#reattach()
+    }
+  }
+
+  /**
+   * Bring a freshly connected controller up to date with state this
+   * subscription already holds.
+   * @private
+   */
+  #reattach() {
+    if (this.#currentStatus) {
+      this.#controller.statusValue = this.#currentStatus
+    }
+
+    // Replay the last render into the new element. The server-side component
+    // is the same instance, so the cached parts are its current state.
+    if (this.#componentState.hasRender) {
+      this.#handleRefresh(null)
+    }
   }
 
   /**
@@ -396,6 +436,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,9 +449,34 @@ 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 }))
+      }
+    })
+  }
+
   /**
    * Handle error messages from the server.
    * Replaces the component element with raw error HTML, then unsubscribes
@@ -420,6 +489,7 @@ class Subscription {
       return
     }
 
+    this.#controller.resetLoading()
     this.#controller.element.outerHTML = html
     this.unsubscribe()
   }
@@ -458,10 +528,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/app/channels/live_channel.rb

@@ -41,6 +41,11 @@ class LiveChannel < ActionCable::Channel::Base
     @component = nil
   end
 
+  # Exposes #transmit, which ActionCable keeps private to the channel.
+  def broadcast(data)
+    transmit(data)
+  end
+
   private
 
   # @return [LiveCable::Component, nil]

data/config/importmap.rb

@@ -6,6 +6,7 @@ pin 'morphdom', to: 'https://ga.jspm.io/npm:morphdom@2.7.8/dist/morphdom-esm.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