easy-web-worker 1.0.0 → 1.0.2

package/README.md

@@ -108,4 +108,111 @@ await new EasyWebWorker((easyWorker, context) => {
 
 ```
 
-This is a very simple example, but you could import a whole library into your worker, as *JQUERY*, *Bluebird* for example
+This is a very simple example, but you could import a whole library into your worker, as *JQUERY*, *Bluebird* for example
+
+## StaticEasyWebWorker
+
+If you want to create a *Worker* with a static .js file and don't want to lose the structure of messages and promises and the onProgress callback from the library... you could use *StaticEasyWebWorker<IPayload = null, IResult = void>* directly in your Worker.
+
+trust me, talking about performance it's going to be the same. but may if you are trying to create something very complex and huge into a *Worker*... OK, a static js file could be a good option.
+
+Workers are gonna work just as the javascript you have in your main thread, but into another thread, so, the user experience could improve!!
+
+let's see how to use it: 
+
+// worker.js
+// This is gonna be the content of your worker
+// onMessage Callback is gonna receive all *send* method calls.
+```
+const onMessageCallback = (message: IEasyWebWorkerMessage<null, number>) => {
+  setTimeout(() => {
+    message.resolve(200);
+  }, 5000);
+};
+
+//  this is gonna create the same message structure the runtime Workers
+new StaticEasyWebWorker<null, number>(onMessageCallback);
+```
+
+and in your main thread:
+```
+const worker = new EasyWebWorker<null,number>('http://localhost:3000/worker.js');
+await worker.send();
+```
+
+Super easy right? 
+
+## Want to see more? 
+
+Here is an example of how you could easily create data filter into a Worker, to avoid performing loops process into the main thread that could end affecting user experience.
+
+```
+interface FilterSource {
+  filter: string,
+  collection: any[],
+  reportProgress: boolean,
+}
+
+const worker = new EasyWebWorker<FilterSource, any[]>((easyWorker) => {
+  const containsValue = (item: any, filter: string): boolean => {
+    const itemKeys = Object.keys(item);
+
+    return itemKeys.some((key) => {
+      const prop = item[key] || null;
+
+      if (typeof prop !== 'string' && Object.keys(prop).length) return containsValue(prop, filter);
+      if (prop.toString().replace(/(\r\n|\n|\r)/gm, '').trim().toLowerCase()
+        .indexOf(filter) !== -1) return true;
+
+      return false;
+    });
+  };
+
+  easyWorker.onMessage((message: IEasyWebWorkerMessage<FilterSource, any[]>) => {
+    const { payload } = message;
+    const { collection, filter = '', reportProgress: countProgress } = payload;
+    const { length: collectionLength } = collection;
+    const result = filter === '' ? collection : [];
+    const progressPerItem = collectionLength ? 100 / collectionLength : 0;
+
+    let currentProgress = 0;
+
+    if (filter) {
+      for (let index = 0; index < collectionLength; index += 1) {
+        if (countProgress) {
+          currentProgress += progressPerItem;
+          message.reportProgress(currentProgress);
+        }
+
+        const item = collection[index];
+
+        if (containsValue(item, filter)) result.push(item);
+      }
+    }
+
+    message.resolve(result);
+  });
+});
+```
+
+And how to use this? 
+
+```
+worker.send({
+  collection: [{ name: 'julio perez' }, { name: 'carol starling' }, { name: 'goku' }, { name: { firstname: 'johnny' } }],
+  filter: 'johnny',
+  reportProgress: true,
+}).onProgress((progressPercentage) => console.log(progressPercentage))
+  .then((filtered: any[]) => console.log(filtered));
+```
+
+the output should be:
+=> 25
+=> 50
+=> 75
+=> 100
+=> [{ name: { firstname: 'johnny' } }]
+
+Of course this is a very tiny array, but is just to give you and idea, actually you also could make fetch requests into workers... give it a try.
+
+*Thanks for reading, hope this help someone*

package/lib/EasyWebWorkerFixtures.d.ts

@@ -1,4 +1,4 @@
 export declare const generatedId: () => string;
-export declare const WorkerTemplate: (self: any) => void;
+export declare const WorkerTemplate: () => void;
 export default generatedId;
 //# sourceMappingURL=EasyWebWorkerFixtures.d.ts.map

package/lib/EasyWebWorkerFixtures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EasyWebWorkerFixtures.d.ts","sourceRoot":"","sources":["../src/EasyWebWorkerFixtures.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAAO,MAA6E,CAAC;AAE7G,eAAO,MAAM,cAAc,SAAU,GAAG,KAAG,IA0C1C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"EasyWebWorkerFixtures.d.ts","sourceRoot":"","sources":["../src/EasyWebWorkerFixtures.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAAO,MACsC,CAAC;AAEtE,eAAO,MAAM,cAAc,QAAO,IA+CjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/EasyWebWorkerFixtures.js

@@ -3,19 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WorkerTemplate = exports.generatedId = void 0;
 const generatedId = () => `${new Date().getTime()}${Math.random().toString(36).substr(2, 9)}`;
 exports.generatedId = generatedId;
-const WorkerTemplate = (self) => {
+const WorkerTemplate = () => {
     const easyWorker = new (class {
         constructor() {
             this.onMessageCallback = () => {
                 // eslint-disable-next-line no-throw-literal
-                throw 'you didnt defined a message-callback, please assign a callback by calling IEasyWorkerInstance.onMessage';
+                throw "you didnt defined a message-callback, please assign a callback by calling IEasyWorkerInstance.onMessage";
             };
             this.onMessage = (callback) => {
                 this.onMessageCallback = callback;
             };
         }
     })();
-    // eslint-disable-next-line no-param-reassign
+    // @ts-ignore
     self.onmessage = (event) => {
         const { messageId, payload } = event.data;
         // each message should have his own resolution methods
@@ -23,9 +23,13 @@ const WorkerTemplate = (self) => {
             constructor() {
                 this.payload = payload;
                 this.messageId = messageId;
-                this.resolve = (...result) => self.postMessage({ messageId, payload: result });
+                this.resolve = (...result) => 
+                // @ts-ignore
+                self.postMessage({ messageId, payload: result });
                 this.reject = (error) => this.resolve({ error });
-                this.reportProgress = (progressPercentage) => self.postMessage({ messageId, progressPercentage });
+                this.reportProgress = (progressPercentage) => 
+                // @ts-ignore
+                self.postMessage({ messageId, progressPercentage });
             }
         })();
         easyWorker.onMessageCallback(message, event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-web-worker",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "This is a library to easily handle and create web-workers, if you are a web developer and never tried this... do not wait any longer! Workers are an amazing option to improve user experience and make your webpages even greater",
   "main": "lib/EasyWebWorker.js",
   "files": [