feat: workers

.github/workflows/test.yml

@@ -26,6 +26,7 @@ jobs:
             permissions,
             speech,
             storage,
+            workers,
           ]
     name: ${{ matrix.project }}
     steps:
@@ -122,6 +123,11 @@ jobs:
           directory: ./coverage/storage/
           flags: summary,storage
           name: storage
+      - uses: codecov/codecov-action@v3.1.3
+        with:
+          directory: ./coverage/workers/
+          flags: summary,workers
+          name: workers
 
 concurrency:
   group: test-${{ github.workflow }}-${{ github.ref }}

apps/demo/src/app/app.routes.ts

@@ -82,6 +82,11 @@ export const appRoutes: Routes = [
         loadChildren: async () =>
             (await import(`./pages/storage/storage-page.module`)).StoragePageModule,
     },
+    {
+        path: DemoPath.WorkersPage,
+        loadChildren: async () =>
+            (await import(`./pages/workers/workers-page.module`)).WorkersPageModule,
+    },
     {
         path: '',
         redirectTo: DemoPath.HomePage,

apps/demo/src/app/constants/demo-path.ts

@@ -13,4 +13,5 @@ export enum DemoPath {
     MidiPage = `midi`,
     PermissionsPage = `permissions`,
     StoragePage = `storage`,
+    WorkersPage = `workers`,
 }

apps/demo/src/app/pages/home/home-page.component.html

@@ -220,7 +220,7 @@ <h2>Storage</h2>
         class="icon"
     />
 </a>
-<a href="https://github.com/ng-web-apis/workers" target="_blank" class="link">
+<a class="link" [routerLink]="['/', link.WorkersPage]">
     <div>
         <h2>Workers</h2>
         A library for use of

apps/demo/src/app/pages/speech/speech-page.component.html

@@ -1,103 +1,109 @@
-<label class="recognition" [tuiLabel]="label">
-    <ng-template #label>
-        Speech recognition
-        <tui-tooltip
-            content="Say «Ok, Angular» to start recording and «Thank you, Angular» to end"
-        ></tui-tooltip>
-    </ng-template>
-    <ng-container *ngIf="record$ | async as result; else placeholder">
-        <span
-            *ngFor="let result of result"
-            class="transcript"
-            [class.transcript_final]="result.isFinal"
-        >
-            {{ result[0].transcript }}
-        </span>
-        &nbsp;
-    </ng-container>
-    <ng-template #placeholder>Say «Ok, Angular»...</ng-template>
-</label>
-<tui-select [valueContent]="nameExtractor" [(ngModel)]="voice">
-    Voice
-    <tui-data-list *tuiDataList>
-        <button
-            *ngFor="let item of voices$ | async; trackBy: voiceByName"
-            tuiOption
-            [value]="item"
-        >
-            {{ item.name }}
+<ng-container *ngIf="isBrowser">
+    <label class="recognition" [tuiLabel]="label">
+        <ng-template #label>
+            Speech recognition
+            <tui-tooltip
+                content="Say «Ok, Angular» to start recording and «Thank you, Angular» to end"
+            ></tui-tooltip>
+        </ng-template>
+        <ng-container *ngIf="record$ | async as result; else placeholder">
+            <span
+                *ngFor="let result of result"
+                class="transcript"
+                [class.transcript_final]="result.isFinal"
+            >
+                {{ result[0].transcript }}
+            </span>
+            &nbsp;
+        </ng-container>
+        <ng-template #placeholder>Say «Ok, Angular»...</ng-template>
+    </label>
+    <tui-select [valueContent]="nameExtractor" [(ngModel)]="voice">
+        Voice
+        <tui-data-list *tuiDataList>
+            <button
+                *ngFor="let item of voices$ | async; trackBy: voiceByName"
+                tuiOption
+                [value]="item"
+            >
+                {{ item.name }}
+            </button>
+        </tui-data-list>
+    </tui-select>
+    <tui-text-area
+        class="textarea"
+        [waTextToSpeech]="text | waUtterance: options"
+        [waTextToSpeechPaused]="paused"
+        [(ngModel)]="text"
+        (waTextToSpeechEnd)="onEnd()"
+    >
+        Text
+    </tui-text-area>
+    <div class="buttons">
+        <button tuiButton type="button" (click)="onClick()">
+            {{ paused ? 'Play' : 'Pause' }}
         </button>
-    </tui-data-list>
-</tui-select>
-<tui-text-area
-    class="textarea"
-    [waTextToSpeech]="text | waUtterance: options"
-    [waTextToSpeechPaused]="paused"
-    [(ngModel)]="text"
-    (waTextToSpeechEnd)="onEnd()"
->
-    Text
-</tui-text-area>
-<div class="buttons">
-    <button tuiButton type="button" (click)="onClick()">
-        {{ paused ? 'Play' : 'Pause' }}
-    </button>
-    Tip: say «Show sidebar»
-</div>
+        Tip: say «Show sidebar»
+    </div>
 
-<div *tuiSidebar="(open$ | async) || false">
-    <div class="sidebar">
-        <h2>More from @ng-web-apis</h2>
+    <div *tuiSidebar="(open$ | async) || false">
+        <div class="sidebar">
+            <h2>More from @ng-web-apis</h2>
 
-        <a
-            href="https://github.com/ng-web-apis/workers"
-            target="_blank"
-            class="link"
-        >
-            <h3>Workers</h3>
-            <img
-                src="https://ng-web-apis.github.io/dist/assets/images/workers.svg"
-                width="64"
-                height="64"
-                alt="Worker API logo"
-                class="icon"
-            />
-        </a>
+            <a
+                href="https://github.com/ng-web-apis/workers"
+                target="_blank"
+                class="link"
+            >
+                <h3>Workers</h3>
+                <img
+                    src="https://ng-web-apis.github.io/dist/assets/images/workers.svg"
+                    width="64"
+                    height="64"
+                    alt="Worker API logo"
+                    class="icon"
+                />
+            </a>
 
-        <a
-            href="https://github.com/ng-web-apis/canvas"
-            target="_blank"
-            class="link"
-        >
-            <h3>Canvas</h3>
-            <img
-                src="https://ng-web-apis.github.io/dist/assets/images/canvas.svg"
-                width="64"
-                height="64"
-                alt="Worker API logo"
-                class="icon"
-            />
-        </a>
+            <a
+                href="https://github.com/ng-web-apis/canvas"
+                target="_blank"
+                class="link"
+            >
+                <h3>Canvas</h3>
+                <img
+                    src="https://ng-web-apis.github.io/dist/assets/images/canvas.svg"
+                    width="64"
+                    height="64"
+                    alt="Worker API logo"
+                    class="icon"
+                />
+            </a>
 
-        <a
-            href="https://github.com/ng-web-apis/audio"
-            target="_blank"
-            class="link"
-        >
-            <h3>Audio</h3>
-            <img
-                src="https://ng-web-apis.github.io/dist/assets/images/audio.svg"
-                width="64"
-                height="64"
-                alt="Worker API logo"
-                class="icon"
-            />
-        </a>
+            <a
+                href="https://github.com/ng-web-apis/audio"
+                target="_blank"
+                class="link"
+            >
+                <h3>Audio</h3>
+                <img
+                    src="https://ng-web-apis.github.io/dist/assets/images/audio.svg"
+                    width="64"
+                    height="64"
+                    alt="Worker API logo"
+                    class="icon"
+                />
+            </a>
 
-        <a href="https://ng-web-apis.github.io/" target="_blank" class="link">
-            See all
-        </a>
+            <a
+                href="https://ng-web-apis.github.io/"
+                target="_blank"
+                class="link"
+            >
+                See all
+            </a>
 
-        Tip: say «Hide sidebar» when you're done
+            Tip: say «Hide sidebar» when you're done
+        </div>
     </div>
-</div>
+</ng-container>

apps/demo/src/app/pages/speech/speech-page.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject, PLATFORM_ID} from '@angular/core';
 import {
     continuous,
     isSaid,
@@ -11,6 +11,7 @@ import {
 import {TuiContextWithImplicit, tuiPure} from '@taiga-ui/cdk';
 import {merge, Observable, repeat, retry} from 'rxjs';
 import {filter, mapTo, share} from 'rxjs/operators';
+import {isPlatformBrowser} from '@angular/common';
 
 @Component({
     selector: `speech-page`,
@@ -19,6 +20,7 @@ import {filter, mapTo, share} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SpeechPageComponent {
+    readonly isBrowser = isPlatformBrowser(this.platformId);
     paused = true;
 
     voice = null;
@@ -30,6 +32,7 @@ export class SpeechPageComponent {
     }: TuiContextWithImplicit<SpeechSynthesisVoice>) => $implicit.name;
 
     constructor(
+        @Inject(PLATFORM_ID) readonly platformId: Record<any, any>,
         @Inject(SPEECH_SYNTHESIS_VOICES)
         readonly voices$: Observable<readonly SpeechSynthesisVoice[]>,
         @Inject(SpeechRecognitionService)

apps/demo/src/app/pages/workers/clock.component.ts

@@ -0,0 +1,14 @@
+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 {
+    readonly date$: Observable<number> = timer(0, 1000).pipe(map(() => Date.now()));
+}

apps/demo/src/app/pages/workers/workers-page.component.html

@@ -0,0 +1,14 @@
+<ng-container *ngIf="isBrowser">
+    <app-clock></app-clock>
+
+    <div class="example">
+        <button (click)="workerThread.postMessage()">
+            Run in worker process
+        </button>
+        <p>Execution time: {{ workerData$ | async }}</p>
+    </div>
+    <div class="example">
+        <button (click)="emitter.next()">Run in main process</button>
+        <p>Execution time: {{ result$ | async }}</p>
+    </div>
+</ng-container>

apps/demo/src/app/pages/workers/workers-page.component.less

@@ -0,0 +1,13 @@
+:host {
+    perspective: 150vw;
+    user-select: none;
+    flex-direction: column;
+    align-items: center;
+}
+
+.example {
+    min-width: 360px;
+    border-top: 1px solid gainsboro;
+    margin-top: 16px;
+    padding-top: 16px;
+}

apps/demo/src/app/pages/workers/workers-page.component.ts

@@ -0,0 +1,31 @@
+import {ChangeDetectionStrategy, Component, Inject, PLATFORM_ID} from '@angular/core';
+import {toData, WebWorker} from '@ng-web-apis/workers';
+import {Subject} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {isPlatformBrowser} from '@angular/common';
+
+function startCompute(): number {
+    const start = performance.now();
+
+    Array.from({length: 16000}).forEach((_, index) =>
+        Array.from({length: index}).reduce<number>((sum: number) => sum + 1, 0),
+    );
+
+    return performance.now() - start;
+}
+
+@Component({
+    selector: `workers-page`,
+    templateUrl: `./workers-page.component.html`,
+    styleUrls: [`./workers-page.component.less`],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkersPageComponent {
+    readonly isBrowser = isPlatformBrowser(this.platformId);
+    readonly workerThread = WebWorker.fromFunction<void, number>(startCompute);
+    readonly workerData$ = this.workerThread.pipe(toData());
+    readonly emitter: Subject<void> = new Subject();
+    readonly result$ = this.emitter.pipe(map(startCompute));
+
+    constructor(@Inject(PLATFORM_ID) readonly platformId: Record<any, any>) {}
+}

apps/demo/src/app/pages/workers/workers-page.module.ts

@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {WorkersPageComponent} from './workers-page.component';
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {WorkerModule} from '@ng-web-apis/workers';
+import {ClockComponent} from './clock.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        WorkerModule,
+        RouterModule.forChild([{path: '', component: WorkersPageComponent}]),
+    ],
+    declarations: [WorkersPageComponent, ClockComponent],
+})
+export class WorkersPageModule {}

libs/universal/src/mocks.js

@@ -39,6 +39,8 @@
     global.DynamicsCompressorNode = class {};
     global.GainNode = class {};
     global.IIRFilterNode = class {};
+    global.speechSynthesis = class {};
+    global.SpeechSynthesisUtterance = class {};
     global.PannerNode = class {};
     global.ScriptProcessorNode = class {};
     global.StereoPannerNode = class {};