turbo_reflex 0.0.29 → 0.0.31

data/app/javascript/drivers/window.js

@@ -7,7 +7,9 @@ import renderer from '../renderer'
 
 function aborted (event) {
   const xhr = event.target
-  dispatch(lifecycle.events.abort, document, { xhr, ...event.detail })
+  dispatch(lifecycle.events.abort, document, {
+    detail: { ...event.detail, xhr }
+  })
 }
 
 function errored (event) {
@@ -22,7 +24,7 @@ function errored (event) {
   dispatch(
     lifecycle.events.clientError,
     document,
-    { xhr, ...event.detail, error },
+    { detail: { ...event.detail, error, xhr } },
     true
   )
 }

data/app/javascript/events.js

@@ -14,17 +14,11 @@ export const stateEvents = {
 
 export const allEvents = { ...lifecycleEvents, ...stateEvents }
 
-export function dispatch (name, target = document, detail = {}, raise = false) {
-  try {
-    target = target || document
-    const event = new CustomEvent(name, {
-      detail,
-      cancelable: false,
-      bubbles: true
-    })
-    target.dispatchEvent(event)
-  } catch (error) {
-    if (raise) throw error
-    dispatch(lifecycleEvents.clientError, target, { error, ...detail }, true)
-  }
+export function dispatch (name, target, options = {}) {
+  options = options || {}
+  options.detail = options.detail || {}
+  target = target || document
+  const evt = new CustomEvent(name, { ...options, bubbles: true })
+  target.dispatchEvent(evt)
+  return evt
 }

data/app/javascript/index.js

@@ -13,6 +13,16 @@ import state from './state'
 import urls from './urls'
 import uuids from './uuids'
 
+function buildReflexPayload (id, element) {
+  return {
+    id, // reflex id
+    name: element.dataset.turboReflex, // reflex name
+    elementId: element.id.length > 0 ? element.id : null,
+    elementAttributes: elements.buildAttributePayload(element),
+    startedAt: new Date().getTime()
+  }
+}
+
 function invokeReflex (event) {
   let element
   let payload = {}
@@ -22,22 +32,38 @@ function invokeReflex (event) {
     if (!element) return
     if (!delegates.isRegisteredForElement(event.type, element)) return
 
-    const driver = drivers.find(element)
+    const reflexId = `reflex-${uuids.v4()}`
+    let driver = drivers.find(element)
+    let payload = {
+      ...buildReflexPayload(reflexId, element),
+      driver: driver.name,
+      frameId: driver.frame ? driver.frame.id : null,
+      src: driver.src
+    }
+
+    const startEvent = dispatch(lifecycle.events.start, element, {
+      cancelable: true,
+      detail: payload
+    })
+
+    if (startEvent.defaultPrevented)
+      return dispatch(lifecycle.events.abort, element, {
+        detail: {
+          message: `An event handler for '${lifecycle.events.start}' prevented default behavior and blocked reflex invocation!`,
+          source: startEvent
+        }
+      })
 
-    // payload sent to server (also used for lifecycle event.detail)
+    // the element and thus the driver may have changed based on the start event handler(s)
+    driver = drivers.find(element)
     payload = {
-      id: `reflex-${uuids.v4()}`,
-      name: element.dataset.turboReflex,
+      ...buildReflexPayload(reflexId, element),
       driver: driver.name,
-      src: driver.src,
       frameId: driver.frame ? driver.frame.id : null,
-      elementId: element.id.length > 0 ? element.id : null,
-      elementAttributes: elements.buildAttributePayload(element),
-      startedAt: new Date().getTime()
+      src: driver.src
     }
 
     activity.add(payload)
-    dispatch(lifecycle.events.start, element, payload)
 
     if (['frame', 'window'].includes(driver.name)) event.preventDefault()
 
@@ -56,8 +82,7 @@ function invokeReflex (event) {
     }
   } catch (error) {
     dispatch(lifecycle.events.clientError, element, {
-      error,
-      ...payload
+      detail: { ...payload, error }
     })
   }
 }

data/app/javascript/lifecycle.js

@@ -4,7 +4,10 @@ import { dispatch, lifecycleEvents as events } from './events'
 function finish (event) {
   event.detail.endedAt = new Date().getTime()
   event.detail.milliseconds = event.detail.endedAt - event.detail.startedAt
-  setTimeout(() => dispatch(events.finish, event.target, event.detail), 20)
+  setTimeout(
+    () => dispatch(events.finish, event.target, { detail: event.detail }),
+    25
+  )
 }
 
 addEventListener(events.serverError, finish)

data/app/javascript/state/index.js

@@ -13,7 +13,9 @@ function loadState () {
   loadedState = { ...currentState }
   delete meta.element.dataset.clientStateChange
   setTimeout(() =>
-    dispatch(events.stateLoad, meta.element, { state: currentState })
+    dispatch(events.stateLoad, meta.element, {
+      detail: { state: currentState }
+    })
   )
 }
 

data/app/javascript/state/observable.js

@@ -9,13 +9,13 @@ function observable (object, parent = null) {
   const proxy = new Proxy(object, {
     deleteProperty (target, key) {
       delete target[key]
-      dispatch(events.stateChange, meta.element, { state: head })
+      dispatch(events.stateChange, meta.element, { detail: { state: head } })
       return true
     },
 
     set (target, key, value, receiver) {
       target[key] = observable(value, this)
-      dispatch(events.stateChange, meta.element, { state: head })
+      dispatch(events.stateChange, meta.element, { detail: { state: head } })
       return true
     }
   })

data/app/javascript/turbo.js

@@ -45,7 +45,7 @@ addEventListener('turbo:before-fetch-response', event => {
       dispatch(
         lifecycle.events.clientError,
         document,
-        { ...event.detail, error },
+        { detail: { ...event.detail, error } },
         true
       )
     }

data/lib/turbo_reflex/base.rb

@@ -17,11 +17,14 @@ require_relative "attribute_set"
 # * render ...................... Renders Rails templates, partials, etc. (doesn't halt controller request handling)
 # * render_response ............. Renders a full controller response
 # * renderer .................... An ActionController::Renderer
-# * prevent_controller_action ... Prevents the rails controller/action from running (i.e. the reflex handles the response entirely)
 # * turbo_stream ................ A Turbo Stream TagBuilder
 # * turbo_streams ............... A list of Turbo Streams to append to the response (also aliased as streams)
 # * state ....................... An object that stores ephemeral `state`
 #
+# They also have access to the following class methods:
+#
+# * prevent_controller_action ... Prevents the rails controller/action from running (i.e. the reflex handles the response entirely)
+#
 class TurboReflex::Base
   class << self
     def preventers

data/lib/turbo_reflex/engine.rb

@@ -1,9 +1,11 @@
 # frozen_string_literal: true
 
 require "turbo-rails"
+require "turbo_ready"
 require_relative "version"
 require_relative "base"
 require_relative "controller_pack"
+require_relative "../../app/controllers/concerns/turbo_reflex/controller"
 
 module TurboReflex
   def self.config

data/lib/turbo_reflex/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TurboReflex
-  VERSION = "0.0.29"
+  VERSION = "0.0.31"
 end

data/lib/turbo_reflex.rb

@@ -1,3 +1,4 @@
 # frozen_string_literal: true
 
+require "turbo_ready"
 require "turbo_reflex/engine"

data/package.json

@@ -1,13 +1,13 @@
 {
   "name": "turbo_reflex",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "Reflexes for Turbo Frames that help you build robust reactive applications",
   "main": "app/javascript/index.js",
   "repository": "https://github.com/hopsoft/turbo_reflex",
   "author": "Nate Hopkins (hopsoft) <natehop@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "turbo_ready": ">= 0.1.3"
+    "turbo_ready": ">= 0.1.4"
   },
   "peerDependencies": {
     "@hotwired/turbo-rails": ">= 7.2.0"