Full ES6 update, all examples functioning again - ready to merge

Author: STRML

.babelrc

@@ -1,3 +1,10 @@
 {
-  "stage": 0
+  "stage": 0,
+  "env": {
+    "test": {
+      "plugins": [
+        "typecheck"
+      ]
+    }
+  }
 }

TODO.md

@@ -1,7 +1,7 @@
-'use strict';
-module.exports = function() {
-  throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable");
+export default function() {
+  throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable or " +
+                  "import {Resizable} from 'react-resizable'.");
 };
 
-module.exports.Resizable = require('./build/Resizable');
-module.exports.ResizableBox = require('./build/ResizableBox');
+export Resizable from './build/Resizable';
+export ResizableBox from './build/ResizableBox';

index.js

@@ -1,41 +1,50 @@
-'use strict';
-var React = require('react');
-var DraggableCore = require('react-draggable').DraggableCore;
-var assign = require('object-assign');
-var cloneElement = require('./cloneElement');
+import {default as React, PropTypes} from 'react';
+import {DraggableCore} from 'react-draggable';
+import assign from 'object-assign';
+import cloneElement from './cloneElement';
 
-var Resizable = module.exports = React.createClass({
-  displayName: 'Resizable',
+export default class Resizable extends React.Component {
+  static propTypes = {
+    //
+    // Required Props
+    //
 
-  propTypes: {
     // Require that one and only one child be present.
-    children: React.PropTypes.element.isRequired,
-    // Functions
-    onResizeStop: React.PropTypes.func,
-    onResizeStart: React.PropTypes.func,
-    onResize: React.PropTypes.func,
-
-    width: React.PropTypes.number.isRequired,
-    height: React.PropTypes.number.isRequired,
+    children: PropTypes.element.isRequired,
+
+    // Initial w/h
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+
+    //
+    // Optional props
+    //
+
     // If you change this, be sure to update your css
-    handleSize: React.PropTypes.array,
-    // These will be passed wholesale to react-draggable
-    draggableOpts: React.PropTypes.object
-  },
+    handleSize: PropTypes.array,
 
-  getDefaultProps() {
-    return {
-      handleSize: [20, 20]
-    };
-  },
+    // Min/max size
+    minConstraints: PropTypes.arrayOf(PropTypes.number),
+    maxConstraints: PropTypes.arrayOf(PropTypes.number),
 
-  getInitialState() {
-    return {
-      bounds: this.constraintsToBounds(),
-      width: this.props.width,
-      height: this.props.height
-    };
-  },
+    // Callbacks
+    onResizeStop: PropTypes.func,
+    onResizeStart: PropTypes.func,
+    onResize: PropTypes.func,
+
+    // These will be passed wholesale to react-draggable's DraggableCore
+    draggableOpts: PropTypes.object
+  };
+
+  static defaultProps =  {
+    handleSize: [20, 20]
+  };
+
+  state = {
+    bounds: this.constraintsToBounds(),
+    width: this.props.width,
+    height: this.props.height
+  };
 
   componentWillReceiveProps(props: Object) {
     if (!this.state.resizing) {
@@ -45,19 +54,19 @@ var Resizable = module.exports = React.createClass({
         bounds: this.constraintsToBounds()
       });
     }
-  },
+  }
 
   constraintsToBounds() {
-    var p = this.props;
-    var mins = p.minConstraints || p.handleSize;
-    var maxes = p.maxConstraints || [Infinity, Infinity];
+    let p = this.props;
+    let mins = p.minConstraints || p.handleSize;
+    let maxes = p.maxConstraints || [Infinity, Infinity];
     return {
       left: mins[0] - p.width,
       top: mins[1] - p.height,
       right: maxes[0] - p.width,
       bottom: maxes[1] - p.height
     };
-  },
+  }
 
   /**
    * Wrapper around drag events to provide more useful data.
@@ -66,23 +75,22 @@ var Resizable = module.exports = React.createClass({
    * @return {Function}           Handler function.
    */
   resizeHandler(handlerName: string) {
-    var me = this;
-    return function(e, {node, position}) {
-      let width = me.state.width + position.deltaX, height = me.state.height + position.deltaY;
-      me.props[handlerName] && me.props[handlerName](e, {node, size: {width, height}});
+    return (e, {node, position}) => {
+      let width = this.state.width + position.deltaX, height = this.state.height + position.deltaY;
+      this.props[handlerName] && this.props[handlerName](e, {node, size: {width, height}});
 
       if (handlerName === 'onResizeStart') {
-        me.setState({resizing: true});
+        this.setState({resizing: true});
       } else if (handlerName === 'onResizeStop') {
-        me.setState({resizing: false});
+        this.setState({resizing: false});
       } else {
-        me.setState({width, height});
+        this.setState({width, height});
       }
     };
-  },
+  }
 
   render() {
-    var p = this.props, s = this.state;
+    let p = this.props;
 
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
@@ -104,4 +112,4 @@ var Resizable = module.exports = React.createClass({
       ]
     }));
   }
-});
+}

lib/Resizable.jsx

@@ -1,40 +1,35 @@
-'use strict';
-var React = require('react');
-var PropTypes = React.PropTypes;
-var Resizable = require('./Resizable');
+import {default as React, PropTypes} from 'react';
+import Resizable from './Resizable';
 
-// An example use of Resizable.
 type Size = {width: number, height: number};
 type ResizeData = {element: Element, size: Size};
