0.1.1 • Published 4 years ago
ng-workerbee v0.1.1
Ng-Workerbee
This project was generated with Angular CLI version 10.0.8.
Why ng-workerbee?
Angular 8 introduced native support for Web Workers, however this support does not extend to Angular libraries. Ng-Workerbee makes use of the WorkerHelper class (written by klausj https://github.com/klausj and sourced from https://github.com/angular/angular-cli/issues/15059#issuecomment-584593180) to allow a developer to easily use Web Workers in a compiled Angular library. While developed specifically to support Web Workers in Angular libraries, ng-workerbee can be used in any Angular project.
Usage
Install
npm i ng-workerbee -or- clone the github repo and build the ng-workerbee app.
Imports
import {
InitWorker,
PostToWorker,
BuildMessage,
} from 'ng-workerbee';
Initialize your worker in a component constructor:
// InitWorker takes 2 parameters like:
// InitWorker(processResponse: Function, that?: any)
//
// the first is a function which should take 2 parameters like:
// someFunction(response: MessageResponse, that: myComponent)
//
// the second should be an object or an instance of
// your component if you wish your worker to "return" a value.
//
// It is suggested to use a Subject(BehaviorSubject or ReplaySubject) here.
data: MessageEvent;
dataSubject = new Subject<MessageEvent>();
testWorker: Worker;
workerTest = function (data: MessageEvent, that: myComponent) {
that.dataSubject.next(data)
console.log(`initWorker got message: ${data.data}`);
};
constructor() {
this.dataSubject.subscribe({
next: (d) => this.data = d
})
this.testWorker = InitWorker(this.workerTest, this);
}
Use BuildMessage to construct the second parameter for PostToWorker like:
// BuildMessage takes 3 parameterslike:
// BuildMessage( wFun: Function, params: any, depFuns: Function[] )
//
// the first is the function your worker should execute, the
// workerFunction, which MUST reuturn a Promise.
// this function should take one parameter, even should you decide
// that it is undefined.
//
// the second is the parameter to be passed to the workerFunction
//
// the third is an optional array of functions that the workerFunction
// is dependent on, these dependency functions MUST be declared as
// exported functions like:
// export function myFunction(){ doStuff... }
// rather than as let myFun = function(){ doStuff... }
// in order to maintain their function names within the scope of the worker
workerFunction(item): Promise<any> {
return new Promise((resolve) => {
if (valCompare(item)) {
resolve('resolving with: ' + item.logVal);
}
});
}
valCompare(item): boolean {
if (item.logVal === 'workerbee works!') {
return true;
} else {
return false;
}
}
params = { logVal: 'workerbee works!' }
testMessage = BuildMessage(workerFunction, params, [valCompare])
Use PostToWorker to invoke:
// PostToWorker takes 2 parameters like:
// PostToWorker(worker: Worker, message: workerMessageFormat)
//
// the first is the worker to which the message should be posted
//
// the second is a message of type {workerMessageFormat}
// (returned by BuildMessage)
// When the worker completes, the function you provided to InitWorker will be
// invoked with the resolution of your workerFunction and the Component instance
// you passed to InitWorker(if any).
// DONE.
PostToWorker(
this.testWorker,
this.testMessage
);
Demo
To run the sample app, clone the github repo and run npm run build ng-workerbee && npm start