chore(pkg): Upgrade to webpack 2

Author: STRML

build.sh

@@ -1,5 +1,12 @@
-#!/bin/bash
+#!/bin/bash -ex
 rm -rf ./build
+
+# Simple babel run
 ./node_modules/.bin/babel --out-dir ./build ./lib
-# More cross-platform compatible than `rename`
-find ./build -type f -name '*.jsx' -exec sh -c 'mv -f $0 ${0%.jsx}.js' {} \;
+
+# Gen flow configs
+# When https://github.com/facebook/flow/issues/2830 et al are fixed we can use this, but not until then
+# find ./lib -type f -name '*.js' -exec sh -c "$BIN/flow gen-flow-files \$0 --out-dir build" {} \;
+
+# Copy original source as js.flow; flow will pick them up
+find ./lib -type f -name '*.js' -exec sh -c 'cp $0 build/$(basename $0).flow' {} \;

lib/Resizable.jsx lib/Resizable.jslib/Resizable.jsx renamed to lib/Resizable.js

@@ -4,20 +4,6 @@ import PropTypes from 'prop-types';
 import {DraggableCore} from 'react-draggable';
 import cloneElement from './cloneElement';
 
-export type Props = {
-  children: React.Element<any>,
-  width: number,
-  height: number,
-  handleSize: [number, number],
-  lockAspectRatio: boolean,
-  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,
-  draggableOpts?: ?Object
-};
 type Axis = 'both' | 'x' | 'y' | 'none';
 type Position = {
 
@@ -37,8 +23,22 @@ type ResizeCallbackData = {
   node: HTMLElement,
   size: {width: number, height: number}
 };
+export type Props = {
+  children: React.Element<any>,
+  width: number,
+  height: number,
+  handleSize: [number, number],
+  lockAspectRatio: boolean,
+  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,
+  draggableOpts?: ?Object
+};
 
-export default class Resizable extends React.Component {
+class Resizable extends React.Component {
 
   static propTypes = {
     //
@@ -233,3 +233,5 @@ export default class Resizable extends React.Component {
     });
   }
 }
+
+export default Resizable;

lib/ResizableBox.jsx lib/ResizableBox.jslib/ResizableBox.jsx renamed to lib/ResizableBox.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:4003/examples/1.html' && cross-env NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4003 --content-base .",
+    "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",
     "prepublish": "npm run build",
     "validate": "yarn list",
     "preversion": "npm run lint",
@@ -33,8 +33,8 @@
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.1",
-    "babel-loader": "^6.4.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
     "babel-plugin-transform-flow-comments": "^6.7.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
@@ -43,18 +43,18 @@
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
     "eslint-plugin-react": "^6.10.3",
-    "flow-bin": "^0.43.1",
+    "flow-bin": "^0.45.0",
     "lodash": "^4.3.0",
     "pre-commit": "^1.1.2",
     "prop-types": "^15.5.8",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "style-loader": "^0.16.1",
-    "webpack": "^1.12.13",
-    "webpack-dev-server": "^1.14.1"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "style-loader": "^0.17.0",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
-    "react-draggable": "^2.1.0"
+    "react-draggable": "^2.2.6"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",

package.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import Resizable from '../lib/Resizable';
 import ResizableBox from '../lib/ResizableBox';
-import 'style!css!../css/styles.css';
+import 'style-loader!css-loader!../css/styles.css';
 
 export default class TestLayout extends React.Component {
   state = {width: 200, height: 200};

test/TestLayout.jsx test/TestLayout.jstest/TestLayout.jsx renamed to test/TestLayout.js

@@ -1,23 +1,33 @@
+const webpack = require('webpack');
+const path = require('path');
+
 module.exports = {
-    context: __dirname,
-    entry: [
-      "webpack-dev-server/client?http://localhost:4002",
-      "webpack/hot/dev-server",
-      "./test/test.js",
-    ],
-    output: {
-        path: __dirname + "/dist",
-        filename: "bundle.js",
-        sourceMapFilename: "[file].map",
-    },
-    module: {
-      loaders: [
-        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?cacheDirectory=true'}
-      ]
-    },
-    debug: true,
-    devtool: "eval",
-    resolve: {
-      extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"]
-    }
+  context: __dirname,
+  entry: {
+    test: "./test/test.js",
+  },
+  output: {
+    path: path.join(__dirname, "dist"),
+    filename: "bundle.js",
+    sourceMapFilename: "[file].map",
+  },
+  module: {
+    rules: [
+      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?cacheDirectory=true'},
+    ]
+  },
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      debug: true
+    })
+  ],
+  devtool: "eval",
+  resolve: {
+    extensions: [".js"]
+  },
+  devServer: {
+    contentBase: __dirname,
+    compress: true,
+    port: 4003,
+  }
 };

webpack-dev-server.config.js

@@ -1,34 +1,37 @@
+const webpack = require('webpack');
+const path = require('path');
+
 module.exports = {
-    context: __dirname,
-    entry: [
-      "./test/test.js",
-    ],
-    output: {
-        path: __dirname + "/dist",
-        filename: "bundle.js",
-        sourceMapFilename: "[file].map",
+  context: __dirname,
+  entry: {
+    test: "./test/test.js",
+  },
+  output: {
+    path: path.join(__dirname, "dist"),
+    filename: "bundle.js",
+    sourceMapFilename: "[file].map",
+  },
+  externals: {
+    'react': {
+      'commonjs': 'react',
+      'commonjs2': 'react',
+      'amd': 'react',
+      // React dep should be available as window.React, not window.react
+      'root': 'React'
     },
-    externals: {
-      'react': {
-        'commonjs': 'react',
-        'commonjs2': 'react',
-        'amd': 'react',
-        // React dep should be available as window.React, not window.react
-        'root': 'React'
-      },
-      'react-dom': {
-        'commonjs': 'react-dom',
-        'commonjs2': 'react-dom',
-        'amd': 'react-dom',
-        'root': 'ReactDOM'
-      }
+    'react-dom': {
+      'commonjs': 'react-dom',
+      'commonjs2': 'react-dom',
+      'amd': 'react-dom',
+      'root': 'ReactDOM'
     },
-    module: {
-      loaders: [
-        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?cacheDirectory=true'},
-      ]
-    },
-    resolve: {
-      extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"]
-    }
+  },
+  module: {
+    loaders: [
+      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?cacheDirectory=true'},
+    ]
+  },
+  resolve: {
+    extensions: [".js"]
+  },
 };