Show warning for non registered Stimulus controller

Author: leonvogt

public/styles/dev_tool_panel.css

@@ -671,6 +671,12 @@ wa-input[size="extra-small"] {
   color: var(--wa-color-purple-50);
 }
 
+.error-text-underline {
+  text-decoration: underline wavy #f14c4c;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
 /* Highlight.js GitHub Theme */
 pre code.hljs {
   display: block;

src/browser_panel/State.svelte.js

@@ -25,6 +25,7 @@ let turboCables = $state([])
 let turboStreams = $state([])
 let turboEvents = $state([])
 let stimulusData = $state([])
+let registeredStimulusIdentifiers = $state([])
 
 export function setTurboFrames(frames, url) {
   turboFrames = frames
@@ -50,6 +51,14 @@ export function getStimulusData() {
   return stimulusData
 }
 
+export function setRegisteredStimulusIdentifiers(identifiers, url) {
+  registeredStimulusIdentifiers = identifiers
+}
+
+export function getRegisteredStimulusIdentifiers() {
+  return registeredStimulusIdentifiers
+}
+
 export function addTurboEvent(event) {
   const exists = turboEvents.some((e) => e.uuid === event.uuid)
   if (exists) return

src/browser_panel/messaging.js

@@ -1,5 +1,5 @@
 import { PANEL_TO_BACKEND_MESSAGES, BACKEND_TO_PANEL_MESSAGES, PORT_IDENTIFIERS, HOTWIRE_DEV_TOOLS_PANEL_SOURCE } from "$lib/constants"
-import { setTurboFrames, setTurboCables, setStimulusData, addTurboStream, addTurboEvent } from "./State.svelte.js"
+import { setTurboFrames, setTurboCables, setStimulusData, setRegisteredStimulusIdentifiers, addTurboStream, addTurboEvent } from "./State.svelte.js"
 
 function setPort(port) {
   if (!window.__HotwireDevTools) {
@@ -26,6 +26,10 @@ export const handleBackendToPanelMessage = (message, port) => {
       setStimulusData(message.stimulusData, message.url)
       setPort(port)
       break
+    case BACKEND_TO_PANEL_MESSAGES.SET_REGISTERED_STIMULUS_IDENTIFIERS:
+      setRegisteredStimulusIdentifiers(message.identifiers, message.url)
+      setPort(port)
+      break
     case BACKEND_TO_PANEL_MESSAGES.TURBO_STREAM_RECEIVED:
       addTurboStream(message.turboStream)
       setPort(port)

src/browser_panel/page/backend.js

@@ -24,6 +24,7 @@ function init() {
     start() {
       this.elementObserver.start()
       this.addEventListeners()
+      this.sendRegisteredStimulusControllers()
     }
 
     stop() {
@@ -172,6 +173,14 @@ function init() {
       })
     }, 10)
 
+    sendRegisteredStimulusControllers = () => {
+      this._postMessage({
+        identifiers: Array.from(window.Stimulus?.router.modulesByIdentifier.keys() || []),
+        url: btoa(window.location.href),
+        type: BACKEND_TO_PANEL_MESSAGES.SET_REGISTERED_STIMULUS_IDENTIFIERS,
+      })
+    }
+
     handleIncomingTurboStream = (event) => {
       const turboStream = event.target
       const turboStreamContent = turboStream.outerHTML

src/browser_panel/panel/tabs/StimulusTab.svelte

@@ -8,8 +8,7 @@
   import ClassTreeItem from "$src/components/Stimulus/ClassTreeItem.svelte"
   import InspectButton from "$components/InspectButton.svelte"
   import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte"
-  import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
-  import { getStimulusData } from "../../State.svelte.js"
+  import { getStimulusData, getRegisteredStimulusIdentifiers } from "../../State.svelte.js"
   import { flattenNodes, handleKeyboardNavigation, selectorByUUID } from "$utils/utils.js"
   import { addHighlightOverlay, hideHighlightOverlay } from "../../messaging.js"
   import { getDevtoolInstance } from "$lib/devtool.js"
@@ -23,6 +22,7 @@
     controller: null,
   })
   let stimulusControllers = $state([])
+  let registeredStimulusIdentifiers = $state([])
   let flattenStimulusControllers = $derived(flattenNodes(stimulusControllers))
   let uniqueIdentifiers = $derived([...new Set(flattenStimulusControllers.map((n) => n.identifier).filter(Boolean))].sort())
   let counts = $derived(
@@ -47,6 +47,10 @@
     }
   })
 
+  $effect(() => {
+    registeredStimulusIdentifiers = getRegisteredStimulusIdentifiers()
+  })
+
   const getStimulusInstances = (identifier) => {
     return flattenStimulusControllers.filter((n) => n.identifier === identifier)
   }
@@ -104,6 +108,11 @@
       }
     }, 10)
   }
+
+  const isIdentifierRegistered = (identifier) => {
+    if (!registeredStimulusIdentifiers.length) return true
+    return registeredStimulusIdentifiers.includes(identifier)
+  }
 </script>
 
 <Splitpanes horizontal={$horizontalPanes} dblClickSplitter={false}>
@@ -128,7 +137,14 @@
                 class:selected={selected.identifier === identifier}
               >
                 <div class="d-flex justify-content-between align-items-center">
-                  <div>{identifier}</div>
+                  <div id={`identifier-${index}`} class:error-text-underline={!isIdentifierRegistered(identifier)}>
+                    {identifier}
+                  </div>
+                  {#if !isIdentifierRegistered(identifier)}
+                    <wa-tooltip for={`identifier-${index}`} style="--max-width: 200px;">
+                      <div>This controller does not appear to be registered in window.Stimulus.</div>
+                    </wa-tooltip>
+                  {/if}
                   <div>{counts[identifier]}</div>
                 </div>
               </div>

src/lib/constants.js

@@ -11,6 +11,7 @@ export const BACKEND_TO_PANEL_MESSAGES = {
   SET_TURBO_FRAMES: "set-turbo-frames",
   SET_TURBO_CABLES: "set-turbo-cables",
   SET_STIMULUS_DATA: "set-stimulus-data",
+  SET_REGISTERED_STIMULUS_IDENTIFIERS: "set-registered-stimulus-identifiers",
   TURBO_STREAM_RECEIVED: "turbo-stream-received",
   TURBO_EVENT_RECEIVED: "turbo-event-received",
   HEALTH_CHECK_RESPONSE: "health-check-response",