Upgrade React to v16.0.0 (#965)

* Update React to v16.0.0 * Upgrade react-hot-loader to v3.1.1 * Update react and react-dom peer dependencies to use versions that are compatible with prop-types (0.14.9 and 15.3.0) * Fix client-side rendering on older versions of React * Remove dependency on create-react-class * Update react dependencies to be compatible with prop-types (React versions 0.14.9 and 15.3.0)
redfin · Nov 6, 2017 · a8ebc3c · a8ebc3c
1 parent a972847
commit a8ebc3c
Show file tree

Hide file tree

Showing 27 changed files with 135 additions and 99 deletions.
diff --git a/packages/react-server-cli/package.json b/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.9 || ^15.3.0 || ^16.0.0",
+    "react-dom": "~0.14.9 || ^15.3.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",

diff --git a/packages/react-server-cli/src/compileClient.js b/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,

diff --git a/packages/react-server-examples/bike-share/components/network-card.js b/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';

diff --git a/packages/react-server-examples/bike-share/components/network-list.js b/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';

diff --git a/packages/react-server-examples/bike-share/components/station-card.js b/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,
 	}),
 };
 

diff --git a/packages/react-server-examples/bike-share/components/station-list.js b/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';

diff --git a/packages/react-server-examples/meteor-site/components/Map.js b/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 }) => (

diff --git a/packages/react-server-examples/meteor-site/components/Table.js b/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 = [

diff --git a/packages/react-server-examples/redux-basic/components/Counter.js b/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 {

diff --git a/packages/react-server-examples/styled-components/package.json b/packages/react-server-examples/styled-components/package.json
@@ -13,8 +13,8 @@
     "babel-preset-react-server": "^0.4.8",
     "babel-runtime": "^6.6.1",
     "color": "^0.11.3",
-    "react": "^0.14.2",
-    "react-dom": "0.14.2",
+    "react": "^0.14.9",
+    "react-dom": "0.14.9",
     "react-server": "^0.4.8",
     "react-server-cli": "^0.4.8",
     "styled-components": "^1.0.0",

diff --git a/packages/react-server-integration-tests/package.json b/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.9 || ^15.3.0 || ^16.0.0",
+    "react-dom": "~0.14.9 || ^15.3.0 || ^16.0.0",
     "react-server": "^0.7.3",
     "react-server-cli": "^0.7.3",
     "rimraf": "^2.5.4",

diff --git a/packages/react-server-redux/package.json b/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.9 || ^15.3.0 || ^16.0.0"
   },
   "devDependencies": {
     "ava": "^0.17.0",

diff --git a/packages/react-server-redux/src/RootProvider.js b/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,
 }
diff --git a/packages/react-server-test-pages/.reactserverrc b/packages/react-server-test-pages/.reactserverrc
@@ -1,3 +1,4 @@
 {
-  "routesFile": "./routes.js"
+  "routesFile": "./routes.js",
+  "hot": true
 }
diff --git a/packages/react-server-test-pages/package.json b/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.9 || ^15.3.0 || ^16.0.0",
+    "react-dom": "~0.14.9 || ^15.3.0 || ^16.0.0",
     "react-server": "^0.7.3",
     "react-server-cli": "^0.7.3",
     "react-server-data-bundle-cache": "^0.7.3",

diff --git a/packages/react-server-test-pages/pages/root/reduxAdapter.js b/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() {

diff --git a/packages/react-server-test-pages/pages/root/rootProvider.js b/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) {

diff --git a/packages/react-server-website/components/Markdown.js b/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 = {

diff --git a/packages/react-server-website/components/doc-body.js b/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 {

diff --git a/packages/react-server-website/components/page-title.js b/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 {

diff --git a/packages/react-server-website/package.json b/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.9 || ^15.3.0 || ^16.0.0",
+    "react-dom": "~0.14.9 || ^15.3.0 || ^16.0.0",
     "react-server": "^0.7.3",
     "react-server-cli": "^0.7.3",
     "react-server-data-bundle-cache": "^0.7.3",

diff --git a/packages/react-server/core/ClientController.js b/packages/react-server/core/ClientController.js
@@ -585,7 +585,8 @@ class ClientController extends EventEmitter {
 			,   timer = logger.timer(`renderElement.individual.${name}`)
 
 			element = React.cloneElement(element, { context: this.context });
-			ReactDOM.render(element, root);
+			var renderFunc = ReactDOM.hydrate || ReactDOM.render;
+			renderFunc(element, root);
 
 			_.forEach(
 				getRootElementAttributes(element),

diff --git a/packages/react-server/core/components/FragmentDataCache.jsx b/packages/react-server/core/components/FragmentDataCache.jsx
@@ -1,6 +1,7 @@
 
 var ReactServerAgent = require("../ReactServerAgent"),
-	React = require("react");
+	React = require('react'),
+	PropTypes = require('prop-types');
 
 /**
  * FragmentDataCache writes out a serialized form of the ReactServerAgent request
@@ -36,37 +37,42 @@ 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({
+class FragmentDataCache extends React.Component {
 
-	propTypes: {
-		cacheNodeId: React.PropTypes.string,
-	},
+	static get displayName() {
+		return 'FragmentDataCache';
+	}
 
-	displayName: 'FragmentDataCache',
+	static get propTypes() {
+		return {
+			cacheNodeId: PropTypes.string,
+		};
+	}
 
-	getDefaultProps: function () {
+	static get defaultProps() {
 		return {
 			cacheNodeId: "react-server-fragment-data-cache",
-		}
-	},
+		};
+	}
+
+	/**
+	 * Return a promise that resolves with the FragmentDataCache component
+	 * when all pending data requests have resolved.
+	 */
+	static createWhenReady(fragmentDataCacheProps = {}) {
+		return ReactServerAgent.cache().whenAllPendingResolve().then(() => {
+			return <FragmentDataCache {...fragmentDataCacheProps} />;
+		});
+	}
 
-	render: function () {
+	render() {
 		return (
 			<div
 				id={this.props.cacheNodeId}
 				data-react-server-data-cache={JSON.stringify(ReactServerAgent.cache().dehydrate({ responseBodyOnly: true }))}>
 			</div>
 		);
-	},
-
-});
+	}
+};
 
-/**
- * Return a promise that resolves with the FragmentDataCache component
- * when all pending data requests have resolved.
- */
-FragmentDataCache.createWhenReady = function (fragmentDataCacheProps = {}) {
-	return ReactServerAgent.cache().whenAllPendingResolve().then(() => {
-		return <FragmentDataCache {...fragmentDataCacheProps} />;
-	});
-}
+module.exports = FragmentDataCache;