New CR wire format + reworked server message events

app/channels/stimulus_reflex/channel.rb

@@ -25,7 +25,7 @@ def receive(data)
         if reflex
           reflex.rescue_with_handler(exception)
           puts error_message
-          reflex.broadcast_message subject: "error", data: data, error: "#{exception} #{exception.backtrace.first if Rails.env.development?}"
+          reflex.error data: data, body: "#{exception} #{exception.backtrace.first.split(":in ")[0] if Rails.env.development?}"
         else
           puts error_message
 
@@ -54,14 +54,14 @@ def receive(data)
       end
 
       if reflex.halted?
-        reflex.broadcast_message subject: "halted", data: data
+        reflex.halted data: data
       else
         begin
           reflex.broadcast(reflex_data.selectors, data)
         rescue => exception
           reflex.rescue_with_handler(exception)
           error = exception_with_backtrace(exception)
-          reflex.broadcast_message subject: "error", data: data, error: exception
+          reflex.error data: data, body: "#{exception} #{exception.backtrace.first.split(":in ")[0] if Rails.env.development?}"
           puts "\e[31mReflex failed to re-render: #{error[:message]} [#{reflex_data.url}]\e[0m\n#{error[:stack]}"
         end
       end
@@ -109,7 +109,7 @@ def report_failed_basic_auth(reflex)
   def exception_with_backtrace(exception)
     {
       message: exception.to_s,
-      backtrace: exception.backtrace.first,
+      backtrace: exception.backtrace.first.split(":in ")[0],
       stack: exception.backtrace.join("\n")
     }
   end

javascript/callbacks.js

@@ -6,14 +6,13 @@ import Log from './log'
 import Debug from './debug'
 
 const beforeDOMUpdate = event => {
-  const { stimulusReflex } = event.detail || {}
+  const { stimulusReflex, payload } = event.detail || {}
   if (!stimulusReflex) return
   const { reflexId, xpathElement, xpathController } = stimulusReflex
   const controllerElement = XPathToElement(xpathController)
   const reflexElement = XPathToElement(xpathElement)
   const reflex = reflexes[reflexId]
-  const promise = reflex.promise
-  const payload = event.detail.payload
+  const { promise } = reflex
 
   reflex.pendingOperations--
 
@@ -25,7 +24,9 @@ const beforeDOMUpdate = event => {
         element: reflexElement,
         event,
         data: promise.data,
-        payload
+        payload,
+        reflexId,
+        toString: () => ''
       })
     )
 
@@ -41,18 +42,17 @@ const beforeDOMUpdate = event => {
 }
 
 const afterDOMUpdate = event => {
-  const { stimulusReflex } = event.detail || {}
+  const { stimulusReflex, payload } = event.detail || {}
   if (!stimulusReflex) return
   const { reflexId, xpathElement, xpathController } = stimulusReflex
   const controllerElement = XPathToElement(xpathController)
   const reflexElement = XPathToElement(xpathElement)
   const reflex = reflexes[reflexId]
-  const promise = reflex.promise
-  const payload = event.detail.payload
+  const { promise } = reflex
 
   reflex.completedOperations++
 
-  if (Debug.enabled) Log.success(event)
+  if (Debug.enabled) Log.success(event, false)
 
   if (reflex.completedOperations < reflex.totalOperations) return
 
@@ -62,7 +62,9 @@ const afterDOMUpdate = event => {
         element: reflexElement,
         event,
         data: promise.data,
-        payload
+        payload,
+        reflexId,
+        toString: () => ''
       })
     )
 
@@ -79,44 +81,98 @@ const afterDOMUpdate = event => {
   CableReady.perform(reflex.piggybackOperations)
 }
 
