Merge pull request #5 from lumc-nested/react-14

[wip] Update to React 0.14

Author: martijnvermaat

.eslintrc

@@ -1,58 +1,45 @@
 # ESLint has many default rules that are not listed in this file
 # Documentation for all ESLint rules can be found at http://eslint.org/docs/rules/
 parser: babel-eslint
+parserOptions:
+  ecmaVersion: 6
+plugins:
+  - react
+extends:
+  - eslint:recommended
+  - plugin:react/recommended
 env:
   browser: true
   node: true
+  es6: true
 rules:
-  strict: [2, never]    # use strict is added by babel
-  quote-props: [1, as-needed]
-  vars-on-top: 1
-  eqeqeq: 1
-  radix: 1
-  no-eq-null: 2
-  no-self-compare: 2
-  no-void: 2
-  no-new-object: 2
-  no-array-constructor: 1
-  no-inner-declarations: [1, both]
-  no-shadow-restricted-names: 1
-  no-unused-vars: 1
-  no-unreachable: 1
   brace-style: 1
-  semi: [1, always]
   camelcase: 2
-  new-cap:
-    - 1
   comma-style: 2
-  comma-dangle: [1, never]
   consistent-this: [2, self]
-  no-underscore-dangle: 0
-  quotes: [2, single]
   curly: 1
+  eqeqeq: 1
   indent:
     - 2
     - 2
     - SwitchCase: 1
-  no-mixed-spaces-and-tabs: 2
-  space-after-keywords: 2
-  space-before-blocks: 2
-  object-curly-spacing: 2
-  array-bracket-spacing: 2
-  computed-property-spacing: 2
-  space-in-parens: 2
-  spaced-comment: 2
-  eol-last: 1
   max-depth: [1, 4]
   max-len: [1, 120]
   max-params: [1, 4]
-  react/jsx-uses-vars: 1
-ecmaFeatures:
-  arrowFunctions: true
-  destructuring: true
-  objectLiteralComputedProperties: true
-  objectLiteralShorthandProperties: true
-  templateStrings: true
-  jsx: true
-plugins:
-  - react
+  new-cap: 1
+  no-array-constructor: 1
+  no-console: 0
+  no-eq-null: 2
+  no-new-object: 2
+  no-self-compare: 2
+  no-shadow-restricted-names: 1
+  no-underscore-dangle: 0
+  no-void: 2
+  quote-props: [1, as-needed]
+  quotes: [2, single, avoid-escape]
+  # TODO: Enable the react/prop-types rule.
+  react/prop-types: 0
+  radix: 1
+  spaced-comment: 2
+  strict: [2, never]
+  vars-on-top: 1

package.json

@@ -14,34 +14,40 @@
     "url": "https://github.com/lumc-nested/nested-website.git"
   },
   "dependencies": {
-    "babel-core": "~6.3.15",
-    "babel-polyfill": "~6.3.14",
-    "babel-runtime": "~5.2.17",
-    "bootstrap": "~3.3.4",
-    "nested-editor": "git+https://github.com/lumc-nested/nested-editor.git#12af0b1",
-    "react": "~0.13.1",
-    "react-bootstrap": "~0.20.0",
-    "react-fa": "~3.2.0"
+    "babel-core": "~6.5.2",
+    "babel-polyfill": "~6.5.0",
+    "babel-runtime": "~6.5.0",
+    "bootstrap": "~3.3.6",
+    "nested-editor": "git+https://github.com/lumc-nested/nested-editor.git#20ae56a",
+    "react": "~0.14.7",
+    "react-bootstrap": "~0.28.3",
+    "react-dom": "~0.14.7",
+    "react-fa": "~4.0.0"
   },
   "devDependencies": {
-    "babel-eslint": "~4.1.3",
-    "babel-loader": "~5.0.0",
+    "babel-eslint": "~5.0.0",
+    "babel-loader": "~6.2.3",
+    "babel-plugin-transform-runtime": "~6.5.2",
+    "babel-preset-es2015": "~6.5.0",
+    "babel-preset-react": "~6.5.0",
+    "babel-preset-stage-1": "~6.5.0",
     "binary-loader": "~0.0.1",
     "css-loader": "~0.23.1",
-    "eslint": "~1.10.3",
-    "eslint-loader": "~1.1.1",
-    "eslint-plugin-react": "~3.11.3",
+    "eslint": "~2.2.0",
+    "eslint-loader": "~1.3.0",
+    "eslint-plugin-react": "~4.1.0",
     "extract-text-webpack-plugin": "~1.0.1",
     "file-loader": "~0.8.5",
-    "json-loader": "~0.5.1",
+    "json-loader": "~0.5.4",
     "less": "~2.6.0",
     "less-loader": "~2.2.2",
-    "pegjs-loader": "0.1.1",
+    "pegjs": "~0.9.0",
+    "pegjs-loader": "0.4.0",
     "raw-loader": "~0.5.1",
-    "react-hot-loader": "~1.2.4",
+    "react-hot-loader": "~1.3.0",
     "style-loader": "~0.13.0",
     "url-loader": "~0.5.7",
-    "webpack": "~1.12.12",
+    "webpack": "~1.12.14",
     "webpack-dev-server": "~1.14.1"
   }
 }

