var observePlus = require("observe-plus");

var object = {};
// I want to know when a new property is added
object.newProperty = "value";
 
// and when a property is updated
object.newProperty = "newValue";
 
// or when it's removed
delete object.newProperty;

var object = { property: "value"};
 
// I want to observe object.property to know when the value changes:
object.property = "newValue";
object.property = "otherValue";
 

var plainObject = {};
 
var observer = observePlus.observe(plainObject);
 
// Listening to properties being added to the object
var dispose = observer.observe("add", function (publishedEvent) {
    // When a property is be added to the object,
    // this callback will be called with this === scope
    // and publishedEvent as the original event such as, for example:
    publishedEvent.name == "newProperty";
    publishedEvent.object === plainObject;
    publishedEvent.type == "add";
    publishedEvent.value == "value";
}, scope /* optional */);
 
// This will trigger the listeners that have subscribed to "add"
plainObject.newProperty = "value";
 
// This will add a listener to properties being updated
observer.observe("update", function (publishedEvent) { ... }, scope /* optional */);
 
// This listener will be called only once and then disposed of
observer.observeOnce("update", function (publishedEvent) { ... }, scope /* optional */);
 
// This will trigger the listeners that have subscribed to "update"
plainObject.newProperty = "newValue";
 
// This listener will be called when a property is deleted from the object
observer.observe("delete", function (publishedEvent) { ... }, scope /* optional */);
 
// This listener will be called only once and then disposed of
observer.observeOnce("delete", function (publishedEvent) { ... }, scope /* optional */);
 
// This will trigger the listeners that have subscribed to "delete"
delete plainObject.newProperty;
 
// When you're done with a listener, you can remove it by calling the dispose function that is the observe() method returned.
// All the observe methods return a dispose function.
dispose();

// Listening to changes on the "newProperty" property
var dispose = observer.observeValue("newProperty", function (publishedEvent) {
    // When newProperty will be added/modified or removed,
    // this callback will be called with this === scope
    // and publishedEvent as the original event such as, for example:
    publishedEvent.name === "newProperty";
    publishedEvent.object === plainObject;
    publishedEvent.type === "add";
    publishedEvent.value === "value";
}, scope /* optional */);
 
// Or similar, but the listener will be called only once:
observer.observeOnce("newProperty", function (publishedEvent) { ...}, scope /* optional */);
 
// This will call the callback with the "add" event
plainObject.newProperty = "value";
 
// This will call the callback with the "update" event
plainObject.newProperty = "newValue";
 
// This will call the callback with the "delete" event
delete plainObject.newProperty;
 
// This will not call the callback as it's not listening to events on anotherProperty
plainObject.anotherProperty = "value";
 
// When you're done with a listener, you can remove it by calling the dispose function that is the observe() method returned.
// All the observe methods return a dispose function.
dispose();

observer.unobserve();

var array = [];
// I want to know when an item is added:
array.push("newItem");
 
// When an item is updated
array[0] = "updatedItem";
 
// When an item is removed
array.splice(0, 1);

var array = ["item"];
 
// I want to know when array[0] is updated:
array[0] = "newValue";
array[0] = "otherValue";

var plainArray = [];
 
var observer = observePlus.observe(plainArray);
 
// Listening to changes on the array such as item added or removed
var dispose = observer.observe("splice", function (publishedEvent) { ... }, scope /* optional */);
 
// Listening to splice events only once:
observer.observeOnce("splice", function (publishedEvent) { ... }, scope /* optional */);
 
// This will trigger all the listeners that have subscribed to "splice"
plainArray.push("item");
 
// Listening to updates on the items
observer.observe("update", function (publishedEvent) { ... }, scope /* optional */);
 
// This will trigger all the listeners that have subscribed to "update"
plainArray[0] = "newValue";
 
// This will again trigger all the listeners that have subscribed to "splice"
plainArray.pop();
 
// When you're done with a listener, you can remove it by calling the dispose function that is the observe() method returned.
// All the observe methods return a dispose function.
dispose();

var dispose = observer.observeValue(10, function (publishedEvent) { ... }, scope /* optional */);
 
// Or to listen index 10 only once:
observer.observerIndexOnce(10, function (publishedEvent) { ... }, scope /* optional */);
 
// This will trigger all the listeners that have subscribed to changes on item 10:
plainArray[10] = "item";
 
// Removing the listener
dispose();

var observer = observePlus.observe(plainArray);
 
observer.observeValue("length", function (publishedEvent) { ... }, scope /* optional */);

observer.unobserve();

var dataStructure = [
    {
        id: 0,
        name: "Alice",
        colors: ["red", "green"]
    },
 
    {
        id: 1,
        name: "Bob",
        colors: ["yellow", "pink"]
    },
    
    {
        id: 2,
        name: "Carol",
        colors: ["purple"]
    }
];

var observer = object.observe(dataStructure);

observer.observeValue("0.colors.0", function (event) {
    // do something when 0.colors.0 changes.
    // event.value will hold the new color
    // event.oldValue will hold the old color
});
 
 
// Will trigger the event
dataStructure[0].colors[0] = "blue";

// Pause the observer
observer.pause();
 
// do something on object/array;
 
// resume the observer, which will trigger all the listeners with the events:
observer.resume();