From eef35fc8719b30411bb3a282c8d8b0e3df2471fc Mon Sep 17 00:00:00 2001 From: colxi Date: Sat, 14 Jul 2018 19:50:01 -0700 Subject: [PATCH] first release --- README.md | 61 ++++++++++++++++++++++++++++++++++++++++++--- src/deep-oberver.js | 14 +++++------ 2 files changed, 64 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 3835db9..4f88f63 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,64 @@ -#Deep Observer +![logo](https://cdn.rawgit.com/colxi/deep-observer/37e057bb/logo.png) -Tiny Object Observe library, to watch Objects for changes and execute callbacks to track them. +# Deep Observer +[![NoDependencies](https://img.shields.io/badge/dependencies-none-green.svg)](https://github.com/colxi/midi-parser-js) +[![Browser](https://img.shields.io/badge/browser-compatible-blue.svg)](https://github.com/colxi/midi-parser-js) +[![Node](https://img.shields.io/badge/node-compatible-brightgreen.svg)](https://www.npmjs.com/package/midi-parser-js) +Tiny **Object Observe** library (<100 bytes gziped), to deep watch and track chages in Objects and Arrays. The provided callback to the constuctor is executed each time a change is deteced, passing a complete set of data relative to the detected change -- Based in Proxyes + +- Deep Observation ( nested Objects ) +- Based in Proxies (ES6) and WeakSets (ES6) +- Compatible with Node and Browser - Compatible with all JS primitive types +- Wide support in Browsers : +-- Chrome 49 +-- Firefox 34 +-- Edge 12 +-- Opera 36 +-- Safari 10 + +## Syntax +When at least two arguments are passed, it behaves as a Constructor : +> new Observer( object , callback [, id] ) + +`object`: Object to observe +`callback` : Function to be invoked on object changes +`id` : (optional) String to associate to the Observable + +Returns an Observable (Proxy) + +--- +When only a String is provided it behaves as a getter : +> Observer( id ) + +`ìd`: String used as id in the constructor + +Returns the matching Observable (Proxy) + + + +## Usage example + +Provide to the constructor an object and a callback, and perform a change on the object, to trigger the callback : ``` - ... + const myObserved = new Observer( { a : 12 } , e=>console.log('changed!' , e) ), + myObserved.a = 14; + // console outputs : 'changed!' { action:'update', oldValue:12, object:{a:14}, name:'a' } ``` + +## Package distribution : + +In browser enviroment you can include this library using the jsdelivr CDN ... + +`````` + +If you are in the NodeJs enviroment, can install the package via: + +```$ npm install deep-observer``` + + +## Licence +GPL 3 \ No newline at end of file diff --git a/src/deep-oberver.js b/src/deep-oberver.js index 7898628..291b818 100644 --- a/src/deep-oberver.js +++ b/src/deep-oberver.js @@ -119,16 +119,16 @@ * [Observer description] * @param {Object} conf [description] */ - const Observer = function( conf = {} ){ - const modelName = conf.name || 'OBSERVED-'+Math.floor( Math.random()* Date.now() ); - const content = conf.item || undefined; + const Observer = function( object , callback , id ){ + id = id || 'OBSERVED-'+Math.floor( Math.random()* Date.now() ); + object = object || undefined; - // if contents are provided, behave as a setter - if(typeof content !== 'undefined'){ - OBSERVED[modelName] = newObserver(content, modelName, conf.callback || new Function()); + // if callback are provided, behave as a setter + if(arguments.length > 1){ + OBSERVED[id] = newObserver(object, id , callback || new Function()); } - return OBSERVED[modelName]; + return OBSERVED[id]; };