npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue3-worker

v1.2.0

Published

A Vue.js plugin to use webworkers in a simply way.

Downloads

4

Readme

VueWorker

A Vue.js plugin to use webworkers in a simply way.

Why

Create and use Web Workers can be cumbersome sometimes. This plugin aims to facilitate the use of Web Workers within Vue components. It is a wrapper for simple-web-worker.

How to install and use

yarn add vue3-worker

// or

npm install vue3-worker --save

API

SWorker.run(func, [args]?)

Where:

  • func is the function to be runned in worker
  • [args] is an optional array of arguments that will be used by func

This method creates a disposable web worker, runs and returns the result of given function and closes the worker.

E.g.:

import SWorker from 'vue3-worker'
SWorker.run(() => 'SWorker run 1: Function in other thread')
  .then(console.log) // logs 'SWorker run 1: Function in other thread'
  .catch(console.error) // logs any possible error

SWorker.run((arg1, arg2) => `SWorker run 2: ${arg1} ${arg2}`, ['Another', 'function in other thread'])
    .then(console.log) // logs 'SWorker run 2: Another function in other thread'
    .catch(console.error) // logs any possible error

SWorker.create([actions]?)

Where:

  • [actions] is an optional array of objects with two fields, message and func. Essentially, it is a messages-actions map.

If [actions] is omitted or undefined, the created <worker> will have no registered actions, so you'll have to use the method register before you can use the <worker>.

E.g.:

const actions = [
  { message: 'func1', func: () => `Worker 1: Working on func1` },
  { message: 'func2', func: arg => `Worker 2: ${arg}` },
  { message: 'func3', func: arg => `Worker 3: ${arg}` },
  { message: 'func4', func: (arg = 'Working on func4') => `Worker 4: ${arg}` }
]

let worker = SWorker.create(actions)

<worker>.postMessage(message, [args]?)

Where:

  • <worker> is a worker created with SWorker.create([actions])
  • message is one of the messages in [actions]
  • [args] is an optional array of arguments that will be used by the function registered with message

When the function does not expect any arguments or the expected arguments have default values, [args] can be omitted safely.

E.g.:

const actions = [
  { message: 'func1', func: () => `Worker 1: Working on func1` },
  { message: 'func2', func: arg => `Worker 2: ${arg}` },
  { message: 'func3', func: arg => `Worker 3: ${arg}` },
  { message: 'func4', func: (arg = 'Working on func4') => `Worker 4: ${arg}` }
]

let worker = SWorker.create(actions)

worker.postMessage('func1')
  .then(console.log) // logs 'Worker 1: Working on func1'
  .catch(console.error) // logs any possible error

worker.postMessage('func1', ['Ignored', 'arguments'])
  .then(console.log) // logs 'Worker 1: Working on func1'
  .catch(console.error) // logs any possible error

worker.postMessage('func2')
  .then(console.log) // logs 'Worker 2: undefined'
  .catch(console.error) // logs any possible error

worker.postMessage('func3', ['Working on func3'])
  .then(console.log) // logs 'Worker 3: Working on func3'
  .catch(console.error) // logs any possible error

worker.postMessage('func4')
  .then(console.log) // logs 'Worker 4: Working on func4'
  .catch(console.error) // logs any possible error

worker.postMessage('func4', ['Overwrited argument'])
  .then(console.log) // logs 'Worker 4: Overwrited argument'
  .catch(console.error) // logs any possible error

<worker>.postAll([message1,... || {message: message1, args: [args1]},... || [args1],...]?)

Where:

  • <worker> is a worker created with SWorker.create([actions])
  • The argument is an optional array which accepts one of the following:
    • message1,... - strings containing one or more of the messages in [actions]
    • {message: message1, args: [args1]},... - objects containing two fields, message (a message from actions) and args (the arguments to be used by the correspondent function)
    • [args1],... - arrays of arguments to be used by the registered actions.

If [message1,...] is undefined or no argument is given, <worker> will run all registered actions without arguments.

