ryanflorence · everdimension · Jan 19, 2016 · Jan 19, 2016 · Jan 19, 2016 · Jan 29, 2016
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+	"presets": ["react"]
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,6 @@
-examples/**/*-bundle.js
+examples/__build__
+modules/lib
+node_modules
+
+.DS_Store
+.DS_Store?
diff --git a/examples/basic/app.js b/examples/basic/app.js
@@ -1,5 +1,5 @@
-/** @jsx React.DOM */
 var React = require('react');
+var ReactDOM = require('react-dom');
 var MagicMove = require('react-magic-move');
 
 var App = React.createClass({
@@ -37,7 +37,7 @@ var App = React.createClass({
   }
 });
 
-React.render(<App/>, document.getElementById('example'));
+ReactDOM.render(<App/>, document.getElementById('example'));
 
 function shuffled() {
   return shuffle(getStates());

diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -3,5 +3,5 @@
 <link href="app.css" rel="stylesheet"/>
 <body>
 <div id="example"></div>
-<script src="/__build__/shared.js"></script>
-<script src="/__build__/basic.js"></script>
+<script src="../__build__/shared.js"></script>
+<script src="../__build__/basic.js"></script>
diff --git a/examples/buddy-list/app.js b/examples/buddy-list/app.js
@@ -1,5 +1,5 @@
-/** @jsx React.DOM */
 var React = require('react');
+var ReactDOM = require('react-dom');
 var MagicMove = require('react-magic-move');
 
 var buddies = [
@@ -83,6 +83,4 @@ function sortBy(key, arr) {
   });
 }
 
-React.render(<App/>, document.getElementById('example'));
-
-
+ReactDOM.render(<App/>, document.getElementById('example'));
diff --git a/examples/buddy-list/index.html b/examples/buddy-list/index.html
@@ -3,5 +3,5 @@
 <link href="app.css" rel="stylesheet"/>
 <body>
 <div id="example"></div>
-<script src="/__build__/shared.js"></script>
-<script src="/__build__/buddy-list.js"></script>
+<script src="../__build__/shared.js"></script>
+<script src="../__build__/buddy-list.js"></script>
diff --git a/modules/components/MagicMove.js → modules/src/components/MagicMove.js b/modules/components/MagicMove.js → modules/src/components/MagicMove.js
@@ -1,6 +1,5 @@
-/* @jsx React.DOM */
 var React = require('react');
-var cloneWithProps = require('react/lib/cloneWithProps');
+var ReactDOM = require('react-dom');
 
 var Clones = React.createClass({
   displayName: 'MagicMoveClones',
@@ -10,7 +9,7 @@ var Clones = React.createClass({
     React.Children.forEach(this.props.children, (child) => {
       var style = this.props.positions[child.key];
       var key = child.key;
-      children.push(cloneWithProps(child, { style, key }));
+      children.push(React.cloneElement(child, { style, key }));
     });
     return children.sort(function (a, b) {
       return (a.key < b.key) ? -1 : (a.key > b.key) ? 1 : 0;
@@ -76,16 +75,19 @@ var MagicMove = React.createClass({
     if (this.state.animating)
       return;
     this.addTransitionEndEvent();
-    nextProps.animating = true;
-    nextProps.positions = this.getPositions();
-    this.renderClones(nextProps, () => {
+    var updatedProps = Object.assign({}, nextProps, {
+        animating: true,
+        positions: this.getPositions()
+    });
+    this.renderClones(updatedProps, () => {
       this.setState({ animating: true });
     });
   },
 
   renderClonesToNewPositions (prevProps) {
-    prevProps.positions = this.getPositions();
-    this.renderClones(prevProps);
+    var positions = this.getPositions();
+    var updatedProps = Object.assign({}, prevProps, { positions });
+    this.renderClones(updatedProps);
   },
 
   finishAnimation () {
@@ -98,7 +100,7 @@ var MagicMove = React.createClass({
     var positions = {};
     React.Children.forEach(this.props.children, (child) => {
       var ref = child.key;
-      var node = this.refs[ref].getDOMNode();
+      var node = this.refs[ref];
       var rect = node.getBoundingClientRect();
       var computedStyle = getComputedStyle(node);
       var marginTop = parseInt(computedStyle.marginTop, 10);
@@ -116,18 +118,21 @@ var MagicMove = React.createClass({
   },
 
   renderClonesInitially () {
-    this.props.positions = this.getPositions();
-    React.render(<Clones {...this.props}/>, this.portalNode);
+    var positions = this.getPositions();
+    var updatedProps = Object.assign({}, this.props, {
+        positions
+    });
+    ReactDOM.render(<Clones {...updatedProps}/>, this.portalNode);
   },
 
   renderClones (props, cb) {
     this.portalNode.style.position = '';
-    React.render(<Clones {...props}/>, this.portalNode, cb);
+    ReactDOM.render(<Clones {...props}/>, this.portalNode, cb);
   },
 
   childrenWithRefs () {
     return React.Children.map(this.props.children, (child) => {
-      return cloneWithProps(child, { ref: child.key});
+      return React.cloneElement(child, { ref: child.key });
     });
   },
 

diff --git a/modules/index.js → modules/src/index.js b/modules/index.js → modules/src/index.js
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "react-magic-move",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "MagicMove for React.js",
-  "main": "./modules/index",
+  "main": "./modules/lib/index",
   "repository": {
     "type": "git",
     "url": "https://github.com/rpflorence/react-magic-move.git"
@@ -13,28 +13,30 @@
     "example": "examples"
   },
   "scripts": {
+    "build": "babel ./modules/src --out-dir ./modules/lib",
+    "prepublish": "npm run build",
+    "postinstall": "node -e \"require('fs').stat('modules/lib', function (e, s) { process.exit(e || !s.isDirectory() ? 1 : 0) })\" || npm run build",
+    "build:example": "webpack",
     "test": "echo 'no tests yet' && exit 0"
   },
   "authors": [
     "Ryan Florence"
   ],
   "license": "MIT",
+  "dependencies": {
+    "babel-cli": "6.4.5",
+    "babel-preset-react": "6.3.13",
+    "rf-release": "0.4.0"
+  },
   "devDependencies": {
-    "browserify": "4.2.3",
-    "browserify-shim": "^3.8.0",
-    "bundle-loader": "0.5.1",
-    "envify": "1.2.0",
-    "jsx-loader": "0.12.0",
-    "react": "0.12.x",
-    "reactify": "^0.17.1",
-    "rf-release": "0.4.0",
-    "uglify-js": "^2.4.15",
-    "uglifyjs": "^2.3.6",
+    "babel-core": "^6.7.2",
+    "react": "0.14.6",
+    "react-dom": "0.14.6",
     "webpack": "1.4.5",
     "webpack-dev-server": "1.6.5"
   },
   "peerDependencies": {
-    "react": "0.12.x"
+    "react": "0.14.x"
   },
   "tags": [
     "react",
@@ -44,8 +46,5 @@
     "react",
     "react-component",
     "animation"
-  ],
-  "browserify-shim": {
-    "react": "global:React"
-  }
-}
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -35,13 +35,13 @@ module.exports = {
 
   module: {
     loaders: [
-      { test: /\.js$/, loader: 'jsx-loader?harmony' }
+      { test: /\.js$/, loader: 'babel' }
     ]
   },
 
   resolve: {
     alias: {
-      'react-magic-move': '../../modules/index'
+      'react-magic-move': '../../modules/lib/index'
     }
   },