easyobserve: easy-to-use observables via ES6 Proxy

Easily create new observable objects, or observe an existing object. You can catch events using an observable's on method. Works for arrays as well.

Install

npm install easyobserve

Usage

Object Literal

Create

var observableObj = new Observable({});

Observe events

var foo = new Observable({});

foo.on('set', (target, prop, value)=>{
    console.log(`${prop} was set to ${value}`);
});

foo.bar = 'lulz';
// bar was set to lulz

Observe targeted events

var foo = new Observable({});

foo.on('set:bar', (target, prop, value)=>{
    console.log('bar was set');
});

foo.bar = 'lulz';
// bar was set

Array

Create

var observableArray = new Observable([]);

Observe events

var observableArray = new Observable([]);

foo.on('set', (target, prop, value)=>{
    console.log(`${prop} was set to ${value}`);
});

foo.push('lulz');
// 0 was set to lulz

Observe targeted events

var observableArray = new Observable([]);

foo.on('set:0', (target, prop, value)=>{
    console.log('0 was set');
});

foo.push('lulz');
// 0 was set to lulz

Constructor

Create Instance

function kitty(){}

kitty.prototype.meow = function(){
    console.log('meow');
};

var observableKitty = Observable(kitty);

observableKitty.on('create', ()=>{
    console.log('a kitty was born!');
});

// instances of observableKitty are observable as well
var fluffy = new observableKitty();
// a kitty was born!

Events

Non-specific

add

Adding an element or property.

set

Setting a value for an element or property.

update

Will be returned on the process' next tick. Returns alterations from previous cycle.

get

Fired when a property is retrieved. This can also be useful for deeper observations, such as when an array's length is called.

delete

Handle a delete event for a property or index.

Constructor-specific

create

Fired when an instance of an observable constructor is created. Note that the child instance will also be observable by default.