Inking
Lightweight MobX like date management library based on ES2015 Proxy.
Install
$ yarn add inking
Motivation
Proxy is an awesome feature feature of ES2015. Base on it, we can do meta-programming and hijack object's native operations easier and more seamless. Inking is a state manage library based on Proxy and inspired by awesome MobX.
Concept
- Just Like MobX, the object Inking return is not a plain object, but an Observable or Computed object which is hijacked by Proxy. All
get
andset
operations are hijacked, which makes it possible to collect dependencies on trigger reactions. - Although some test cases have been added, Inking is still in a prototype phase and needs
inking-react
and devtools. - Feel free to leave any thing in the issue ❤️.
Usage
Making things observable
observable
API:
observable(object)
EXAMPLE:
counter.num++// $ 1
@observable
API:
EXAMPLE:
autorun m.count++// $ 1
object
Any plain object passed into observable
will turn to be a observable value.
EXAMPLE:
autorunconsole.logperson.labelText person.name = 'David'// $: David (age: 25)person.setAge26// $: David (age: 26)
array
Any array passed into observable
will turn to be a observable array, even nested.
EXAMPLE:
autorun todos.completed = false// $ a_btodos.completed = true// $ atodos.push// $ a_ctodos.pop// $ atodos.shift// $
- maps
- boxed values
- decorators
Reacting to observables
computed
Computed values are values that can be derived from the existing state or other computed values.
EXAMPLE:
autorun obj.skills.push'code'// $ eat_sleep_codeobj.skills = 'newCode'// $ eat_sleep_newcodeobj.skills = 'NEWCODE'// will not print
Any getter property of in Class will turn to be a computed value automatically.
EXAMPLE:
autorun p.firstName = 'A'// will not printp.firstName = 'a'// will not printp.firstName = 'newA'// $ NEWA_Bp.firstName = 'NEWA'// will not print
- @computed
autorun
autorun
can be used in those cases where you want to create a reactive function that will never have observers itself.
EXAMPLE:
// ⚠️ disposer is not implemented so fardisposer // or autorun
when
when
observes & runs the given predicate
until it returns true. Once that happens, the given effect
is executed and the autorunner is disposed. The function returns a disposer to cancel the autorunner prematurely.
EXAMPLE:
whenskills.length >= 3, skills.push'code1'// $ code1skills.unshift'code2'// $ code1skills.pop// $ sleepskills.shift// $ will not printskills = 'EAT'// $ will not print
reaction
A variation on autorun that gives more fine grained control on which observables will be tracked.
EXAMPLE:
reactionobj.skills.length, skills.push'code1'// $ code1skills.unshift'code2'// $ code1skills.pop// $ sleepskills.shift// $ sleepskills = 'EAT'// $ will not print
- @observer
Changing observables
action
Any application has actions. Actions are anything that modify the state. With MobX you can make it explicit in your code where your actions live by marking them. Actions help you to structure your code better.
EXAMPLE:
autorun act// $ undefined
- async actions & flows
- Object api
Utility functions
toJS
Return raw value from observable value.
EXAMPLE:
// a test case of Jesttest'basic toJS',
- extendObservable
- createAtom
- intercept & observe
Others
- Devtools
Platform support
- Node: 6+
- Chrome: 49+
- Firefox: 38+
- Safari: 10+
- Edge: 12+
- Opera: 36+
- IE: NEVER SUPPORTED