feat: add observe location state

Author: crashmax-dev

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@crashmax/eslint-config"
+  "extends": "@crashmax/eslint-config",
+  "rules": {
+    "@typescript-eslint/unbound-method": "off"
+  }
 }

src/chat-observer.ts

@@ -1,11 +1,6 @@
 import Store from './store'
 
-interface ChatObserver {
-  chat: HTMLElement
-  update: (message: HTMLElement) => void
-}
-
-export function chatObserver({ chat, update }: ChatObserver): void {
+export function chatObserver(callback: (message: HTMLElement) => void): MutationObserver {
   const observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
       for (const element of mutation.addedNodes) {
@@ -15,13 +10,11 @@ export function chatObserver({ chat, update }: ChatObserver): void {
         const { self } = Store.value
 
         if (chatMessage && (self || highlightMessage)) {
-          update(message)
+          callback(message)
         }
       }
     }
   })
 
-  observer.observe(chat, {
-    childList: true
-  })
+  return observer
 }

src/index.ts

@@ -4,16 +4,37 @@ import './settings'
 import './styles.scss'
 
 window.addEventListener('load', () => {
-  const chat = document
-    .querySelector<HTMLElement>('.chat-scrollable-area__message-container')
+  const observe = chatMount()
+  const { history } = window
+  const { pushState, replaceState } = history
 
-  if (chat) {
-    chatObserver({
-      chat,
-      update: (message) => {
-        message.addEventListener('mouseenter', enterEvent)
-        message.addEventListener('click', clickEvent)
-      }
-    })
+  history.pushState = (...args) => {
+    pushState.apply(history, args)
+    observe()
   }
+
+  history.replaceState = (...args) => {
+    replaceState.apply(history, args)
+    observe()
+  }
+
+  observe()
 })
+
+function chatMount(): () => void {
+  const observer = chatObserver((message) => {
+    message.addEventListener('mouseenter', enterEvent)
+    message.addEventListener('click', clickEvent)
+  })
+
+  return () => {
+    const chat = document
+      .querySelector<HTMLElement>('.chat-scrollable-area__message-container')
+
+    if (chat) {
+      observer.observe(chat, {
+        childList: true
+      })
+    }
+  }
+}