boxes
TypeScript icon, indicating that this package has built-in type declarations

0.44.0 • Public • Published

Boxes

(Work in progress)

Reactive state containers focused on DOM performance

import { getBox, on } from 'Boxes'
 
const origin = {
  a: 1
}
 
const box = getBox(origin)
box // { a: 1 }
box === origin // false
 
on(box, 'a', (...change) => console.log(change))
box.a = 'hello'
// logs: [{ a: 'hello' }, 'a', 'set', 1, 'hello']

API

  • getBox
  • on
  • off

on(box, prop, handler)

Adds handler to box

const box = getBox({ a: 1 })
const handler = (...change) => console.log(change)
boxes.on(box, 'a', handler)
 
box.a = 'hello'
// logs: [{ a: 'hello' }, 'a', 'set', 1, 'hello']

It also works with dot notation:

const box = getBox({ o: { a: 1  } })
const handler = (...change) => console.log(change)
boxes.on(box, 'o.a', handler)
 
box.o.a = 'hello'
['set', 'a', 1, 'hello', { a: 'hello' }]
 
box.o = { a: 'bye' }
// logs: [{ a: 'bye' }, 'a', 'set', 'hello', 'bye']

off(box, prop, handler)

Removes handler from the box

boxes.off(box, 'propName', action)

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, ...
  • delete:
    • signature: [box, property, 'delete', oldValue, undefined]
    • on: delete operator

Array:

  • set:
    • signature: [box, property, 'set', oldValue, newValue]
    • on: copyWithin, fill, splice and literal assignation
  • delete:
    • signature: [box, property, 'delete', oldValue, undefined]
    • on: delete operator
  • insert:
    • signature: [box, property, 'insert', undefined, newValue]
    • on: push, splice, unshift
  • remove:
    • signature: [box, property, 'remove', oldValue, undefined]
    • on: pop, shift, splice
  • swap:
    • signature: [box, property, 'swap', oldValue, newValue]
    • on: reverse , sort
  • 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

Dependents (1)

Package Sidebar

Install

npm i boxes

Weekly Downloads

77

Version

0.44.0

License

MIT

Unpacked Size

23.8 kB

Total Files

14

Last publish

Collaborators

  • jacoborus