ES6 Proxy observable implementation
npm install proxy-observableES6 Proxy observable implementation. Supports Arrays and Objects
Please keep in mind that the implementation is based on ES6 Proxy feature which is a very slow thingy


![Gemnasium]()
!Lib Size


npm install proxy-observable --save
Just call observable() if you want an object or an array to be observable
``js
import observable from "proxy-observable";
const soldier = {
name: "Titus Pullo",
age: 36,
inventory: observable({
sword: "Dagger",
coins: 0
}),
friends: observable(["Gaius Octavian"])
};
console.log(JSON.stringify(soldier, null, 2));
`
`json`
{
"name": "Titus Pullo",
"age": 36,
"inventory": {
"sword": "Dagger",
"coins": 0
},
"friends": [
"Gaius Octavian"
]
}
`js`
const onCoinsChanged =
soldier.inventory.on("coins", (value, prev) => {
console.log(value, prev); // 100 0
});
soldier.inventory.coins = 100; // onCoinsChanged will be called
soldier.inventory.off(onCoinsChanged);
Simply speaking soldier.inventory is still just a simple object, but it has additionally a few things:
+ method on Attach a handler to an event for the elementsonce
+ method Attach a handler to an event for the elements. The handler is executed at most once per element per event typeoff
+ method Remove an event handlersoldier.inventory.newProp = value
+ you can call just to define a new prop, instead of soldier.inventory["newProp"] = value
`js`
soldier.friends.on("change", item => {
console.log(item); // "Lucius Vorenus" twice
});
soldier.friends.on("shift", item => {
console.log(item); // "Gaius Octavian"
});
soldier.friends.push("Lucius Vorenus");
soldier.friends[0] = "Lucius Vorenus"
soldier.friends.shift();
soldier.friends is still just a simple array with on, once and off methods and predefined events
change - Fires when an item in an array is changed:
`js`
arr[0] = "new value";
// or
arr.push("new value");
pop - Fires when pop method is called:
`js`
arr.pop();
shift - Fires when shift method is called:
`js`
arr.shift();
any other Array's methods
---
eventDo you want to track all the events? Just use any like this:
`js
// object
soldier.inventory.on("any", (value, prev, prop) => {
console.log(prop); // "coins", "shield"
});
soldier.inventory.coins = 1000;
// This way you can track when a new property is added to an object
soldier.inventory.shield = "Gold Shield";
// array
soldier.friends.on("any", (value, prev, e) => {
// e is "change", "pop", "shift" or any other method of Array
console.log(e);
});
soldier.friends[0] = "Mark Antony";
soldier.friends.pop();
`
---
`html
`
`js
const Frodo = observable({
name: "Frodo Baggins",
bag: observable([]),
friends: observable([])
});
const Samwise = {
name: "Samwise Gamgee",
friends: [Frodo]
};
Frodo.friends.on("change", friend => {
console.log(Frodo has a new friend ${friend.name}! Cograts!);
});
Frodo.bag.on("any", (item, prev, e) => {
if (e === "change") {
console.log("Frodo got a new item: " + item);
if (item === "ring") {
console.log("Oh! My Precious!");
}
} else if (e === "pop" || e === "shift"){
console.log("Frodo lost an item: " + item);
if (item === "ring") {
console.log("Gollum! I'm coming to get you!");
}
}
});
Frodo.friends.push(Samwise);
Frodo.bag.push("apple");
Frodo.bag.push("ring");
Frodo.bag.pop();
Frodo.friends.pop();
``
ctxReturns: object|array - Observable object or array
| Param | Type | Description |
| --- | --- | --- |
| ctx | object\|array | Input Object or Array |
---
callbackReturns: function - Input callback for unsubscribing
| Param | Type | Description |
| --- | --- | --- |
| e | string | Event name or property name |
| callback | function | Callback |
| Param | Type | Description |
| --- | --- | --- |
| value | any | Current value |
| prev | any | Previous value |
| e | string | Event name or property name |
---
callbackReturns: function - Input callback for unsubscribing
| Param | Type | Description |
| --- | --- | --- |
| e | string | Event name or property name |
| callback | function | Callback |
---
booleanReturns: boolean - True if unsubscribed
| Param | Type | Description |
| --- | --- | --- |
| callback | function | Callback |
---
ES6 JavaScript Proxy MDN documentation
|
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
iOS Safari |
Chrome for Android |
| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
| Edge| last 3 versions| last 10 versions| last 5 versions| last 4 versions| last 2 versions| last 3 versions
MIT