Repository files navigation

A smart and efficient javascript object observer, ideal for batching DOM updates (~1kb)

Via npm

$ npm i icaro -S

Via<script>

<scriptsrc='path/to/icaro.js'></script>

Via ES2015 modules

importicarofrom'icaro'

Via commonjs

consticaro=require('icaro')

• The Canvas
• The Counter
• The Stress

icaro is really fastcompared to the other reactive libs because it smartly throttles all the state changes.

icaro will let you listen to all the changes happening in a javascript object or array, grouping them efficiently, and optimizing the performance of your listeners.

constobj=icaro({})// the variable "changes" here is a Map and the function is asyncobj.listen(function(changes){console.log(changes.get('foo'))// 'hi'console.log(changes.get('bar'))// 'there'console.log(changes.get('baz'))// 'dude'// kill all the listenersobj.unlisten()})obj.foo='hi'obj.bar='there'obj.baz='dude'

icaro will also let you listen to nested objects and all the non primitive properties added to anicaro object will be automatically converted intoicaro observable objects.

constobj=icaro({})// listen only the changes happening on the root objectobj.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. Any change to the items indexes will dispatch events.

// Here a bit of hardcore async stuffconstarr=icaro([])// here you will get the index of the items added or who changed their positionarr.listen(function(changes){console.log(changes.get('0'))// 'foo'console.log(changes.get('1'))// 'bar'// kill all the listeners this includedarr.unlisten()// add a brand new listener recursively.. why not?arr.listen(function(changes){// the change was triggered by a 'reverse' and all indexes were updatedconsole.log(changes.get('0'))// 'bar'console.log(changes.get('1'))// 'foo'})// update all the indexesarr.reverse()})// initial dispatcharr.push('foo')arr.push('bar')

You can also avoid unsubscribing ("unlisten") becauseicaro will automatically remove event listeners when the object is about to be garbage collected.

Anyicaro 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 viasetImmediate

@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 anicaro Proxy as JSON object

@returns Object

icaro uses advanced es6 features likeProxies,WeakMaps,Maps andSymbols andit targets only modern browsers

All major evergreen browsers (Edge, Chrome, Safari, Firefox)should be supported