car-conductor

car-conductor

Middleware for adding web workers to your choo app, with the help of workerify transforms.

Helped me search a client-side database on each keypress while not dropping any input field frames.

-- 🤓 Author

Usage

The conductor constructor takes a file path and sets up a named scope variable based on the filename, or an as an optional second parameter. It creates a webworker, sets up a '*' binding that conditionally triggers on set event [scope]: and passes the event on to the worker thread.

Anything the worker thread sends will get set under the local state[scope]

Install

npm i car-conductor workerify

Add workerify like so -t workerify or so "browserify": { "transform": [ "workerify" ] } in your package.json

Example

var conductor = require('car-conductor')
var app = require('choo')()

app.use(conductor('./passengers.js'))

app.route('/' function mainView(state, emit) {
  return html`
    <div class="cars">
      Passenger count ${state.passengers.count}
      <a onclick=${emit('passengers:increment')}>Add passenger</a>
    </div>
  `
})
app.mount('body')

A possible passengers.js file can look like this:

// Yes, worker will be browserified tnx 💪-ify
var dream = require("intensive-task")

var state = {
  count: 0
}

// To hydrate state
self.postMessage(state)

self.onmessage = function(msg){
  var eventName = msg.data[0]
  var data = msg.data[1]
  switch(eventName){
    case 'increment': {
      state.count += data || 1
      self.postMessage(state)
      self.postMessage(['render'])
      break
    }
    case 'nothing to do': {
      state.subconscious = dream(state.subconscious)
    }
    default: {
      self.postMessage(state)
      self.postMessage(['render'])
    }
  }

}

Notes

Cons: Cars isolate the state.