Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    boxespublic

    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

    Build Status npm version npm dependencies js-standard-style

    ## API

    ### boxes(state)

    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)

    ### box.on([scope,] action) and unsubscribe()

    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!' 

    ### box.off(scope, action)

    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 

    ### box.emit(scope)

    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)

    ### box.save(scope)

    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)

    ### box.undo(steps) and box.redo(steps)

    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 

    ## Testing

    Node

    npm test

    Browser

    Open test/test.html

    ## Building

    • 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

    install

    npm i boxes

    Downloadsweekly downloads

    95

    version

    0.19.6

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar