Refactoring

.prettierignore

@@ -1,4 +1,2 @@
 manifest.template.json
-
-# Ignore all the Xcode files
-HotwireDevTools/HotwireDevTools/*/**
+xcode/HotwireDevTools/*/**

README.md

@@ -77,7 +77,7 @@ Then you can load the extension by following these steps:
 
 1. Open Xcode
 2. Choose "Open Existing Project"
-3. Select the [HotwireDevTools/HotwireDevTools.xcodeproj](./HotwireDevTools/HotwireDevTools.xcodeproj) file (blue icon)
+3. Select the [xcode/HotwireDevTools.xcodeproj](./xcode/HotwireDevTools.xcodeproj) workspace (blue icon)
 4. Build the project (you may need to select a team in the project settings -> Signing & Capabilities)
 5. Open Safari > Settings > Extensions and enable the Hotwire Dev Tools extension
 

src/components/detail_panel.js

@@ -1,7 +1,8 @@
-import { getMetaContent, debounce } from "../lib/utils"
-import { turboStreamTargetElements } from "../lib/turbo_utils"
-import { addHighlightOverlayToElements, removeHighlightOverlay } from "../lib/highlight"
-import * as Icons from "../lib/icons"
+import { getMetaContent, debounce } from "../utils/utils"
+import { turboStreamTargetElements } from "../utils/turbo_utils"
+import { addHighlightOverlayToElements, removeHighlightOverlay } from "../utils/highlight"
+import DOMScanner from "../utils/dom_scanner"
+import * as Icons from "../utils/icons"
 
 import hljs from "highlight.js/lib/core"
 import xml from "highlight.js/lib/languages/xml"
