How to use the baobab function in baobab

To help you get started, we’ve selected a few baobab examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Lothiraldan / ZeroServices / examples / fosdem_2015 / app.jsx View on Github external
import React from 'react';
import ReactDom from 'react-dom'
import Baobab from 'baobab'
import axios from 'axios';

// Style
import {bootstrap} from './bower_components/bootstrap/dist/css/bootstrap.css';

// Initialization
var tree = new Baobab({});

let onopen = function() {
  let subscribe_msg = {'type': 'join', 'data': {'topics': ['power']}}
  ws.send(JSON.stringify(subscribe_msg));
}

let onmessage = function(evt) {
  let data = JSON.parse(evt.data).data;
  let action = data.action;
  let resource_id = data.resource_id;
  if (action == 'patch') {
    let patch = data.patch['$set'];
    for(let key in patch) {
      tree.set([resource_id, key], patch[key]);
    }
  } else if (action == 'create') {
github Yomguithereal / baobab-react / deprecated_test / suites / higher-order.jsx View on Github external
it('should be possible to pass cursors directly.', function() {
    const tree = new Baobab({name: 'John', surname: 'Talbot'}, {asynchronous: false}),
          cursor = tree.select('name'),
          RootComponent = root(BasicRoot, tree);

    @branchDecorator({
      cursors: {
        name: cursor,
        surname: ['surname']
      }
    })
    class Child extends Component {
      render() {
        return (
          <span id="test">
            Hello {this.props.name} {this.props.surname}
          </span>
        );
github Yomguithereal / baobab-react / deprecated_test / suites / higher-order.jsx View on Github external
it('should be possible to use actions.', function(done) {
    const tree = new Baobab({counter: 5}, {asynchronous: false}),
          RootComponent = root(BasicRoot, tree);

    function increment(tree, nb=1) {
      tree.apply('counter', c => c + nb);
    }

    function decrement(tree, nb=1) {
      tree.apply('counter', c => c - nb);
    }

    @branchDecorator({
      actions: {
        increment: increment,
        decrement: decrement
      },
      cursors: {
github Yomguithereal / baobab-react / test / higher-order.jsx View on Github external
it('bound components should update along with the cursor.', function(done) {
      const tree = new Baobab({name: 'John', surname: 'Talbot'}, {asynchronous: false});

      class Child extends Component {
        render() {
          return (
            <span>
              Hello {this.props.name} {this.props.surname}
            </span>
          );
        }
      }

      const Root = root(tree, BasicRoot);

      const BranchedChild = branch({
        name: 'name',
        surname: 'surname'
github Yomguithereal / baobab-react / deprecated_test / suites / higher-order.jsx View on Github external
it('bound components should update along with the cursor.', function() {
    const tree = new Baobab({name: 'John', surname: 'Talbot'}, {asynchronous: false}),
          RootComponent = root(BasicRoot, tree);

    @branchDecorator({
      cursors: {
        name: ['name'],
        surname: ['surname']
      }
    })
    class Child extends Component {
      render() {
        return (
          <span id="test">
            Hello {this.props.name} {this.props.surname}
          </span>
        );
      }
github Yomguithereal / baobab-react / test / hook.jsx View on Github external
it('branch should throw an error if the passed argument is not valid.', function() {
      const tree = new Baobab({name: 'John'}, {asynchronous: false});

      const Child = () =&gt; {
        const data = useBranch();
        return <span>Hello {data.name}</span>;
      }

      assert.throws(() =&gt; {
        mount();
      }, /baobab-react/);
    });
  });
github Yomguithereal / baobab-react / test / higher-order.jsx View on Github external
it('wrapper component should allow setting a ref on the wrapped component using the decoratedComponentRef prop.', function(done) {
      const tree = new Baobab({counter: 0}, {asynchronous: false});

      class Counter extends Component {
        render() {
          return (
            <span>
              Counter: {this.props.counter}
            </span>
          );
        }
      }

      const Root = root(tree, BasicRoot);

      const BranchedCounter = branch({counter: 'counter'}, Counter);

      const wrapper = mount();
github Yomguithereal / baobab-react / deprecated_test / suites / wrappers.jsx View on Github external
it('should be possible to pass cursors directly.', function() {
    const tree = new Baobab({name: 'John', surname: 'Talbot'}, {asynchronous: false}),
          cursor = tree.select('name');

    class Child extends Component {
      render() {
        return (
          <span id="test">
            Hello {this.props.name} {this.props.surname}
          </span>
        );
      }
    }

    const group = (
github christianalfoni / flux-angular / dist / flux-angular.esm.js View on Github external
Store.prototype.immutable = function (initialState, options) {
    if (options === void 0) {
      options = {};
    }

    if (this.__tree) {
      this.__tree.set(initialState);
    } else {
      this.__tree = new Baobab(initialState, angular.extend({}, immutableDefaults, options));
    }

    return this.__tree;
  };

baobab

JavaScript persistent data tree with cursors.

MIT
Latest version published 3 years ago

Package Health Score

56 / 100
Full package analysis