Improved purely functional updates

Author: Vlad Balin

README.md

@@ -1,12 +1,15 @@
 Advanced React links for purely functional two-way data binding.
 
+React 15.x will remove valueLink support. This package is complete
+dependency-free implementation of valueLinks with powerful API extensions.
+
 - Implements standard React 0.14 links API
 - API extensions:
+    - Purely functional updates of enclosed objects and arrays.
     - Declarative binding to event handlers.
     - Simple form validation.
-    - Link to plain object and array members with pure updates.
-    - Derivative boolean links for checkbox and radio groups.
-- Reference implementation for 'linked' tags:
+    - Offhand boolean link creation for checkbox and radio groups.
+- Reference implementation for 'linked' tags (you'll need it with React 15.x):
     - Standard tags: `<Input />` (with validation), `<Select />`, `<TextArea />`
     - Custom tags: `<Radio />`, `<Checkbox />`
 
@@ -24,6 +27,12 @@ var list = linkToArray.map( ( itemLink, i ) => (
 > helping you to build large-scale React applications with a powerful and fast [NestedTypes](https://github.com/Volicon/NestedTypes/)
 > classical OO models.
 
+# Breaking API changes in version 1.1
+
+ - `link.update` is now performs **immediate purely functional link update**, shallow copying enclosed plain objects and arrays. 
+ - `link.action` behaves as `link.update` in 1.x. **Rename**.
+ - `link.toggle` is removed. Use `link.update( x => !x )` instead.
+
 # Installation
 
 `npm install valuelink`
@@ -62,10 +71,17 @@ import { Input } from 'valuelink/tags.jsx'
     <button onClick={ () => boolLink.set( !boolLink.value ) } />
     ```
 
-- Update link value: `link.update( prevValue => newValue )` 
+- Purely functional link value: `link.update( prevValue => newValue )`.
+        Plain objects and arrays are shallow copied by `update` and `action` functions,
+        thus it's safe just to update the value in place.   
 
     ```javascript
     <button onClick={ () => boolLink.update( x => !x ) } />
+        <button onClick={ () => objLink.update( obj => {
+                                    obj.a = 1;
+                                    return obj;
+                                }) } />
+
     ```
 
 - Create action to handle UI event: `link.action( ( prevValue, Event ) => newValue )`

app.js

@@ -20321,7 +20321,7 @@
 
 	    // Immediately update the link
 	    update: function update(transform, e) {
-	        var nextValue = transform(this.value, e);
+	        var nextValue = transform(clone(this.value), e);
 	        nextValue === void 0 || this.set(nextValue);
 	    },
 
@@ -20383,16 +20383,15 @@
 
 	    // link to enclosed object or array member
 	    at: function at(key) {
-	        var link = this;
-	
-	        return new Link(this.value[key], function (x) {
-	            if (this.value !== x) {
-	                var objOrArr = link.value;
-	                objOrArr = clone(objOrArr);
-	                objOrArr[key] = x;
-	                link.set(objOrArr);
-	            }
-	        });
+	        return new NestedLink(this, key);
+	        /*Link( this.value[ key ], function( x ){
+	         if( this.value !== x ){
+	         var objOrArr    = link.value;
+	         objOrArr        = clone( objOrArr );
+	         objOrArr[ key ] = x;
+	         link.set( objOrArr );
+	         }
+	         } );*/
 	    },
 
 	    // iterates through enclosed object or array, generating set of links
@@ -20415,39 +20414,27 @@
 	    }
 	});
 
-	function ArrayLink(link, key) {
+	function NestedLink(link, key) {
 	    this.value = link.value[key];
 	    this.parent = link;
 	    this.key = key;
 	}
 
-	ArrayLink.prototype = _Object$create(Link.prototype, {
-	    constructor: ArrayLink,
-	    set: function set(x) {
-	        if (this.value !== x) {
-	            var objOrArr = this.parent.value;
-	            objOrArr = clone(objOrArr);
-	            objOrArr[this.key] = x;
-	            this.parent.set(objOrArr);
-	        }
-	    },
-	
-	    remove: function remove() {
-	        var proto = objOrArray && Object.getPrototypeOf(objOrArray);
+	NestedLink.prototype = _Object$create(Link.prototype);
+	NestedLink.prototype.constructor = NestedLink;
+	NestedLink.prototype.set = function (x) {
+	    if (this.value !== x) {
+	        var key = this.key;
 
-	        if (proto === Array.prototype) {
-	            return objOrArray.splice();
-	        } else if (proto === Object.prototype) {
-	            var x = {};
-	            for (var i in objOrArray) x[i] = objOrArray[i];
-	            return x;
-	        }
+	        this.parent.update(function (parent) {
+	            parent[key] = x;
+	            return parent;
+	        });
 	    }
-	});
+	};
 
 	// Tools
 	// ============================================
-	
 	function mapObject(link, object, fun) {
 	    var res = [];
 

app.js.map

@@ -31,7 +31,7 @@ Link.prototype = {
 
     // Immediately update the link
     update : function( transform, e ){
-        var nextValue = transform( this.value, e );
+        var nextValue = transform( clone( this.value ), e );
         nextValue === void 0 || this.set( nextValue );
     },
 
@@ -90,16 +90,7 @@ Link.prototype = {
 
     // link to enclosed object or array member
     at : function( key ){
-        var link = this;
-
-        return new Link( this.value[ key ], function( x ){
-            if( this.value !== x ){
-                var objOrArr    = link.value;
-                objOrArr        = clone( objOrArr );
-                objOrArr[ key ] = x;
-                link.set( objOrArr );
-            }
-        } );
+        return new NestedLink( this, key );
     },
 
     // iterates through enclosed object or array, generating set of links
@@ -113,41 +104,27 @@ Link.prototype = {
     initialize  : function( value, set, error ){}
 };
 
-
-function ArrayLink( link, key ){
-    this.value = link.value[ key ];
+function NestedLink( link, key ){
+    this.value  = link.value[ key ];
     this.parent = link;
-    this.key = key;
+    this.key    = key;
 }
 
-ArrayLink.prototype = Object.create( Link.prototype, {
-    constructor : ArrayLink,
-    set : function( x ){
-        if( this.value !== x ){
-            var objOrArr    = this.parent.value;
-            objOrArr        = clone( objOrArr );
-            objOrArr[ this.key ] = x;
-            this.parent.set( objOrArr );
-        }
-    },
+NestedLink.prototype             = Object.create( Link.prototype );
+NestedLink.prototype.constructor = NestedLink;
+NestedLink.prototype.set         = function( x ){
+    if( this.value !== x ){
+        var key = this.key;
 
-    remove : function(){
-        var proto = objOrArray && Object.getPrototypeOf( objOrArray );
-
-        if( proto === Array.prototype ){
-            return objOrArray.splice();
-        }
-        else if( proto === Object.prototype ){
-            var x = {};
-            for( var i in objOrArray ) x[ i ] = objOrArray[ i ];
-            return x;
-        }
+        this.parent.update( function( parent ){
+            parent[ key ] = x;
+            return parent;
+        } );
     }
-});
+};
 
 // Tools
 // ============================================
-
 function mapObject( link, object, fun ){
     var res = [];