turbo_boost-streams 0.0.5 → 0.0.6

data/app/javascript/index.js

@@ -1,4 +1,4 @@
-import invoke from './invoke'
+import { invoke, invokeEvents } from './invoke'
 
 if (!self['Turbo'])
   throw new Error(
@@ -12,8 +12,10 @@ if (!Turbo['StreamActions'])
 
 Turbo.StreamActions.invoke = invoke
 self.TurboBoost = self.TurboBoost || {}
-self.TurboBoost.Streams = { invoke }
+self.TurboBoost.Streams = { invoke, invokeEvents }
 
 console.info(
   '@turbo-boost/streams has initialized and registered new stream actions with Turbo.'
 )
+
+export default self.TurboBoost.Streams

data/app/javascript/invoke.js

@@ -1,38 +1,118 @@
-import dispatch from './methods/dispatch'
-import mutate from './methods/mutate'
+import morph from './morph'
 
-function perform (method, args, receivers) {
-  // dispatch / dispatchEvent
+export const invokeEvents = {
+  before: 'turbo-boost:stream:before-invoke',
+  after: 'turbo-boost:stream:after-invoke',
+  finish: 'turbo-boost:stream:finish-invoke'
+}
+
+// Invokes the callback on a single receiver with before/after events
+function withInvokeEvents (receiver, detail, callback) {
+  const { object, target } = receiver
+  detail = detail || {}
+  detail = { ...detail, object: receiver.object }
+  const options = { detail, bubbles: true }
+
+  target.dispatchEvent(new CustomEvent(invokeEvents.before, options))
+
+  const result = callback(object)
+  options.detail.result = result
+  target.dispatchEvent(new CustomEvent(invokeEvents.after, options))
+
+  let promise
+  if (result instanceof Animation) promise = result.finished
+  if (result instanceof Promise) promise = result
+
+  if (promise)
+    promise.then(
+      () => {
+        options.detail.promise = 'fulfilled'
+        target.dispatchEvent(new CustomEvent(invokeEvents.finish, options))
+      },
+      () => {
+        options.detail.promise = 'rejected'
+        target.dispatchEvent(new CustomEvent(invokeEvents.finish, options))
+      }
+    )
+  else target.dispatchEvent(new CustomEvent(invokeEvents.finish, options))
+}
+
+function invokeDispatchEvent (method, args, receivers) {
+  const eventName = args[0]
+  const eventOptions = args[1]
+  const detail = { method, eventName, eventOptions }
+  receivers.forEach(receiver =>
+    withInvokeEvents(receiver, detail, object =>
+      object.dispatchEvent(new CustomEvent(eventName, eventOptions))
+    )
+  )
+}
+
+function invokeMorph (method, args, receivers) {
+  const html = args[0]
+  const detail = { method, html }
+  receivers.forEach(receiver =>
+    withInvokeEvents(receiver, detail, object => morph(object, html))
+  )
+}
+
+function invokeAssignment (method, args, receivers) {
+  const property = method.slice(0, -1).trim()
+  const value = args[0]
+  const detail = { method, property, value }
+  receivers.forEach(receiver =>
+    withInvokeEvents(receiver, detail, object => (object[property] = value))
+  )
+}
+
+function invokeMethod (method, args, receivers) {
+  const detail = { method, args }
+  receivers.forEach(receiver =>
+    withInvokeEvents(receiver, detail, object =>
+      object[method].apply(object, args)
+    )
+  )
+}
+
+// Performs an invocation on all receivers for the given method and args
+function performInvoke (method, args, receivers) {
+  // dispatch ................................................................................................
   if (method.match(/^dispatch(Event)?$/))
-    return dispatch(receivers, args[0], args[1] || {})
+    return invokeDispatchEvent(method, args, receivers)
 
-  // morph / mutate
-  if (method.match(/^morph|mutate$/)) return mutate(receivers, args[0])
+  // morph ...................................................................................................
+  if (method.match(/^morph|mutate$/))
+    return invokeMorph(method, args, receivers)
 
-  // property assignment
-  if (method.endsWith('='))
-    return receivers.forEach(r => (r[method.slice(0, -1).trim()] = args[0]))
+  // assignment ..............................................................................................
+  if (method.endsWith('=')) return invokeAssignment(method, args, receivers)
 
-  // method invocation
-  receivers.forEach(r => r[method].apply(r, args))
+  // method ..................................................................................................
+  return invokeMethod(method, args, receivers)
 }
 
-function invoke () {
+export function invoke () {
   const payload = JSON.parse(this.templateContent.textContent)
-  const { id, selector, receiver, method, args } = payload
-  let receivers = [self]
-  if (selector) receivers = Array.from(document.querySelectorAll(selector))
+  const { id, selector, receiver, method, args, delay } = payload
+  let receivers = [{ object: self, target: self }]
+  if (selector)
+    receivers = Array.from(document.querySelectorAll(selector)).map(el => ({
+      object: el,
+      target: el
+    }))
 
   if (receiver) {
     receivers = receivers.map(r => {
-      let context = r
+      let { object, target } = r
       const chain = receiver.split('.')
-      while (chain.length > 0) context = context[chain.shift()]
-      return context
+      while (chain.length > 0) {
+        object = object[chain.shift()]
+        if (object.dispatchEvent) target = object
+      }
+      return { object, target }
     })
   }
 
-  perform(method, args, receivers)
+  if (delay > 0) setTimeout(() => performInvoke(method, args, receivers), delay)
+  else performInvoke(method, args, receivers)
 }
-
-export default invoke

data/app/javascript/{methods/mutate.js → morph.js}

@@ -1,7 +1,7 @@
 import alpine from 'alpinejs'
-import morph from '@alpinejs/morph'
+import alpineMorph from '@alpinejs/morph'
 
-alpine.plugin(morph)
+alpine.plugin(alpineMorph)
 
 const input = /INPUT/i
 const inputTypes = /date|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/i
@@ -18,8 +18,6 @@ function updating (el, toEl, childrenOnly, skip) {
   if (protect) return skip()
 }
 
-function mutate (elements, html) {
-  elements.forEach(element => alpine.morph(element, html, { updating }))
+export default function morph (element, html) {
+  alpine.morph(element, html, { updating })
 }
-
-export default mutate

data/lib/turbo_boost/streams/patches/tag_builder.rb

@@ -8,8 +8,7 @@ require_relative "../tag_helper"
 module TurboBoost::Streams::Patches::TagBuilder
   include TurboBoost::Streams::TagHelper
 
-  def invoke(method, args: [], selector: nil, camelize: true, id: nil)
-    tag = turbo_stream_invoke_tag(method, args: args, selector: selector, camelize: camelize, id: id)
-    TurboBoost::Streams::StringWrapper.new tag
+  def invoke(...)
+    TurboBoost::Streams::StringWrapper.new turbo_stream_invoke_tag(...)
   end
 end

data/lib/turbo_boost/streams/tag_helper.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
 module TurboBoost::Streams::TagHelper
-  def turbo_stream_invoke_tag(method, args: [], selector: nil, camelize: true, id: nil)
+  def turbo_stream_invoke_tag(method, args: [], delay: 0, selector: nil, camelize: true, id: nil)
     id = SecureRandom.uuid if id.blank?
     payload = HashWithIndifferentAccess.new(id: id.to_s, selector: selector)
-    payload.merge! method_details(method, args: args, camelize: camelize)
+    payload.merge! method_details(method, args: args, delay: delay, camelize: camelize)
     payload.select! { |_, v| v.present? }
     %(<turbo-stream action="invoke" target="DOM"><template>#{payload.to_json}</template></turbo-stream>).html_safe
   end
 
   private
 
-  def method_details(method, args: [], camelize: true)
+  def method_details(method, args: [], delay: 0, camelize: true)
     if camelize
       method = camelize_method(method)
       args = camelize_args(args)
@@ -22,7 +22,8 @@ module TurboBoost::Streams::TagHelper
     HashWithIndifferentAccess.new(
       receiver: method_parts[0..-2].join("."),
       method: method_parts.last,
-      args: args
+      args: args,
+      delay: delay.to_i
     )
   end
 

data/lib/turbo_boost/streams/version.rb

@@ -2,6 +2,6 @@
 
 module TurboBoost
   module Streams
-    VERSION = "0.0.5"
+    VERSION = "0.0.6"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-streams
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-05 00:00:00.000000000 Z
+date: 2023-01-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -311,8 +311,7 @@ files:
 - app/assets/images/turbo-boost-mark.afdesign
 - app/javascript/index.js
 - app/javascript/invoke.js
-- app/javascript/methods/dispatch.js
-- app/javascript/methods/mutate.js
+- app/javascript/morph.js
 - app/jobs/turbo_boost/streams/broadcast_invoke_job.rb
 - lib/turbo_boost/streams.rb
 - lib/turbo_boost/streams/engine.rb
@@ -338,14 +337,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: '2.7'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.21
+rubygems_version: 3.4.1
 signing_key:
 specification_version: 4
 summary: Take full control of the DOM with Turbo Streams

data/app/javascript/methods/dispatch.js

@@ -1,6 +0,0 @@
-function dispatch (targets, name, options = {}) {
-  const evt = new CustomEvent(name, options)
-  targets.forEach(t => t.dispatchEvent(evt))
-}
-
-export default dispatch