reflex_behaviors 0.0.6 → 0.0.7

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,15 @@ export default class ToggleDevtool {
       if (name === this.name) removeHighlight(this.trigger)
     })
 
-    document.addEventListener('click', event => {
+    addEventListener('click', event => {
       if (event.target.closest('reflex-behaviors-devools-tooltip')) return
-      activeToggle = null
-      this.hide()
+      this.hide(true)
     })
+
+    addEventListener('turbo:load', () => this.hide(true))
+    addEventListener('turbo-frame:load', () => this.hide(true))
+    addEventListener('turbo-reflex:success', () => this.hide(true))
+    addEventListener('turbo-reflex:finish', () => this.hide(true))
   }
 
   get enabled () {
@@ -101,7 +105,7 @@ export default class ToggleDevtool {
     console.table(data)
   }
 
-  hide () {
+  hide (clearActiveToggle) {
     document.querySelectorAll('.leader-line').forEach(el => el.remove())
     document
       .querySelectorAll('reflex-behaviors-devools-tooltip')
@@ -112,6 +116,8 @@ export default class ToggleDevtool {
       .forEach(el => {
         if (!el.tagName.match(/toggle-trigger/i)) removeHighlight(el)
       })
+
+    if (clearActiveToggle) activeToggle = null
   }
 
   createRenderingTooltip () {

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/lib/reflex_behaviors/version.rb

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

data/package.json

@@ -1,17 +1,16 @@
 {
   "name": "reflex_behaviors",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "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"