turbo_boost-streams 0.0.7 → 0.0.9

data/app/javascript/index.js

@@ -14,8 +14,6 @@ Turbo.StreamActions.invoke = invoke
 self.TurboBoost = self.TurboBoost || {}
 self.TurboBoost.Streams = { invoke, invokeEvents }
 
-console.info(
-  '@turbo-boost/streams has initialized and registered new stream actions with Turbo.'
-)
+console.info('@turbo-boost/streams has initialized and registered new stream actions with Turbo.')
 
 export default self.TurboBoost.Streams

data/app/javascript/invoke.js

@@ -7,7 +7,7 @@ export const invokeEvents = {
 }
 
 // Invokes the callback on a single receiver with before/after events
-function withInvokeEvents (receiver, detail, callback) {
+function withInvokeEvents(receiver, detail, callback) {
   const { object, target } = receiver
   detail = detail || {}
   detail = { ...detail, object: receiver.object }
@@ -15,29 +15,39 @@ function withInvokeEvents (receiver, detail, callback) {
 
   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))
+  // the before event can provide invoke instructions my modifying the event detail
+  // For example, { delay: 1000 } will delay the invocation by 1000ms
+  let { delay } = detail.invoke || {}
+  delay = delay || 0
+
+  const execute = () => {
+    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))
+  }
+
+  if (delay > 0) setTimeout(execute, delay)
+  else execute()
 }
 
-function invokeDispatchEvent (method, args, receivers) {
+function invokeDispatchEvent(method, args, receivers) {
   const eventName = args[0]
   const eventOptions = args[1]
   const detail = { method, eventName, eventOptions }
@@ -48,41 +58,33 @@ function invokeDispatchEvent (method, args, receivers) {
   )
 }
 
-function invokeMorph (method, args, receivers) {
+function invokeMorph(method, args, receivers) {
   const html = args[0]
   const detail = { method, html }
-  receivers.forEach(receiver =>
-    withInvokeEvents(receiver, detail, object => morph(object, html))
-  )
+  receivers.forEach(receiver => withInvokeEvents(receiver, detail, object => morph(object, html)))
 }
 
-function invokeAssignment (method, args, receivers) {
+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))
-  )
+  receivers.forEach(receiver => withInvokeEvents(receiver, detail, object => (object[property] = value)))
 }
 
-function invokeMethod (method, args, receivers) {
+function invokeMethod(method, args, receivers) {
   const detail = { method, args }
   receivers.forEach(receiver =>
-    withInvokeEvents(receiver, detail, object =>
-      object[method].apply(object, args)
-    )
+    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) {
+function performInvoke(method, args, receivers) {
   // dispatch ................................................................................................
-  if (method.match(/^dispatch(Event)?$/))
-    return invokeDispatchEvent(method, args, receivers)
+  if (method.match(/^dispatch(Event)?$/)) return invokeDispatchEvent(method, args, receivers)
 
   // morph ...................................................................................................
-  if (method.match(/^morph|mutate$/))
-    return invokeMorph(method, args, receivers)
+  if (method.match(/^morph|mutate$/)) return invokeMorph(method, args, receivers)
 
   // assignment ..............................................................................................
   if (method.endsWith('=')) return invokeAssignment(method, args, receivers)
@@ -91,7 +93,7 @@ function performInvoke (method, args, receivers) {
   return invokeMethod(method, args, receivers)
 }
 
-export function invoke () {
+export function invoke() {
   const payload = JSON.parse(this.templateContent.textContent)
   const { id, selector, receiver, method, args, delay } = payload
   let receivers = [{ object: self, target: self }]

data/app/javascript/morph.js

@@ -7,17 +7,16 @@ const input = /INPUT/i
 const inputTypes = /date|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/i
 const textarea = /TEXTAREA/i
 
-function updating (el, toEl, childrenOnly, skip) {
+function updating(el, toEl, childrenOnly, skip) {
   if (el.nodeType !== Node.ELEMENT_NODE) return
   if (el !== document.activeElement) return
 
   const protect =
-    el.tagName.match(textarea) ||
-    (el.tagName.match(input) && el.getAttribute('type').match(inputTypes))
+    el.tagName.match(textarea) || (el.tagName.match(input) && el.getAttribute('type').match(inputTypes))
 
   if (protect) return skip()
 }
 
-export default function morph (element, html) {
+export default function morph(element, html) {
   alpine.morph(element, html, { updating })
 }

data/lib/turbo_boost/streams/version.rb

@@ -2,6 +2,6 @@
 
 module TurboBoost
   module Streams
-    VERSION = "0.0.7"
+    VERSION = "0.0.9"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-streams
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.9
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-24 00:00:00.000000000 Z
+date: 2024-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -344,7 +344,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.1
+rubygems_version: 3.5.3
 signing_key:
 specification_version: 4
 summary: Take full control of the DOM with Turbo Streams