simple frp/pubsub/observers using ECMA5 getters/setters


Simple PubSub / Observers / Functional Reactive Programming for object properties using ECMA5 getters/setters.

Still very much a work in progress.

var obj = {
  one: 1,
  two: 2,
  arr: [1,2,3]
var beholden = behold(obj)
  .subscribe('arr', function(val){ console.log('arr', val.length); })
  .subscribe('one', function(val){ console.log('one', val); })
  .subscribe('two', function(val){ console.log('two', val); })
  .update({one: 'One', two: 'Two'});
console.log(, obj.two)
// 'One', 'two' 
var beholder = behold(function(){ return + obj.two })
  .subscribe(function(val){ console.log('onetwo', val); });
obj.arr.push(4); = 'one'
// arr 4 
// one 'one' 
// onetwo 'oneTwo' 

Public API

  • thing (required): Object, or Function that is the target. See separate descriptions below.

Tracks values on the object. Returns a Beholden, described below.

  • Primitives (Boolean, String, Number, etc) are given regular getters/setters.
  • Arrays' mutator methods (push, pop, shift, unshift, reverse, sort, splice) are enhanced such that they will trigger subscription updates.
  • Objects are not currently recursed into.
  • Functions are ignored. If you want a 'reactive expression' that tracks the value of beholden values that a function touches, you can call behold(fn) and it will return a 'Beholder' (described below) whose 'value' property will always reflect the current result of the expression fn.

Tracks an expression for the function given. Returns a Beholder, described below.

A Beholden encapsulates an object whose non-function properties are being observed and are subscribable.

  • propertyName (required): String, name of the property to listen to
  • fn (required): Function called with (newValue) arguments when value changes.

Subscribed functions are called after the callstack clears.

Returns the Beholden.

  • updateObj (required): Object, whose properties will be transfered over to the target object.

If the target object lacks values from the update Object, they will be created as observable properties.

Returns the Beholden.

A Beholder watches an expression for observable values accessed from objects tracked via behold(obj) and provides a way to subscribe to the changed result.

  • fn (required): Function called with (newValue) argument when the values tracked by the original tracked expression change.

Subscribed functions are called after the callstack clears.

Returns the Beholder.

  • Requires ECMA5, so it'll work in IE9+ but not older.
  • Will transform all enumerable properties on the object, ownProperty or not.
  • Array#length is not subscribable.
  • Roadmap: will recurse into object values on the target object

Inspired by working with Knockout, but realizing I wanted something much smaller in scope and functionality, and without all the function calls.