fix(Detector): Handle page change

Author: Robin Simonklein

src/composables/useStimulusDetector.ts

@@ -1,4 +1,6 @@
-import { onBeforeMount, ref } from 'vue';
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
+import { StimulusDevToolsMessage } from '@/types';
+import { MessageEventName, MessageType } from '@/enum';
 
 const stimulusDetected = ref(false);
 
@@ -8,9 +10,20 @@ function checkIfHasStimulus() {
   });
 }
 
+function onRuntimeMessage(message: StimulusDevToolsMessage) {
+  if (message.type === MessageType.Event && message.name === MessageEventName.Undetected) {
+    checkIfHasStimulus();
+  }
+}
+
 export const useStimulusDetector = () => {
   onBeforeMount(() => {
     if (!stimulusDetected.value) checkIfHasStimulus();
+    chrome.runtime.onMessage.addListener(onRuntimeMessage);
+  });
+
+  onBeforeUnmount(() => {
+    chrome.runtime.onMessage.removeListener(onRuntimeMessage);
   });
 
   return { stimulusDetected, checkIfHasStimulus };

src/detector/index.ts

@@ -20,6 +20,17 @@
         return;
       }
 
+      if (detector.retry < 8) {
+        window.postMessage(
+          {
+            type: 'stimulus-devtools:event',
+            name: 'stimulus-devtools:undetected',
+          },
+          '*',
+        );
+        if (window['__STIMULUS_DEVTOOLS_DETECTED__']) delete window['__STIMULUS_DEVTOOLS_DETECTED__'];
+      }
+
       if (detector.retry > 0) {
         detector.retry--;
         setTimeout(() => {