Handle Stimulus classes

Author: leonvogt

src/browser_panel/page/stimulus_observer.js

@@ -61,7 +61,7 @@ export default class StimulusObserver {
   }
 
   buildStimulusElementData(element, identifier) {
-    const controller = window.Stimulus.getControllerForElementAndIdentifier(element, identifier)
+    const controller = window.Stimulus?.getControllerForElementAndIdentifier(element, identifier)
     return {
       id: element.id,
       uuid: getUUIDFromElement(element),
@@ -75,6 +75,7 @@ export default class StimulusObserver {
       values: this.buildControllerValues(controller),
       targets: this.buildControllerTargets(controller),
       outlets: this.buildControllerOutlets(controller),
+      classes: this.buildControllerClasses(controller),
       children: [],
       element,
     }
@@ -139,6 +140,23 @@ export default class StimulusObserver {
     })
   }
 
+  buildControllerClasses(controller) {
+    if (!controller) return []
+
+    const keys = Object.keys(Object.getOwnPropertyDescriptors(Object.getPrototypeOf(controller)))
+    const classKeys = keys.filter((key) => key.endsWith("Class") && !key.startsWith("has"))
+    return classKeys.map((classKey) => {
+      const classes = controller[`has${capitalizeFirstChar(classKey)}`] ? controller[`${classKey}es`] : []
+      const key = classKey.replace("Class", "")
+      return {
+        name: classKey,
+        key: key,
+        htmlAttribute: `${controller.classes.getAttributeName(key)}=""`,
+        classes: Array.from(classes),
+      }
+    })
+  }
+
   getStimulusData() {
     const buildStimulusTree = () => {
       const root = []

src/browser_panel/panel/tabs/StimulusTab.svelte

@@ -5,6 +5,7 @@
   import ValueTreeItem from "$src/components/Stimulus/ValueTreeItem.svelte"
   import TargetTreeItem from "$src/components/Stimulus/TargetTreeItem.svelte"
   import OutletTreeItem from "$src/components/Stimulus/OutletTreeItem.svelte"
+  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"
@@ -202,6 +203,10 @@
               {#each selected.controller.outlets.sort((a, b) => a.elements?.length < b.elements?.length) as outlet (selected.uuid + outlet.name)}
                 <OutletTreeItem {outlet} {selected} />
               {/each}
+              <div class="pane-section-heading">Classes</div>
+              {#each selected.controller.classes.sort((a, b) => a.classes?.length < b.classes?.length) as klass (selected.uuid + klass.name)}
+                <ClassTreeItem {klass} {selected} />
+              {/each}
             </div>
           </div>
         {:else}

src/components/Stimulus/ClassTreeItem.svelte

@@ -0,0 +1,37 @@
+<script>
+  import CopyButton from "$components/CopyButton.svelte"
+
+  let { klass, selected } = $props()
+</script>
+
+<div class="d-flex gap-2 mb-2">
+  <wa-tree>
+    <wa-tree-item expanded>
+      <span class="code-key">{klass.key}</span>
+      {#if klass.classes.length === 0}
+        <span class="text-muted">(0)</span>
+      {:else}
+        {#each klass.classes as value}
+          <wa-tree-item>
+            <div class="d-flex justify-content-between align-items-center">
+              <span>{value}</span>
+              <CopyButton {value} />
+            </div>
+          </wa-tree-item>
+        {/each}
+      {/if}
+      <wa-button id={`rich-tooltip-${klass.key}`} variant="neutral" appearance="plain" size="small" class="small-icon-button">
+        <wa-icon name="info" label="Info"></wa-icon>
+      </wa-button>
+    </wa-tree-item>
+  </wa-tree>
+
+  <wa-tooltip for={`rich-tooltip-${klass.key}`} trigger="click" style="--max-width: 100%;">
+    <div>
+      <div class="d-flex justify-content-between align-items-center">
+        <span>{klass.htmlAttribute}</span>
+        <CopyButton value={klass.htmlAttribute} />
+      </div>
+    </div>
+  </wa-tooltip>
+</div>