vite-plugin-webworker-service
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Vite plugin webworker service

Vite plugin webworker service is a lightweight, powerful, and easy-to-use tool designed to make working with WebWorkers in your projects as seamless as possible.

The plugin generates a webworker file based on the used files ending in .service, as well as a bridge between the main thread and the webworker thread at build time, thereby allowing you to enjoy the reliability of typescript typechecks and various code editor tools, which cannot be achieved by directly using webworkers with postMessage and onmessage


⚡ Features

  • Easy Setup: Integrate with just a few lines of code.
  • Intuitive API: No need to dive deep into WebWorkers docs anymore.
  • Compatibility: Works with major browsers and frameworks.
  • Typed: No need to write adapter as well as all typescript interfaces to call procedure from webworker.
  • Go definition: You can jump to the called function (which is not achieved with direct use of webworker).

☄️ Quick Start

  1. Install via npm:

    npm install -D vite-plugin-webworker-service
  2. Integrate in your project:

    //vite.config.ts
    import WebWorkerPlugin from 'vite-plugin-webworker-service';
    
    export default defineConfig({
      plugins: [WebWorkerPlugin()]
    })
  3. vite or vite build

  4. Start using it! Check out Usage for more detailed examples.


⚓ Usage

Basic usage:

*.ts/*.js

import { add } from "some.service.ts"
import { x2state } from "any.service.ts"

const res = await add(1,2)
console.log(res) // 3
await x2state() // state.value === 6

[some].service.ts

import { state } from 'state.ts'

// this function calculate in webworker
export async function add(a: number, b: number) {
    const res = a + b
    state.value = res
    return res
}

[any].service.ts

import { state } from 'state.ts'

// this function calculate in webworker
export async function x2state() {
    state.value = state.value * 2
}

state.ts

// this is stored in the webworker context because it is imported into .service 
export const state = {
    value: 0
}

[any], [some] - any valid names

one .service file can have many exports

exports in .service file must be functions(async or classic), however, calls to these functions on the main thread always return a Promise.


🎓 License

This project is licensed under the MIT License


CHANGELOG

1.1.0

  • Added settings, and field ext for change .service to any file ending

1.0.4

  • Fixed the way to replace imports, from regular expression to AST parse

Package Sidebar

Install

npm i vite-plugin-webworker-service

Weekly Downloads

47

Version

1.1.0

License

MIT

Unpacked Size

12.6 kB

Total Files

8

Last publish

Collaborators

  • rastop123