tabs-manager - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/caller.d.ts

@@ -6,3 +6,3 @@ /// <reference types="node" />
     private readonly workerPath;
-    private readonly workerName;
+    private readonly workerOptions;
     private workerInstance;
@@ -9,0 +9,0 @@ private readonly id;

lib/caller.js

@@ -50,3 +50,3 @@ "use strict";
         }
-        _this.workerName = (_a = options.workerName) !== null && _a !== void 0 ? _a : 'Tab Manager';
+        _this.workerOptions = (_a = options.workerOptions) !== null && _a !== void 0 ? _a : 'Tab Manager';
         _this.id = (0, uuid_1.v4)();
@@ -65,3 +65,3 @@ return _this;
         }
-        this.workerInstance = new SharedWorker(this.workerPath, this.workerName);
+        this.workerInstance = new SharedWorker(this.workerPath, this.workerOptions);
     };
@@ -71,3 +71,2 @@ TabsManagerWorkerCaller.prototype.initWorkerListener = function () {
         this.workerInstance.port.addEventListener('message', function (e) {
-            console.log('eeee', e);
             var _a = e.data, type = _a.type, id = _a.id;
@@ -74,0 +73,0 @@ if (type === helper_1.workerEvents.activeTabId) {

lib/interface.d.ts

 export interface TabsManagerWorkerCallerParams {
     workerPath: string;
-    workerName?: string;
+    workerOptions?: string | Record<string, unknown>;
 }
@@ -5,0 +5,0 @@ export interface IWorkerMessageData {

package.json

 {
   "name": "tabs-manager",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Definition one active tab on multiple tabs scenarios. ",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -1,7 +0,71 @@
-# tab-manager
+# tabs-manager
+[![npm](https://img.shields.io/npm/v/tabs-manager.svg)](https://www.npmjs.com/package/tabs-manager)
+[![license](https://img.shields.io/npm/l/tabs-manager.svg)](https://www.npmjs.com/package/tabs-manager)
 
-Let's assume that there is HTML page including some special logic, that logics will trigger by some event listener. Users maybe open multiple tabs all including this page. Once the event is emitted, all tabs will trigger that event, that's may caused some performance issue or unexpect error. So we would like to mark one tab as `active` tab, once we recived the event, only this tab will trigger to execution the code logic.  
+![example picture](./readmeStatic/tabs-managers.gif)
 
+Let's assume that there is HTML page including some special logic, that logics will trigger by some event listener. Users maybe open multiple tabs all including this page. Once the event is emitted, all tabs will trigger that event, that's may caused some performance issue or unexpected error. So we would like to mark one tab as `active` tab, once we received the event, only this tab will trigger to execution the code logic.  
+
 We definition `active tab` to the currently or last tab which users browsing or focusing. 
 
 Here using [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) to implement this logic.
+
+### Installation
+
+---
+
+```shell
+  npm install tabs-manager --save-dev
+```
+
+### Usage
+
+---
+
+As I said above, it implement by [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker), If you don't familiar with it, you should learn the base usage of it first.
+we should have a html including client script, also has a `worker.js` using for shared work script.
+The file structure like this
+
+```bash
+.
+├── ...
+├── src                         # 
+│   ├── client.js               # HTML page script
+│   ├── index.html              # HTML page
+│   ├── worker.js               # worker script
+│   └── ...                     # 
+└── ...
+
+```
+
+and here is the example of how to using `tabs-manager`
+
+> client.js script
+```javascript
+import {
+  TabsManagerEvents,
+  TabsManagerWorkerCaller,
+} from 'tabs-manager';
+
+const tabManager = new TabsManagerWorkerCaller({
+  workerPath: 'worker.js', // your shared work script path
+});
+
+tabManager.addListener(TabsManagerEvents.activeTab, (isActive) => {
+  document.title = isActive ? '✅ active' : 'inactive';
+});
+
+tabManager.addListener(TabsManagerEvents.error, (error) => {
+  console.log('Do not support SharedWorker or other error', error)
+});
+
+tabManager.init();
+```
+
+> worker.js script
+```javascript
+import { TabsManagerWorkerServer } from 'tabs-manager';
+
+const server = new TabsManagerWorkerServer();
+server.init();
+```

src/caller.ts

@@ -16,3 +16,3 @@ import { EventEmitter } from 'events';
 
-  private readonly workerName: string;
+  private readonly workerOptions: string | Record<string, unknown>;
 
@@ -31,3 +31,3 @@ private workerInstance: SharedWorker;
     }
-    this.workerName = options.workerName ?? 'Tab Manager';
+    this.workerOptions = options.workerOptions ?? 'Tab Manager';
     this.id = uuid();
@@ -47,3 +47,3 @@ }
     }
-    this.workerInstance = new SharedWorker(this.workerPath, this.workerName);
+    this.workerInstance = new SharedWorker(this.workerPath, this.workerOptions);
   }
@@ -53,3 +53,2 @@
     this.workerInstance.port.addEventListener('message', (e: MessageEvent) => {
-      console.log('eeee', e);
       const { type, id } = e.data;
@@ -56,0 +55,0 @@ if (type === workerEvents.activeTabId) {

src/interface.ts

 export interface TabsManagerWorkerCallerParams {
   workerPath: string
-  workerName?: string
+  workerOptions?: string | Record<string, unknown>
 }
@@ -5,0 +5,0 @@

No alert changes

Improved metrics

Total package byte prevSize

17630486

increased by70611.45%

Number of package files

28

increased by3.7%

Number of lines in readme file

72

increased by800%

Worsened metrics

Lines of code

519

decreased by-0.38%

No dependency changes