Package Exports

deep-observer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (deep-observer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Deep Observer

Tiny Object Observe library ( < 100bytes gziped), to deep watch and track changes in Objects and Arrays. The provided callback to the Constuctor is executed each time a change is deteced, recieving a complete set of data relative to the detected change.

Deep Observation ( nested Objects )
Based in Proxies (ES6) and WeakSets (ES6)
Compatible with Node and Browser
Compatible with all JS primitive types
Wide support in Browsers : -- Chrome 49 -- Firefox 34 -- Edge 14 -- Opera 36 -- Safari 10

Syntax

1. Constructor

When at least two arguments are passed to Observer() , it behaves as a Constructor :

new Observer( object , callback [, config] )

object: Object to observe
callback : Function to be invoked on object changes
config : (optional) Object
id : String to use as identifier to the Observable. (if not provided is generated automatically)
observeConstruction : Boolean. If true callback will be executed also in construction stage. (default: false)

Returns : an Observable (Proxy)

2. Getter

When only a String is provided to Observer() it behaves as a getter :

Observer( id )

ìd: String provided previously in the constructor config object

Returns : the matching Observable (Proxy) or undefined

3. Callback function

The function called each time changes are made, will receive an event object containng the following properties :

action : String containing one of the following values : add|update|delete
object: Affected property parent's Object
name: Name of the modified property (or array index)
oldValue : Value of the property before the change
keypath : String representing the internal path to the affected property.

Basic usage example

Provide to the constructor an object and a callback, and perform a change on the object, to see how the callback is triggered:

   // create an observable object
   const myObserved = new Observer( { a : 12 } , e=>console.log('changed!' , e) ),
   // perform a modification
   myObserved.a = 14; 
   // console outputs : 'changed!' { action:'update', oldValue:12, object:{a:14}, name:'a' }

Package distribution :

In browser enviroment you can include this library using the jsdelivr CDN ...

<script src='https://cdn.jsdelivr.net/gh/colxi/deep-observer@latest/src/deep-observer.min.js'></script>

If you are in the NodeJs enviroment, can install the package via:

$ npm install deep-observer --save

Licence

GPL 3