Upgrade React to v16.0.0

packages/react-server-cli/package.json

@@ -43,7 +43,7 @@
     "pem": "^1.8.1",
     "q": "1.4.1",
     "raw-loader": "^0.5.1",
-    "react-hot-loader": "~1.3.0",
+    "react-hot-loader": "^3.1.1",
     "react-server-core-middleware": "^0.6.0",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",
@@ -68,9 +68,9 @@
     "mockery": "^2.0.0",
     "nsp": "^2.6.2",
     "output-file-sync": "^1.1.2",
-    "react": "~0.14.2 || ^15.1.0",
-    "react-dom": "~0.14.2 || ^15.1.0",
-    "react-hot-loader": "^1.3.1",
+    "react": "~0.14.2 || ^15.1.0 || ^16.0.0",
+    "react-dom": "~0.14.2 || ^15.1.0 || ^16.0.0",
+    "react-hot-loader": "^3.1.1",
     "react-server": "^0.7.3",
     "react-server-gulp-module-tagger": "^0.6.0",
     "rimraf": "^2.5.4",

packages/react-server-cli/src/compileClient.js

@@ -256,7 +256,7 @@ function packageCodeForBrowser(entrypoints, outputDir, outputUrl, hot, minify, l
 		webpackConfig.module.loaders = [
 			{
 				test: /\.jsx?$/,
-				loader: "react-hot",
+				loader: "react-hot-loader/webpack",
 				exclude: /node_modules/,
 			},
 			...webpackConfig.module.loaders,

packages/react-server-examples/bike-share/components/network-card.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {logging, Link} from 'react-server';
 
@@ -11,17 +12,17 @@ const NetworkCard = ({id, name, location, company}) => {
 };
 
 NetworkCard.propTypes = {
-	company: React.PropTypes.any,
-	href: React.PropTypes.string,
-	id: React.PropTypes.string,
-	location: React.PropTypes.shape({
-		city: React.PropTypes.string,
-		country: React.PropTypes.string,
-		latitude: React.PropTypes.number,
-		longitude: React.PropTypes.number,
+	company: PropTypes.any,
+	href: PropTypes.string,
+	id: PropTypes.string,
+	location: PropTypes.shape({
+		city: PropTypes.string,
+		country: PropTypes.string,
+		latitude: PropTypes.number,
+		longitude: PropTypes.number,
 	}),
-	name: React.PropTypes.string,
-	stations: React.PropTypes.array,
+	name: PropTypes.string,
+	stations: PropTypes.array,
 };
 
 NetworkCard.displayName = 'NetworkCard';

packages/react-server-examples/bike-share/components/network-list.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {logging} from 'react-server';
 import NetworkCard from './network-card';
@@ -13,7 +14,7 @@ const NetworkList = ({networks}) => {
 };
 
 NetworkList.propTypes = {
-	networks: React.PropTypes.array,
+	networks: PropTypes.array,
 };
 
 NetworkList.displayName = 'NetworkList';

packages/react-server-examples/bike-share/components/station-card.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {logging} from 'react-server';
 
@@ -18,15 +19,15 @@ const StationCard = ({station}) => {
 };
 
 StationCard.propTypes = {
-	station: React.PropTypes.shape({
-		empty_slots: React.PropTypes.number, // eslint-disable-line
-		extra: React.PropTypes.object,
-		free_bikes: React.PropTypes.number, // eslint-disable-line
-		id: React.PropTypes.string,
-		latitude: React.PropTypes.number,
-		longitude: React.PropTypes.number,
-		name: React.PropTypes.string,
-		timestamp: React.PropTypes.string,
+	station: PropTypes.shape({
+		empty_slots: PropTypes.number, // eslint-disable-line
+		extra: PropTypes.object,
+		free_bikes: PropTypes.number, // eslint-disable-line
+		id: PropTypes.string,
+		latitude: PropTypes.number,
+		longitude: PropTypes.number,
+		name: PropTypes.string,
+		timestamp: PropTypes.string,
 	}),
 };
 

packages/react-server-examples/bike-share/components/station-list.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {logging} from 'react-server';
 import StationCard from './station-card';
@@ -11,7 +12,7 @@ const StationList = ({stations}) => {
 };
 
 StationList.propTypes = {
-	stations: React.PropTypes.array,
+	stations: PropTypes.array,
 };
 
 StationList.displayName = 'StationList';

packages/react-server-examples/meteor-site/components/Map.js

@@ -1,4 +1,5 @@
-import { default as React, PropTypes } from "react";
+import PropTypes from 'prop-types';
+import React from "react";
 import GoogleMap from "google-map-react";
 
 const MeteorMap = ({ defaultCenter, center , meteors }) => (

packages/react-server-examples/meteor-site/components/Table.js

@@ -1,4 +1,5 @@
-import { default as React, PropTypes } from "react";
+import PropTypes from 'prop-types';
+import React from "react";
 import { Link } from "react-server";
 
 const headerColumns = [

packages/react-server-examples/redux-basic/components/Counter.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { connect } from 'react-redux'
 
 class Counter extends Component {

packages/react-server-integration-tests/package.json

@@ -18,8 +18,8 @@
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "q": "1.4.1",
-    "react": "~0.14.2 || ^15.1.0",
-    "react-dom": "~0.14.2 || ^15.1.0",
+    "react": "~0.14.2 || ^15.1.0 || ^16.0.0",
+    "react-dom": "~0.14.2 || ^15.1.0 || ^16.0.0",
     "react-server": "^0.7.3",
     "react-server-cli": "^0.7.3",
     "rimraf": "^2.5.4",

packages/react-server-redux/package.json

@@ -26,7 +26,7 @@
     "redux": "^3.6.0"
   },
   "peerDependencies": {
-    "react": "~0.14.2 || ^15.1.0"
+    "react": "~0.14.2 || ^15.1.0 || ^16.0.0"
   },
   "devDependencies": {
     "ava": "^0.17.0",

packages/react-server-redux/src/RootProvider.js

@@ -1,3 +1,4 @@
+const PropTypes = require('prop-types');
 var React = require('react');
 var { Provider } = require('react-redux');
 
@@ -35,5 +36,5 @@ class RootProvider extends React.Component {
 module.exports = RootProvider;
 
 RootProvider.propTypes = {
-	store: React.PropTypes.object.isRequired,
+	store: PropTypes.object.isRequired,
 }

packages/react-server-test-pages/.reactserverrc

@@ -1,3 +1,4 @@
 {
-  "routesFile": "./routes.js"
+  "routesFile": "./routes.js",
+  "hot": true
 }

packages/react-server-test-pages/package.json

@@ -16,8 +16,8 @@
   "dependencies": {
     "lodash": "^4.16.4",
     "q": "1.4.1",
-    "react": "~0.14.2 || ^15.1.0",
-    "react-dom": "~0.14.2 || ^15.1.0",
+    "react": "~0.14.2 || ^15.1.0 || ^16.0.0",
+    "react-dom": "~0.14.2 || ^15.1.0 || ^16.0.0",
     "react-server": "^0.7.3",
     "react-server-cli": "^0.7.3",
     "react-server-data-bundle-cache": "^0.7.3",

packages/react-server-test-pages/pages/root/reduxAdapter.js

@@ -1,5 +1,6 @@
 import {createStore, applyMiddleware} from "redux";
 import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import {RootElement} from "react-server";
 import {RootProvider, ReduxAdapter} from "react-server-redux";
@@ -34,7 +35,7 @@ function initAction() {
 
 class BasicComponent extends React.Component {
 	propTypes: {
-		elementData: React.PropTypes.sting.isRequired,
+		elementData: PropTypes.sting.isRequired,
 	}
 
 	render() {

packages/react-server-test-pages/pages/root/rootProvider.js

@@ -2,6 +2,7 @@ import {RootElement} from "react-server";
 import {RootProvider} from "react-server-redux";
 import {createStore} from "redux";
 import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 function simpleReducer(state = {simpleValue: "Hello"}) {
@@ -15,7 +16,7 @@ class BasicComponent extends React.Component {
 }
 
 BasicComponent.propTypes = {
-	simpleValue: React.PropTypes.string,
+	simpleValue: PropTypes.string,
 }
 
 const mapStateToProps = function(state) {

packages/react-server-website/components/Markdown.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Remarkable from 'remarkable';
@@ -58,9 +59,9 @@ export default class Markdown extends React.Component {
 }
 
 Markdown.propTypes = {
-	source     : React.PropTypes.string,
-	reuseDom   : React.PropTypes.bool,
-	bundleData : React.PropTypes.bool,
+	source     : PropTypes.string,
+	reuseDom   : PropTypes.bool,
+	bundleData : PropTypes.bool,
 }
 
 Markdown.defaultProps = {

packages/react-server-website/components/doc-body.js

@@ -1,5 +1,6 @@
+import PropTypes from 'prop-types';
 import React from "react";
-import {Component, PropTypes} from 'react';
+import { Component } from 'react';
 import Markdown from './Markdown';
 
 export default class DocBody extends Component {

packages/react-server-website/components/page-title.js

@@ -1,5 +1,6 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-import {Component, PropTypes} from 'react';
+import { Component } from 'react';
 import './page-title.less';
 
 export default class PageTitle extends Component {

packages/react-server-website/package.json

@@ -17,8 +17,8 @@
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-runtime": "^6.18.0",
     "highlight.js": "^9.5.0",
-    "react": "~0.14.2 || ^15.1.0",
-    "react-dom": "~0.14.2 || ^15.1.0",
+    "react": "~0.14.2 || ^15.1.0 || ^16.0.0",
+    "react-dom": "~0.14.2 || ^15.1.0 || ^16.0.0",
     "react-server": "^0.7.3",
     "react-server-cli": "^0.7.3",
     "react-server-data-bundle-cache": "^0.7.3",

packages/react-server/core/ClientController.js

@@ -585,7 +585,7 @@ class ClientController extends EventEmitter {
 			,   timer = logger.timer(`renderElement.individual.${name}`)
 
 			element = React.cloneElement(element, { context: this.context });
-			ReactDOM.render(element, root);
+			ReactDOM.hydrate(element, root);
 
 			_.forEach(
 				getRootElementAttributes(element),

packages/react-server/core/components/FragmentDataCache.jsx

@@ -1,6 +1,8 @@
 
 var ReactServerAgent = require("../ReactServerAgent"),
-	React = require("react");
+	React = require('react'),
+	PropTypes = require('prop-types'),
+	createReactClass = require("create-react-class");
 
 /**
  * FragmentDataCache writes out a serialized form of the ReactServerAgent request
@@ -36,10 +38,10 @@ var ReactServerAgent = require("../ReactServerAgent"),
  * 	* entry.res and entry.err.response won't have any `body` entry if
  *	  the response from the server was HTML instead of JSON.
  */
-var FragmentDataCache = module.exports = React.createClass({
+var FragmentDataCache = module.exports = createReactClass({
 
 	propTypes: {
-		cacheNodeId: React.PropTypes.string,
+		cacheNodeId: PropTypes.string,
 	},
 
 	displayName: 'FragmentDataCache',

packages/react-server/core/components/Link.jsx

@@ -1,33 +1,45 @@
 
 var React = require('react'),
+	PropTypes = require('prop-types'),
 	navigateTo = require("../util/navigateTo");
 
-module.exports = React.createClass({
-	displayName: 'Link',
+class Link extends React.Component {
 
-	propTypes: {
-		path       : React.PropTypes.string,
-		href       : React.PropTypes.string,
-		onClick    : React.PropTypes.func,
-		bundleData : React.PropTypes.bool,
-		reuseDom   : React.PropTypes.bool,
-		className  : React.PropTypes.string,
-	},
+	static get displayName() {
+		return 'Link';
+	}
 
-	getDefaultProps(){
+	static get propTypes() {
+		return {
+			path       : PropTypes.string,
+			href       : PropTypes.string,
+			onClick    : PropTypes.func,
+			bundleData : PropTypes.bool,
+			reuseDom   : PropTypes.bool,
+			className  : PropTypes.string,
+		};
+	}
+
+	static get defaultProps() {
 		return {
 			bundleData : false,
 			reuseDom   : false,
-		}
-	},
+		};
+	}
+
+	constructor(props) {
+		super(props);
+
+		this._onClick = this._onClick.bind(this);
+	}
 
-	render: function () {
+	render() {
 		return (
 			<a href={this.props.path || this.props.href} onClick={this._onClick} className={this.props.className}>{this.props.children}</a>
 		);
-	},
+	}
 
-	_onClick: function (e) {
+	_onClick(e) {
 
 		// TODO: IE8-9 detection
 
@@ -46,6 +58,7 @@ module.exports = React.createClass({
 		} else {
 			// do normal browser navigate
 		}
+	}
+}
 
-	},
-})
+module.exports = Link;

packages/react-server/core/components/RootContainer.js

@@ -1,3 +1,4 @@
+var PropTypes = require('prop-types');
 var React = require('react');
 var {
 	ensureRootElementWithContainer,
@@ -13,9 +14,9 @@ class RootContainer extends React.Component {
 module.exports = RootContainer;
 
 RootContainer.propTypes = {
-	listen: React.PropTypes.func,
-	when: React.PropTypes.object, // A promise.
-	_isRootContainer: React.PropTypes.bool,
+	listen: PropTypes.func,
+	when: PropTypes.object, // A promise.
+	_isRootContainer: PropTypes.bool,
 }
 
 RootContainer.defaultProps = {