-var ResizableBox = module.exports = React.createClass({
-  displayName: 'ResizableBox',
 
-  propTypes: {
+// An example use of Resizable.
+export default class ResizableBox extends React.Component {
+  static propTypes = {
     lockAspectRatio: PropTypes.bool,
     minConstraints: PropTypes.arrayOf(PropTypes.number),
     maxConstraints: PropTypes.arrayOf(PropTypes.number),
     height: PropTypes.number,
     width: PropTypes.number
-  },
+  };
 
-  getDefaultProps() {
-    return {
-      lockAspectRatio: false,
-      handleSize: [20,20]
-    };
-  },
+  static defaultProps = {
+    lockAspectRatio: false,
+    handleSize: [20,20]
+  };
 
-  getInitialState() {
-    return {
-      width: this.props.width,
-      height: this.props.height,
-      aspectRatio: this.props.width / this.props.height
-    };
-  },
+  state = {
+    width: this.props.width,
+    height: this.props.height,
+    aspectRatio: this.props.width / this.props.height
+  };
 
-  onResize(event: Event, {element, size}: ResizeData) {
-    var {width, height} = size;
-    var widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
+  // TODO data is ResizeData type, but that doesn't work in babel-typecheck pre-babel6
+  onResize = (event: Event, data: Object) => {
+    let {element, size} = data;
+    let {width, height} = size;
+    let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
     if (!widthChanged && !heightChanged) return;
 
     [width, height] = this.runConstraints(width, height);
@@ -44,11 +39,11 @@ var ResizableBox = module.exports = React.createClass({
         this.props.onResize(event, {element, size: {width, height}});
       }
     });
-  },
+  }
 
   // If you do this, be careful of constraints
   runConstraints(width: number, height: number) {
-    var [min, max] = [this.props.minConstraints, this.props.maxConstraints];
+    let [min, max] = [this.props.minConstraints, this.props.maxConstraints];
 
     if (this.props.lockAspectRatio) {
       height = width / this.state.aspectRatio;
@@ -64,13 +59,13 @@ var ResizableBox = module.exports = React.createClass({
       height = Math.min(max[1], height);
     }
     return [width, height];
-  },
+  }
 
   render() {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the component
     // with a new width and height.
-    var {handleSize, minConstraints, maxConstraints, ...props} = this.props;
+    let {handleSize, minConstraints, maxConstraints, ...props} = this.props;
     return (
       <Resizable
         minConstraints={minConstraints}
@@ -89,4 +84,4 @@ var ResizableBox = module.exports = React.createClass({
       </Resizable>
     );
   }
-});
+}

lib/ResizableBox.jsx

@@ -1,7 +1,5 @@
-'use strict';
-
-var assign = require('object-assign');
-var React = require('react');
+import assign from 'object-assign';
+import React from 'react';
 
 // React.addons.cloneWithProps look-alike that merges style & className.
 module.exports = function cloneElement(element: React.Component, props: Object) {

lib/cloneElement.js

@@ -8,7 +8,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "bash build.sh",
     "build-example": "webpack",
-    "dev": "echo 'Open http://localhost:4002/examples/1.html'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .",
+    "dev": "echo 'Open http://localhost:4002/examples/1.html'; NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .",
     "prepublish": "npm run build",
     "validate": "npm ls"
   },
@@ -33,27 +33,26 @@
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
     "babel-plugin-typecheck": "^1.3.0",
-    "css-loader": "^0.21.0",
-    "eslint": "^1.7.3",
-    "eslint-plugin-react": "^3.6.3",
+    "css-loader": "^0.23.0",
+    "eslint": "^1.9.0",
+    "eslint-plugin-react": "^3.8.0",
     "lodash": "^3.10.1",
     "pre-commit": "^1.1.2",
-    "react": "^0.14.0",
-    "react-hot-loader": "^1.3.0",
+    "react": "^0.14.2",
+    "react-dom": "^0.14.2",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.2",
+    "webpack": "^1.12.6",
     "webpack-dev-server": "^1.12.1"
   },
   "dependencies": {
     "object-assign": "^4.0.1",
-    "react-draggable": "^1.0.0"
+    "react-draggable": "^1.1.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "pre-commit": [
     "lint",
-    "validate",
-    "test"
+    "validate"
   ]
 }

package.json

@@ -1,24 +1,18 @@
-'use strict';
-var React = require('react');
-var _ = require('lodash');
-var ResizableBox = require('../lib/ResizableBox.jsx');
-var Resizable = require('../lib/Resizable.jsx');
-require('style!css!../css/styles.css');
+import React from 'react';
+import Resizable from '../lib/Resizable';
+import ResizableBox from '../lib/ResizableBox';
+import 'style!css!../css/styles.css';
 
-var TestLayout = module.exports = React.createClass({
-  displayName: 'TestLayout',
+export default class TestLayout extends React.Component {
+  state = {width: 200, height: 200};
 
-  getInitialState() {
-    return {width: 200, height: 200};
-  },
-
-  onClick() {
+  onClick = () => {
     this.setState({width: 200, height: 200});
-  },
+  };
 
-  onResize(event, {element, size}) {
+  onResize = (event, {element, size}) => {
     this.setState({width: size.width, height: size.height});
-  },
+  };
 
   render() {
     return (
@@ -51,4 +45,4 @@ var TestLayout = module.exports = React.createClass({
       </div>
     );
   }
-});
+}

test/TestLayout.jsx

@@ -1,8 +1,8 @@
-'use strict';
-var Layout = require('./TestLayout.jsx');
-var React = require('react');
-var ReactDOM = require('react-dom');
+import TestLayout from './TestLayout';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
 document.addEventListener("DOMContentLoaded", function(event) {
   var contentDiv = document.getElementById('content');
-  ReactDOM.render(React.createElement(Layout), contentDiv);
+  ReactDOM.render(React.createElement(TestLayout), contentDiv);
 });

test/test.js

@@ -12,8 +12,7 @@ module.exports = {
     },
     module: {
       loaders: [
-        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'},
-        {test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader'}
+        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}
       ]
     },
     debug: true,