Smart and efficient javascript object observer, ideal for batching DOM updates (~1kb)
Via npm
$ npm i icaro -S
Via <script>
<script src='path/to/icaro.js'></script>
Via ES2015 modules
import icaro from 'icaro'
Via commonjs
const icaro = require('icaro')
icaro
is really fast compared to the other reactive libs because it throttles smartly all the state changes
icaro
will let you listen all the changes happening in a javascript object or array grouping them efficiently optimizing the performances of your listeners
const obj = icaro({})
// the variable "changes" here is a Map and the function is async
obj.listen(function(changes) {
console.log(changes.get('foo')) // 'hi'
console.log(changes.get('bar')) // 'there'
console.log(changes.get('baz')) // 'dude'
// kill all the listeners
obj.unlisten()
})
obj.foo = 'hi'
obj.bar = 'dear'
obj.baz = 'dude'
icaro
will let you also listen nested object, all the non primitive properties added to an icaro
object will be automatically converted into icaro
observable objects
const obj = icaro({})
// listen only the changes happening on the root object
obj.listen(function(changes) {
})
obj.nested = {
}
obj.nested.listen(function(changes) {
// listen only the changes of obj.nested
})
obj.nested.someVal = 'hello'
icaro
is able also to listen changes in arrays
// Here a bit of hardcore async stuff
const arr = icaro([])
// here you will get the name of the event that changed your array
arr.listen(function(changes) {
console.log(changes.get('push')) // ['foo', 'bar']
// kill all the listeners this included
arr.unlisten()
// add a brand new listener recursively.. why not?
arr.listen(function(changes) {
console.log(changes.get('reverse')) // ['bar', 'foo']
})
// dispatch with "reverse"
arr.reverse()
})
// initial dispatch
arr.push('foo')
arr.push('bar')
You can also avoid to unsubscribe your callbacks because icaro
will automatically unlisten them if the object bound to them will be garbage collected
Any icaro
call will return a Proxy with the following api methods
Listen any object or array calling the callback function asynchronously grouping all the contiguous changes via setImmediate
@returns self
Unsubscribing a callback previously subscribed to the object, if no callback is provided all the previous subscriptions will be cleared
@returns self
Return all data contained in an icaro
Proxy as JSON object
@returns Object
icaro
uses advanced es6 fetatures like Proxies, WeakMaps, Maps and Symbols and it targets only modern browsers
All major evergreen browsers (Edge, Chrome, Safari, Firefox) should be supported