feat: add livewire navigated listener to global state and event handling

Author: MrPunyapal

resources/js/src/main.js

@@ -9,6 +9,7 @@ exports.window.__pan =
             clickListener: null,
             mouseoverListener: null,
             inertiaStartListener: null,
+            livewireNavigatedListener: null,
         };
 if (exports.window.__pan.observer) {
     exports.window.__pan.observer.disconnect();
@@ -26,6 +27,10 @@ if (exports.window.__pan.inertiaStartListener) {
     document.removeEventListener("inertia:start", exports.window.__pan.inertiaStartListener);
     exports.window.__pan.inertiaStartListener = null;
 }
+if (exports.window.__pan.livewireNavigatedListener) {
+    document.removeEventListener("livewire:navigated", exports.window.__pan.livewireNavigatedListener);
+    exports.window.__pan.livewireNavigatedListener = null;
+}
 (function () {
     const domObserver = (callback) => {
         const observer = new MutationObserver(callback);
@@ -139,6 +144,13 @@ if (exports.window.__pan.inertiaStartListener) {
         detectImpressions();
     };
     document.addEventListener("inertia:start", exports.window.__pan.inertiaStartListener);
+    exports.window.__pan.livewireNavigatedListener = () => {
+        impressed = [];
+        hovered = [];
+        clicked = [];
+        detectImpressions();
+    };
+    document.addEventListener("livewire:navigated", exports.window.__pan.livewireNavigatedListener);
     exports.window.__pan.beforeUnloadListener = function (event) {
         if (queue.length === 0) {
             return;

resources/js/src/main.ts

@@ -13,6 +13,7 @@ window.__pan =
         clickListener: null,
         mouseoverListener: null,
         inertiaStartListener: null,
+        livewireNavigatedListener: null,
     } as GlobalState);
 
 if (window.__pan.observer) {
@@ -42,6 +43,15 @@ if (window.__pan.inertiaStartListener) {
     window.__pan.inertiaStartListener = null;
 }
 
+if (window.__pan.livewireNavigatedListener) {
+    document.removeEventListener(
+        "livewire:navigated",
+        window.__pan.livewireNavigatedListener,
+    );
+
+    window.__pan.livewireNavigatedListener = null;
+}
+
 (function (): void {
     const domObserver = (callback: MutationCallback): void => {
         const observer = new MutationObserver(callback);
@@ -210,6 +220,19 @@ if (window.__pan.inertiaStartListener) {
         window.__pan.inertiaStartListener,
     );
 
+    window.__pan.livewireNavigatedListener = (): void => {
+        impressed = [];
+        hovered = [];
+        clicked = [];
+
+        detectImpressions();
+    };
+
+    document.addEventListener(
+        "livewire:navigated",
+        window.__pan.livewireNavigatedListener,
+    );
+
     window.__pan.beforeUnloadListener = function (event: Event): void {
         if (queue.length === 0) {
             return;

resources/js/src/types.ts

@@ -7,5 +7,6 @@ export type GlobalState = {
     clickListener: EventListener | null;
     mouseoverListener: EventListener | null;
     inertiaStartListener: EventListener | null;
+    livewireNavigatedListener: EventListener | null;
     beforeUnloadListener: EventListener | null;
 };