@@ -237,7 +238,8 @@ export default class DetailPanel {
   }
 
   get stimulusTabContent() {
-    const sortedControllerIds = Object.keys(this.groupedStimulusControllerElements).sort()
+    const groupedControllers = DOMScanner.groupedStimulusControllerElements
+    const sortedControllerIds = Object.keys(groupedControllers).sort()
 
     if (sortedControllerIds.length === 0) {
       return `
@@ -259,7 +261,7 @@ export default class DetailPanel {
         entryAttributes.title = "Controller not registered"
       }
 
-      const stimulusControllerElements = this.groupedStimulusControllerElements[stimulusControllerId]
+      const stimulusControllerElements = groupedControllers[stimulusControllerId]
       entries.push(`
         <div ${Object.entries(entryAttributes)
           .map(([key, value]) => `${key}="${value}"`)
@@ -273,7 +275,7 @@ export default class DetailPanel {
   }
 
   get turboFrameTabContent() {
-    const frames = Array.from(document.querySelectorAll("turbo-frame")).sort((a, b) => a.id.localeCompare(b.id))
+    const frames = Array.from(DOMScanner.turboFrameElements)
     if (frames.length === 0) {
       return `
         <div class="hotwire-dev-tools-no-entry">
@@ -322,7 +324,7 @@ export default class DetailPanel {
         <div class="info-tab-content-turbo">
           <div class="info-tab-content-wrapper">
             <span>Turbo Frames:</span>
-            <span>${document.querySelectorAll("turbo-frame").length}</span>
+            <span>${DOMScanner.turboFrameElements.length}</span>
           </div>
           ${
             typeof this.devTool.turboDetails.turboDriveEnabled === "boolean"
@@ -366,33 +368,13 @@ export default class DetailPanel {
         <div class="info-tab-content-stimulus">
           <div class="info-tab-content-wrapper">
             <span>Stimulus Controllers:</span>
-            <span>${document.querySelectorAll("[data-controller]").length}</span>
+            <span>${DOMScanner.stimulusControllerElements.length}</span>
           </div>
         </div>
       </div>
     `
   }
 
-  get groupedStimulusControllerElements() {
-    const stimulusControllerElements = document.querySelectorAll("[data-controller]")
-    if (stimulusControllerElements.length === 0) return {}
-
-    const groupedElements = {}
-    stimulusControllerElements.forEach((element) => {
-      element.dataset.controller
-        .split(" ")
-        .filter((stimulusControllerId) => stimulusControllerId.trim() !== "")
-        .forEach((stimulusControllerId) => {
-          if (!groupedElements[stimulusControllerId]) {
-            groupedElements[stimulusControllerId] = []
-          }
-          groupedElements[stimulusControllerId].push(element)
-        })
-    })
-
-    return groupedElements
-  }
-
   get detailPanelContainer() {
     const existingContainer = this.shadowRoot.getElementById("hotwire-dev-tools-detail-panel-container")
     if (existingContainer) {
@@ -404,12 +386,12 @@ export default class DetailPanel {
   }
 
   get shadowContainer() {
-    const existingShadowContainer = document.getElementById("hotwire-dev-tools-shadow-container")
+    const existingShadowContainer = DOMScanner.shadowContainer
     if (existingShadowContainer) {
       return existingShadowContainer
     }
     const shadowContainer = document.createElement("div")
-    shadowContainer.id = "hotwire-dev-tools-shadow-container"
+    shadowContainer.id = DOMScanner.SHADOW_CONTAINER_ID
     document.body.appendChild(shadowContainer)
     return shadowContainer
   }

src/content.js

@@ -1,8 +1,10 @@
-import { turboStreamTargetElements } from "./lib/turbo_utils"
-import { addHighlightOverlayToElements, removeHighlightOverlay } from "./lib/highlight"
+import { turboStreamTargetElements } from "./utils/turbo_utils"
+import { addHighlightOverlayToElements, removeHighlightOverlay } from "./utils/highlight"
 import { MONITORING_EVENTS } from "./lib/monitoring_events"
+
 import Devtool from "./lib/devtool"
 import DetailPanel from "./components/detail_panel"
+import DOMScanner from "./utils/dom_scanner"
 
 const LOCATION_ORIGIN = window.location.origin
 const devTool = new Devtool(LOCATION_ORIGIN)
@@ -14,11 +16,11 @@ const highlightTurboFrames = () => {
 
   if (!devTool.options.turbo.highlightFrames) {
     document.body.classList.remove("hotwire-dev-tools-highlight-turbo-frames")
-    document.querySelectorAll("turbo-frame").forEach((frame) => {
+    DOMScanner.turboFrameElements.forEach((frame) => {
       frame.style.outline = ""
       frame.querySelector(`.${badgeContainerClass}`)?.remove()
     })
-    document.querySelectorAll(".hotwire-dev-tools-highlight-overlay-turbo-frame").forEach((overlay) => overlay.remove())
+    DOMScanner.turboFrameOverlayElements.forEach((overlay) => overlay.remove())
     return
   }
 
@@ -61,7 +63,7 @@ const highlightTurboFrames = () => {
 
   const windowScrollY = window.scrollY
   const windowScrollX = window.scrollX
-  document.querySelectorAll("turbo-frame").forEach((frame) => {
+  DOMScanner.turboFrameElements.forEach((frame) => {
     const frameId = frame.id
     const isEmpty = frame.innerHTML.trim() === ""
     const shouldIgnore = isEmpty && ignoreEmptyFrames
@@ -77,7 +79,7 @@ const highlightTurboFrames = () => {
       if (!overlay) {
         overlay = document.createElement("div")
         overlay.id = `hotwire-dev-tools-highlight-overlay-${frameId}`
-        overlay.className = `hotwire-dev-tools-highlight-overlay-turbo-frame`
+        overlay.className = DOMScanner.TURBO_FRAME_OVERLAY_CLASS_NAME
       }
 
       Object.assign(overlay.style, {
@@ -106,8 +108,9 @@ const highlightTurboFrames = () => {
 }
 
 const highlightStimulusControllers = () => {
+  const controllers = DOMScanner.stimulusControllerElements
   if (!devTool.options.stimulus.highlightControllers) {
-    document.querySelectorAll("[data-controller]").forEach((controller) => (controller.style.outline = ""))
+    controllers.forEach((controller) => (controller.style.outline = ""))
     return
   }
 
@@ -121,7 +124,7 @@ const highlightStimulusControllers = () => {
     }
   }
 
-  document.querySelectorAll("[data-controller]").forEach((controller) => {
+  controllers.forEach((controller) => {
     if (blacklistedControllers.includes(controller)) {
       controller.style.outline = ""
       return
@@ -196,7 +199,7 @@ const handleWindowMessage = (event) => {
 }
 
 const handleTurboBeforeCache = (event) => {
-  document.querySelectorAll(".hotwire-dev-tools-highlight-overlay-turbo-frame").forEach((element) => {
+  DOMScanner.turboFrameOverlayElements.forEach((element) => {
     element.remove()
   })
 }
@@ -217,7 +220,7 @@ const handleTurboFrameRender = (event) => {
   if (!devTool.options.turbo.highlightFramesChanges) return
 
   const turboFrame = event.target
-  const overlayClassName = `hotwire-dev-tools-highlight-overlay-turbo-frame-${turboFrame.id}`
+  const overlayClassName = `${TURBO_FRAME_OVERLAY_CLASS_NAME}-${turboFrame.id}`
   const color = devTool.options.turbo.highlightFramesOutlineColor
   addHighlightOverlayToElements([turboFrame], color, overlayClassName, "0.1")
 
@@ -254,6 +257,7 @@ const init = async () => {
   highlightTurboFrames()
   highlightStimulusControllers()
   renderDetailPanel()
+  console.log(DOMScanner.uniqueStimulusControllerIdentifiers)
 }
 
 const events = ["turbolinks:load", "turbo:load", "turbo:frame-load", "hotwire-dev-tools:options-changed"]
@@ -264,7 +268,7 @@ document.addEventListener("turbo:before-stream-render", handleIncomingTurboStrea
 // so we can keep the detail panel open, without flickering, when navigating between pages.
 // (The normal data-turbo-permanent way doesn't work for this, because the new page won't have the detail panel in the DOM yet)
 window.addEventListener("turbo:before-render", (event) => {
-  event.target.appendChild(document.getElementById("hotwire-dev-tools-shadow-container"))
+  event.target.appendChild(DOMScanner.shadowContainer)
 })
 
 // Chance to clean up any DOM modifications made by this extension before Turbo caches the page

src/lib/devtool.js

@@ -1,4 +1,4 @@
-import { loadCSS } from "./utils"
+import { loadCSS } from "../utils/utils"
 
 export default class Devtool {
   constructor(origin = null) {

src/utils/dom_scanner.js

@@ -0,0 +1,50 @@
+export default class DOMScanner {
+  static SHADOW_CONTAINER_ID = "hotwire-dev-tools-shadow-container"
+  static TURBO_FRAME_OVERLAY_CLASS_NAME = "hotwire-dev-tools-highlight-overlay-turbo-frame"
+
+  // Turbo
+  static get turboFrameElements() {
+    return document.querySelectorAll("turbo-frame")
+  }
+
+  // Stimulus
+  static get stimulusControllerElements() {
+    return document.querySelectorAll("[data-controller]")
+  }
+
+  static get stimulusControllerIdentifiers() {
+    return Array.from(this.stimulusControllerElements)
+      .map((element) => element.dataset.controller.split(" "))
+      .flat()
+  }
+
+  static get uniqueStimulusControllerIdentifiers() {
+    return [...new Set(this.stimulusControllerIdentifiers)]
+  }
+
+  static get groupedStimulusControllerElements() {
+    const groupedElements = {}
+    this.stimulusControllerElements.forEach((element) => {
+      element.dataset.controller
+        .split(" ")
+        .filter((stimulusControllerId) => stimulusControllerId.trim() !== "")
+        .forEach((stimulusControllerId) => {
+          if (!groupedElements[stimulusControllerId]) {
+            groupedElements[stimulusControllerId] = []
+          }
+          groupedElements[stimulusControllerId].push(element)
+        })
+    })
+
+    return groupedElements
+  }
+
+  // Dev Tools
+  static get shadowContainer() {
+    return document.getElementById(this.SHADOW_CONTAINER_ID)
+  }
+
+  static get turboFrameOverlayElements() {
+    return document.querySelectorAll(`.${this.TURBO_FRAME_OVERLAY_CLASS_NAME}`)
+  }
+}