stimulus_reflex - npm Package Compare versions

Comparing version 3.3.0-pre1 to 3.3.0-pre2

attributes.js

@@ -114,6 +114,6 @@ import { defaultSchema } from './schema'
   let elements = []
+  let selectors = []
   if (attributes.id) {
     elements = document.querySelectorAll(`#${attributes.id}`)
   } else {
-    let selectors = []
     for (const key in attributes) {
@@ -126,2 +126,6 @@ if (key.includes('.')) continue
       if (key === 'selected') continue
+      if (key === 'data-controller' && attributes[key] === 'stimulus-reflex')
+        continue
+      if (key === 'data-action' && attributes[key].includes('#__perform'))
+        continue
       if (!Object.prototype.hasOwnProperty.call(attributes, key)) continue
@@ -136,3 +140,3 @@ selectors.push(`[${key}="${attributes[key]}"]`)
         error,
-        attributes
+        { 'CSS selector': selectors.join(''), attributes }
       )
@@ -142,9 +146,15 @@ }
 
+  if (elements.length === 0)
+    console.warn(
+      'StimulusReflex was unable to find an element that matches the signature of the element which triggered this Reflex. Lifecycle callbacks and events cannot be raised unless your elements have distinguishing characteristics. Consider adding an #id or a randomized data-key to the element.',
+      { 'CSS selector': selectors.join(''), attributes }
+    )
+
   if (elements.length > 1)
     console.warn(
-      'StimulusReflex found multiple identical elements which match the signature of the element which triggered this Reflex. Lifecycle callbacks and events cannot be raised unless your elements have distinguishing characteristics. Consider adding an #id or a randomized data-key to the element.'
+      'StimulusReflex found multiple identical elements that match the signature of the element which triggered this Reflex. Lifecycle callbacks and events cannot be raised unless your elements have distinguishing characteristics. Consider adding an #id or a randomized data-key to the element.',
+      { 'CSS selector': selectors.join(''), attributes }
     )
 
-  const element = elements.length === 1 ? elements[0] : null
-  return element
+  return elements.length === 1 ? elements[0] : null
 }

log.js

@@ -11,3 +11,3 @@ const logs = {}
   logs[reflexId] = new Date()
-  console.log(`\u2B9C ${target}`, {
+  console.log(`\u2191 stimulus \u2191 ${target}`, {
     reflexId,
@@ -21,25 +21,12 @@ args,
 function success (response, options = { halted: false }) {
-  const html = {}
-  const payloads = {}
-  const elements = {}
-  const { event, events } = response
-  const { reflexId, target, last, morphMode } =
+  const { event } = response
+  const { reflexId, target, last, broadcaster, updates } =
     event.detail.stimulusReflex || {}
 
-  if (events) {
-    Object.keys(events).map(selector => {
-      elements[selector] = events[selector].detail.element
-      html[selector] = events[selector].detail.html
-      payloads[selector] = events[selector].detail.stimulusReflex
-    })
-  }
-
-  console.log(`\u2B9E ${target}`, {
+  console.log(`\u2193 reflex \u2193 ${target}`, {
     reflexId,
     duration: `${new Date() - logs[reflexId]}ms`,
     halted: options.halted,
-    morphMode,
-    elements,
-    payloads,
-    html
+    broadcaster,
+    updates
   })
@@ -52,8 +39,8 @@ if (last) delete logs[reflexId]
   const { detail } = event || {}
-  const { reflexId, target, error, morphMode } = detail.stimulusReflex || {}
-  console.error(`\u2B9E ${target}`, {
+  const { reflexId, target, error, broadcaster } = detail.stimulusReflex || {}
+  console.error(`\u2193 reflex \u2193 ${target}`, {
     reflexId,
     duration: `${new Date() - logs[reflexId]}ms`,
     error,
-    morphMode,
+    broadcaster,
     payload: event.detail.stimulusReflex,
@@ -63,3 +50,6 @@ element
   if (detail.stimulusReflex.serverMessage.body)
-    console.error(`\u2B05 ${target}`, detail.stimulusReflex.serverMessage.body)
+    console.error(
+      `\u2193 reflex \u2193 ${target}`,
+      detail.stimulusReflex.serverMessage.body
+    )
   delete logs[reflexId]
@@ -66,0 +56,0 @@ }

package.json

 {
   "name": "stimulus_reflex",
-  "version": "3.3.0-pre1",
+  "version": "3.3.0-pre2",
   "description": "Build reactive applications with the Rails tooling you already know and love.",
@@ -5,0 +5,0 @@ "keywords": [

stimulus_reflex.js

@@ -168,4 +168,3 @@ import { Controller } from 'stimulus'
           reject,
-          data,
-          events: {}
+          data
         }
@@ -364,6 +363,6 @@ })
 
-  // Trigger success and after lifecycle methods from before-morph to ensure we can find a reference
+  // Trigger success and after lifecycle methods from before events (before-morph, before-inner-html) to ensure we can find a reference
   // to the source element in case it gets removed from the DOM via morph.
   // This is safe because the server side reflex completed successfully.
-  document.addEventListener('cable-ready:before-morph', event => {
+  const beforeDOMUpdateHandler = event => {
     const { selector, stimulusReflex } = event.detail || {}
@@ -375,4 +374,2 @@ if (!stimulusReflex) return
 
-    if (promise) promise.events[selector] = event
-
     if (!last) return
@@ -384,4 +381,3 @@
       morphMode: promise && promise.morphMode,
-      data: promise && promise.data,
-      events: promise && promise.events
+      data: promise && promise.data
     }
@@ -396,6 +392,10 @@
     if (debugging) Log.success(response)
-  })
+  }
+  document.addEventListener(
+    'cable-ready:before-inner-html',
+    beforeDOMUpdateHandler
+  )
+  document.addEventListener('cable-ready:before-morph', beforeDOMUpdateHandler)
   document.addEventListener('stimulus-reflex:server-message', event => {
-    const { reflexId, attrs, serverMessage, morphMode } =
-      event.detail.stimulusReflex || {}
+    const { reflexId, attrs, serverMessage } = event.detail.stimulusReflex || {}
     const { subject, body } = serverMessage
@@ -407,4 +407,4 @@ const element = findElement(attrs)
       halted: true,
-      selector: true,
-      nothing: true
+      nothing: true,
+      success: true
     }
@@ -418,4 +418,2 @@
       event,
-      morphMode,
-      events: promise && promise.events,
       toString: () => body
@@ -422,0 +420,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

51432

increased by12.43%

Number of package files

20

increased by5.26%

Worsened metrics

Lines of code

1275

decreased by-0.08%

No dependency changes