@plotdb/reactive

TODO

• reactive, for map, set, weakmap, weakset
• effect(fn)
  • trigger fn when state used in fn
• track / trigger for set, add, delete type
  • track 紀錄使用, trigger 基於使用觸法
• structure test: nested / array
• ref: for primitive
• computed(fn).value: cache fn result, only update when state update
• schedule: like debounce
• cleanup: cleanup dep everytime before rerun, and update dep after

Installation

npm install --save @plotdb/react

then include the main script ( index.min.js ) or import it based on your environment.

Usage

use reactive(youObject) to initialize reactive:

react(myObj = { .... })

To automatically trigger your function when the reactive object is updated:

react.by -> myObj.value = Math.random!

@plotdb/react tracks update by storing information inside a react.host instance which will be constructed automatically, but you can still build one manaully and use it along with react:

host = react.host!
react(myObj = {...}, host)

Class APIs

• react(obj): initialize react with obj.
• react.by(cb): call cb when any fields under obj used by cb is updated.
• react.to(obj, cb): explicitly tell react to call cb when obj is updated.

Host APIs

• link(parent, key, child): track parent and the field key where child is stored with WeakMap for path generation.
• path(object, key): get path to object[key] from root object.
• ref(primitiveValue): return a trackable reference of the given primitive value.
• by(callback): register a callback which should be triggered by any update of fields it uses.
• track(target, key, callback): track changes for target[key]
  • optional callback which explicitly tell react to trigger callback on target[key] change.
• trigger(target, key): trigger any callback that uses target[key]
• root(obj): mark obj as root for path resolution
• raw(proxy, counterpart):
  • link a proxy to its counterpart. Return counterpart if counterpart is omitted.
• isRoot(o): - return true if a given object o is root.