Boxes
(Work in progress)
Reactive state containers focused on DOM performance
const origin = a: 1 const box = box // { a: 1 }box === origin // false boxa = 'hello'// logs: [{ a: 'hello' }, 'a', 'set', 1, 'hello']
API
- getBox
- on
- off
on(box, prop, handler)
Adds handler
to box
const box = const handler = consoleboxes boxa = 'hello'// logs: [{ a: 'hello' }, 'a', 'set', 1, 'hello']
It also works with dot notation:
const box = const handler = consoleboxes boxoa = 'hello''set' 'a' 1 'hello' a: 'hello' boxo = a: 'bye' // logs: [{ a: 'bye' }, 'a', 'set', 'hello', 'bye']
off(box, prop, handler)
Removes handler
from the box
boxes
Emitter
Boxes will emit the changes made in the observed objects.
Change signatures:
Generic signature: [box, property, changeType, oldValue, newValue]
Object:
- set:
- signature:
[box, property, 'set', oldValue, newValue]
- on: literal assignation, Object.assign, ...
- signature:
- delete:
- signature:
[box, property, 'delete', oldValue, undefined]
- on: delete operator
- signature:
Array:
- set:
- signature:
[box, property, 'set', oldValue, newValue]
- on: copyWithin, fill, splice and literal assignation
- signature:
- delete:
- signature:
[box, property, 'delete', oldValue, undefined]
- on: delete operator
- signature:
- insert:
- signature:
[box, property, 'insert', undefined, newValue]
- on: push, splice, unshift
- signature:
- remove:
- signature:
[box, property, 'remove', oldValue, undefined]
- on: pop, shift, splice
- signature:
- swap:
- signature:
[box, property, 'swap', oldValue, newValue]
- on: reverse , sort
- signature:
- length:
- signature:
[box, firstIndexChanged || undefined, 'length', oldLength, newLength]
- on: pop, push, shift, splice, unshift
firstIndexChanged
will be passed only on shift, splice and unshift because on pop and push no index will change
- signature: