feat: add observer to listen iframe href change

Author: nillswe

.eslintrc.cjs

@@ -11,6 +11,7 @@ module.exports = {
   plugins: ['react-refresh', 'mobx'],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
     'react-refresh/only-export-components': [
       'warn',
       {allowConstantExport: true},

src/components/devices/device-screen.tsx

@@ -2,7 +2,7 @@ import {Device} from '@/domain/models'
 import {observer} from 'mobx-react-lite'
 import {X} from 'lucide-react'
 import {appStore} from '@/store/app-store'
-import {merge} from '@/utils'
+import {getIframeId, merge} from '@/utils'
 import {useToggle} from '@uidotdev/usehooks'
 
 type Props = {
@@ -52,6 +52,7 @@ export const DeviceScreen = observer(({src, device: device}: Props) => {
         }}>
         {src ? (
           <iframe
+            id={getIframeId(device.id)}
             src={src}
             sandbox={`allow-scripts allow-forms allow-same-origin allow-presentation allow-orientation-lock allow-modals allow-popups allow-popups-to-escape-sandbox allow-pointer-lock`}
             allow='web-share'

src/hooks/use-app-listeners.ts

@@ -1,5 +1,6 @@
 import {appStore} from '@/store/app-store'
 import {appUIStore} from '@/store/app-ui-store'
+import {syncLocationStore} from '@/store/sync-location-store'
 import {useEffect} from 'react'
 
 export const useAppListeners = () => {
@@ -20,7 +21,7 @@ export const useAppListeners = () => {
   }, [])
 
   useEffect(() => {
-    appUIStore.syncLocation(devices)
+    syncLocationStore.initialize(appStore.devices)
   }, [devices])
 
   return {}

src/store/app-ui-store.ts

@@ -1,5 +1,3 @@
-import {Device} from '@/domain/models'
-import {appStore} from '@/store/app-store'
 import {autorun, makeAutoObservable} from 'mobx'
 import {WheelEvent as ReactWheelEvent, RefObject} from 'react'
 
@@ -110,49 +108,6 @@ export class AppUIStore {
     const zoomAmount = -(event.deltaY / ZOOM_SENSITIVITY)
     this.setZoom(Math.max(Math.min(this.zoom + zoomAmount, 2), 0.2))
   }
-
-  private iframeListenUrlChange(
-    iframe: HTMLIFrameElement,
-    callback: (url: string) => void,
-  ) {
-    let lastDispatched: string
-    let isFirstLoad: boolean = true
-
-    const getUrl = () => iframe?.contentWindow?.location.href ?? ''
-
-    const getUrlHandler = () => {
-      const href = getUrl()
-
-      if (lastDispatched !== href && !isFirstLoad) {
-        console.log('dispatch')
-        callback(href)
-        lastDispatched = href
-      } else {
-        // prevent to dispatch when it's still the initial page
-        isFirstLoad = false
-        lastDispatched = href
-      }
-    }
-
-    let intervalId: NodeJS.Timeout
-
-    iframe.contentWindow?.addEventListener('load', () => {
-      // clear interval if there's some
-      if (intervalId) clearInterval(intervalId)
-      intervalId = setInterval(getUrlHandler, 100)
-    })
-  }
-
-  syncLocation(devices: Device[]) {
-    devices.forEach(device => {
-      const selector = `#screen-${device.id} iframe`
-      const iframe = document.querySelector<HTMLIFrameElement>(selector)
-
-      if (!iframe) return
-
-      this.iframeListenUrlChange(iframe, url => appStore.setUrl(url))
-    })
-  }
 }
 
 export const appUIStore = new AppUIStore()

src/store/sync-location-store.ts

@@ -0,0 +1,46 @@
+import {Device} from '@/domain/models'
+import {getIframeBody, getIframeHref, getIframeId} from '@/utils'
+import {makeAutoObservable} from 'mobx'
+
+export class SyncLocationStore {
+  lastDispatched: string = ''
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  private iframeListenUrlChange(
+    iframe: HTMLIFrameElement,
+    callback: (url: string) => void,
+  ) {
+    iframe.contentWindow?.addEventListener('load', () => {
+      let oldHref = getIframeHref(iframe)
+      const body = getIframeBody(iframe)
+
+      const observer = new MutationObserver(() => {
+        const newHref = getIframeHref(iframe)
+
+        if (oldHref !== newHref) {
+          oldHref = newHref
+          callback(newHref)
+        }
+      })
+
+      if (!body) return
+      observer.observe(body, {childList: true, subtree: true})
+    })
+  }
+
+  initialize(devices: Device[]) {
+    devices.forEach(device => {
+      const selector = `#${getIframeId(device.id)}`
+      const iframe = document.querySelector<HTMLIFrameElement>(selector)
+
+      if (!iframe) return
+
+      this.iframeListenUrlChange(iframe, url => console.log(url))
+    })
+  }
+}
+
+export const syncLocationStore = new SyncLocationStore()

src/utils/iframe.ts

@@ -0,0 +1,9 @@
+export const getIframeHref = (iframe: HTMLIFrameElement): string => {
+  return iframe.contentWindow?.location.href || ''
+}
+
+export const getIframeBody = (
+  iframe: HTMLIFrameElement,
+): HTMLElement | undefined => {
+  return iframe.contentDocument?.body
+}

src/utils/index.ts

@@ -1 +1,3 @@
 export * from './merge-classes'
+export * from './iframe'
+export * from './screen'

src/utils/screen.ts

@@ -0,0 +1,2 @@
+export const getScreenId = (id: string) => `screen-${id}`
+export const getIframeId = (id: string) => `screen-iframe-${id}`