Skip to content
Christian Alfoni edited this page Mar 5, 2015 · 23 revisions

By default Baobab triggers events like this:

var Baobab = require('baobab');
var tree = new Baobab({
  todos: []
});

tree.on('update', function () {

  // Runs last, only once, mutations are batched
  console.log('update'); 
});

tree.select('todos').push('foo');
console.log('first mutation'); // Runs 1.
tree.select('todos').push('bar');
console.log('second mutation'); // Runs 2.

autoCommit

When you use the mutation methods of Baobab (push, set, merge etc.) it will batch up these changes and make one single commit, which then triggers update events. By turning off autoCommit you can control exactly when Baobab should do this operation. This is useful if you have a large application and need to fine control when updates are to be emitted.

var Baobab = require('baobab');
var tree = new Baobab({
  todos: []
}, {
  autoCommit: false // Default: true
});

tree.on('update', function () {

  // Runs first, but only once
  console.log('update');
});

tree.select('todos').push('foo'); // Will not trigger event
tree.select('todos').push('bar'); // Will not trigger event
tree.commit(); // Triggers the event synchronously
console.log('Committed'); // Runs last

asynchronous

In combination with the default autoCommit: true you can control if you want events to trigger synchronously on every single mutation. This has a performance hit, but makes the code more predictable.

var Baobab = require('baobab');
var tree = new Baobab({
  todos: []
}, {
  asynchronous: false // Default: true
});

tree.on('update', function () {
  console.log('update'); // Runs 1. and 3.
});

tree.select('todos').push('foo');
console.log('first mutation'); // Runs 2.
tree.select('todos').push('bar');
console.log('second mutation'); // Runs 4.

mixins

Optional React JS mixins to merge with baobab's ones. Especially useful is adding the PureRenderMixin from React JS. The Baobab mixin will run first, so that you can access the cursors created.

var Baobab = require('baobab');
var React = require('react/addons');

var tree = new Baobab({
  todos: []
}, {
  mixins: [React.PureRenderMixin]
});

shiftReferences

Tell the tree to shift references of the objects it updates so that functions performing shallow comparisons (such as the one used by the React JS PureRenderMixin), can assess that data changed.

var Baobab = require('baobab');
var React = require('react/addons');

var tree = new Baobab({
  todos: []
}, {
  shiftReferences: true, // Default: false
  mixins: [React.PureRenderMixin]
});

clone

When you use the get() method on cursors, the data retrieved will be cloned. This has a performance hit, but makes sure that you are unable to mutate the data inside the tree. This is more a discipline issue really. You should not mutate state directly, but if you feel paranoid, turn on cloning.

var Baobab = require('baobab');
var tree = new Baobab({
  todos: []
}, {
  clone: true // Default: false
});

var data = tree.get();
data.todos.push('foo');

// Still empty, as opposed to default behavior
tree.get(); // { todos: [] }

cloningFunction

The library's cloning method is minimalist on purpose and won't cover edgy cases. You remain free to pass your own more complex cloning function to the tree if needed.

var Baobab = require('baobab');
var mySafeDeepClone = require('./mySafeDeepClone');

var tree = new Baobab({
  todos: []
}, {
  cloningFunction: mySafeDeepClone
});

cursorSingletons

By default, a baobab tree stashes the created cursor so only one would be created per path. You can override this behavior by setting cursorSingletons to false.

var Baobab = require('baobab');

var tree = new Baobab({
  todos: []
}, {
  cursorSingletons: false // Default: true
});

var cursorA = tree.select('todos');
var cursorB = tree.select('todos');

cursorA === cursorB // false, as opposed to true with default setting

maxHistory

Max number of records the tree is allowed to have within its internal history.

var Baobab = require('baobab');

var tree = new Baobab({
  todos: []
}, {
  maxHistory: 1 // Default: 0
});

tree.on('update', function () {
  tree.get(); // { todos: ['foo'] }
  tree.undo();
  tree.get(); // { todos: [] }
});

tree.select('todos').push('foo');

typology

A custom typology to be used to validate the tree's data.

validate

A typology schema ensuring the tree's data is valid.

Clone this wiki locally