reflex_behaviors 0.0.6 → 0.0.8

data/app/javascript/devtools/dependencies.js

@@ -0,0 +1,53 @@
+const added = []
+
+const dependencies = {
+  LeaderLine: {
+    src:
+      'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js',
+    integrity:
+      'sha512-0dNdzMjpT6pJdFGF1DwybFCfm3K/lzHhxaMXC/92J9/DZujHlqYFqmhTOAoD0o+LkeEsVK2ar/ESs7/Q2B6wJg==',
+    global: 'LeaderLine'
+  },
+
+  PlainDraggable: {
+    src:
+      'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js',
+    global: 'PlainDraggable'
+  }
+}
+
+function exists (dependency) {
+  if (dependency.global && self[dependency.global]) return true
+  if (document.querySelector(`[src='${dependency.src}']`)) return true
+  return added.includes(dependency)
+}
+
+function add (dependency) {
+  if (exists(dependency)) return
+  added.push(dependency)
+
+  const { src, integrity } = dependency
+  const script = document.createElement('script')
+  script.setAttribute('src', src)
+  script.setAttribute('crossorigin', 'anonymous')
+  script.setAttribute('referrerpolicy', 'no-referrer')
+  if (integrity) script.setAttribute('integrity', integrity)
+  document.head.appendChild(script)
+}
+
+function remove (dependency) {
+  if (!added.includes(dependency)) return
+  added.splice(added.indexOf(dependency), 1)
+
+  const { src } = dependency
+  const el = document.querySelector(`script[src='${src}']`)
+  if (el) el.remove()
+  if (dependency.global && self[dependency.global])
+    self[dependency.global] = null
+}
+
+function removeAll () {
+  ;[...added].forEach(dependency => remove(dependency))
+}
+
+export default { ...dependencies, add, remove, removeAll }

data/app/javascript/devtools/elements/supervisor_element.js

