Skip to content

Commit 200dae2

Browse files
authored
v5 refactoring (#140)
* inital v5 * add symbol export, check ../../ * ff * version bump
1 parent ac52f91 commit 200dae2

File tree

11 files changed

+551
-128
lines changed

11 files changed

+551
-128
lines changed

README.md

Lines changed: 78 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
> This plugins requires vite >=2.8 for WebWorkers and vite >= 2.9.6 for shared worker to work properly.
44
5-
Use WebWorkers with comlink.
5+
Use WebWorkers with comlink.
66

77
This plugin removes the need to call `expose`, `wrap` from comlink and also you don't need to create the worker on your own.
88

@@ -14,11 +14,9 @@ Make sure that you change the worker plugin config to a function for example lik
1414
// vite.config.js
1515
export default {
1616
worker: {
17-
plugins: () => ([
18-
comlink()
19-
])
20-
}
21-
}
17+
plugins: () => [comlink()],
18+
},
19+
};
2220
```
2321

2422
see https://github.com/vitejs/vite/pull/14685 for details.
@@ -31,95 +29,119 @@ npm i --save comlink # yarn add comlink
3129
```
3230

3331
### Comlink install
32+
3433
As you don't want to wait for a new release for this plugin when a new version of comlink is released, this plugin has comlink as a peer dependency so you can install the version of comlink that you need.
3534

3635
### Add it to vite.config.js
3736

3837
```ts
3938
// vite.config.js
40-
import { comlink } from 'vite-plugin-comlink'
39+
import { comlink } from "vite-plugin-comlink";
4140

4241
export default {
43-
plugins: [
44-
comlink()
45-
],
42+
plugins: [comlink()],
4643
worker: {
47-
plugins: () => ([
48-
comlink()
49-
])
50-
}
51-
}
44+
plugins: () => [comlink()],
45+
},
46+
};
5247
```
5348

5449
### Plugin order
55-
Put this plugin as one of the first plugins. Only other plugins that create `ComlinkWorker` or `ComlinkSharedWorker` or transform files based on the existence of `ComlinkWorker` or `ComlinkSharedWorker` should come before this plugin!
5650

57-
## Usage
51+
Put this plugin as one of the first plugins. Only other plugins that create `ComlinkWorker` or `ComlinkSharedWorker` or transform files based on the existence of `ComlinkWorker` or `ComlinkSharedWorker` should come before this plugin!
52+
53+
## Usage
54+
5855
```ts
5956
// worker.js
60-
export const add = (a: number, b: number) => a + b
57+
export const add = (a: number, b: number) => a + b;
6158

6259
// main.ts
6360

6461
// Create Worker
65-
const instance = new ComlinkWorker(new URL('./worker.js', import.meta.url), {/* normal Worker options*/})
66-
const result = await instance.add(2, 3)
67-
68-
result === 5
62+
const instance = new ComlinkWorker(new URL("./worker.js", import.meta.url), {
63+
/* normal Worker options*/
64+
});
65+
const result = await instance.add(2, 3);
6966

67+
result === 5;
7068

7169
// Create SharedWorker
72-
const instance = new ComlinkSharedWorker(new URL('./worker.js', import.meta.url), {/* normal Worker options*/})
73-
const result = await instance.add(2, 3)
70+
const instance = new ComlinkSharedWorker(
71+
new URL("./worker.js", import.meta.url),
72+
{
73+
/* normal Worker options*/
74+
}
75+
);
76+
const result = await instance.add(2, 3);
7477

75-
result === 5
78+
result === 5;
7679
```
7780

7881
### With TypeScript
79-
Add
82+
83+
Add
8084

8185
```ts
8286
/// <reference types="vite-plugin-comlink/client" />
8387
```
88+
8489
to your vite-env.d.ts file to make sure typescript will use `vite-plugin-comlink/client`.
8590

