Angular Comlink

app.component.html

<h1>{{ textStream | async }}</h1>

<div>
  <input type="text" [(ngModel)]="textInput">
  <button (click)="run()">Run</button>
</div>

app.component.ts

import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { releaseProxy, Remote, wrap } from 'comlink';

declare type TestWorker = (text: string) => string;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit, OnDestroy {
  // Updates the UI when text has changed
  textStream = new BehaviorSubject('Text');
  
  // Input text
  textInput = 'Hello World';

  // Web worker proxy
  proxy: Remote<TestWorker>;

  ngOnInit() {
    // Load the worker
    const worker = new Worker('./app.worker', { type: 'module' });
    // Wrap the worker in a proxy
    this.proxy = wrap<TestWorker>(worker);
  }

  ngOnDestroy() {
    // Detach the proxy (Unsubscribe from the worker)
    this.proxy[releaseProxy]();
  }

  async run() {
    // Use the proxy to call the web worker function
    const text = await this.proxy(this.textInput);
    this.textStream.next(text);
  }
}

app.worker.ts

/// <reference lib="webworker" />

import * as Comlink from 'comlink';

export function test(text: string): string {
  return `"${text}" from worker`;
}

Comlink.expose(test);