-const serverMessage = event => {
-  const { reflexId, serverMessage, xpathController, xpathElement } =
-    event.detail.stimulusReflex || {}
-  const { subject, body } = serverMessage
-  const controllerElement = XPathToElement(xpathController)
+const routeReflexEvent = event => {
+  const { stimulusReflex, payload, name, body } = event.detail || {}
+  const eventType = name.split('-')[2]
+  if (!stimulusReflex || !['nothing', 'halted', 'error'].includes(eventType))
+    return
+
+  const { reflexId, xpathElement, xpathController } = stimulusReflex
   const reflexElement = XPathToElement(xpathElement)
+  const controllerElement = XPathToElement(xpathController)
   const reflex = reflexes[reflexId]
-  const promise = reflex.promise
-  const subjects = { error: true, halted: true, nothing: true, success: true }
-  const payload = event.detail.payload
+  const { promise } = reflex
 
   if (controllerElement) {
     controllerElement.reflexError = controllerElement.reflexError || {}
-    if (subject === 'error') controllerElement.reflexError[reflexId] = body
+    if (eventType === 'error') controllerElement.reflexError[reflexId] = body
   }
 
-  promise[subject === 'error' ? 'reject' : 'resolve']({
-    data: promise.data,
-    element: reflexElement,
-    event,
-    toString: () => body,
-    payload
-  })
-
-  reflex.finalStage = subject === 'halted' ? 'halted' : 'after'
-
-  if (Debug.enabled) Log[subject === 'error' ? 'error' : 'success'](event)
+  switch (eventType) {
+    case 'nothing':
+      nothing(event, payload, promise, reflex, reflexElement)
+      break
+    case 'error':
+      error(event, payload, promise, reflex, reflexElement)
+      break
+    case 'halted':
+      halted(event, payload, promise, reflex, reflexElement)
+      break
+  }
 
-  if (subjects[subject])
+  setTimeout(() =>
     dispatchLifecycleEvent(
-      subject,
+      eventType,
       reflexElement,
       controllerElement,
       reflexId,
       payload
     )
+  )
 
   CableReady.perform(reflex.piggybackOperations)
 }
 
-export { beforeDOMUpdate, afterDOMUpdate, serverMessage }
+const nothing = (event, payload, promise, reflex, reflexElement) => {
+  reflex.finalStage = 'after'
+
+  if (Debug.enabled) Log.success(event, false)
+
+  setTimeout(() =>
+    promise.resolve({
+      data: promise.data,
+      element: reflexElement,
+      event,
+      payload,
+      reflexId: promise.data.reflexId,
+      toString: () => ''
+    })
+  )
+}
+
+const halted = (event, payload, promise, reflex, reflexElement) => {
+  reflex.finalStage = 'halted'
+
+  if (Debug.enabled) Log.success(event, true)
+
+  setTimeout(() =>
+    promise.resolve({
+      data: promise.data,
+      element: reflexElement,
+      event,
+      payload,
+      reflexId: promise.data.reflexId,
+      toString: () => ''
+    })
+  )
+}
+
+const error = (event, payload, promise, reflex, reflexElement) => {
+  reflex.finalStage = 'after'
+
+  if (Debug.enabled) Log.error(event)
+
+  setTimeout(() =>
+    promise.reject({
+      data: promise.data,
+      element: reflexElement,
+      event,
+      payload,
+      reflexId: promise.data.reflexId,
+      error: event.detail.body,
+      toString: () => event.detail.body
+    })
+  )
+}
+
+export { beforeDOMUpdate, afterDOMUpdate, routeReflexEvent }

javascript/lifecycle.js

@@ -115,15 +115,8 @@ document.addEventListener(
 document.addEventListener(
   'stimulus-reflex:nothing',
   event => {
-    invokeLifecycleMethod(
-      'success',
-      event.detail.element,
-      event.detail.controller.element,
-      event.detail.reflexId,
-      event.detail.payload
-    )
     dispatchLifecycleEvent(
-      'after',
+      'success',
       event.detail.element,
       event.detail.controller.element,
       event.detail.reflexId,

javascript/log.js

@@ -18,10 +18,10 @@ const request = (
   })
 }
 
-const success = event => {
+const success = (event, halted) => {
   const { detail } = event || {}
   const { selector, payload } = detail || {}
-  const { reflexId, target, morph, serverMessage } = detail.stimulusReflex || {}
+  const { reflexId, target, morph } = detail.stimulusReflex || {}
   const reflex = reflexes[reflexId]
   const progress =
     reflex.totalOperations > 1
@@ -35,7 +35,6 @@ const success = event => {
     .split('-')
     .slice(1)
     .join('_')
-  const halted = (serverMessage && serverMessage.subject === 'halted') || false
   console.log(
     `\u2193 reflex \u2193 ${target} \u2192 ${selector ||
       '\u221E'}${progress} ${duration}`,
@@ -45,14 +44,13 @@ const success = event => {
 
 const error = event => {
   const { detail } = event || {}
-  const { reflexId, target, serverMessage } = detail.stimulusReflex || {}
+  const { reflexId, target, payload } = detail.stimulusReflex || {}
   const reflex = reflexes[reflexId]
   const duration = reflex.timestamp
     ? `in ${new Date() - reflex.timestamp}ms`
     : 'CLONED'
-  const payload = detail.stimulusReflex
   console.log(
-    `\u2193 reflex \u2193 ${target} ${duration} %cERROR: ${serverMessage.body}`,
+    `\u2193 reflex \u2193 ${target} ${duration} %cERROR: ${event.detail.body}`,
     'color: #f00;',
     { reflexId, payload }
   )

javascript/reflexes.js

@@ -12,58 +12,28 @@ const reflexes = {}
 const received = data => {
   if (!data.cableReady) return
 
-  let reflexOperations = {}
-
-  for (let name in data.operations) {
-    if (data.operations.hasOwnProperty(name)) {
-      for (let i = data.operations[name].length - 1; i >= 0; i--) {
-        if (
-          data.operations[name][i].stimulusReflex ||
-          (data.operations[name][i].detail &&
-            data.operations[name][i].detail.stimulusReflex)
-        ) {
-          reflexOperations[name] = reflexOperations[name] || []
-          reflexOperations[name].push(data.operations[name][i])
-          data.operations[name].splice(i, 1)
-        }
-      }
-      if (!data.operations[name].length)
-        Reflect.deleteProperty(data.operations, name)
+  let reflexOperations = []
+
+  for (let i = data.operations.length - 1; i >= 0; i--) {
+    if (data.operations[i].stimulusReflex) {
+      reflexOperations.push(data.operations[i])
+      data.operations.splice(i, 1)
     }
   }
 
-  let totalOperations = 0
-  let reflexData
+  if (
+    reflexOperations.some(operation => {
+      return operation.stimulusReflex.url !== location.href
+    })
+  )
+    return
 
-  const dispatchEvent = reflexOperations['dispatchEvent']
-  const morph = reflexOperations['morph']
-  const innerHtml = reflexOperations['innerHtml']
-
-  ;[dispatchEvent, morph, innerHtml].forEach(operation => {
-    if (operation && operation.length) {
-      const urls = Array.from(
-        new Set(
-          operation.map(m =>
-            m.detail ? m.detail.stimulusReflex.url : m.stimulusReflex.url
-          )
-        )
-      )
+  let reflexData
 
-      if (urls.length !== 1 || urls[0] !== location.href) return
-      totalOperations += operation.length
-
-      if (!reflexData) {
-        if (operation[0].detail) {
-          reflexData = operation[0].detail.stimulusReflex
-          reflexData.payload = operation[0].detail.payload
-          reflexData.reflexId = operation[0].detail.reflexId
-        } else {
-          reflexData = operation[0].stimulusReflex
-          reflexData.payload = operation[0].payload
-        }
-      }
-    }
-  })
+  if (reflexOperations.length) {
+    reflexData = reflexOperations[0].stimulusReflex
+    reflexData.payload = reflexOperations[0].payload
+  }
 
   if (reflexData) {
     const { reflexId, payload } = reflexData
@@ -95,15 +65,14 @@ const received = data => {
     }
 
     if (reflexes[reflexId]) {
-      reflexes[reflexId].totalOperations = totalOperations
-      reflexes[reflexId].pendingOperations = totalOperations
+      reflexes[reflexId].totalOperations = reflexOperations.length
+      reflexes[reflexId].pendingOperations = reflexOperations.length
       reflexes[reflexId].completedOperations = 0
       reflexes[reflexId].piggybackOperations = data.operations
       CableReady.perform(reflexOperations)
     }
   } else {
-    const operations = Object.entries(data.operations)
-    if (operations.length && reflexes[operations[0][1][0].reflexId])
+    if (data.operations.length && reflexes[data.operations[0].reflexId])
       CableReady.perform(data.operations)
   }
 }

javascript/stimulus_reflex.js

@@ -1,7 +1,7 @@
 import { Controller } from 'stimulus'
 import { dispatchLifecycleEvent } from './lifecycle'
 import { uuidv4, serializeForm } from './utils'
-import { beforeDOMUpdate, afterDOMUpdate, serverMessage } from './callbacks'
+import { beforeDOMUpdate, afterDOMUpdate, routeReflexEvent } from './callbacks'
 import reflexes, { registerReflex, setupDeclarativeReflexes } from './reflexes'
 import { attributeValues } from './attributes'
 import Schema from './schema'
@@ -247,7 +247,7 @@ const useReflex = (controller, options = {}) => {
   register(controller, options)
 }
 
-document.addEventListener('stimulus-reflex:server-message', serverMessage)
+document.addEventListener('cable-ready:after-dispatch-event', routeReflexEvent)
 document.addEventListener('cable-ready:before-inner-html', beforeDOMUpdate)
 document.addEventListener('cable-ready:before-morph', beforeDOMUpdate)
 document.addEventListener('cable-ready:after-inner-html', afterDOMUpdate)