Feature: added Livewire support, the search will now be re-run after …

…Livewire events are fired, to show the popups for newly created elements

README.md

@@ -114,6 +114,8 @@ You can change the URL that the analytics are being exposed on by changing the `
 
 ## Changelog
 
+- 1.0.2
+  - Feature: added Livewire support, the `[data-pan]` search will now be re-run after Livewire `morph.updated` events are fired, to show the popups for newly created elements
 - 1.0.1
   - Fix: removed livewire specific script inclusion
 - 1.0.0 

resources/views/components/viewer.blade.php

@@ -115,11 +115,17 @@ function buildPanWidget(analytic) {
         return html;
     }
 
+    let button = null;
+
     async function buildPanToggle() {
         let destroyViewer = await initPanViewer();
 
         @if ($toggle)
-        const button = document.createElement('button');
+        if (button) {
+            button.remove();
+        }
+
+        button = document.createElement('button');
         button.textContent = 'Hide Pan Analytics';
         button.classList.add('pan-toggle');
         button.classList.add('inactive');
@@ -190,17 +196,36 @@ function buildPanWidget(analytic) {
 
     let destroyViewer = null;
 
-    window.pan = {
-        async show() {
-            destroyViewer = await buildPanToggle();
-        },
-        hide() {
-            if (destroyViewer) {
-                destroyViewer();
-                destroyViewer = null;
-            }
+    const show = async () => {
+        destroyViewer = await buildPanToggle();
+    };
+    const hide = () => {
+        if (destroyViewer) {
+            destroyViewer();
+            destroyViewer = null;
         }
     };
+    const refresh = () => {
+        hide();
+        show();
+    };
+
+    window.pan = {
+        show,
+        hide,
+        refresh
+    };
 
     window.pan.show();
+
+    if (window.Livewire) {
+        let timeout = null;
+        window.Livewire.hook('morph.updated', () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+
+            timeout = setTimeout(window.pan.refresh, 500);
+        });
+    }
 </script>