https://github.com/yashwantyashu/worker-bridge
https://github.com/yashwantyashu/worker-bridge
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/yashwantyashu/worker-bridge
- Owner: yashwantyashu
- License: mit
- Created: 2026-03-28T15:53:12.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2026-03-28T18:27:33.000Z (2 months ago)
- Last Synced: 2026-03-28T18:29:05.296Z (2 months ago)
- Language: TypeScript
- Size: 21.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-worker-bridge - A lightweight, zero-boilerplate reactive bridge for Angular and React that makes Web Workers (Dedicated and Shared) as simple as calling a regular method. (Development Utilities / Performance)
- awesome-angular - ngx-worker-bridge - A lightweight, zero-boilerplate reactive bridge for Angular and React that makes Web Workers (Dedicated and Shared) as simple as calling a regular method. (Development Utilities / Performance)
README
# ngx-worker-bridge
A lightweight, zero-boilerplate reactive bridge for **Angular** and **React** that makes Web Workers (Dedicated and Shared) as simple as calling a regular method.
[](https://www.npmjs.com/package/ngx-worker-bridge)
[](./LICENSE)
## Why?
Web Workers have a verbose API (`postMessage`, `onmessage`, manual serialization). This library removes all of that. Just decorate a method with `@RunInWorker` — the rest is handled for you.
## Installation
**Angular** (RxJS is already included in Angular projects):
```bash
npm i ngx-worker-bridge
```
**React** (RxJS must be installed separately since React doesn't include it):
```bash
npm i ngx-worker-bridge rxjs
```
> **React only**: Add these to your `tsconfig.app.json` for decorator support:
> ```json
> { "experimentalDecorators": true, "useDefineForClassFields": false }
> ```
---
## Core Concept
| Thread | Your Code |
|---|---|
| **Worker thread** | A plain TypeScript class (`Module`) with your business logic |
| **Main thread** | A service/component that calls methods as if they're local |
The library handles the `postMessage` bridge between them invisibly.
---
## Angular Quick Start
### 1. Worker file (`app.worker.ts`)
```typescript
import { startWorker } from 'ngx-worker-bridge';
import { DataModule } from './data.module';
startWorker([DataModule]);
```
### 2. Bootstrap (`main.ts`)
```typescript
import { provideWorkerBridge } from 'ngx-worker-bridge/angular';
bootstrapApplication(AppComponent, {
providers: [
provideWorkerBridge({
instance: new Worker(new URL('./app.worker', import.meta.url), { type: 'module' }),
modules: [DataModule]
}),
// Optional: add a SharedWorker for multi-tab state
provideWorkerBridge({
name: 'shared',
instance: new SharedWorker(new URL('./app.worker', import.meta.url), { name: 'shared', type: 'module' }),
modules: [DataModule]
})
]
});
```
### 3. Service
```typescript
import { Injectable } from '@angular/core';
import { RunInWorker, workerStore } from 'ngx-worker-bridge';
@Injectable({ providedIn: 'root' })
export class DataService {
// Reactive state — updates automatically when the worker calls setState()
count$ = workerStore('counter', 'shared');
// This runs in the worker — UI thread is never blocked
@RunInWorker({ bridge: 'shared', namespace: 'data' })
processData(payload: any): Promise { return null as any; }
}
```
---
## React Quick Start
### 1. Worker file (`app.worker.ts`)
```typescript
import { startWorker } from 'ngx-worker-bridge';
import { DataModule } from './data.module';
startWorker([DataModule]);
```
### 2. Bootstrap (`App.tsx` or `main.tsx`)
```typescript
import { bootstrapWorker } from 'ngx-worker-bridge';
import { DataModule } from './data.module';
bootstrapWorker({
worker: new SharedWorker(new URL('./app.worker', import.meta.url), { name: 'shared', type: 'module' }),
name: 'shared',
modules: [DataModule]
});
```
### 3. Component
```typescript
import { useWorkerStore } from 'ngx-worker-bridge/react';
import { RunInWorker } from 'ngx-worker-bridge';
class DataService {
@RunInWorker({ bridge: 'shared', namespace: 'data' })
processData(payload: any): Promise { return null as any; }
}
const service = new DataService();
function App() {
const count = useWorkerStore('counter', 'shared');
return service.processData({})}>Count: {count};
}
```
---
## Worker Module
Your background logic lives in a plain TypeScript class. Use `setState` to push reactive updates to all connected tabs.
```typescript
import { setState } from 'ngx-worker-bridge';
export class DataModule {
private count = 0;
// Namespace matches the class name: "DataModule" → "data"
increment() {
this.count++;
setState('counter', this.count); // broadcasts to all tabs
return this.count;
}
}
```
---
## Best Use Cases
- **Multi-Tab State Sync** — Use a `SharedWorker` to keep counters, notifications, or live data in sync across all open tabs without any server involvement.
- **CPU Offloading** — Move heavy computation (large JSON processing, sorting, math) off the UI thread so your app stays interactive.
- **Shared Connections** — Maintain a single WebSocket or polling interval in a SharedWorker and broadcast to all connected tabs.
---
## Debugging
All `console.log`, `console.warn`, and `console.error` calls made inside your worker modules are automatically forwarded to the main browser console, prefixed with `[Worker]`. No setup required.
---
## Demo
[Demo Repository (Angular)](https://github.com/yashwantyashu/worker-demo-app)
[Demo Repository (React)] (https://github.com/yashwantyashu/worker-react-demo)