Skip to content

Commit b54d7e8

Browse files
committed
add docs
1 parent 1ffcce1 commit b54d7e8

File tree

1 file changed

+103
-2
lines changed

1 file changed

+103
-2
lines changed

README.md

Lines changed: 103 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
# rollup-plugin-web-worker-loader
22

3-
Rollup plugin to handle Web Workers.
3+
Rollup plugin to handle Web Workers, Service Workers, Shared Workers,
4+
Audio Worklets, and Paint Worklets. Support for Animation Worklets and
5+
Layout Worklets is in consideration for when implementations are available
6+
in browsers.
7+
8+
Web Workers are available in Node JS as well as in browsers. All the other
9+
worklets and workers are available in browsers only, and will throw a runtime
10+
error if used in Node JS.
411

512
Can inline the worker code or emit a script file using code-splitting.
613
Handles Worker dependencies and can emit source maps.
@@ -27,6 +34,8 @@ export default {
2734
};
2835
```
2936

37+
#### Web Worker Example
38+
3039
Bundle the worker code using the RegEx pattern specified in the plugin's configuration.
3140
By default you can add the prefix `web-worker:` to your imports:
3241

@@ -38,6 +47,81 @@ const dataWorker = new DataWorker();
3847
dataWorker.postMessage('Hello World!');
3948
```
4049

50+
#### Shared Worker Example
51+
52+
```javascript
53+
import SharedWorker from 'shared-worker:./SharedWorker';
54+
55+
const sharedWorker = new SharedWorker();
56+
sharedWorker.port.postMessage('Hello World!');
57+
```
58+
59+
#### Service Worker Example
60+
61+
```javascript
62+
import ServiceWorker from 'service-worker:./ServiceWorker';
63+
64+
ServiceWorker.then(function(registration) {
65+
console.log('Registration successful, scope is: ', registration.scope);
66+
})
67+
.catch(function(error) {
68+
console.log('Service worker registration failed, error: ', error);
69+
}
70+
```
71+
72+
#### Audio Worklet Example
73+
74+
Audio Worklets require an audio context at instantiation. When you use
75+
rollup-plugin-web-worker-loader in a browser environment, your import will
76+
return a constructor to which you can pass an audio context.
77+
##### Worklet Processor
78+
79+
```javascript
80+
class MyAudioWorkletProcessor extends AudioWorkletProcessor {
81+
}
82+
83+
registerProcessor("my-audio-worklet", MyAudioWorkletProcessor);
84+
```
85+
86+
##### Worklet Consumer
87+
88+
```javascript
89+
import registerMyAudioWorklet from 'audio-worklet:./MyAudioWorkletFactory';
90+
91+
const audioContext = new AudioContext();
92+
registerMyAudioWorklet(audioContext);
93+
94+
class MyAudioWorklet extends AudioWorkletNode {
95+
constructor(audioContext) {
96+
super(audioContext, "my-audio-worklet"));
97+
}
98+
}
99+
```
100+
101+
#### Paint Worklet Example
102+
103+
##### Worklet Processor
104+
105+
```javascript
106+
class MyPaintWorklet {
107+
...
108+
}
109+
110+
registerPaint('my-paint-worklet', MyPaintWorklet);
111+
```
112+
113+
##### Worklet Consumer
114+
115+
```javascript
116+
import registerMyPaintWorklet from 'paint-worklet:./MyPaintWorkletFactory';
117+
registerMyPaintWorklet();
118+
```
119+
120+
```css
121+
html {
122+
background: paint(my-paint-worklet);
123+
}
124+
41125
### Configuration
42126
The plugin responds to the following configuration options:
43127
```javascript
@@ -49,9 +133,26 @@ webWorkerLoader({
49133
// 'auto' detectes the target platform and selects between 'browser` and 'node'.
50134
// Default: 'auto'
51135

52-
pattern?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
136+
web-worker?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
53137
// web workers. If capturing groups are present, the plugin uses the contents of the
54138
// last capturing group as the path to the worker script. Default: /web-worker:(.+)/
139+
140+
shared-worker?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
141+
// shared workers. If capturing groups are present, the plugin uses the contents of the
142+
// last capturing group as the path to the worker script. Default: /shared-worker:(.+)/
143+
144+
service-worker?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
145+
// service workers. If capturing groups are present, the plugin uses the contents of the
146+
// last capturing group as the path to the worker script. Default: /service-worker:(.+)/
147+
148+
audio-worklet?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
149+
// audio worklets. If capturing groups are present, the plugin uses the contents of the
150+
// last capturing group as the path to the worker script. Default: /audio-worklet:(.+)/
151+
152+
paint-worklet?: RegEx, // A RegEx instance describing the pattern that matches the files to import as
153+
// paint worklets. If capturing groups are present, the plugin uses the contents of the
154+
// last capturing group as the path to the worker script. Default: /paint-worklet:(.+)/
155+
55156

56157
extensions?: string[], // An array of strings to use as extensions when resolving worker files.
57158
// Default: ['.js']

0 commit comments

Comments
 (0)