* fix HMR (removing circular dependancy)

* add HMR to stores
ConorMurphy21 · Feb 18, 2024 · 662dbe4 · 662dbe4
1 parent 443a49a
commit 662dbe4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/client/src/stores/game.ts b/client/src/stores/game.ts
@@ -2,7 +2,7 @@
 
 import socket from '@/socket/socket.js';
 import { useRoomStore } from '@/stores/room.js';
-import { defineStore } from 'pinia';
+import { acceptHMRUpdate, defineStore } from 'pinia';
 import type {
   Player,
   Match as ServerMatch,
@@ -363,3 +363,13 @@ export const useGameStore = defineStore('game', {
     }
   }
 });
+
+// allow hot-module reloading of the game store
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    acceptHMRUpdate(useGameStore, import.meta.hot)(newModule);
+    socket.off();
+    useRoomStore().bindEvents();
+    useGameStore().bindEvents();
+  });
+}
diff --git a/client/src/stores/room.ts b/client/src/stores/room.ts
@@ -1,8 +1,8 @@
 // noinspection JSUnusedGlobalSymbols
-import router from '@/router/index.js';
+import { type Router, useRouter } from 'vue-router';
 import socket from '@/socket/socket.js';
-import { defineStore } from 'pinia';
-import type { Player } from ':common/stateTypes';
+import { acceptHMRUpdate, defineStore } from 'pinia';
+import type { Player } from ':common/stateTypes.js';
 
 interface State {
   players: Player[];
@@ -11,6 +11,7 @@ interface State {
   error: string;
   receivedError: boolean;
   route: string;
+  router: Router;
 }
 
 export const useRoomStore = defineStore('room', {
@@ -20,7 +21,8 @@ export const useRoomStore = defineStore('room', {
     roomName: '',
     error: '',
     receivedError: false,
-    route: 'home'
+    route: 'home',
+    router: useRouter()
   }),
   getters: {
     self(): Player | undefined {
@@ -31,9 +33,6 @@ export const useRoomStore = defineStore('room', {
     setName(name: string) {
       this.name = name;
     },
-    setRoomName(roomName: string) {
-      this.roomName = roomName;
-    },
     setError(error: string) {
       this.error = error;
     },
@@ -58,13 +57,13 @@ export const useRoomStore = defineStore('room', {
         if (data.success) {
           this.roomName = data.roomName;
           this.error = '';
-          await router.push({
+          await this.router.push({
             name: 'game',
             params: { roomName: data.roomName }
           });
         } else {
           if (this.route !== 'home') {
-            await router.push({
+            await this.router.push({
               name: 'home',
               params: { error: data.error }
             });
@@ -79,8 +78,23 @@ export const useRoomStore = defineStore('room', {
       });
 
       socket.on('kickPlayer', async (data: { error: string }) => {
-        await router.push({ name: 'home', query: { error: data.error } });
+        await this.router.push({ name: 'home', query: { error: data.error } });
       });
     }
   }
 });
+
+// allow hot module reloading of the room store
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    acceptHMRUpdate(useRoomStore, import.meta.hot)(newModule);
+    // unfortunately can't unbind all listeners because game would be effected
+    // and can't rebind game because of circular dependancy
+    // so each socket listener has to be offed manually
+    socket.off('connect');
+    socket.off('updatePlayers');
+    socket.off('joinRoom');
+    socket.off('kickPlayer');
+    useRoomStore().bindEvents();
+  });
+}
diff --git a/client/src/stores/settings.ts b/client/src/stores/settings.ts
@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia';
+import { acceptHMRUpdate, defineStore } from 'pinia';
 
 interface State {
   volume: number;
@@ -45,3 +45,8 @@ export const useSettingsStore = defineStore('settings', {
     }
   }
 });
+
+// allow hot-module reloading of the settings store
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useSettingsStore, import.meta.hot));
+}