reactive-function

reactive-function

• A library for managing data flows graphs and changing state.
• Built on reactive-property.
• The foundation for reactive-model.

Usage

If you are using NPM, install this package with:

npm install reactive-function

Require it in your code like this:

var ReactiveFunction = require("reactive-function");

This library is designed to work with reactive-property, you'll need that too.

var ReactiveProperty = require("reactive-property");

Suppose you have two reactive properties to represent someone's first and last name.

var firstName = ReactiveProperty("Jane");
var lastName = ReactiveProperty("Smith");

Suppose you'd like to have another property that represents the full name of the person.

var fullName = ReactiveProperty();

You could set the full name value like this.

fullName(firstName() + " " + lastName());

However, this sets the value of fullName only once, and it does not get updated when firstName or lastName change.

Here's how you can define a reactive function that updates the full name whenever the first name or last name changes.

ReactiveFunction({
  inputs: [firstName, lastName],
  output: fullName,
  callback: function (first, last){
    return first + " " + last;
  }
});

This defines a "reactive function" that will be invoked when its inputs (firstName and lastName) are both defined and whenever either one changes (null is considered a defined value). The function will be invoked on the next tick of the JavaScript event loop after it is defined and after any dependencies change.

To force a synchronous evaluation of all reactive functions whose dependencies have updated, you can call

ReactiveFunction.digest();

Now you can access the computed value of the reactive function by invoking it as a getter.

console.log(fullName()); // Prints "Jane Smith"

For more detailed example code, have a look at the tests.

Related work:

• ReactiveJS
• vogievetsky/DVL
• EmberJS Computed Properties
• AngularJS Digest
• ZJONSSON/clues
• Model.js

Thanks to Mike Bostock and Vadim Ogievetsky for suggesting to have the ability to digest within a single tick of the event loop (the main difference between this project and the original model-js). This idea has inspired the construction of this library, which I hope will provide a solid foundation for complex interactive visualization systems.