{"id":48708387,"url":"https://github.com/yashwantyashu/worker-bridge","last_synced_at":"2026-04-13T11:01:14.592Z","repository":{"id":347613272,"uuid":"1194623211","full_name":"yashwantyashu/worker-bridge","owner":"yashwantyashu","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-28T18:27:33.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-28T18:29:05.296Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yashwantyashu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-28T15:53:12.000Z","updated_at":"2026-03-28T18:27:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/yashwantyashu/worker-bridge","commit_stats":null,"previous_names":["yashwantyashu/worker-bridge"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/yashwantyashu/worker-bridge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashwantyashu%2Fworker-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashwantyashu%2Fworker-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashwantyashu%2Fworker-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashwantyashu%2Fworker-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yashwantyashu","download_url":"https://codeload.github.com/yashwantyashu/worker-bridge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashwantyashu%2Fworker-bridge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31749763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-11T13:00:21.201Z","updated_at":"2026-04-13T11:01:14.586Z","avatar_url":"https://github.com/yashwantyashu.png","language":"TypeScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Performance"],"readme":"# ngx-worker-bridge\n\nA lightweight, zero-boilerplate reactive bridge for **Angular** and **React** that makes Web Workers (Dedicated and Shared) as simple as calling a regular method.\n\n[![npm version](https://img.shields.io/npm/v/ngx-worker-bridge.svg)](https://www.npmjs.com/package/ngx-worker-bridge)\n[![license](https://img.shields.io/npm/l/ngx-worker-bridge.svg)](./LICENSE)\n\n## Why?\n\nWeb 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.\n\n## Installation\n\n**Angular** (RxJS is already included in Angular projects):\n```bash\nnpm i ngx-worker-bridge\n```\n\n**React** (RxJS must be installed separately since React doesn't include it):\n```bash\nnpm i ngx-worker-bridge rxjs\n```\n\n\u003e **React only**: Add these to your `tsconfig.app.json` for decorator support:\n\u003e ```json\n\u003e { \"experimentalDecorators\": true, \"useDefineForClassFields\": false }\n\u003e ```\n\n---\n\n## Core Concept\n\n| Thread | Your Code |\n|---|---|\n| **Worker thread** | A plain TypeScript class (`Module`) with your business logic |\n| **Main thread** | A service/component that calls methods as if they're local |\n\nThe library handles the `postMessage` bridge between them invisibly.\n\n---\n\n## Angular Quick Start\n\n### 1. Worker file (`app.worker.ts`)\n```typescript\nimport { startWorker } from 'ngx-worker-bridge';\nimport { DataModule } from './data.module';\n\nstartWorker([DataModule]);\n```\n\n### 2. Bootstrap (`main.ts`)\n```typescript\nimport { provideWorkerBridge } from 'ngx-worker-bridge/angular';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideWorkerBridge({\n      instance: new Worker(new URL('./app.worker', import.meta.url), { type: 'module' }),\n      modules: [DataModule]\n    }),\n    // Optional: add a SharedWorker for multi-tab state\n    provideWorkerBridge({\n      name: 'shared',\n      instance: new SharedWorker(new URL('./app.worker', import.meta.url), { name: 'shared', type: 'module' }),\n      modules: [DataModule]\n    })\n  ]\n});\n```\n\n### 3. Service\n```typescript\nimport { Injectable } from '@angular/core';\nimport { RunInWorker, workerStore } from 'ngx-worker-bridge';\n\n@Injectable({ providedIn: 'root' })\nexport class DataService {\n  // Reactive state — updates automatically when the worker calls setState()\n  count$ = workerStore\u003cnumber\u003e('counter', 'shared');\n\n  // This runs in the worker — UI thread is never blocked\n  @RunInWorker({ bridge: 'shared', namespace: 'data' })\n  processData(payload: any): Promise\u003cany\u003e { return null as any; }\n}\n```\n\n---\n\n## React Quick Start\n\n### 1. Worker file (`app.worker.ts`)\n```typescript\nimport { startWorker } from 'ngx-worker-bridge';\nimport { DataModule } from './data.module';\n\nstartWorker([DataModule]);\n```\n\n### 2. Bootstrap (`App.tsx` or `main.tsx`)\n```typescript\nimport { bootstrapWorker } from 'ngx-worker-bridge';\nimport { DataModule } from './data.module';\n\nbootstrapWorker({\n  worker: new SharedWorker(new URL('./app.worker', import.meta.url), { name: 'shared', type: 'module' }),\n  name: 'shared',\n  modules: [DataModule]\n});\n```\n\n### 3. Component\n```typescript\nimport { useWorkerStore } from 'ngx-worker-bridge/react';\nimport { RunInWorker } from 'ngx-worker-bridge';\n\nclass DataService {\n  @RunInWorker({ bridge: 'shared', namespace: 'data' })\n  processData(payload: any): Promise\u003cany\u003e { return null as any; }\n}\n\nconst service = new DataService();\n\nfunction App() {\n  const count = useWorkerStore\u003cnumber\u003e('counter', 'shared');\n  return \u003cbutton onClick={() =\u003e service.processData({})}\u003eCount: {count}\u003c/button\u003e;\n}\n```\n\n---\n\n## Worker Module\n\nYour background logic lives in a plain TypeScript class. Use `setState` to push reactive updates to all connected tabs.\n\n```typescript\nimport { setState } from 'ngx-worker-bridge';\n\nexport class DataModule {\n  private count = 0;\n\n  // Namespace matches the class name: \"DataModule\" → \"data\"\n  increment() {\n    this.count++;\n    setState('counter', this.count); // broadcasts to all tabs\n    return this.count;\n  }\n}\n```\n\n---\n\n## Best Use Cases\n\n- **Multi-Tab State Sync** — Use a `SharedWorker` to keep counters, notifications, or live data in sync across all open tabs without any server involvement.\n- **CPU Offloading** — Move heavy computation (large JSON processing, sorting, math) off the UI thread so your app stays interactive.\n- **Shared Connections** — Maintain a single WebSocket or polling interval in a SharedWorker and broadcast to all connected tabs.\n\n---\n\n## Debugging\n\nAll `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.\n\n---\n\n## Demo\n\n[Demo Repository (Angular)](https://github.com/yashwantyashu/worker-demo-app)\n[Demo Repository (React)] (https://github.com/yashwantyashu/worker-react-demo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashwantyashu%2Fworker-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyashwantyashu%2Fworker-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashwantyashu%2Fworker-bridge/lists"}