List all elements which can update a Turbo Frame

Author: leonvogt

src/browser_panel/page/turbo_frame_observer.js

@@ -1,4 +1,4 @@
-import { ensureUUIDOnElement, getUUIDFromElement, stringifyHTMLElementTag } from "$utils/utils.js"
+import { ensureUUIDOnElement, getUUIDFromElement, stringifyHTMLElementTag, getElementPath } from "$utils/utils.js"
 
 export default class TurboFrameObserver {
   constructor(delegate) {
@@ -64,6 +64,12 @@ export default class TurboFrameObserver {
         map[attr.name] = attr.value
         return map
       }, {}),
+      referenceElements: Array.from(document.querySelectorAll(`[data-turbo-frame='${element.id}']`)).map((element) => {
+        return {
+          serializedTargetTag: stringifyHTMLElementTag(element, false),
+          elementPath: getElementPath(element),
+        }
+      }),
       children: [],
       element,
     }

src/browser_panel/panel/tabs/TurboTab.svelte

@@ -329,6 +329,17 @@
             </div>
 
             <div class="scrollable-list flow">
+              {#if selected.frame.referenceElements.length > 0}
+                <div class="pane-section-heading">
+                  <span>Will get updated by elements</span>
+                </div>
+                {#each selected.frame.referenceElements as referenceElement (referenceElement.serializedTargetTag)}
+                  <div class="html-preview">
+                    <pre><code class="language-html"><HTMLRenderer htmlString={referenceElement.serializedTargetTag} /></code></pre>
+                  </div>
+                {/each}
+              {/if}
+
               <div class="pane-section-heading">Attributes</div>
               <table class="table table-sm w-100 turbo-table">
                 <tbody>