feat: Add trigger and target element logs for devtools

javascript/elements/updates_for_element.js

@@ -32,6 +32,9 @@ export default class UpdatesForElement extends SubscribingElement {
     super()
     const shadowRoot = this.attachShadow({ mode: 'open' })
     shadowRoot.innerHTML = template
+
+    this.triggerElementLog = []
+    this.targetElementLog = []
   }
 
   async connectedCallback () {
@@ -57,17 +60,21 @@ export default class UpdatesForElement extends SubscribingElement {
       element => new Block(element)
     ).filter(block => block.shouldUpdate(data))
 
-    Log.request(data, blocks)
+    this.triggerElementLog.push(Log.request(data, blocks))
 
     if (blocks.length === 0) {
-      Log.cancel(this.lastUpdateTimestamp, 'All elements filtered out')
+      this.triggerElementLog.push(
+        Log.cancel(this.lastUpdateTimestamp, 'All elements filtered out')
+      )
 
       return
     }
 
     // first <cable-ready-updates-for> element in the DOM *at any given moment* updates all of the others
     if (blocks[0].element !== this) {
-      Log.cancel(this.lastUpdateTimestamp, 'Update already requested')
+      this.triggerElementLog.push(
+        Log.cancel(this.lastUpdateTimestamp, 'Update already requested')
+      )
 
       return
     }
@@ -91,7 +98,9 @@ export default class UpdatesForElement extends SubscribingElement {
       })
     )
 
-    Log.response(this.lastUpdateTimestamp, this, uniqueUrls)
+    this.triggerElementLog.push(
+      Log.response(this.lastUpdateTimestamp, this, uniqueUrls)
+    )
 
     // track current block index for each URL; referred to as fragments
     this.index = {}
@@ -126,8 +135,8 @@ class Block {
     this.element = element
   }
 
-  async process (data, html, index, startTimestamp) {
-    const blockIndex = index[this.url]
+  async process (data, html, fragmentsIndex, startTimestamp) {
+    const blockIndex = fragmentsIndex[this.url]
     const template = document.createElement('template')
     this.element.setAttribute('updating', 'updating')
 
@@ -151,7 +160,9 @@ class Block {
     }
 
     dispatch(this.element, 'cable-ready:before-update', operation)
-    Log.morphStart(startTimestamp, this.element)
+    this.element.targetElementLog.push(
+      Log.morphStart(startTimestamp, this.element)
+    )
 
     morphdom(this.element, fragments[blockIndex], {
       childrenOnly: true,
@@ -162,7 +173,10 @@ class Block {
         assignFocus(operation.focusSelector)
       }
     })
-    Log.morphEnd(startTimestamp, this.element)
+
+    this.element.targetElementLog.push(
+      Log.morphEnd(startTimestamp, this.element)
+    )
   }
 
   async resolveTurboFrames (documentFragment) {

javascript/updatable/log.js

@@ -3,51 +3,65 @@ import Debug from '../debug'
 const request = (data, blocks) => {
   if (Debug.disabled) return
 
-  console.log(
-    `\u2191 Updatable request affecting ${blocks.length} element(s): `,
-    {
-      elements: blocks.map(b => b.element),
-      identifiers: blocks.map(b => b.element.getAttribute('identifier')),
-      data
-    }
-  )
+  const message = `\u2191 Updatable request affecting ${blocks.length} element(s): `
+
+  console.log(message, {
+    elements: blocks.map(b => b.element),
+    identifiers: blocks.map(b => b.element.getAttribute('identifier')),
+    data
+  })
+
+  return message
 }
 
 const cancel = (timestamp, reason) => {
   if (Debug.disabled) return
 
   const duration = new Date() - timestamp
-  console.log(
-    `\u274C Updatable request canceled after ${duration}ms: ${reason}`
-  )
+  const message = `\u274C Updatable request canceled after ${duration}ms: ${reason}`
+  console.log(message)
+
+  return message
 }
 
 const response = (timestamp, element, urls) => {
   if (Debug.disabled) return
 
   const duration = new Date() - timestamp
-  console.log(`\u2193 Updatable response: All URLs fetched in ${duration}ms`, {
+  const message = `\u2193 Updatable response: All URLs fetched in ${duration}ms`
+
+  console.log(message, {
     element,
     urls
   })
+
+  return message
 }
 
 const morphStart = (timestamp, element) => {
   if (Debug.disabled) return
 
   const duration = new Date() - timestamp
-  console.log(`\u21BB Updatable morph: starting after ${duration}ms`, {
+  const message = `\u21BB Updatable morph: starting after ${duration}ms`
+
+  console.log(message, {
     element
   })
+
+  return message
 }
 
 const morphEnd = (timestamp, element) => {
   if (Debug.disabled) return
 
   const duration = new Date() - timestamp
-  console.log(`\u21BA Updatable morph: completed after ${duration}ms`, {
+  const message = `\u21BA Updatable morph: completed after ${duration}ms`
+
+  console.log(message, {
     element
   })
+
+  return message
 }
 
 export default { request, cancel, response, morphStart, morphEnd }