reflex_behaviors 0.0.3 → 0.0.5

data/app/javascript/devtools/toggle.js

@@ -0,0 +1,178 @@
+import { appendHTML, addHighlight, removeHighlight } from './dom'
+import supervisor from './supervisor'
+
+document.addEventListener('reflex-behaviors:devtools-start', () =>
+  supervisor.register('toggle', 'toggles<small>(trigger/target)</small>')
+)
+
+const triggerTooltipId = 'toggle-trigger-tooltip'
+const targetTooltipId = 'toggle-target-tooltip'
+
+function appendTooltip (id, title, content, options = {}) {
+  let { backgroundColor, color, emphaisColor, position } = options
+  color = color || 'white'
+  position = position || 'top'
+
+  appendHTML(`
+    <reflex-behaviors-devools-tooltip id="${id}" position="${position}" background-color="${backgroundColor}" color="${color}" emphasis-color="${emphaisColor}">
+      <div slot='title'>${title}</div>
+      ${content}
+    </reflex-behaviors-devools-tooltip>
+  `)
+  return document.getElementById(id)
+}
+
+export default class ToggleDevtool {
+  constructor (trigger) {
+    this.name = 'toggle'
+    this.reflex = trigger.dataset.turboReflex
+    this.trigger = trigger
+    this.target = trigger.target
+
+    document.addEventListener('reflex-behaviors:devtool-enable', event => {
+      const { name } = event.detail
+      if (name === this.name)
+        addHighlight(this.trigger, { color: 'red', offset: '2px' })
+    })
+
+    document.addEventListener('reflex-behaviors:devtool-disable', event => {
+      const { name } = event.detail
+      if (name === this.name) removeHighlight(this.trigger)
+    })
+
+    document.addEventListener('click', event => {
+      if (event.target.closest('reflex-behaviors-devools-tooltip')) return
+      this.hide()
+    })
+  }
+
+  get enabled () {
+    return supervisor.enabled(this.name)
+  }
+
+  show () {
+    if (!this.enabled) return
+    this.hide()
+    this.createTriggerTooltip()
+    this.createTargetTooltip()
+    addHighlight(this.target, { color: 'blue', offset: '-2px' })
+
+    let renderingPartial = this.trigger ? this.trigger.renderingPartial : null
+    renderingPartial =
+      renderingPartial || (this.target ? this.target.renderingPartial : null)
+
+    let renderingElement = this.trigger ? this.trigger.renderingElement : null
+    renderingElement =
+      renderingElement || (this.target ? this.target.renderingElement : null)
+
+    addHighlight(renderingElement, {
+      color: 'turquoise',
+      offset: '4px',
+      width: '4px'
+    })
+
+    const data = {
+      rendering: { partial: null, id: null },
+      trigger: { partial: null, id: null },
+      target: { partial: null, id: null }
+    }
+
+    if (renderingPartial) data.rendering.partial = renderingPartial
+    if (renderingElement) data.rendering.id = renderingElement.id
+
+    if (this.trigger)
+      data.trigger = { partial: this.trigger.partial, id: this.trigger.id }
+
+    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}`
+
+    console.table(data)
+  }
+
+  hide () {
+    let renderingElement = this.trigger ? this.trigger.renderingElement : null
+    renderingElement =
+      renderingElement || (this.target ? this.target.renderingElement : null)
+
+    this.destroyTriggerTooltip()
+    this.destroyTargetTooltip()
+    removeHighlight(this.target)
+    removeHighlight(renderingElement)
+    this.cleanup()
+  }
+
+  cleanup () {
+    document
+      .querySelectorAll('reflex-behaviors-devools-tooltip')
+      .forEach(el => el.remove())
+
+    document
+      .querySelectorAll('[data-reflex-behaviors-highlight]')
+      .forEach(el => {
+        if (!el.tagName.match(/toggle-trigger/i)) removeHighlight(el)
+      })
+  }
+
+  createTriggerTooltip () {
+    if (!this.trigger) return
+    const title = `TRIGGER (targets: ${this.trigger.controls})`
+    const content = this.trigger.viewStack
+      .map(view => {
+        return this.trigger.sharedViews.includes(view)
+          ? `<div slot="emphasis">${view}</div>`
+          : `<div slot="normal">${view}</div>`
+      }, this)
+      .join('')
+
+    this.triggerTooltip = appendTooltip(triggerTooltipId, title, content, {
+      backgroundColor: 'pink',
+      emphaisColor: 'darkred'
+    })
+
+    const coords = this.trigger.coordinates
+    const top = Math.ceil(coords.top - this.triggerTooltip.offsetHeight - 14)
+    const left = Math.ceil(coords.left - 15)
+    this.triggerTooltip.style.top = `${top}px`
+    this.triggerTooltip.style.left = `${left}px`
+  }
+
+  destroyTriggerTooltip () {
+    if (!this.triggerTooltip) return
+    this.triggerTooltip.remove()
+    delete this.triggerTooltip
+  }
+
+  createTargetTooltip () {
+    if (!this.target) return
+    if (!this.target.viewStack) return
+
+    const title = `TARGET (id: ${this.target.id})`
+    const content = this.target.viewStack
+      .map(view => {
+        return this.trigger.sharedViews.includes(view)
+          ? `<div slot="emphasis">${view}</div>`
+          : `<div slot="normal">${view}</div>`
+      }, this)
+      .join('')
+
+    this.targetTooltip = appendTooltip(targetTooltipId, title, content, {
+      backgroundColor: 'lightskyblue',
+      emphaisColor: 'blue',
+      position: 'bottom'
+    })
+
+    const coords = this.target.coordinates
+    const top = Math.ceil(coords.top + coords.height + 12)
+    const left = Math.ceil(coords.left - 15)
+    this.targetTooltip.style.top = `${top}px`
+    this.targetTooltip.style.left = `${left}px`
+  }
+
+  destroyTargetTooltip () {
+    if (!this.targetTooltip) return
+    this.targetTooltip.remove()
+    delete this.targetTooltip
+  }
+}

data/app/javascript/elements/reflex_element.js

@@ -1,6 +1,14 @@
 export default class ReflexElement extends HTMLElement {
+  constructor () {
+    super()
+    this.devtool = 'unknown'
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.innerHTML = '<slot></slot>'
+  }
+
   connectedCallback () {
     this.ensureId()
+    this.dataset.elementOrigin = 'hopsoft/reflex_behaviors'
   }
 
   ensureId () {
@@ -23,6 +31,10 @@ export default class ReflexElement extends HTMLElement {
     return JSON.parse(this.dataset.viewStack)
   }
 
+  get partial () {
+    return this.viewStack[0]
+  }
+
   get coordinates () {
     const rect = this.getBoundingClientRect()
     return {

data/app/javascript/elements/toggle_trigger_element.js

@@ -1,48 +1,23 @@
 import ReflexElement from './reflex_element'
-import devtools from '../devtools'
+import DevtoolSupervisor from '../devtools/supervisor'
+import ToggleDevtool from '../devtools/toggle'
 
 export default class ToggleTriggerElement extends ReflexElement {
-  constructor () {
-    super()
-
-    this.addEventListener('mouseenter', event => {
-      if (devtools.isEnabled('toggle')) {
-        clearTimeout(this.mouseLeaveTimeout)
-        event.target.target.classList.add('debug')
-        event.target.showDebugTooltips()
-      }
-    })
+  connectedCallback () {
+    super.connectedCallback()
+    const mouseenter = () => this.devtool.show()
 
-    this.addEventListener('mouseleave', event => {
-      if (devtools.isEnabled('toggle')) {
-        clearTimeout(this.mouseLeaveTimeout)
-        this.mouseLeaveTimeout = setTimeout(() => {
-          event.target.target.classList.remove('debug')
-          document
-            .querySelectorAll('.reflex-behaviors-tooltip')
-            .forEach(tooltip => tooltip.remove())
-        }, 250)
-      }
+    document.addEventListener('reflex-behaviors:devtools-start', () => {
+      this.devtool = new ToggleDevtool(this)
+      this.addEventListener('mouseenter', mouseenter)
     })
-  }
 
-  showDebugTooltips () {
-    const sharedViewPath = this.sharedViewPath
-    let shared = false
-    let title = `controls: ${this.controls}`
-    let body = this.viewStack.map(path => {
-      shared = shared || path === sharedViewPath
-      return `<div class='${shared ? 'shared' : null}'>${path}<div>`
+    document.addEventListener('reflex-behaviors:devtools-stop', () => {
+      this.removeEventListener('mouseenter', mouseenter)
+      delete this.devtool
     })
-    devtools.tooltip(this, title, body.join(''), 'trigger', 'top')
 
-    shared = false
-    title = `id: ${this.target.id}`
-    body = this.target.viewStack.map(path => {
-      shared = shared || path === sharedViewPath
-      return `<div class='${shared ? 'shared' : null}'>${path}<div>`
-    })
-    devtools.tooltip(this.target, title, body.join(''), 'target', 'bottom')
+    if (DevtoolSupervisor.started) DevtoolSupervisor.restart()
   }
 
   collapse () {
@@ -54,19 +29,39 @@ export default class ToggleTriggerElement extends ReflexElement {
     }
   }
 
-  get sharedViewPath () {
-    const targetViewStack = this.target.viewStack
-    return this.viewStack.find(path => targetViewStack.includes(path))
+  get sharedViews () {
+    if (!this.target) return []
+    if (!this.target.viewStack) return []
+    const reducer = (memo, view) => {
+      if (this.target.viewStack.includes(view)) memo.push(view)
+      return memo
+    }
+    return this.viewStack.reduce(reducer.bind(this), [])
   }
 
-  get controls () {
-    return this.getAttribute('aria-controls')
+  get renderingInfo () {
+    if (!this.dataset.render) return {}
+    return JSON.parse(this.dataset.render)
+  }
+
+  get renderingPartial () {
+    return this.renderingInfo.partial
+  }
+
+  get renderingElement () {
+    const { id } = this.renderingInfo
+    if (!id) return null
+    return document.getElementById(id)
   }
 
   get expanded () {
     return this.getAttribute('aria-expanded') === 'true'
   }
 
+  get controls () {
+    return this.getAttribute('aria-controls')
+  }
+
   get target () {
     return document.getElementById(this.controls)
   }
@@ -94,6 +89,7 @@ addEventListener(
 )
 
 addEventListener('click', event => {
+  if (event.target.tagName.match(/reflex-behaviors-devtool/i)) return
   setTimeout(() => {
     const selector =
       'toggle-trigger[aria-controls][aria-expanded="true"][data-auto-collapse="true"]'

data/app/javascript/index.js

@@ -5,8 +5,4 @@ import 'turbo_reflex'
 import './elements'
 import devtools from './devtools'
 
-const { enable, disable, start, stop } = devtools
-
-self.ReflexBehavors = {
-  devtools: { enable, disable, start, stop }
-}
+self.ReflexBehaviors = { devtools }

data/app/reflexes/reflex_behaviors/application_reflex.rb

@@ -34,8 +34,11 @@ class ReflexBehaviors::ApplicationReflex < TurboReflex::Base
   private
 
   def hydrated_value(value)
-    GlobalID::Locator.locate_signed(value)
-  rescue
-    value
+    hydrated = begin
+      GlobalID::Locator.locate_signed(value)
+    rescue
+      value
+    end
+    hydrated.blank? ? nil : hydrated
   end
 end

data/lib/reflex_behaviors/engine.rb

@@ -8,7 +8,6 @@ module ReflexBehaviors
   end
 
   class Engine < ::Rails::Engine
-    config.assets.precompile << "reflex_behaviors_manifest.js"
     config.reflex_behaviors = ActiveSupport::OrderedOptions.new
 
     ActiveSupport.on_load(:action_controller) do

data/lib/reflex_behaviors/tag_builders/toggle_tags_builder.rb

@@ -4,25 +4,6 @@ require_relative "base_tag_builder"
 
 module ReflexBehaviors::TagBuilders
   class ToggleTagsBuilder < BaseTagBuilder
-    def target_tag(id, expanded: false, **kwargs, &block)
-      kwargs = kwargs.with_indifferent_access
-      kwargs[:id] = id
-      kwargs[:role] = "region"
-
-      kwargs[:aria] ||= {}
-      kwargs[:aria][:label] ||= "Dynamic Content Region"
-      kwargs[:aria][:live] ||= "polite"
-
-      kwargs[:data] ||= {}
-      kwargs[:data][:view_stack] = view_stack.to_json if Rails.env.development?
-
-      if expanded || target_expanded?(id)
-        content_tag("toggle-target", nil, kwargs, &block)
-      else
-        content_tag("toggle-target", nil, kwargs)
-      end
-    end
-
     def trigger_tag(target:, render:, action: :toggle, disabled: false, **kwargs, &block)
       kwargs = kwargs.with_indifferent_access
       kwargs[:id] ||= "#{target}-toggle-trigger"
@@ -42,6 +23,25 @@ module ReflexBehaviors::TagBuilders
       content_tag("toggle-trigger", nil, kwargs, &block)
     end
 
+    def target_tag(id, expanded: false, **kwargs, &block)
+      kwargs = kwargs.with_indifferent_access
+      kwargs[:id] = id
+      kwargs[:role] = "region"
+
+      kwargs[:aria] ||= {}
+      kwargs[:aria][:label] ||= "Dynamic Content Region"
+      kwargs[:aria][:live] ||= "polite"
+
+      kwargs[:data] ||= {}
+      kwargs[:data][:view_stack] = view_stack.to_json if Rails.env.development?
+
+      if expanded || target_expanded?(id)
+        content_tag("toggle-target", nil, kwargs, &block)
+      else
+        content_tag("toggle-target", nil, kwargs)
+      end
+    end
+
     def target_expanded?(target)
       !!turbo_reflex.state[target]
     end

data/lib/reflex_behaviors/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reflex_behaviors",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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",