scripts/Website.jsx

@@ -1,5 +1,6 @@
 var EventListener = require('react-bootstrap/lib/utils/EventListener');
 var React = require('react');
+var ReactDOM = require('react-dom');
 var ReactBootstrap = require('react-bootstrap');
 
 var Nested = require('nested-editor');
@@ -94,7 +95,7 @@ var Website = React.createClass({
 
   getSize: function() {
     return parseInt(
-      document.defaultView.getComputedStyle(React.findDOMNode(this.refs.panel), null).height,
+      document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.panel), null).height,
       10
     );
   },

scripts/init.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
+var ReactDOM = require('react');
 var Website = require('./Website');
 
 
@@ -12,7 +13,7 @@ require('../styles/main.less');
 (window !== window.top ? window.top : window).React = React;
 
 
-React.render(<Website />, document.getElementById('content'));
+ReactDOM.render(<Website />, document.getElementById('content'));
 
 
 module.exports = {};

webpack.config.js

@@ -34,37 +34,41 @@ var config = {
     preLoaders: [{
       test: /\.jsx?$/,
       exclude: /node_modules/,
-      loader: 'eslint-loader'
+      loader: 'eslint'
     }],
 
     loaders: [{
       test: /\.jsx?$/,
       exclude: /node_modules(?!\/nested-editor)/,
-      loader: 'babel-loader?stage=1&optional=runtime'
+      loaders: ['babel?' + JSON.stringify({
+        presets: ['es2015', 'react', 'stage-1'],
+        plugins: ['transform-runtime'],
+        cacheDirectory: true
+      })]
     }, {
       test: /\.css$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+      loader: ExtractTextPlugin.extract('style', 'css')
     }, {
       test: /\.less$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
+      loader: ExtractTextPlugin.extract('style', ['css', 'less'])
     }, {
       test: /\.(png|jpg)$/,
-      loader: 'url-loader?limit=8192'
+      loader: 'url?limit=8192'
     }, {
       test: /\.json$/,
       loader: 'json'
     }, {
       test: /\.pegjs$/,
-      loader: 'pegjs-loader'
+      loader: 'pegjs'
     }, {
       test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+      loader: 'url?limit=10000&mimetype=application/font-woff'
     }, {
       test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'url-loader?limit=10000&mimetype=application/font-woff2'
+      loader: 'url?limit=10000&mimetype=application/font-woff2'
     }, {
       test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'file-loader'
+      loader: 'file'
     }]
   },
 
@@ -88,7 +92,7 @@ if (devServer) {
     hot: true
   };
   config.output.publicPath = '/dist/';
-  config.module.loaders[0].loader = 'react-hot!babel-loader?stage=1&optional=runtime';
+  config.module.loaders[0].loaders.unshift('react-hot');
   config.cache = true;
   config.debug = true;
   config.devtool = 'eval';