8691
```ts
8792
// worker.ts
88-
export const add = (a: number, b: number) => a + b
93+
export const add = (a: number, b: number) => a + b;
8994

9095
// main.ts
9196

9297
// Create Worker
93-
const instance = new ComlinkWorker<typeof import('./worker')>(new URL('./worker', import.meta.url), {/* normal Worker options*/})
94-
const result = await instance.add(2, 3)
95-
96-
result === 5
98+
const instance = new ComlinkWorker<typeof import("./worker")>(
99+
new URL("./worker", import.meta.url),
100+
{
101+
/* normal Worker options*/
102+
}
103+
);
104+
const result = await instance.add(2, 3);
97105

106+
result === 5;
98107

99108
// Create SharedWorker
100-
const instance = new ComlinkSharedWorker<typeof import('./worker')>(new URL('./worker', import.meta.url), {/* normal Worker options*/})
101-
const result = await instance.add(2, 3)
109+
const instance = new ComlinkSharedWorker<typeof import("./worker")>(
110+
new URL("./worker", import.meta.url),
111+
{
112+
/* normal Worker options*/
113+
}
114+
);
115+
const result = await instance.add(2, 3);
102116

103-
result === 5
117+
result === 5;
104118
```
119+
105120
### Get Worker Instance
121+
106122
You can get to the worker instance like this:
107123

108124
```ts
109-
import { endpointSymbol } from 'vite-plugin-comlink/symbol'
125+
import { endpointSymbol } from "vite-plugin-comlink/symbol";
110126

111-
const api = new ComlinkWorker<typeof import('./worker')>(new URL('./worker', import.meta.url), {/* normal Worker options*/})
127+
const api = new ComlinkWorker<typeof import("./worker")>(
128+
new URL("./worker", import.meta.url),
129+
{
130+
/* normal Worker options*/
131+
}
132+
);
112133
const worker = api[endpointSymbol];
113134
```
114135

115136
## Module Worker
137+
116138
Not all Browsers support module Workers (see https://caniuse.com/mdn-api_worker_worker_ecmascript_modules).
117139

118140
This results in some drawbacks for fastest and best support:
119141

120142
For fast development we use module Workers as bundling the complete worker on the fly is not performant.
121143

122-
In default settings we bundle the whole worker at build to a single file. Therefore all browsers that support Workers, work in production.
144+
In default settings we bundle the whole worker at build to a single file. Therefore all browsers that support Workers, work in production.
123145

124146
This is the same behavior as vite and it is NOT CHANGEABLE!
125147

@@ -131,17 +153,28 @@ If you want a worker to be a module worker in production, add `type: 'module'` t
131153
2. In production all browsers are supported
132154

133155
## Breaking changes
156+
134157
### v2 to v3
135-
* remove of customConfigs breaking FF support in development for some projects and removing the abbility for inline worker. This is a limitation of vite so if vite adds support of it this plugin will follow
136-
* remove of typefile. For typescript support please write your own type file or switch to the new syntax.
137-
* remove of ServiceWorker support. This was considered unstable an it was hacky so it got removed. If vite adds support for building ServiceWorker this will be added!
138-
* you have to add comlink to `worker.plugins` array.
158+
159+
- remove of customConfigs breaking FF support in development for some projects and removing the abbility for inline worker. This is a limitation of vite so if vite adds support of it this plugin will follow
160+
- remove of typefile. For typescript support please write your own type file or switch to the new syntax.
161+
- remove of ServiceWorker support. This was considered unstable an it was hacky so it got removed. If vite adds support for building ServiceWorker this will be added!
162+
- you have to add comlink to `worker.plugins` array.
163+
139164
### v3 to v4
140-
* the import syntax will be removed you have to switch to the new syntax!
141-
* Removal of Warnings of leagacy (v2) options
142-
* ESM support
143-
* Better Source Maps
165+
166+
- the import syntax will be removed you have to switch to the new syntax!
167+
- Removal of Warnings of leagacy (v2) options
168+
- ESM support
169+
- Better Source Maps
170+
171+
### v4 to v5
172+
173+
- some undocumented internal options got removed.
174+
- full rewrite of the core transformer to fix a lot of bugs
175+
- should be breaking free but as this is a big rewrite there might be breaking changes
144176

145177
## Resources
178+
146179
https://github.com/GoogleChromeLabs/comlink
147180
https://github.com/surma/rollup-plugin-comlink

0 commit comments

Comments
 (0)