E.g.:

const actions = [
  { message: 'func1', func: () => `Worker 1: Working on func1` },
  { message: 'func2', func: arg => `Worker 2: ${arg}` },
  { message: 'func3', func: arg => `Worker 3: ${arg}` },
  { message: 'func4', func: (arg = 'Working on func4') => `Worker 4: ${arg}` }
]

let worker = SWorker.create(actions)

worker.postAll()
  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: undefined', 'Worker 3: undefined', 'Worker 4: Working on func4']
  .catch(console.error) // logs any possible error

worker.postAll(['func1', 'func3'])
  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 3: undefined']
  .catch(console.error) // logs any possible error

worker.postAll([{ message: 'func1', args: [] }, { message: 'func3', args: ['Working on func3'] })
  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 3: Working on func3']
  .catch(console.error) // logs any possible error

worker.postAll([[], ['Working on func2'], ['Working on func3'], []])
  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: Working on func2', 'Worker 3: Working on func3', 'Worker 4: Working on func4']
  .catch(console.error) // logs any possible error

worker.postAll([[], ['func2'], ['func3'], ['Overwriting default value of arg on func4']])
  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: func2', 'Worker 3: func3', 'Worker 4: Overwriting default value of arg on func4']
  .catch(console.error) // logs any possible error

<worker>.register(action || [actions])

Where:

  • <worker> is a worker created with SWorker.create([actions])
  • action is an object with two fields, message and func
  • [actions] is an array of objects, and each object is an action, as defined above

You can use action or [actions], but not both at the same time.

E.g.:

const initialActions = [
  { message: 'func1', func: () => 'Working on func1' }
]

let worker = SWorker.create(initialActions)

worker.postAll()
  .then(console.log) // logs ['Working on func1']
  .catch(console.error) // logs any possible error

// registering just one action
worker.register({ message: 'func2', func: () => 'Working on func2' })

worker.postAll()
  .then(console.log) // logs ['Working on func1', 'Working on func2']
  .catch(console.error) // logs any possible error

// registering multiple actions
worker.register([
  { message: 'func3', func: () => 'Working on func3' },
  { message: 'func4', func: () => 'Working on func4' }
])

worker.postAll()
  .then(console.log) // logs ['Working on func1', 'Working on func2', 'Working on func3', 'Working on func4']
  .catch(console.error) // logs any possible error

<worker>.unregister(message || [messages])

Where:

  • <worker> is a worker created with SWorker.create([actions])
  • message is one of the messages in [actions]
  • [messages] is an array containing one or more messages, and each message is a message, as defined above

You can use message or [messages], but not both at the same time.

E.g.:

const initialActions = [
  { message: 'func1', func: () => 'Working on func1'},
  { message: 'func2', func: () => 'Working on func2'},
  { message: 'func3', func: () => 'Working on func3'},
  { message: 'func4', func: () => 'Working on func4'}
]

let worker = SWorker.create(initialActions)

worker.postAll()
  .then(console.log) // logs ['Working on func1', 'Working on func2', 'Working on func3', 'Working on func4']
  .catch(console.error) // logs any possible error

// unregistering just one action
worker.unregister('func2')

worker.postAll()
  .then(console.log) // logs ['Working on func1', 'Working on func3', 'Working on func4']
  .catch(console.error) // logs any possible error

// unregistering multiple actions
worker.unregister(['func3', 'func1'])

worker.postAll()
  .then(console.log) // logs ['Working on func4']
  .catch(console.error) // logs any possible error

Closing workers?

You may be thinking: "How do I terminate those reusable workers if there's no close() or terminate() methods?"

Well, when you create a reusable worker, you don't receive a real Web Worker.

Instead, you get an object which holds the given messages-actions map, and when you call postMessage() or postAll() it will, under the hood, call run() with the correspondent functions.

So, to "terminate" a "worker" when it is not needed anymore, you can just do:

let worker = SWorker.create(actions)

// use the worker

worker = null