Merge pull request #43 from julianrubisch/delegate-setup-teardown

.gitignore

@@ -14,3 +14,4 @@
 Gemfile.lock
 *.key
 *~
+/.dir-locals.el

app/javascript/elements/toggle_elements/trigger_element/index.js

@@ -1,4 +1,4 @@
-import { Devtool } from '@turbo-boost/devtools'
+import { Devtool, decorateElementWithDevtool } from '@turbo-boost/devtools'
 
 import ToggleElement, { busyDuration } from '../toggle_element'
 import focus from './focus'
@@ -10,6 +10,12 @@ document.addEventListener('turbo-boost:devtools-start', () =>
 let currentFocusSelector
 
 export default class ToggleTriggerElement extends ToggleElement {
+  constructor () {
+    super()
+
+    decorateElementWithDevtool(this, 'toggle', 'toggles')
+  }
+
   connectedCallback () {
     super.connectedCallback()
 
@@ -39,36 +45,10 @@ export default class ToggleTriggerElement extends ToggleElement {
       const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
       removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
 
-      this.devtool.hide({ active: false })
-      this.devtool.unregisterEventListeners()
-      delete this.devtool
+      this.removeDevtool()
     }, 1000)
   }
 
-  initializeDevtool () {
-    const mouseenter = () => this.devtool.show()
-
-    addEventListener('turbo-boost:devtools-start', () => {
-      this.devtool = new Devtool(this)
-      this.addEventListener('mouseenter', mouseenter)
-    })
-
-    addEventListener('turbo-boost:devtools-stop', () => {
-      this.removeEventListener('mouseenter', mouseenter)
-      this.devtool.hide({ active: false })
-      this.devtool.unregisterEventListeners()
-      delete this.devtool
-    })
-
-    this.dispatchEvent(
-      new CustomEvent('turbo-boost:devtools-connect', { bubbles: true })
-    )
-  }
-
-  hideDevtool () {
-    if (this.devtool) this.devtool.hide({ active: false })
-  }
-
   onCommandStart (event) {
     currentFocusSelector = this.focusSelector
     this.targetElement.labeledBy = this.id
@@ -173,22 +153,10 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   // ------ DevToolDelegate ------
-  get name () {
-    return 'toggle'
-  }
-
   get command () {
     return this.dataset.turboCommand
   }
 
-  get triggerElement () {
-    return this // SEE: app/javascript/elements/toggle_trigger_element.js
-  }
-
-  get targetLineLabel () {
-    return 'toggles'
-  }
-
   get renderingLineLabel () {
     return 'renders & morphs'
   }

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@turbo-boost/commands": ">= 0.0.11",
-    "@turbo-boost/devtools": "^0.0.1"
+    "@turbo-boost/devtools": "^0.0.2"
   },
   "peerDependencies": {
     "@hotwired/turbo-rails": ">= 7.2"

yarn.lock

@@ -258,10 +258,10 @@
   dependencies:
     "@turbo-boost/streams" ">= 0.0.8"
 
-"@turbo-boost/devtools@^0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@turbo-boost/devtools/-/devtools-0.0.1.tgz#29534d3b6b2c52cc3ae58b31c60ddad9ad21d895"
-  integrity sha512-/Wi0v+szBMQOnFbaql5T9W46LyaD+LRUmneFsd4bRNzugwEmfyezqOWHaHDs/g+m/FknUybMolEx1AcuPdiygw==
+"@turbo-boost/devtools@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@turbo-boost/devtools/-/devtools-0.0.2.tgz#2aafeb04bcfd16c71f2b4541816728fa1622f95e"
+  integrity sha512-UEqcudHCSZo2IeGI6GlNuikNq+zblf93mGJQwByIpRmRCPtePdELsoba4OQ1nxN4aczOrWpAcf4mfuHa125CsQ==
 
 "@turbo-boost/streams@>= 0.0.8":
   version "0.0.8"