From 04ef0262af6f77b898d307d87a49488afda0059a Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 20 Apr 2016 22:21:07 +0100
Subject: [PATCH 1/3] Various fixes to the velociraptor

* handle having a single child, rather than an array of children

* Correctly animate children which are added at the same time as the
  Velociraptor, rather than added afterwards

* Set the child to hidden at the end of the initial animation, if that is
  required by the style property.
---
 src/Velociraptor.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index 066b1e2d05..a3e013a2b4 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -13,25 +13,24 @@ module.exports = React.createClass({
     displayName: 'Velociraptor',
 
     propTypes: {
-        children: React.PropTypes.array,
+        // either a list of child nodes, or a single child.
+        children: React.PropTypes.any,
+
+        // optional transition information for changing existing children
         transition: React.PropTypes.object,
-        container: React.PropTypes.string
     },
 
     componentWillMount: function() {
         this.children = {};
         this.nodes = {};
-        var self = this;
-        React.Children.map(this.props.children, function(c) {
-            self.children[c.key] = c;
-        });
+        this.componentWillReceiveProps(this.props);
     },
 
     componentWillReceiveProps: function(nextProps) {
         var self = this;
         var oldChildren = this.children;
         this.children = {};
-        React.Children.map(nextProps.children, function(c) {
+        React.Children.toArray(nextProps.children).forEach(function(c) {
             if (oldChildren[c.key]) {
                 var old = oldChildren[c.key];
                 var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
@@ -92,22 +91,23 @@ module.exports = React.createClass({
                 //console.log("start: "+JSON.stringify(startStyles[i]));
             }
             // and then we animate to the resting state
-            Velocity(domNode, node.props._restingStyle, transitionOpts[i-1]);
+            Velocity(domNode, node.props._restingStyle,
+                     transitionOpts[i-1])
+            .then(() => {
+                // once we've reached the resting state, hide the element if
+                // appropriate
+                domNode.style.visibility = node.props._restingStyle.visibility;
+            });
+
             //console.log("enter: "+JSON.stringify(node.props._restingStyle));
         }
         this.nodes[k] = node;
     },
 
     render: function() {
-        var self = this;
-        var childList = Object.keys(this.children).map(function(k) {
-            return React.cloneElement(self.children[k], {
-                ref: self.collectNode.bind(self, self.children[k].key)
-            });
-        });
         return (
             <span>
-                {childList}
+                {Object.values(this.children)}
             </span>
         );
     },

From e5e9a3819e1a909cfe67f9d4e9be164418a678b9 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 21 Apr 2016 08:09:40 +0100
Subject: [PATCH 2/3] Load babel-polyfill in tests

Object.values() isn't available natively, so use polyfill for it.
---
 package.json        | 1 +
 test/skinned-sdk.js | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/package.json b/package.json
index c956560739..731ae6cfbb 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "babel": "^5.8.23",
     "babel-core": "^5.8.38",
     "babel-loader": "^5.4.0",
+    "babel-polyfill": "^6.5.0",
     "expect": "^1.16.0",
     "json-loader": "^0.5.3",
     "karma": "^0.13.22",
diff --git a/test/skinned-sdk.js b/test/skinned-sdk.js
index 5d3526b797..869902dcf6 100644
--- a/test/skinned-sdk.js
+++ b/test/skinned-sdk.js
@@ -5,6 +5,14 @@
  * application to provide
  */
 
+/* this is a convenient place to ensure we load the compatibility libraries we expect our
+ * app to provide
+ */
+
+// for ES6 stuff like startsWith() and Object.values() that babel doesn't do by
+// default
+require('babel-polyfill');
+
 var sdk = require("../src/index");
 
 var skin = require('../src/component-index.js');

From f09861794d41c62238a9dbbeea4ffcc171114d18 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 21 Apr 2016 14:14:08 +0100
Subject: [PATCH 3/3] Avoid having react interface methods call each other

Factor out the common bits of componentWillMount and componentWillReceiveProps
to a common function.
---
 src/Velociraptor.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index a3e013a2b4..ad12d1323b 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -21,16 +21,22 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
-        this.children = {};
         this.nodes = {};
-        this.componentWillReceiveProps(this.props);
+        this._updateChildren(this.props.children);
     },
 
     componentWillReceiveProps: function(nextProps) {
+        this._updateChildren(nextProps.children);
+    },
+
+    /**
+     * update `this.children` according to the new list of children given
+     */
+    _updateChildren: function(newChildren) {
         var self = this;
-        var oldChildren = this.children;
+        var oldChildren = this.children || {};
         this.children = {};
-        React.Children.toArray(nextProps.children).forEach(function(c) {
+        React.Children.toArray(newChildren).forEach(function(c) {
             if (oldChildren[c.key]) {
                 var old = oldChildren[c.key];
                 var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);