use-broadcast-ts - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

dist/index.js

@@ -177,2 +177,13 @@ 'use strict';
   /**
+   * The id of the tab / window
+   */
+  let id = 0;
+
+  /**
+   * Store a list of all the tabs / windows
+   * Only for the main tab / window
+   */
+  const tabs = [0];
+
+  /**
    * Create the broadcast channel
@@ -225,3 +236,6 @@ */
      */
-    channel.postMessage(state);
+    channel.postMessage({
+      action: 'change',
+      state
+    });
   };
@@ -233,3 +247,3 @@
   channel.onmessage = e => {
-    if (e.data.sync === name) {
+    if (e.data.action === 'sync') {
       /**
@@ -258,3 +272,16 @@ * If this tab / window is not the main, return
        */
-      channel.postMessage(state);
+      channel.postMessage({
+        action: 'change',
+        state
+      });
+
+      /**
+       * Set the new tab / window id
+       */
+      const new_id = tabs[tabs.length - 1] + 1;
+      tabs.push(new_id);
+      channel.postMessage({
+        action: 'add_new_tab',
+        id: new_id
+      });
       return;
@@ -264,10 +291,47 @@ }
     /**
-     * Update the state
+     * Set an id for the tab / window if it doesn't have one
      */
-    set(e.data);
+    if (e.data.action === 'add_new_tab' && !isMain && id === 0) {
+      id = e.data.id;
+      return;
+    }
 
     /**
-     * Set the synced attribute
+     * On receiving a new state, update the state
      */
-    isSynced = true;
+    if (e.data.action === 'change') {
+      /**
+       * Update the state
+       */
+      set(e.data.state);
+
+      /**
+       * Set the synced attribute
+       */
+      isSynced = true;
+    }
+
+    /**
+     * On receiving a close message, remove the tab / window id from the list
+     */
+    if (e.data.action === 'close') {
+      if (!isMain) {
+        return;
+      }
+      const index = tabs.indexOf(e.data.id);
+      if (index !== -1) {
+        tabs.splice(index, 1);
+      }
+    }
+
+    /**
+     * On receiving a change_main message, change the main tab / window
+     */
+    if (e.data.action === 'change_main') {
+      if (e.data.id === id) {
+        isMain = true;
+        tabs.splice(0, tabs.length, ...e.data.tabs);
+        console.log("I'm the main tab now, my id is " + id + ' and the tabs are ' + tabs.join(', '));
+      }
+    }
   };
@@ -281,3 +345,3 @@
     channel.postMessage({
-      sync: name
+      action: 'sync'
     });
@@ -297,2 +361,40 @@
   /**
+   * Handle case when the tab / window is closed
+   */
+  const onClose = () => {
+    channel.postMessage({
+      action: 'close',
+      id
+    });
+
+    /**
+     * If we're closing the main, make the second the new main
+     */
+    if (isMain) {
+      /**
+       * If there is only one tab left, close the channel and return
+       */
+      if (tabs.length === 1) {
+        /**
+         * Clean up
+         */
+        channel.close();
+        return;
+      }
+      const remaining_tabs = tabs.filter(tab => tab !== id);
+      channel.postMessage({
+        action: 'change_main',
+        id: remaining_tabs[0],
+        tabs: remaining_tabs
+      });
+      return;
+    }
+  };
+
+  /**
+   * Add close event listener
+   */
+  window.addEventListener('beforeunload', onClose);
+
+  /**
    * Synchronize with the main tab
@@ -299,0 +401,0 @@ */

package.json

 {
 	"name": "use-broadcast-ts",
-	"version": "1.4.1",
+	"version": "1.4.2",
 	"description": "Use the Broadcast Channel API in React easily with hooks or Zustand, and Typescript!",
@@ -5,0 +5,0 @@ "type": "module",

src/shared.ts

@@ -59,2 +59,23 @@ import { StateCreator, StoreMutatorIdentifier } from 'zustand';
 	type Item = { [key: string]: unknown };
+	type Message =
+		| {
+				action: 'sync';
+		  }
+		| {
+				action: 'change';
+				state: Item;
+		  }
+		| {
+				action: 'add_new_tab';
+				id: number;
+		  }
+		| {
+				action: 'close';
+				id: number;
+		  }
+		| {
+				action: 'change_main';
+				id: number;
+				tabs: number[];
+		  };
 
@@ -78,2 +99,13 @@ /**
 	/**
+	 * The id of the tab / window
+	 */
+	let id = 0;
+
+	/**
+	 * Store a list of all the tabs / windows
+	 * Only for the main tab / window
+	 */
+	const tabs: number[] = [0];
+
+	/**
 	 * Create the broadcast channel
@@ -123,3 +155,3 @@ */
 		 */
-		channel.postMessage(state);
+		channel.postMessage({ action: 'change', state } as Message);
 	};
@@ -131,3 +163,3 @@
 	channel.onmessage = (e) => {
-		if ((e.data as { sync: string }).sync === name) {
+		if ((e.data as Message).action === 'sync') {
 			/**
@@ -153,4 +185,12 @@ * If this tab / window is not the main, return
 			 */
-			channel.postMessage(state);
+			channel.postMessage({ action: 'change', state } as Message);
 
+			/**
+			 * Set the new tab / window id
+			 */
+			const new_id = tabs[tabs.length - 1]! + 1;
+			tabs.push(new_id);
+
+			channel.postMessage({ action: 'add_new_tab', id: new_id } as Message);
+
 			return;
@@ -160,10 +200,49 @@ }
 		/**
-		 * Update the state
+		 * Set an id for the tab / window if it doesn't have one
 		 */
-		set(e.data);
+		if ((e.data as Message).action === 'add_new_tab' && !isMain && id === 0) {
+			id = e.data.id;
+			return;
+		}
 
 		/**
-		 * Set the synced attribute
+		 * On receiving a new state, update the state
 		 */
-		isSynced = true;
+		if ((e.data as Message).action === 'change') {
+			/**
+			 * Update the state
+			 */
+			set(e.data.state);
+
+			/**
+			 * Set the synced attribute
+			 */
+			isSynced = true;
+		}
+
+		/**
+		 * On receiving a close message, remove the tab / window id from the list
+		 */
+		if ((e.data as Message).action === 'close') {
+			if (!isMain) {
+				return;
+			}
+
+			const index = tabs.indexOf(e.data.id);
+			if (index !== -1) {
+				tabs.splice(index, 1);
+			}
+		}
+
+		/**
+		 * On receiving a change_main message, change the main tab / window
+		 */
+		if ((e.data as Message).action === 'change_main') {
+			if (e.data.id === id) {
+				isMain = true;
+				tabs.splice(0, tabs.length, ...e.data.tabs);
+
+				console.log("I'm the main tab now, my id is " + id + ' and the tabs are ' + tabs.join(', '));
+			}
+		}
 	};
@@ -175,3 +254,3 @@
 	const synchronize = (): void => {
-		channel.postMessage({ sync: name });
+		channel.postMessage({ action: 'sync' } as Message);
 
@@ -190,2 +269,35 @@ /**
 	/**
+	 * Handle case when the tab / window is closed
+	 */
+	const onClose = (): void => {
+		channel.postMessage({ action: 'close', id } as Message);
+
+		/**
+		 * If we're closing the main, make the second the new main
+		 */
+		if (isMain) {
+			/**
+			 * If there is only one tab left, close the channel and return
+			 */
+			if (tabs.length === 1) {
+				/**
+				 * Clean up
+				 */
+				channel.close();
+				return;
+			}
+
+			const remaining_tabs = tabs.filter((tab) => tab !== id);
+			channel.postMessage({ action: 'change_main', id: remaining_tabs[0], tabs: remaining_tabs } as Message);
+
+			return;
+		}
+	};
+
+	/**
+	 * Add close event listener
+	 */
+	window.addEventListener('beforeunload', onClose);
+
+	/**
 	 * Synchronize with the main tab
@@ -192,0 +304,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42396

increased by19.59%

Lines of code

1316

increased by27.52%

No dependency changes