@@ -6,9 +6,13 @@ export default class SupervisorElement extends HTMLElement {
     this.enabledDevtools = {}
     this.attachShadow({ mode: 'open' })
     this.shadowRoot.innerHTML = this.html
-    this.shadowRoot
-      .querySelector('button')
-      .addEventListener('click', () => this.close())
+    this.shadowRoot.querySelector('button').addEventListener('click', () =>
+      this.dispatchEvent(
+        new CustomEvent('reflex-behaviors:devtools-close', {
+          bubbles: true
+        })
+      )
+    )
 
     this.addEventListener('change', event => {
       const devtoolElement = event.target

data/app/javascript/devtools/supervisor.js

@@ -2,12 +2,7 @@ import { appendHTML } from '../utils/dom'
 import DevtoolElement from './elements/devtool_element'
 import SupervisorElement from './elements/supervisor_element'
 import TooltipElement from './elements/tooltip_element'
-import {
-  addLeaderLineDependency,
-  addPlainDraggableDependency,
-  removeLeaderLineDependency,
-  removePlainDraggableDependency
-} from './dependencies'
+import dependencies from './dependencies'
 
 customElements.define('reflex-behaviors-devtool', DevtoolElement)
 customElements.define('reflex-behaviors-devtool-supervisor', SupervisorElement)
@@ -33,14 +28,13 @@ function stop () {
     })
   )
   supervisorElement = null
-  removeLeaderLineDependency()
-  removePlainDraggableDependency()
+  dependencies.removeAll()
 }
 
 function start () {
   if (started()) return
-  addLeaderLineDependency()
-  addPlainDraggableDependency()
+  dependencies.add(dependencies.LeaderLine)
+  dependencies.add(dependencies.PlainDraggable)
   supervisorElement = appendHTML(
     '<reflex-behaviors-devtool-supervisor></reflex-behaviors-devtool-supervisor>'
   )
@@ -87,6 +81,7 @@ addEventListener('turbo:load', autoRestart)
 addEventListener('turbo-frame:load', autoRestart)
 addEventListener('turbo-reflex:success', autoRestart)
 addEventListener('turbo-reflex:finish', autoRestart)
+addEventListener('reflex-behaviors:devtools-close', stop)
 
 function register (name, label) {
   if (!supervisorElement) return

data/app/javascript/devtools/toggle.js

@@ -46,11 +46,21 @@ export default class ToggleDevtool {
       if (name === this.name) removeHighlight(this.trigger)
     })
 
-    document.addEventListener('click', event => {
+    let hideTimeout
+    const debouncedHide = () => {
+      clearTimeout(hideTimeout)
+      hideTimeout = setTimeout(this.hide(true), 25)
+    }
+
+    addEventListener('click', event => {
       if (event.target.closest('reflex-behaviors-devools-tooltip')) return
-      activeToggle = null
-      this.hide()
+      debouncedHide()
     })
+
+    addEventListener('turbo:load', debouncedHide)
+    addEventListener('turbo-frame:load', debouncedHide)
+    addEventListener('turbo-reflex:success', debouncedHide)
+    addEventListener('turbo-reflex:finish', debouncedHide)
   }
 
   get enabled () {
@@ -68,7 +78,7 @@ export default class ToggleDevtool {
       outlineOffset: '-2px'
     })
 
-    addHighlight(this.renderingElement, {
+    addHighlight(this.trigger.renderingElement, {
       outline: '3px dashed chocolate',
       outlineOffset: '3px'
     })
@@ -82,26 +92,33 @@ export default class ToggleDevtool {
       .forEach(el => (el.style.zIndex = 100000))
 
     const data = {
-      rendering: { partial: null, id: null },
-      trigger: { partial: null, id: null },
-      target: { partial: null, id: null }
+      rendering: {
+        partial: this.trigger.renderingPartial,
+        id: this.trigger.renderingInfo.id,
+        status: this.trigger.renderingElement ? 'OK' : 'Not Found'
+      },
+      trigger: { partial: null, id: null, status: 'Not Found' },
+      target: { partial: null, id: null, status: 'Not Found' }
     }
 
-    if (this.renderingPartial) data.rendering.partial = this.renderingPartial
-    if (this.renderingElement) data.rendering.id = this.renderingElement.id
-
     if (this.trigger)
-      data.trigger = { partial: this.trigger.partial, id: this.trigger.id }
+      data.trigger = {
+        partial: this.trigger.partial,
+        id: this.trigger.id,
+        status: 'OK'
+      }
 
     if (this.target)
-      data.target = { partial: this.target.partial, id: this.target.id }
-    else if (this.trigger)
-      data.target.id = `No element matches the targeted DOM id: ${this.trigger.controls}`
+      data.target = {
+        partial: this.target.partial,
+        id: this.target.id,
+        status: 'OK'
+      }
 
     console.table(data)
   }
 
-  hide () {
+  hide (clearActiveToggle) {
     document.querySelectorAll('.leader-line').forEach(el => el.remove())
     document
       .querySelectorAll('reflex-behaviors-devools-tooltip')
@@ -112,18 +129,25 @@ export default class ToggleDevtool {
       .forEach(el => {
         if (!el.tagName.match(/toggle-trigger/i)) removeHighlight(el)
       })
+
+    if (clearActiveToggle) activeToggle = null
   }
 
   createRenderingTooltip () {
-    if (!this.renderingElement) return
-    const title = `RENDERING (id: ${this.renderingElement.id || 'unknown'})`
-    const content = `<div slot="content">partial: ${this.renderingPartial}</div>`
+    if (!this.trigger.renderingElement)
+      return console.debug(
+        `Unable to create the rendering tooltip! No element matches the DOM id: '${this.trigger.renderingInfo.id}'`
+      )
+
+    const title = `RENDERING (id: ${this.trigger.renderingElement.id ||
+      'unknown'})`
+    const content = `<div slot="content">partial: ${this.trigger.renderingPartial}</div>`
     const tooltip = appendTooltip(title, content, {
       backgroundColor: 'lightyellow',
       color: 'chocolate'
     })
 
-    const coords = coordinates(this.renderingElement)
+    const coords = coordinates(this.trigger.renderingElement)
     const top = Math.ceil(
       coords.top + coords.height / 2 - tooltip.offsetHeight / 2
     )
@@ -131,7 +155,7 @@ export default class ToggleDevtool {
     tooltip.style.top = `${top}px`
     tooltip.style.left = `${left}px`
 
-    tooltip.line = new LeaderLine(tooltip, this.renderingElement, {
+    tooltip.line = new LeaderLine(tooltip, this.trigger.renderingElement, {
       ...this.leaderLineOptions,
       color: 'chocolate'
     })
@@ -141,8 +165,10 @@ export default class ToggleDevtool {
   }
 
   createTargetTooltip () {
-    if (!this.target) return
-    if (!this.target.viewStack) return
+    if (!this.target)
+      return console.debug(
+        `Unable to create the target tooltip! No element matches the DOM id: '${this.trigger.controls}'`
+      )
 
     const title = `TARGET (id: ${this.target.id})`
     const content = this.target.viewStack
@@ -203,49 +229,44 @@ export default class ToggleDevtool {
       color: 'blueviolet'
     })
 
-    tooltip.lineToTarget = new LeaderLine(tooltip, targetTooltip, {
-      ...this.leaderLineOptions,
-      color: 'blueviolet',
-      middleLabel: 'toggles',
-      size: 2.1
-    })
+    if (targetTooltip) {
+      tooltip.lineToTarget = new LeaderLine(tooltip, targetTooltip, {
+        ...this.leaderLineOptions,
+        color: 'blueviolet',
+        middleLabel: 'toggles',
+        size: 2.1
+      })
 
-    tooltip.lineToRendering = new LeaderLine(tooltip, renderingTooltip, {
-      ...this.leaderLineOptions,
-      color: 'blueviolet',
-      middleLabel: 'renders',
-      size: 2.1
-    })
+      targetTooltip.drag.onMove = () => {
+        targetTooltip.line.position()
+        tooltip.lineToTarget.position()
+        tooltip.lineToRendering.position()
+      }
+    }
+
+    if (renderingTooltip) {
+      tooltip.lineToRendering = new LeaderLine(tooltip, renderingTooltip, {
+        ...this.leaderLineOptions,
+        color: 'blueviolet',
+        middleLabel: 'renders',
+        size: 2.1
+      })
+
+      renderingTooltip.drag.onMove = () => {
+        renderingTooltip.line.position()
+        if (tooltip.lineToTarget) tooltip.lineToTarget.position()
+        tooltip.lineToRendering.position()
+      }
+    }
 
     tooltip.drag = new PlainDraggable(tooltip)
     tooltip.drag.onMove = () => {
       tooltip.line.position()
-      tooltip.lineToTarget.position()
-      tooltip.lineToRendering.position()
-    }
-    targetTooltip.drag.onMove = () => {
-      targetTooltip.line.position()
-      tooltip.lineToTarget.position()
-      tooltip.lineToRendering.position()
+      if (tooltip.lineToTarget) tooltip.lineToTarget.position()
+      if (tooltip.lineToRendering) tooltip.lineToRendering.position()
     }
-    renderingTooltip.drag.onMove = () => {
-      renderingTooltip.line.position()
-      tooltip.lineToTarget.position()
-      tooltip.lineToRendering.position()
-    }
-    return tooltip
-  }
 
-  get renderingPartial () {
-    let partial = this.trigger ? this.trigger.renderingPartial : null
-    partial = partial || (this.target ? this.target.renderingPartial : null)
-    return partial
-  }
-
-  get renderingElement () {
-    let element = this.trigger ? this.trigger.renderingElement : null
-    element = element || (this.target ? this.target.renderingElement : null)
-    return element
+    return tooltip
   }
 
   get leaderLineOptions () {

data/app/javascript/index.js

@@ -1,6 +1,3 @@
-import TurboReady from 'turbo_ready'
-TurboReady.initialize(Turbo.StreamActions)
-
 import 'turbo_reflex'
 import './elements'
 import devtools from './devtools'

data/app/javascript/utils/dom.js

@@ -52,6 +52,7 @@ export function removeHighlight (element) {
 }
 
 export function coordinates (element) {
+  if (!element) return {}
   const rect = element.getBoundingClientRect()
   return {
     left: rect.left + window.scrollX,

data/lib/reflex_behaviors/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReflexBehaviors
-  VERSION = "0.0.6"
+  VERSION = "0.0.8"
 end

data/package.json

@@ -1,17 +1,16 @@
 {
   "name": "reflex_behaviors",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "Pre-built easy to use reactive TurboReflex behaviors for Rails/Hotwire apps.",
   "main": "app/javascript/index.js",
   "repository": "https://github.com/hopsoft/reflex_behaviors",
   "author": "Nate Hopkins (hopsoft) <natehop@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "turbo_ready": ">= 0.1.2",
-    "turbo_reflex": ">= 0.0.28"
+    "turbo_ready": ">= 0.1.3",
+    "turbo_reflex": ">= 0.0.29"
   },
   "peerDependencies": {
-    "@hotwired/turbo": ">= 7.2",
     "@hotwired/turbo-rails": ">= 7.2"
   },
   "devDependencies": {

data/reflex_behaviors.gemspec

@@ -22,8 +22,8 @@ Gem::Specification.new do |s|
 
   s.add_dependency "rails", ">= 6.1"
   s.add_dependency "turbo-rails", ">= 1.1"
-  s.add_dependency "turbo_ready", ">= 0.1.2"
-  s.add_dependency "turbo_reflex", ">= 0.0.28"
+  s.add_dependency "turbo_ready", ">= 0.1.3"
+  s.add_dependency "turbo_reflex", ">= 0.0.29"
 
   s.add_development_dependency "magic_frozen_string_literal"
   s.add_development_dependency "minitest-reporters"