...

eventEmitter.js

@@ -0,0 +1,3 @@
+import { EventEmitter } from "events";
+
+export const eventEmitter = new EventEmitter();

package-lock.json

@@ -8,6 +8,7 @@
       "name": "iotm-web",
       "version": "4.2.0",
       "dependencies": {
+        "events": "^3.3.0",
         "js-cookie": "^3.0.5",
         "sirv-cli": "^2.0.2",
         "svelte-frappe-charts": "^1.10.0"
@@ -628,6 +629,14 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",

package.json

@@ -26,8 +26,9 @@
     "tinro": "^0.6.12"
   },
   "dependencies": {
+    "events": "^3.3.0",
     "js-cookie": "^3.0.5",
     "sirv-cli": "^2.0.2",
     "svelte-frappe-charts": "^1.10.0"
   }
-}
+}

src/App.svelte

@@ -12,6 +12,8 @@
   import CloudIcon from "./svg/Cloud.svelte";
   import WebSocketManager from "./WebSocketManager";
 
+  import { eventEmitter } from "../eventEmitter";
+
   router.mode.hash();
 
   let opened = true;
@@ -39,7 +41,6 @@
   const wsManager = new WebSocketManager(deviceList, debug);
 
   let layoutJson = wsManager.layoutJson;
-  $: layoutJson = wsManager.layoutJson;
 
   router.subscribe(handleNavigation);
 
@@ -71,6 +72,18 @@
     wsManager.selectedDeviceDataRefresh();
     wsManager.connectToAllDevices();
     wsManager.wsTestMsgTask();
+
+    const updateLayoutJson = (newLayoutJson) => {
+      layoutJson = newLayoutJson;
+    };
+
+    // Add event listener when component is mounted
+    eventEmitter.on("layoutJsonUpdated", updateLayoutJson);
+
+    // Remove event listener when component is destroyed
+    return () => {
+      eventEmitter.off("layoutJsonUpdated", updateLayoutJson);
+    };
   });
 
   const getUser = async () => {

src/WebSocketManager.js

@@ -1,3 +1,5 @@
+import { eventEmitter } from "../eventEmitter";
+
 class WebSocketManager {
   constructor(deviceList, debug = true) {
     this.deviceList = deviceList;
@@ -349,6 +351,9 @@ class WebSocketManager {
     this.pages = Array.from(new Set(this.layoutJson.map(({ page }) => page)))
       .map((page) => ({ page }))
       .sort((a, b) => a.page.localeCompare(b.page));
+
+    eventEmitter.emit("layoutJsonUpdated", this.layoutJson);
+
     console.log("[3]", ws, "layout sort, requested params...");
     this.wsSendMsg(ws, "/params|");
   }