Merge remote-tracking branch 'refs/remotes/origin/develop'

# Conflicts:
#	README.md
#	examples/todomvc/app.js
#	examples/todomvc/app.js.map
#	nestedreact.js
#	nestedreact.js.map
#	package.json

Author: Vlad Balin

examples/todomvc/js/main.jsx

@@ -1,40 +1,47 @@
 import 'css/app.css'
 import React from 'nestedreact'
 import ReactDOM from 'react-dom'
-import { ToDo, LocalStorage } from './model.js'
+import {ToDo} from './model.js'
 import TodoList from './todolist.jsx'
 import Filter from './filter.jsx'
 import AddTodo from './addtodo.jsx'
 
 const App = React.createClass( {
-    Model : LocalStorage,
-
+    // Declare component state
     state : {
-        id         : 'todo-mvc',
         todos      : ToDo.Collection,
-        filterDone : Boolean.value( null )
+        filterDone : Boolean.value( null ) // null | true | false, initialized with null.
     },
 
     componentWillMount(){
-        this.state.fetch();
-        window.onunload = () => this.state.save();
+        const { state } = this,
+              // load raw JSON from local storage
+              json = JSON.parse( localStorage.getItem( 'todo-mvc' ) || "{}" );
+
+        // initialize state with raw JSON
+        state.set( json, { parse : true } );
+
+        window.onunload = () =>{
+            // Save state back to the local storage
+            localStorage.setItem( 'todo-mvc', JSON.stringify( state ) );
+        }
     },
 
     render(){
-        const { state } = this,
-              hasTodos = Boolean( state.todos.length );
+        const { todos, filterDone } = this.state,
+              hasTodos = Boolean( todos.length );
 
         return (
             <div>
                 <section className="todoapp">
-                    <AddTodo onEnter={ desc => state.todos.add({ desc : desc }) }/>
+                    <AddTodo onEnter={ desc => todos.add({ desc : desc }) }/>
 
-                    { hasTodos && <TodoList todos={ state.todos }
-                                            filterDone={ state.filterDone }/> }
+                    { hasTodos && <TodoList todos={ todos }
+                                            filterDone={ filterDone }/> }
 
-                    { hasTodos && <Filter count={ state.todos.activeCount }
-                                          filterLink={ state.getLink( 'filterDone' )}
-                                          onClear={ () => state.todos.clearCompleted() }
+                    { hasTodos && <Filter count={ todos.activeCount }
+                                          filterLink={ this.state.getLink( 'filterDone' ) }
+                                          onClear={ () => todos.clearCompleted() }
                     />}
                 </section>
 

examples/todomvc/js/model.js

@@ -34,22 +34,3 @@ export const ToDo = Model.extend({
 		}
 	}
 });
-
-export const LocalStorage = Model.extend({
-	fetch(){
-		if( this.id ){
-			const json = localStorage.getItem( this.id );
-			json && ( this.set( JSON.parse( json ), { parse: true }) );
-		}
-	},
-
-	save( attrs ){
-		if( attrs ){
-			this.set( attrs );
-		}
-
-		if( this.id ){
-			localStorage.setItem( this.id, JSON.stringify( this ) );
-		}
-	}
-});

examples/todomvc/js/todolist.jsx

@@ -18,8 +18,7 @@ const TodoList = React.createClass( {
 
     render(){
         const { todos, filterDone } = this.props,
-              filtered = filterDone === null ?
-                            todos.models
+              filtered = filterDone === null ? todos.models
                             : todos.filter( todo => todo.done === filterDone ),
 
               editingLink = this.state.getLink( 'editing' );
@@ -62,7 +61,7 @@ const TodoItem = ( { todo, editingLink } ) =>{
                 <Input className="toggle" type="checkbox"
                        checkedLink={ todo.getLink( 'done' ) }/>
 
-                <label onDoubleClick={ () => editingLink.set( todo ) }>
+                <label onDoubleClick={ editingLink.action( () => todo ) }>
                     { todo.desc }
                 </label>
 
@@ -72,7 +71,7 @@ const TodoItem = ( { todo, editingLink } ) =>{
             { editing && <Input className="edit"
                                 valueLink={ todo.getLink( 'desc' ) }
                                 autoFocus={ true }
-                                onBlur={ () => editingLink.set( null ) }
+                                onBlur={ editingLink.action( () => null ) }
                                 onKeyDown={ editingLink.action( clearOnEnter ) }/> }
         </li>
     );

examples/todomvc/package.json

@@ -12,10 +12,10 @@
     "classnames": "^2.2.0",
     "css-loader": "^0.23.0",
     "jquery": "^2.1.4",
-    "nestedreact": "^0.6.0-rc0",
+    "nestedreact": "^1.0.0-rc0",
     "nestedtypes": "^1.3.2-rc0",
-    "react": "^0.14.2",
-    "react-dom": "^0.14.2",
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0",
     "react-router": "^1.0.0",
     "style-loader": "^0.13.0",
     "underscore": "^1.8.3",

examples/userslist/README.md

@@ -0,0 +1,15 @@
+# UsersList Example
+
+Here's the UsersList application example, written originally for NestedLink.
+
+It's changed to use NestedReact. Feel the difference.
+
+NestedLink data binding is so powerful that there are no any difference
+in size, so expressiveness is roughly the same.
+
+But. Check out how much less magical NestedReact solution feels - compare the code.
+
+In fact, there's an incredible amount of dirty magic involved,
+just to make you feel that there are no any magic at all :).
+
+That's NestedReact. Relax, and write in natural way, no tricks are required.