Simple-observer NPM

simple-observer

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);