invoke Event

Invoke supports dispatching events on the client.

Dispatch Events

Dispatch an event on the window, document, and all button tags.

Server
<%= turbo_stream
  .invoke(:dispatch_event, args: ["turbo-boost:streams:demo"]) # <- dispatch on window
  .invoke("document.dispatchEvent", args: ["turbo-boost:streams:demo"]) # <- dispatch on document
  .invoke(
    :dispatch_event,
    args: [
      "turbo-boost:streams:demo",
      {bubbles: true, detail: {source: "The invoke Turbo Stream from TurboBoost Streams"}}
    ],
    selector: "button" # <- dispatch on selected elements
  ) %>
Client
window.TurboBoostEvents = { 'turbo-boost:streams:demo': [] }

window.addEventListener('turbo-boost:streams:demo', event => {
  if (event.target !== window) return
  console.log(
    'received the turbo-boost:streams:demo event',
    event.target,
    event
  )
  TurboBoostEvents[event.type].push(event)
})

document.addEventListener('turbo-boost:streams:demo', event => {
  console.log(
    'received the turbo-boost:streams:demo event',
    event.target,
    event
  )
  TurboBoostEvents[event.type].push(event)
})