@maa/monkey-workers
v0.1.1
Published
Use [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) in your project using `import`.
Downloads
8
Readme
Web Workers
Use Web Workers in your project using import
.
Installation
npm install --save @maa/monkey-workers worker-loader
or
yarn add @maa/monkey-workers worker-loader
Usage
Create a next.config.js
in your project
// next.config.js
const withWorkers = require('@maa/monkey-workers');
module.exports = withWorkers({
/* config options here */
});
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withWorkers = require('@maa/monkey-workers');
module.exports = withWorkers({
webpack(config, options) {
return config;
}
});
You can also pass overriding options to worker-loader using workerLoaderOptions
// next.config.js
const withWorkers = require('@maa/monkey-workers');
module.exports = withWorkers({
workerLoaderOptions: { inline: true }
});
Web Worker files are identified by the .worker.js
or .worker.ts
extension
Because Workers are transpiled with worker-loader
you can import
dependencies just like other project files. See the worker-loader documentation for examples
// example.worker.js
self.addEventListener('message', event =>
console.log('Worker received:', event.data)
);
self.postMessage('from Worker');
The Worker can then be imported like a normal module and instantiated
// pages/example.js
import React from 'react';
import ExampleWorker from '../example.worker';
export default class extends React.Component {
state = { latestMessage: null };
componentDidMount() {
// Instantiate the Worker
this.worker = new ExampleWorker();
this.worker.postMessage('from Host');
this.worker.addEventListener('message', this.onWorkerMessage);
}
componentWillUnmount() {
// Close the Worker thread
this.worker.terminate();
}
onWorkerMessage = event => this.setState({ latestMessage: event.data });
render() {
return <h1>Message from Worker: {this.state.latestMessage}</h1>;
}
}