extended-worker

Extended worker library

A wrapper for a web worker

Basic usage

Use makeWorker function inside a worker file to attach the library interface to methods.

// /someDir/calculator.worker.js

import { makeWorker } from 'extended-worker/makeWorker'

function multiply(a, b) {
    return a*b
}

function divide(a, b) {
    return a/b
}

makeWorker({ multiply, divide })

Use useWorker function in the main thread to get access to the worker methods from the main thread.

// /someDir/calculator.js

import { useWorker } from 'extended-worker/useWorker'

async function calculate() {
    const { 
        multiply, 
        divide, 
        destroyContext 
    } = await useWorker('/someDir/calculator.worker.js')
    
    const a = await divide(999, 333)
    const b = await multiply(333, 3)
    
    await destroyContext()
    
    return [a, b]
}

So, you only need makeWorker and useWorker to start working with workers.

How it works

On makeWorker call, the function just wraps passed methods to provide the necessary interface for useWorker.

On useWorker call, the function does few things:

• It checks is a worker already spawned:
  • if no, then spawns and creates a unique context for the spawned,
  • if yes, then creates a unique context for the spawned;
• Returns the worker methods and additional methods (e.g. destroyContext).

For the same worker useWorker call will create a new context.

It is important to call destroyContext when functions (worker methods) returned by useWorker won't be used anymore, so the context could be destroyed to free memory and if no contexts left, then even destroy a worker itself.

React, Vue etc

It's not quite simple to use useWorker in a component, because of keeping in mind syncing a component lifecycle with a worker lifecycle and maintaining the order (a worker is ready -> a method call).

So, forget about using useWorker function and welcome AutoWorker

AutoWorker

AutoWorker just wraps all useWorker functionality to provide more simple usage.

// /calculorUI.js

import React from 'react'
import { AutoWorker } from 'extended-worker/autoWorker'

class CalculatorUI extends React.Component {
    constructor(props) {
        super(props)
        this.autoWorker = new AutoWorker('/someDir/calculator.worker.js')
    }

    componentDidMount() {
        this.autoWorker.create()
    }

    componentWillUnmount() {
        this.autoWorker.destroy()
    }
    
    multiply(a, b) {
        this.autoWorker.do('multiply', a, b).then(result => alert(result))
    }

    render() {
        return (
            <button onClick={(event) => this.multiply(2, 3)}>
                multiply 2 by 3
            </button>
        )
    }
  }

So, the library could be easily integrated with any UI framework.
Just call autoWorker.create on a component mount, autoWorker.destroy on unmount, and autoWorker.do to call a worker method.