baobab - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4

bower.json

 {
   "name": "baobab",
   "main": "build/baobab.min.js",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "homepage": "https://github.com/Yomguithereal/baobab",
@@ -6,0 +6,0 @@ "author": {

index.js

@@ -12,3 +12,3 @@ /**
 Object.defineProperty(Baobab, 'version', {
-  value: '0.4.3'
+  value: '0.4.4'
 });
@@ -15,0 +15,0 @@

package.json

 {
   "name": "baobab",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "JavaScript data tree with cursors.",
@@ -17,3 +17,2 @@ "main": "index.js",
     "gulp-mocha": "^2.0.0",
-    "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.5.3",
@@ -25,3 +24,4 @@ "gulp-uglify": "^1.0.2",
     "react": "^0.13.0",
-    "vinyl-transform": "^1.0.0"
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
@@ -28,0 +28,0 @@ "scripts": {

README.md

@@ -309,4 +309,8 @@ [![Build Status](https://travis-ci.org/Yomguithereal/baobab.svg)](https://travis-ci.org/Yomguithereal/baobab)
 
-You can bind a React component to the tree itself and register some handy cursors:
+You can bind a React component to a Baoba tree cursors. Cursors bound to a component will have their values attached to `this.state.cursor` (or `this.state.cursors` if registering multiple cursors).
 
+###### Single cursor binding:
+
+Registering a cursor is as simple as defining a path.
+
 ```jsx
@@ -320,3 +324,2 @@ var tree = new Baobab({
 
-// Single cursor
 var UserList = React.createClass({
@@ -326,5 +329,2 @@ mixins: [tree.mixin],
   render: function() {
-    var renderItem = function(name) {
-      return <li>{name}</li>;
-    };
 
@@ -336,7 +336,50 @@ // Cursor data is then available either through:
 
-    return <ul>{this.cursor.get().map(renderItem)}</ul>;
+    return <ul>{data.map(function(username) {
+      return <li>{username}</li>;
+    })}</ul>;
   }
 });
+```
 
-// Multiple cursors
+You can also use a function returning a cursor. This allows the component to be bound to a cursor passed through `this.props`, for instance.
+
+```jsx
+var tree = new Baobab({
+  users: ['John', 'Jack'],
+  information: {
+    title: 'My fancy App'
+  }
+});
+
+var UserGroupList = React.createClass({
+  mixins: [tree.mixin],
+  cursor: function() {
+    return this.props.usersCursor;
+  },
+  render: function() {
+    return <ul>{this.cursor.get().map(function(username) {
+        return <li>{username}</li>;
+    })}</ul>;
+  }
+}
+
+var users = tree.select('users');
+React.render(
+  <UserGroupList usersCursor={users}/>,
+  document.getElementById('mount-point')
+);
+```
+
+###### Multiple cursors binding:
+
+Similarly, to bind several cursors to a component, you can bind your component to a list of cursors.
+
+```jsx
+var tree = new Baobab({
+  users: ['John', 'Jack'],
+  information: {
+    title: 'My fancy App'
+  }
+});
+
 var UserList = React.createClass({
@@ -346,15 +389,8 @@ mixins: [tree.mixin],
   render: function() {
-    var renderItem = function(name) {
-      return <li>{name}</li>;
-    };
-
-    // Cursor data is then available either through:
-    var data = this.cursors[0].get();
-    // Or
-    var data = this.state.cursors[0];
-
     return (
       <div>
         <h1>{this.cursors[1].get()}</h1>
-        <ul>{this.cursors[0].get().map(renderItem)}</ul>
+        <ul>{this.cursors[0].get().map(function(name) {
+          return <li>{name}</li>;
+        })}</ul>
       </div>
@@ -364,4 +400,14 @@ );
 });
+```
 
-// Better multiple cursors
+To access cursors in an easier way, you can also bind your component to a map of cursors.
+
+```jsx
+var tree = new Baobab({
+  users: ['John', 'Jack'],
+  information: {
+    title: 'My fancy App'
+  }
+});
+
 var UserList = React.createClass({
@@ -374,15 +420,8 @@ mixins: [tree.mixin],
   render: function() {
-    var renderItem = function(name) {
-      return <li>{name}</li>;
-    };
-
-    // Cursor data is then available either through:
-    var data = this.cursors.users.get();
-    // Or
-    var data = this.state.cursors.users;
-
     return (
       <div>
         <h1>{this.cursors.title.get()}</h1>
-        <ul>{this.cursors.users.get().map(renderItem)}</ul>
+        <ul>{this.cursors.users.get().map(function(name) {
+          return <li>{name}</li>;
+        })}</ul>
       </div>
@@ -392,35 +431,39 @@ );
 });
-
-// Cursor(s) can also be specified using a function
-// (if you need props, for instance)
-var UserListItem = React.createClass({
-  mixins: [tree.mixin],
-  cursor: function() {
-    return ['users', this.props.index];
-  },
-  render: function() {
-    var name = this.cursor.get();
-    return <li>{name}</li>;
-  }
-});
 ```
 
-##### Cursor level
+Same with a function:
 
-Else you can bind a single cursor to a React component
-
 ```jsx
-var tree = new Baobab({users: ['John', 'Jack']}),
-    usersCursor = tree.select('users');
+var tree = new Baobab({
+  users: ['John', 'Jack'],
+  information: {
+    title: 'My fancy App'
+  }
+});
 
 var UserList = React.createClass({
-  mixins: [usersCursor.mixin],
+  mixins: [tree.mixin],
+  cursors: function() {
+    return {
+      users: this.props.usersCursor,
+      title: ['information', 'title']
+    }
+  },
   render: function() {
-    var renderItem = function(name) {
-      return <li>{name}</li>;
-    };
-
-    return <ul>{this.cursor.get().map(renderItem)}</ul>;
+    return (
+      <div>
+        <h1>{this.cursors.title.get()}</h1>
+        <ul>{this.cursors.users.get().map(function(name) {
+          return <li>{name}</li>;
+        })}</ul>
+      </div>
+    );
   }
 });
+
+var users = tree.select('users');
+React.render(
+  <UserList usersCursor={users}/>,
+  document.getElementById('mount-point')
+);
 ```
@@ -427,0 +470,0 @@

src/baobab.js

@@ -164,2 +164,5 @@ /**
 Baobab.prototype.select = function(path) {
+  if (!path)
+    throw Error('Baobab.select: invalid path.');
+
   if (arguments.length > 1)
@@ -208,3 +211,3 @@ path = helpers.arrayOf(arguments);
 Baobab.prototype.root = function() {
-  return this.select();
+  return this.select([]);
 };
@@ -211,0 +214,0 @@

src/cursor.js

@@ -368,3 +368,3 @@ /**
   delete this.path;
-  delete this.solvePath;
+  delete this.solvedPath;
 
@@ -371,0 +371,0 @@ // Killing emitter

src/helpers.js

@@ -44,3 +44,3 @@ /**
       item instanceof Error ||
-      item instanceof ArrayBuffer)
+      ('ArrayBuffer' in global && item instanceof ArrayBuffer))
     return item;
@@ -47,0 +47,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62912

increased by1.5%

Lines of code

1439

increased by0.14%

Number of lines in readme file

846

increased by5.35%

No dependency changes