Skip to content

Commit a8ebc3c

Browse files
salehhamadehgigabo
salehhamadeh
authored and
gigabo
committed
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)
1 parent a972847 commit a8ebc3c

File tree

27 files changed

+135
-99
lines changed

27 files changed

+135
-99
lines changed

‎packages/react-server-cli/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"pem": "^1.8.1",
4444
"q": "1.4.1",
4545
"raw-loader": "^0.5.1",
46-
"react-hot-loader": "~1.3.0",
46+
"react-hot-loader": "^3.1.1",
4747
"react-server-core-middleware": "^0.6.0",
4848
"sass-loader": "^4.0.0",
4949
"style-loader": "^0.13.1",
@@ -68,9 +68,9 @@
6868
"mockery": "^2.0.0",
6969
"nsp": "^2.6.2",
7070
"output-file-sync": "^1.1.2",
71-
"react": "~0.14.2 || ^15.1.0",
72-
"react-dom": "~0.14.2 || ^15.1.0",
73-
"react-hot-loader": "^1.3.1",
71+
"react": "~0.14.9 || ^15.3.0 || ^16.0.0",
72+
"react-dom": "~0.14.9 || ^15.3.0 || ^16.0.0",
73+
"react-hot-loader": "^3.1.1",
7474
"react-server": "^0.7.3",
7575
"react-server-gulp-module-tagger": "^0.6.0",
7676
"rimraf": "^2.5.4",

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ function packageCodeForBrowser(entrypoints, outputDir, outputUrl, hot, minify, l
256256
webpackConfig.module.loaders = [
257257
{
258258
test: /\.jsx?$/,
259-
loader: "react-hot",
259+
loader: "react-hot-loader/webpack",
260260
exclude: /node_modules/,
261261
},
262262
...webpackConfig.module.loaders,

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

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PropTypes from 'prop-types';
12
import React from 'react';
23
import {logging, Link} from 'react-server';
34

@@ -11,17 +12,17 @@ const NetworkCard = ({id, name, location, company}) => {
1112
};
1213

1314
NetworkCard.propTypes = {
14-
company: React.PropTypes.any,
15-
href: React.PropTypes.string,
16-
id: React.PropTypes.string,
17-
location: React.PropTypes.shape({
18-
city: React.PropTypes.string,
19-
country: React.PropTypes.string,
20-
latitude: React.PropTypes.number,
21-
longitude: React.PropTypes.number,
15+
company: PropTypes.any,
16+
href: PropTypes.string,
17+
id: PropTypes.string,
18+
location: PropTypes.shape({
19+
city: PropTypes.string,
20+
country: PropTypes.string,
21+
latitude: PropTypes.number,
22+
longitude: PropTypes.number,
2223
}),
23-
name: React.PropTypes.string,
24-
stations: React.PropTypes.array,
24+
name: PropTypes.string,
25+
stations: PropTypes.array,
2526
};
2627

2728
NetworkCard.displayName = 'NetworkCard';

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PropTypes from 'prop-types';
12
import React from 'react';
23
import {logging} from 'react-server';
34
import NetworkCard from './network-card';
@@ -13,7 +14,7 @@ const NetworkList = ({networks}) => {
1314
};
1415

1516
NetworkList.propTypes = {
16-
networks: React.PropTypes.array,
17+
networks: PropTypes.array,
1718
};
1819

1920
NetworkList.displayName = 'NetworkList';

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

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PropTypes from 'prop-types';
12
import React from 'react';
23
import {logging} from 'react-server';
34

@@ -18,15 +19,15 @@ const StationCard = ({station}) => {
1819
};
1920

2021
StationCard.propTypes = {
21-
station: React.PropTypes.shape({
22-
empty_slots: React.PropTypes.number, // eslint-disable-line
23-
extra: React.PropTypes.object,
24-
free_bikes: React.PropTypes.number, // eslint-disable-line
25-
id: React.PropTypes.string,
26-
latitude: React.PropTypes.number,
27-
longitude: React.PropTypes.number,
28-
name: React.PropTypes.string,
29-
timestamp: React.PropTypes.string,
22+
station: PropTypes.shape({
23+
empty_slots: PropTypes.number, // eslint-disable-line
24+
extra: PropTypes.object,
25+
free_bikes: PropTypes.number, // eslint-disable-line
26+
id: PropTypes.string,
27+
latitude: PropTypes.number,
28+
longitude: PropTypes.number,
29+
name: PropTypes.string,
30+
timestamp: PropTypes.string,
3031
}),
3132
};
3233

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PropTypes from 'prop-types';
12
import React from 'react';
23
import {logging} from 'react-server';
34
import StationCard from './station-card';
@@ -11,7 +12,7 @@ const StationList = ({stations}) => {
1112
};
1213

1314
StationList.propTypes = {
14-
stations: React.PropTypes.array,
15+
stations: PropTypes.array,
1516
};
1617

1718
StationList.displayName = 'StationList';

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { default as React, PropTypes } from "react";
1+
import PropTypes from 'prop-types';
2+
import React from "react";
23
import GoogleMap from "google-map-react";
34

45
const MeteorMap = ({ defaultCenter, center , meteors }) => (

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { default as React, PropTypes } from "react";
1+
import PropTypes from 'prop-types';
2+
import React from "react";
23
import { Link } from "react-server";
34

45
const headerColumns = [

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { Component, PropTypes } from 'react'
1+
import PropTypes from 'prop-types';
2+
import React, { Component } from 'react';
23
import { connect } from 'react-redux'
34

45
class Counter extends Component {

‎packages/react-server-examples/styled-components/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"babel-preset-react-server": "^0.4.8",
1414
"babel-runtime": "^6.6.1",
1515
"color": "^0.11.3",
16-
"react": "^0.14.2",
17-
"react-dom": "0.14.2",
16+
"react": "^0.14.9",
17+
"react-dom": "0.14.9",
1818
"react-server": "^0.4.8",
1919
"react-server-cli": "^0.4.8",
2020
"styled-components": "^1.0.0",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"minimist": "^1.2.0",
1919
"mkdirp": "^0.5.1",
2020
"q": "1.4.1",
21-
"react": "~0.14.2 || ^15.1.0",
22-
"react-dom": "~0.14.2 || ^15.1.0",
21+
"react": "~0.14.9 || ^15.3.0 || ^16.0.0",
22+
"react-dom": "~0.14.9 || ^15.3.0 || ^16.0.0",
2323
"react-server": "^0.7.3",
2424
"react-server-cli": "^0.7.3",
2525
"rimraf": "^2.5.4",

‎packages/react-server-redux/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"redux": "^3.6.0"
2727
},
2828
"peerDependencies": {
29-
"react": "~0.14.2 || ^15.1.0"
29+
"react": "~0.14.9 || ^15.3.0 || ^16.0.0"
3030
},
3131
"devDependencies": {
3232
"ava": "^0.17.0",

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const PropTypes = require('prop-types');
12
var React = require('react');
23
var { Provider } = require('react-redux');
34

@@ -35,5 +36,5 @@ class RootProvider extends React.Component {
3536
module.exports = RootProvider;
3637

3738
RootProvider.propTypes = {
38-
store: React.PropTypes.object.isRequired,
39+
store: PropTypes.object.isRequired,
3940
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"routesFile": "./routes.js"
2+
"routesFile": "./routes.js",
3+
"hot": true
34
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"dependencies": {
1717
"lodash": "^4.16.4",
1818
"q": "1.4.1",
19-
"react": "~0.14.2 || ^15.1.0",
20-
"react-dom": "~0.14.2 || ^15.1.0",
19+
"react": "~0.14.9 || ^15.3.0 || ^16.0.0",
20+
"react-dom": "~0.14.9 || ^15.3.0 || ^16.0.0",
2121
"react-server": "^0.7.3",
2222
"react-server-cli": "^0.7.3",
2323
"react-server-data-bundle-cache": "^0.7.3",

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {createStore, applyMiddleware} from "redux";
22
import React from 'react';
3+
import PropTypes from 'prop-types';
34
import { connect } from 'react-redux';
45
import {RootElement} from "react-server";
56
import {RootProvider, ReduxAdapter} from "react-server-redux";
@@ -34,7 +35,7 @@ function initAction() {
3435

3536
class BasicComponent extends React.Component {
3637
propTypes: {
37-
elementData: React.PropTypes.sting.isRequired,
38+
elementData: PropTypes.sting.isRequired,
3839
}
3940

4041
render() {

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {RootElement} from "react-server";
22
import {RootProvider} from "react-server-redux";
33
import {createStore} from "redux";
44
import { connect } from 'react-redux';
5+
import PropTypes from 'prop-types';
56
import React from 'react';
67

78
function simpleReducer(state = {simpleValue: "Hello"}) {
@@ -15,7 +16,7 @@ class BasicComponent extends React.Component {
1516
}
1617

1718
BasicComponent.propTypes = {
18-
simpleValue: React.PropTypes.string,
19+
simpleValue: PropTypes.string,
1920
}
2021

2122
const mapStateToProps = function(state) {

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PropTypes from 'prop-types';
12
import React from 'react';
23

34
import Remarkable from 'remarkable';
@@ -58,9 +59,9 @@ export default class Markdown extends React.Component {
5859
}
5960

6061
Markdown.propTypes = {
61-
source : React.PropTypes.string,
62-
reuseDom : React.PropTypes.bool,
63-
bundleData : React.PropTypes.bool,
62+
source : PropTypes.string,
63+
reuseDom : PropTypes.bool,
64+
bundleData : PropTypes.bool,
6465
}
6566

6667
Markdown.defaultProps = {

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import PropTypes from 'prop-types';
12
import React from "react";
2-
import {Component, PropTypes} from 'react';
3+
import { Component } from 'react';
34
import Markdown from './Markdown';
45

56
export default class DocBody extends Component {

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import PropTypes from 'prop-types';
12
import React from 'react';
2-
import {Component, PropTypes} from 'react';
3+
import { Component } from 'react';
34
import './page-title.less';
45

56
export default class PageTitle extends Component {

‎packages/react-server-website/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"babel-plugin-transform-runtime": "^6.15.0",
1818
"babel-runtime": "^6.18.0",
1919
"highlight.js": "^9.5.0",
20-
"react": "~0.14.2 || ^15.1.0",
21-
"react-dom": "~0.14.2 || ^15.1.0",
20+
"react": "~0.14.9 || ^15.3.0 || ^16.0.0",
21+
"react-dom": "~0.14.9 || ^15.3.0 || ^16.0.0",
2222
"react-server": "^0.7.3",
2323
"react-server-cli": "^0.7.3",
2424
"react-server-data-bundle-cache": "^0.7.3",

‎packages/react-server/core/ClientController.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -585,7 +585,8 @@ class ClientController extends EventEmitter {
585585
, timer = logger.timer(`renderElement.individual.${name}`)
586586

587587
element = React.cloneElement(element, { context: this.context });
588-
ReactDOM.render(element, root);
588+
var renderFunc = ReactDOM.hydrate || ReactDOM.render;
589+
renderFunc(element, root);
589590

590591
_.forEach(
591592
getRootElementAttributes(element),

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

+28-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
var ReactServerAgent = require("../ReactServerAgent"),
3-
React = require("react");
3+
React = require('react'),
4+
PropTypes = require('prop-types');
45

56
/**
67
* FragmentDataCache writes out a serialized form of the ReactServerAgent request
@@ -36,37 +37,42 @@ var ReactServerAgent = require("../ReactServerAgent"),
3637
* * entry.res and entry.err.response won't have any `body` entry if
3738
* the response from the server was HTML instead of JSON.
3839
*/
39-
var FragmentDataCache = module.exports = React.createClass({
40+
class FragmentDataCache extends React.Component {
4041

41-
propTypes: {
42-
cacheNodeId: React.PropTypes.string,
43-
},
42+
static get displayName() {
43+
return 'FragmentDataCache';
44+
}
4445

45-
displayName: 'FragmentDataCache',
46+
static get propTypes() {
47+
return {
48+
cacheNodeId: PropTypes.string,
49+
};
50+
}
4651

47-
getDefaultProps: function () {
52+
static get defaultProps() {
4853
return {
4954
cacheNodeId: "react-server-fragment-data-cache",
50-
}
51-
},
55+
};
56+
}
57+
58+
/**
59+
* Return a promise that resolves with the FragmentDataCache component
60+
* when all pending data requests have resolved.
61+
*/
62+
static createWhenReady(fragmentDataCacheProps = {}) {
63+
return ReactServerAgent.cache().whenAllPendingResolve().then(() => {
64+
return <FragmentDataCache {...fragmentDataCacheProps} />;
65+
});
66+
}
5267

53-
render: function () {
68+
render() {
5469
return (
5570
<div
5671
id={this.props.cacheNodeId}
5772
data-react-server-data-cache={JSON.stringify(ReactServerAgent.cache().dehydrate({ responseBodyOnly: true }))}>
5873
</div>
5974
);
60-
},
61-
62-
});
75+
}
76+
};
6377

64-
/**
65-
* Return a promise that resolves with the FragmentDataCache component
66-
* when all pending data requests have resolved.
67-
*/
68-
FragmentDataCache.createWhenReady = function (fragmentDataCacheProps = {}) {
69-
return ReactServerAgent.cache().whenAllPendingResolve().then(() => {
70-
return <FragmentDataCache {...fragmentDataCacheProps} />;
71-
});
72-
}
78+
module.exports = FragmentDataCache;

0 commit comments

Comments
 (0)