{"id":16392990,"url":"https://github.com/yjl9903/vite-plugin-sharedworker","last_synced_at":"2025-03-23T04:31:47.771Z","repository":{"id":81148094,"uuid":"594314030","full_name":"yjl9903/vite-plugin-sharedworker","owner":"yjl9903","description":"Make SharedWorker works like Remote Procedure Call easily","archived":false,"fork":false,"pushed_at":"2024-04-13T20:25:38.000Z","size":1290,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T05:09:34.574Z","etag":null,"topics":["sharedworker","vite","vite-plugin","webworker"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yjl9903.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-01-28T06:26:41.000Z","updated_at":"2024-04-15T05:50:31.131Z","dependencies_parsed_at":"2023-09-26T13:18:57.876Z","dependency_job_id":"24092518-e5a2-4d19-b2ef-c230683dab70","html_url":"https://github.com/yjl9903/vite-plugin-sharedworker","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":"0.47619047619047616","last_synced_commit":"569223191a1a2e75df2f0d029193b5d10e7486b6"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-sharedworker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-sharedworker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-sharedworker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-sharedworker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yjl9903","download_url":"https://codeload.github.com/yjl9903/vite-plugin-sharedworker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244973700,"owners_count":20541024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["sharedworker","vite","vite-plugin","webworker"],"created_at":"2024-10-11T04:52:02.784Z","updated_at":"2025-03-23T04:31:47.358Z","avatar_url":"https://github.com/yjl9903.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vite-plugin-sharedworker\n\n[![CI](https://github.com/yjl9903/vite-plugin-sharedworker/actions/workflows/ci.yml/badge.svg)](https://github.com/yjl9903/vite-plugin-sharedworker/actions/workflows/ci.yml)\n[![version](https://img.shields.io/npm/v/vite-plugin-sharedworker?label=vite-plugin-sharedworker)](https://www.npmjs.com/package/vite-plugin-sharedworker)\n\nMake [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) works like Remote Procedure Call easily.\n\n## Installation\n\n```bash\nnpm i -D vite-plugin-sharedworker\n```\n\n```ts\n// vite.config.ts\n\nimport { defineConfig } from 'vite'\nimport SharedWorker from 'vite-plugin-sharedworker'\n\nexport default defineConfig({\n  plugins: [\n    SharedWorker()\n  ]\n})\n```\n\n## Usage\n\nAll the scripts which endswith `.sharedworker.ts` or `.sharedworker.js` will be transformed as RPC shared worker.\n\nYou can just write functions and export them like what you usually do.\n\n```ts\n// src/math.sharedworker.ts\n\nexport async function add(a: number, b: number) {\n  return a + b\n}\n\nexport async function sub(a: number, b: number) {\n  return a - b\n}\n```\n\n\u003e **Note**\n\u003e\n\u003e To make TypeScript return type work fine, you must export **async** functions, even if they are sync.\n\nThen you can just import your shared worker script like what you usually do.\n\nThis plugin will transform your method call to send message to the shared worker, and receive return value from the shared worker.\n\n```ts\n// src/main.ts\n\nimport { add, sub } from './math.sharedworker'\n\nconst a = await add(1, 2)\nconst b = await sub(2, 1)\n```\n\nYou can see a full example [here](./playground/).\n\n### Communication\n\nAdd `vite-plugin-sharedworker/runtime` to your tsconfig types.\n\nNotice that you should create another tsconfig for your worker scirpts different from your client codes for the reason that they have different runtime.\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"vite-plugin-sharedworker/runtime\"\n    ]\n  }\n}\n```\n\nOr you can add this command to the beginning of your worker scripts.\n\n```ts\n/// \u003creference types=\"vite-plugin-sharedworker/runtime\"\u003e\n```\n\n#### Worker to Client\n\nThe transform hook automatically add the `worker` global variable to your script. Add the following type declaration to make type inference work.\n\n```ts\ndeclare const worker: SharedWorkerServer\n```\n\nThen, you can listen the incoming messages.\n\n```ts\nworker.addMessageListener((payload) =\u003e {\n  console.log(payload)\n  // ...\n})\n```\n\nOr you can broadcast messages.\n\n```ts\nworker.broadcast('Hello, this is worker')\n```\n\nOr you can send messages to a specific port.\n\n```ts\nconst ports = worker.ports()\nif (ports.length \u003e 0) {\n  worker.dispatch(ports[0], 'You are the first port')\n}\n```\n\n#### Client to Worker\n\nThe transform hook automatically add the `client` global variable to your script. Add the following type declaration to make type inference work.\n\n```ts\ndeclare const client: SharedWorkerClient;\n\nexport const dispatch = client.dispatch;\n\nexport const addMessageListener = client.addMessageListener;\n```\n\nThen, in your client code, you can listen the incoming messages from the worker.\n\n```ts\nimport { addMessageListener } from '\u003cworker path\u003e'\n\naddMessageListener((payload) =\u003e {\n  console.log(payload)\n  // ...\n})\n```\n\nOr send messages to the worker.\n\n```ts\nimport { dispatch } from '\u003cworker path\u003e'\n\ndispatch('Hello, this is client')\n```\n\n### Limitation\n\n**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.\n\nThe 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.\n\n+ `worker`: used in the **worker** environment\n+ `client`: used in the **client** environment\n+ `dispatch`: used in the **client** environment\n+ `addMessageListener`: used in the **client** environment\n\nIn 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.\n\n## License\n\nMIT License © 2023 [XLor](https://github.com/yjl9903)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjl9903%2Fvite-plugin-sharedworker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyjl9903%2Fvite-plugin-sharedworker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjl9903%2Fvite-plugin-sharedworker/lists"}