chore(pkg): New Flow React bindings, webpack 3, react-draggable 3

Author: STRML

examples/1.html

@@ -43,6 +43,8 @@
         display: block;
       }
     </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
     <script src="/bundle.js"></script>
     <title>React-Resizable</title>
   </head>

lib/Resizable.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import {DraggableCore} from 'react-draggable';
 import cloneElement from './cloneElement';
@@ -29,14 +29,13 @@ export type Props = {
   axis: Axis,
   minConstraints: [number, number],
   maxConstraints: [number, number],
-  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
+  onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
+  onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
+  onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object
 };
 
-export default class Resizable extends React.Component {
-
+export default class Resizable extends React.Component<Props, State> {
   static propTypes = {
     //
     // Required Props
@@ -78,7 +77,6 @@ export default class Resizable extends React.Component {
     // These will be passed wholesale to react-draggable's DraggableCore
     draggableOpts: PropTypes.object
   };
-  props: Props;
 
   static defaultProps =  {
     handleSize: [20, 20],
@@ -158,7 +156,7 @@ export default class Resizable extends React.Component {
    * @return {Function}           Handler function.
    */
   resizeHandler(handlerName: string): Function {
-    return (e: SyntheticEvent | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
+    return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
 
       // Axis restrictions
       const canDragX = this.props.axis === 'both' || this.props.axis === 'x';
@@ -198,7 +196,7 @@ export default class Resizable extends React.Component {
     };
   }
 
-  render(): React.Element<any> {
+  render(): React.Node {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,

lib/ResizableBox.js

@@ -1,18 +1,17 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import Resizable from './Resizable';
 import type {Props as ResizableProps, ResizeCallbackData} from './Resizable';
 
 type State = {width: number, height: number};
 
 // An example use of Resizable.
-export default class ResizableBox extends React.Component {
+export default class ResizableBox extends React.Component<ResizableProps, State> {
   static propTypes = {
     height: PropTypes.number,
     width: PropTypes.number
   };
-  props: ResizableProps;
 
   static defaultProps = {
     handleSize: [20,20]
@@ -23,7 +22,7 @@ export default class ResizableBox extends React.Component {
     height: this.props.height,
   };
 
-  onResize = (e: SyntheticEvent, data: ResizeCallbackData) => {
+  onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {
     const {size} = data;
     const {width, height} = size;
 
@@ -44,14 +43,13 @@ export default class ResizableBox extends React.Component {
     }
   }
 
-  render(): React.Element<any> {
+  render(): React.Node {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
     const {handleSize, onResize, onResizeStart, onResizeStop, draggableOpts,
          minConstraints, maxConstraints, lockAspectRatio, axis, width, height, ...props} = this.props;
     return (
-      // $FlowIgnore children & defaultProps bug (https://github.com/facebook/flow/issues/1964)
       <Resizable
         handleSize={handleSize}
         width={this.state.width}

lib/cloneElement.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 
 // React.addons.cloneWithProps look-alike that merges style & className.
 module.exports = function cloneElement(element: React.Element<any>, props: Object): React.Element<any> {

package.json

@@ -8,7 +8,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "bash build.sh",
     "build-example": "webpack",
-    "dev": "echo 'Open http://localhost:4003/examples/1.html' && cross-env NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --progress --hot --inline",
+    "dev": "webpack-dev-server --open --open-page=examples/1.html",
+    "watch": "webpack --progress --watch",
     "prepublish": "npm run build",
     "validate": "yarn list",
     "preversion": "npm run lint",
@@ -31,30 +32,30 @@
   },
   "homepage": "https://github.com/STRML/react-resizable",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "cross-env": "^5.0.0",
-    "css-loader": "^0.28.0",
-    "eslint": "^3.19.0",
-    "eslint-plugin-react": "^7.0.1",
-    "flow-bin": "^0.46.0",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.5",
+    "eslint": "^4.5.0",
+    "eslint-plugin-react": "^7.2.1",
+    "flow-bin": "^0.53.1",
     "lodash": "^4.3.0",
     "pre-commit": "^1.1.2",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "style-loader": "^0.18.1",
-    "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.5"
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
   },
   "dependencies": {
     "prop-types": "^15.5.8",
-    "react-draggable": "^2.2.6"
+    "react-draggable": "^2.2.6 || ^3.0.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",

test/TestLayout.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 import Resizable from '../lib/Resizable';
 import ResizableBox from '../lib/ResizableBox';
 import 'style-loader!css-loader!../css/styles.css';
 
-export default class TestLayout extends React.Component {
+export default class TestLayout extends React.Component<{}, {width: number, height: number}> {
   state = {width: 200, height: 200};
 
   onClick = () => {

test/test.js

@@ -1,5 +1,5 @@
 import TestLayout from './TestLayout';
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 
 document.addEventListener("DOMContentLoaded", function(event) {

webpack-dev-server.config.js

@@ -10,6 +10,8 @@ module.exports = {
     path: path.join(__dirname, "dist"),
     filename: "bundle.js",
     sourceMapFilename: "[file].map",
+    library: 'ReactResizable',
+    libraryTarget: 'umd'
   },
   externals: {
     'react': {
@@ -24,14 +26,23 @@ module.exports = {
       'commonjs2': 'react-dom',
       'amd': 'react-dom',
       'root': 'ReactDOM'
-    },
+    }
   },
   module: {
-    loaders: [
+    rules: [
       {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?cacheDirectory=true'},
     ]
   },
   resolve: {
     extensions: [".js"]
   },
+  devServer: {
+    contentBase: __dirname,
+    compress: true,
+    port: 4003,
+  },
+  plugins: [
+    // Scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+  ]
 };