node package manager

boxes

Mutable state containers with time travelling

Boxes

Mutable state containers with time travelling for JavaScript apps

Boxes is written in vanilla ES6, so maybe you want to transpile it before using it.

Live demo (for modern browsers)

Project in active development, API may change

Create and return a new box from a given state object.

Every box has its independent history.

let state = {a:1, o: {x: true}}
let box = boxes(state)

Subscribe action method to changes in scope. That action will be launched on scope saving. scope is state by default.

box.on(() => console.log('state changed!'))
scope.a = 99
box.save()
// 'state changed!' 
 
box.on(scope.o, console.log('object changed!'))
scope.o.x = false
box.save(scope.o)
// 'object changed!' 

Remove listener action from scope bindings

const state = {a: 1}
const box = boxes(state)
let control = 0
const fn = () => control++
box.on(fn)
box.emit()
control === 1 // true 
 
box.off(state, fn)
box.emit()
control === 1 // true 

emit subscriptions without saving scope. scope is state by default. emit method returns the box, so you can chain multiple calls

// subscribe to a scope 
box.on(scope.o, myAction)
// will call `myAction` 
box.emit(scope.o)

Save scope changes in history. scope is state by default. save method returns the box, so you can chain multiple calls

// save state scope 
box.save()
// save picked scope 
box.save(scope.o)

Undo and redo changes in state. steps is a number greater than 0, by default 1. Both methods returns the actual position in history

let state = {a: 1}
let box = boxes(state)
 
delete state.a
state.b = 99
box.save()
 
state.b = 'boxes!'
box.save()
 
box.undo()
state.a === undefined // true 
state.b === 99 // true 
 
box.undo()
state.a === 1 // true 
state.b === undefined // true 
 
box.redo(2)
state.a === undefined // true 
state.b === 'boxes!' // true 

npm test

Open test/test.html

  • Build UMD file: npm run build-umd
  • Build browser tests: npm run build-tests
  • Run both builds: npm run build




© 2016 Jacobo Tabernero - Released under MIT License