https://github.com/tynik/web-workers
Web Workers with React, Brain.js, and other things
https://github.com/tynik/web-workers
ai brain brainjs javascript react stream task typescript web web-worker-react web-workers webpack webworkers worker
Last synced: 9 months ago
JSON representation
Web Workers with React, Brain.js, and other things
- Host: GitHub
- URL: https://github.com/tynik/web-workers
- Owner: Tynik
- Created: 2021-11-11T17:25:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-11T19:33:59.000Z (almost 4 years ago)
- Last Synced: 2025-06-03T11:15:42.689Z (9 months ago)
- Topics: ai, brain, brainjs, javascript, react, stream, task, typescript, web, web-worker-react, web-workers, webpack, webworkers, worker
- Language: TypeScript
- Homepage:
- Size: 913 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Workers
[](https://www.npmjs.com/package/@tynik/web-workers)
[](https://github.com/Tynik/web-workers/actions/workflows/publish.yml)
[](https://www.npmjs.com/package/@tynik/web-workers)
[](https://www.npmjs.com/package/@tynik/web-workers)
[](https://www.npmjs.com/package/@tynik/web-workers)
[](https://www.npmjs.com/package/@tynik/web-workers)
*My inspiration how we can use React, Web Workers, and AI frontend technologies*
## Features
1. Smooth UI when computing something heavy.
2. Predefined React hooks to create a background task.
3. Event-based replies from a task function.
4. Possibility to use promise-based and generator task functions.
## Limitations inside task function
1. You cannot use the outer scope because task function is isolated and is run in another thread, but you can pass arguments to task function.
2. You cannot use DOM manipulations.
3. You cannot use recursion inside passed function as argument for a task function. All passed functions become anonymous functions (do not have a name) that's why a function cannot call itself. You can declare a recursive function inside task function or import it via dependencies.
## Installation
1. Install npm package
```bash
npm i @tynik/web-workers
```
2. File `worker.worker.js` is required by a worker and is fetched when the worker is initiated. You should copy `worker.worker.js` file from `@tynik/web-workers` package before you will start your own project. If you use Webpack you can install [copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/) package and will add the next configuration to Webpack config file.
```typescript
// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// webpack settings...
plugins: [
new CopyWebpackPlugin({
patterns: [
'node_modules/@tynik/web-workers/dist/worker.worker.js'
]
})
]
}
```
## Examples
All examples source directory [here](examples/src).
Also, you can see deployed examples [here](https://tynik.github.io/web-workers/#/).
**React**
1. [Pure](/examples/src/React/ReactPureExample/ReactPureExample.tsx). Implemented with using base `Task` class.
1. [Base](/examples/src/React/ReactBaseExample/ReactBaseExample.tsx).
1. [Tasks queue](/examples/src/React/ReactTasksQueueExample/ReactTasksQueueExample.tsx). Calling the heavy task with different arguments at the same time.
1. [Promise-based result](/examples/src/React/ReactPromiseResultExample/ReactPromiseResultExample.tsx).
1. [Simple generator](/examples/src/React/ReactSimpleGeneratorExample/ReactSimpleGeneratorExample.tsx).
1. [Infinity generator](/examples/src/React/ReactInfGeneratorExample/ReactInfGeneratorExample.tsx). Task function as infinity generator that automatically stopped after some time.
1. [Files processing](/examples/src/React/ReactFilesProcessingExample/ReactFilesProcessingExample.tsx).
1. [Brain.js XOR](/examples/src/React/ReactBrainJsXORExample/ReactBrainJsXORExample.tsx).
## Notes
1. High resolution time metrics. Please, see [reduced time precision in Firefox](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#reduced_time_precision).
## API
**Task** class
1. `constructor(func: TaskFunction, { deps?: string[] })` - Initiating a task with creating a new Worker. The task function currently is not run.
1. `run(...args: Params): RunTaskAPI` - Transfer and run a task function inside created Worker. If you call `run` many times simultaneously and the previous task function was not completed then a new call will be pushed to the queue and be run when the previous task is finished.
1. `stop(): void` - Stop the task function executing. Also, the tasks queue will be erased.
**RunTaskAPI**
The `RunTaskAPI` interface it is the result of executing `run()` method.
1. `whenSent: Promise` - Property to subscribe on `sent` event.
1. `whenStarted: Promise` - Property to subscribe on `started` event.
1. `whenCompleted: Promise<{ result: Result } & Meta>` - Property to subscribe on `completed` event.
1. `whenError: Promise<{ result: string } & Meta>` - Property to subscribe on `error` event.
1. `next(...args: Params): Promise<{ result: Result } & Meta>` - Run the next iteration for a task generator function with transferring arguments.
1. `return(value?: any): void` - Stop a task generator function with passing `value` as a result if needed. In common can be used to stop infinity generators.
1. `throw(e?: any): void` - Throw an error inside a task generator function. The argument `e` can accept only cloneable objects. To more know about that you can read [The structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm).