Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

simple-observer

1.0.5 • Public • Published

simple-observer Build Status

A simple observer with ES6 Proxy

Install

$ npm i -S simple-observer

Usage

const { observable, observe, unobserve, isObservable } = require('simple-observer');
 
// Can't observe for Set/Map/WeakSet/WeakMap value.
const ASYMBOL = Symbol('aSymbol');
let baseState = {
    aString: 'hi',
    aNumber: 0,
    [ASYMBOL]: 'aSymbol',
    anArray: [1, 2, 3, [4, 5], { mix: 0 }],
    anObject: {
        a: 'shallow',
        b: {
            c: 'deep'
        },
        mix: [0]
    }
};
 
// Creates and returns an observable object.
const proxyState = observable(baseState);
 
// Turns the passed function into a reaction, then executes and returns it. 
const logger = observe(() => console.log(proxyState));
 
setTimeout(() => (proxyState.aString = 'world'));
setTimeout(() => (proxyData.aNumber = 1));
setTimeout(() => (proxyData[ASYMBOL] = 'aSymbol change'));
setTimeout(() => proxyState.anArray.push(6));
setTimeout(() => proxyState.anArray[3].push(6));
setTimeout(() => proxyState.anArray.pop());
setTimeout(() => proxyState.anArray[3].pop());
setTimeout(() => (proxyState.anObject.a = 'shallow change'));
setTimeout(() => (proxyState.anObject.b.c = 'deep change'));
setTimeout(() => delete proxyState.anObject.a);
setTimeout(() => delete proxyState.anObject.b.c);
setTimeout(() => (proxyState.anArray[4].mix = 1));
setTimeout(() => proxyState.anObject.mix.push(1));
 
// remove the observe
unobserve(logger);
 
// Returns true if the passed object is an observable
isObservable(proxyState);

Related

  • observer-util - An NX utility, responsible for powerful data observation with ES6 Proxies.

License

MIT © Harvey Zack

Install

npm i simple-observer

DownloadsWeekly Downloads

2

Version

1.0.5

License

MIT

Last publish

Collaborators

  • avatar