Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yjl9903/vite-plugin-sharedworker
Make SharedWorker works like Remote Procedure Call easily
https://github.com/yjl9903/vite-plugin-sharedworker
sharedworker vite vite-plugin webworker
Last synced: 2 months ago
JSON representation
Make SharedWorker works like Remote Procedure Call easily
- Host: GitHub
- URL: https://github.com/yjl9903/vite-plugin-sharedworker
- Owner: yjl9903
- License: mit
- Created: 2023-01-28T06:26:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T20:25:38.000Z (9 months ago)
- Last Synced: 2024-04-14T05:09:34.574Z (9 months ago)
- Topics: sharedworker, vite, vite-plugin, webworker
- Language: TypeScript
- Homepage:
- Size: 1.23 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-sharedworker
[](https://github.com/yjl9903/vite-plugin-sharedworker/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/vite-plugin-sharedworker)
Make [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) works like Remote Procedure Call easily.
## Installation
```bash
npm i -D vite-plugin-sharedworker
```
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import SharedWorker from 'vite-plugin-sharedworker'
export default defineConfig({
plugins: [
SharedWorker()
]
})
```
## Usage
All the scripts which endswith `.sharedworker.ts` or `.sharedworker.js` will be transformed as RPC shared worker.
You can just write functions and export them like what you usually do.
```ts
// src/math.sharedworker.ts
export async function add(a: number, b: number) {
return a + b
}
export async function sub(a: number, b: number) {
return a - b
}
```
> **Note**
>
> To make TypeScript return type work fine, you must export **async** functions, even if they are sync.
Then you can just import your shared worker script like what you usually do.
This plugin will transform your method call to send message to the shared worker, and receive return value from the shared worker.
```ts
// src/main.ts
import { add, sub } from './math.sharedworker'
const a = await add(1, 2)
const b = await sub(2, 1)
```
You can see a full example [here](./playground/).
### Communication
Add `vite-plugin-sharedworker/runtime` to your tsconfig types.
Notice that you should create another tsconfig for your worker scirpts different from your client codes for the reason that they have different runtime.
```json
{
"compilerOptions": {
"types": [
"vite-plugin-sharedworker/runtime"
]
}
}
```
Or you can add this command to the beginning of your worker scripts.
```ts
///
```
#### Worker to Client
The transform hook automatically add the `worker` global variable to your script. Add the following type declaration to make type inference work.
```ts
declare const worker: SharedWorkerServer
```
Then, you can listen the incoming messages.
```ts
worker.addMessageListener((payload) => {
console.log(payload)
// ...
})
```
Or you can broadcast messages.
```ts
worker.broadcast('Hello, this is worker')
```
Or you can send messages to a specific port.
```ts
const ports = worker.ports()
if (ports.length > 0) {
worker.dispatch(ports[0], 'You are the first port')
}
```
#### Client to Worker
The transform hook automatically add the `client` global variable to your script. Add the following type declaration to make type inference work.
```ts
declare const client: SharedWorkerClient;
export const dispatch = client.dispatch;
export const addMessageListener = client.addMessageListener;
```
Then, in your client code, you can listen the incoming messages from the worker.
```ts
import { addMessageListener } from ''
addMessageListener((payload) => {
console.log(payload)
// ...
})
```
Or send messages to the worker.
```ts
import { dispatch } from ''
dispatch('Hello, this is client')
```
### Limitation
**This plugin has some side effects to your scripts**. If you encounter any problems with its transform, you can debug it with [vite-plugin-inspect](https://www.npmjs.com/package/vite-plugin-inspect) and create an issue here.
The transform hook adds the following global variables at the beginning of the input worker script, so that you can not re-define these variables at the global scope.
+ `worker`: used in the **worker** environment
+ `client`: used in the **client** environment
+ `dispatch`: used in the **client** environment
+ `addMessageListener`: used in the **client** environment
In the **worker** environment, you can only use the global variable `worker`. The reason for adding client-related variables is to make the module export type inference work. So you can just import the API `client`, `dispatch` and `addMessageListener` in your client code to do complex communications.
## License
MIT License © 2023 [XLor](https://github.com/yjl9903)