Merge branch 'feature/webworker' of github.com:ng-web-apis/workers into feature/webworker

Author: IKatsuba

projects/demo/src/app/app.browser.module.ts

@@ -10,6 +10,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {WorkerModule} from '@ng-web-apis/workers';
 import {AppComponent} from './app.component';
 import {AppRoutingModule} from './app.routes';
+import {ClockComponent} from './clock.component';
 
 @NgModule({
     bootstrap: [AppComponent],
@@ -20,7 +21,7 @@ import {AppRoutingModule} from './app.routes';
         AppRoutingModule,
         WorkerModule,
     ],
-    declarations: [AppComponent],
+    declarations: [AppComponent, ClockComponent],
     providers: [
         {
             provide: LocationStrategy,

projects/demo/src/app/app.component.html

@@ -1,7 +1,10 @@
-<form (ngSubmit)="workerThread.next(input.value)">
-    <input #input />
-    <button type="submit">Send</button>
-    <button type="button" (click)="workerThread.complete()">Complete</button>
-</form>
+<app-clock></app-clock>
 
-{{ workerThread | async | waWorker: oneMoreFn | async | json }}
+<div class="example">
+    <button (click)="workerThread.next()">Run in worker process</button>
+    <p>Execution time: {{ workerThread | async }}</p>
+</div>
+<div class="example">
+    <button (click)="emitter.next()">Run in main process</button>
+    <p>Execution time: {{ result$ | async }}</p>
+</div>

projects/demo/src/app/app.component.less

@@ -5,8 +5,9 @@
     align-items: center;
 }
 
-.observer {
-    background: skyblue;
-    border-radius: 16px;
-    padding: 40px;
+.example {
+    min-width: 360px;
+    border-top: 1px solid gainsboro;
+    margin-top: 16px;
+    padding-top: 16px;
 }

projects/demo/src/app/app.component.ts

@@ -1,5 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {WebWorker, WorkerExecutor} from '@ng-web-apis/workers';
+import {Observable, Subject} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Component({
     selector: 'main',
@@ -8,15 +10,25 @@ import {WebWorker, WorkerExecutor} from '@ng-web-apis/workers';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-    workerThread: WebWorker<string, string>;
+    workerThread: WebWorker<void, number>;
+    emitter: Subject<void>;
+    result$: Observable<number>;
 
     constructor(webWorkerExecutor: WorkerExecutor) {
-        this.workerThread = webWorkerExecutor.createWorker((result: string) =>
-            Promise.resolve(`Message from worker: ${result}`),
-        );
+        this.workerThread = webWorkerExecutor.createWorker(this.startCompute);
+        this.emitter = new Subject();
+        this.result$ = this.emitter.pipe(map(this.startCompute));
     }
 
-    oneMoreFn(data: string): Promise<string> {
-        return Promise.resolve(data);
+    startCompute(): number {
+        function compute(num: number): number {
+            return Array.from({length: num}).reduce<number>((sum: number) => sum + 1, 0);
+        }
+
+        const start = performance.now();
+
+        Array.from({length: 16000}).forEach((_, index) => compute(index));
+
+        return performance.now() - start;
     }
 }

projects/demo/src/app/clock.component.ts

@@ -0,0 +1,18 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {Observable, timer} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'app-clock',
+    template: `
+        {{ date | async | date: 'mediumTime' }}
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockComponent {
+    date: Observable<number>;
+
+    constructor() {
+        this.date = timer(0, 1000).pipe(map(() => Date.now()));
+    }
+}