Merge pull request #27 from twitter-fabric/react-0.14

fionawhim · fionawhim · commit cce5f34a0c67 · 2015-10-08T09:42:08.000-04:00
Updates to React 0.14
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+### v1.1.0 (2015-10-08):
+
+Updated peerDependencies and requires to React 0.14.
+
+If you need to work with React 0.13, use v1.0.1.
+
+Special thanks to @jmfurlott for help updating everything that needed updating.
+
 ### v1.0.1 (2015-10-05):
 
 #### Bug fixes
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 Read our [announcement blog post](https://fabric.io/blog/introducing-the-velocityreact-library) for
 details about why and how we built this.
 
-**Latest version:** 1.0.1 shims out Velocity to be compatible with server-side rendering
+**Latest version:** 1.1.0 is updated to require React 0.14
 
 ## Running the demo
 
@@ -36,8 +36,8 @@ utilities, are distributed as ES5-compatible JavaScript files with [CommonJS](ht
 This package depends directly on Velocity, as well as [lodash](https://lodash.com/) for a handful
 of utility functions (which are required individually to try and keep bundle size down).
 
-It is assumed that your application already depends on React 0.13. Support for React 0.14 
-release candidates is coming soon.
+It is assumed that your application already depends on `react` and `react-dom` at v0.14. If you're
+still at React 0.13, use v1.0.1 of this package. Other than dependencies, it is the same as v1.1.0.
 
 ## Usage
 
@@ -146,6 +146,11 @@ You will need to manually register the UI Pack with the global Velocity in your
   require('velocity-animate/velocity.ui');
 ```
 
+If, even with the above statements, you see errors like `Velocity: First argument
+(transition.shrinkIn) was not a property map, a known action, or a registered redirect. Aborting.`
+it is likely that there are 2 copies of `velocity-animate` in your `node_modules`. Use `npm dedupe`
+to collapse them down to one.
+
 See: http://julian.com/research/velocity/#uiPack
 
 ### Server-side rendering
diff --git a/demo/app.js b/demo/app.js
@@ -1,4 +1,5 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
 var MainComponent = require('./main');
 
-React.render(React.createElement(MainComponent), document.body);
+ReactDOM.render(React.createElement(MainComponent), document.getElementById('app'));
diff --git a/demo/index.html b/demo/index.html
@@ -31,6 +31,7 @@
 </head>
 
 <body>
+  <div id="app"></div>
   <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "velocity-react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React components to wrap Velocity animations",
   "main": "index.js",
   "scripts": {
@@ -23,16 +23,19 @@
   "homepage": "https://github.com/crashlytics/velocity-react#readme",
   "dependencies": {
     "lodash": "^3.10.1",
+    "react-addons-transition-group": "^0.14.0",
     "velocity-animate": "^1.2.3"
   },
   "peerDependencies": {
-    "react": "^0.13.0"
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
   "devDependencies": {
     "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
     "css-loader": "^0.19.0",
-    "react": "^0.13.3",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
     "react-hot-loader": "^1.2.9",
     "react-tween-state": "^0.1.3",
     "style-loader": "^0.12.3",
diff --git a/velocity-component.js b/velocity-component.js
@@ -39,6 +39,7 @@ var _ = {
   omit: require('lodash/object/omit'),
 };
 var React = require('react');
+var ReactDOM = require('react-dom');
 var Velocity = require('./lib/velocity-animate-shim');
 
 var VelocityComponent = React.createClass({
@@ -122,7 +123,7 @@ var VelocityComponent = React.createClass({
   // because of difficulty in tracking what animations are currently being animated, due to both
   // chained animations and the need to be able to "stop" an animation before it begins.)
   _getDOMTarget: function () {
-    var node = React.findDOMNode(this);
+    var node = ReactDOM.findDOMNode(this);
 
     if (this.props.targetQuerySelector === 'children') {
       return node.children;
diff --git a/velocity-transition-group.js b/velocity-transition-group.js
@@ -39,7 +39,9 @@ var _ = {
   omit: require('lodash/object/omit'),
   pluck: require('lodash/collection/pluck'),
 };
-var React = require('react/addons');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var ReactTransitionGroup = require('react-addons-transition-group');
 var Velocity = require('./lib/velocity-animate-shim');
 
 // Internal wrapper for the transitioned elements. Delegates all child lifecycle events to the
@@ -55,15 +57,15 @@ var VelocityTransitionGroupChild = React.createClass({
   },
 
   componentWillAppear: function (doneFn) {
-    this.props.willAppearFunc(React.findDOMNode(this), doneFn);
+    this.props.willAppearFunc(ReactDOM.findDOMNode(this), doneFn);
   },
 
   componentWillEnter: function (doneFn) {
-    this.props.willEnterFunc(React.findDOMNode(this), doneFn);
+    this.props.willEnterFunc(ReactDOM.findDOMNode(this), doneFn);
   },
 
   componentWillLeave: function (doneFn) {
-    this.props.willLeaveFunc(React.findDOMNode(this), doneFn);
+    this.props.willLeaveFunc(ReactDOM.findDOMNode(this), doneFn);
   },
 
   render: function () {
@@ -114,7 +116,7 @@ var VelocityTransitionGroup = React.createClass({
       transitionGroupProps.childFactory = this._wrapChild;
     }
 
-    return React.createElement(React.addons.TransitionGroup, transitionGroupProps, this.props.children);
+    return React.createElement(ReactTransitionGroup, transitionGroupProps, this.props.children);
   },
 
   childWillAppear: function (node, doneFn) {
