Switch to React 16

package.json

@@ -78,9 +78,9 @@
     "matrix-react-sdk": "1.5.1",
     "modernizr": "^3.6.0",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.0.tgz",
-    "prop-types": "^15.6.2",
-    "react": "^15.6.0",
-    "react-dom": "^15.6.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "sanitize-html": "^1.19.1",
     "ua-parser-js": "^0.7.19",
     "url": "^0.11.0"
@@ -144,8 +144,6 @@
     "postcss-scss": "^1.0.6",
     "postcss-simple-vars": "^4.1.0",
     "postcss-strip-inline-comments": "^0.1.5",
-    "react-addons-perf": "^15.4.0",
-    "react-addons-test-utils": "^15.6.0",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.2.4",
     "webpack": "^4.23.1",

src/components/views/auth/VectorAuthFooter.js

@@ -15,45 +15,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from 'react';
 import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
 
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
-module.exports = React.createClass({
-    displayName: 'VectorAuthFooter',
-    statics: {
-        replaces: 'AuthFooter',
-    },
-
-    render: function() {
-        const brandingConfig = SdkConfig.get().branding;
-        let links = [
-            {"text": "blog", "url": "https://medium.com/@RiotChat"},
-            {"text": "twitter", "url": "https://twitter.com/@RiotChat"},
-            {"text": "github", "url": "https://github.com/vector-im/riot-web"},
-        ];
-
-        if (brandingConfig && brandingConfig.authFooterLinks) {
-            links = brandingConfig.authFooterLinks;
-        }
-
-        const authFooterLinks = [];
-        for (const linkEntry of links) {
-            authFooterLinks.push(
-                <a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noopener">
-                    {linkEntry.text}
-                </a>,
-            );
-        }
-
-        return (
-            <div className="mx_AuthFooter">
-                {authFooterLinks}
-                <a href="https://matrix.org" target="_blank" rel="noopener">{ _t('powered by Matrix') }</a>
-            </div>
+module.exports = () => {
+    const brandingConfig = SdkConfig.get().branding;
+    let links = [
+        {"text": "blog", "url": "https://medium.com/@RiotChat"},
+        {"text": "twitter", "url": "https://twitter.com/@RiotChat"},
+        {"text": "github", "url": "https://github.com/vector-im/riot-web"},
+    ];
+
+    if (brandingConfig && brandingConfig.authFooterLinks) {
+        links = brandingConfig.authFooterLinks;
+    }
+
+    const authFooterLinks = [];
+    for (const linkEntry of links) {
+        authFooterLinks.push(
+            <a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noopener">
+                {linkEntry.text}
+            </a>,
         );
-    },
-});
+    }
+
+    return (
+        <div className="mx_AuthFooter">
+            {authFooterLinks}
+            <a href="https://matrix.org" target="_blank" rel="noopener">{ _t('powered by Matrix') }</a>
+        </div>
+    );
+};
+module.exports.statics = {
+    replaces: 'AuthFooter',
+};

src/components/views/auth/VectorCustomServerDialog.js

@@ -15,44 +15,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require("react");
+import React from "react";
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
 /**
  * This is identical to `CustomServerDialog` except for replacing "this app"
  * with "Riot".
  */
-module.exports = React.createClass({
-    displayName: 'VectorCustomServerDialog',
-    statics: {
-        replaces: 'CustomServerDialog',
-    },
-
-    render: function() {
-        return (
-            <div className="mx_ErrorDialog">
-                <div className="mx_Dialog_title">
-                    { _t('Custom Server Options') }
-                </div>
-                <div className="mx_Dialog_content">
-                    <p>{_t(
-                        "You can use the custom server options to sign into other " +
-                        "Matrix servers by specifying a different homeserver URL. This " +
-                        "allows you to use Riot with an existing Matrix account on a " +
-                        "different homeserver.",
-                    )}</p>
-                    <p>{_t(
-                        "You can also set a custom identity server, but you won't be " +
-                        "able to invite users by email address, or be invited by email " +
-                        "address yourself.",
-                    )}</p>
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.props.onFinished} autoFocus={true}>
-                        { _t('Dismiss') }
-                    </button>
-                </div>
+module.exports = ({onFinished}) => {
+    return (
+        <div className="mx_ErrorDialog">
+            <div className="mx_Dialog_title">
+                { _t('Custom Server Options') }
+            </div>
+            <div className="mx_Dialog_content">
+                <p>{_t(
+                    "You can use the custom server options to sign into other " +
+                    "Matrix servers by specifying a different homeserver URL. This " +
+                    "allows you to use Riot with an existing Matrix account on a " +
+                    "different homeserver.",
+                )}</p>
+                <p>{_t(
+                    "You can also set a custom identity server, but you won't be " +
+                    "able to invite users by email address, or be invited by email " +
+                    "address yourself.",
+                )}</p>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={onFinished} autoFocus={true}>
+                    { _t('Dismiss') }
+                </button>
             </div>
-        );
-    },
-});
+        </div>
+    );
+};
+module.exports.statics = {
+    replaces: 'CustomServerDialog',
+};

src/vector/index.js

@@ -33,9 +33,6 @@ import React from 'react';
 // add React and ReactPerf to the global namespace, to make them easier to
 // access via the console
 global.React = React;
-if (process.env.NODE_ENV !== 'production') {
-    global.Perf = require('react-addons-perf');
-}
 
 import './modernizr';
 import ReactDOM from 'react-dom';

test/app-tests/joining.js

@@ -34,7 +34,7 @@ const RoomView = sdk.getComponent('structures.RoomView');
 
 const React = require('react');
 const ReactDOM = require('react-dom');
-const ReactTestUtils = require('react-addons-test-utils');
+const ReactTestUtils = require('react-dom/test-utils');
 const expect = require('expect');
 import Promise from 'bluebird';
 import {makeType} from "matrix-react-sdk/lib/utils/TypeUtils";

test/app-tests/loading.js

@@ -23,7 +23,7 @@ import 'skin-sdk';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import expect from 'expect';
 import Promise from 'bluebird';
 import MatrixReactTestUtils from 'matrix-react-test-utils';

webpack.config.js

@@ -152,7 +152,6 @@ module.exports = {
             // using `npm link` / `yarn link`.
             "react": path.resolve('./node_modules/react'),
             "react-dom": path.resolve('./node_modules/react-dom'),
-            "react-addons-perf": path.resolve('./node_modules/react-addons-perf'),
 
             // same goes for js-sdk
             "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),

yarn.lock

@@ -7348,19 +7348,6 @@ react-addons-css-transition-group@15.3.2:
   resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.3.2.tgz#d8fa52bec9bb61bdfde8b9e4652b80297cbff667"
   integrity sha1-2PpSvsm7Yb396LnkZSuAKXy/9mc=
 
-react-addons-perf@^15.4.0:
-  version "15.4.2"
-  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
-  integrity sha1-EQvc9cRZxPd8uF7WNLzTOXU2ODs=
-  dependencies:
-    fbjs "^0.8.4"
-    object-assign "^4.1.0"
-
-react-addons-test-utils@^15.6.0:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.2.tgz#c12b6efdc2247c10da7b8770d185080a7b047156"
-  integrity sha1-wStu/cIkfBDae4dw0YUICnsEcVY=
-
 react-beautiful-dnd@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-4.0.1.tgz#3b0a49bf6be75af351176c904f012611dd292b81"
@@ -7397,6 +7384,16 @@ react-dom@^16.4.2:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-dom@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
+  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.15.0"
+
 "react-gemini-scrollbar@github:matrix-org/react-gemini-scrollbar#5e97aef":
   version "2.1.5"
   resolved "https://codeload.github.com/matrix-org/react-gemini-scrollbar/tar.gz/5e97aef7e034efc8db1431f4b0efe3b26e249ae9"
@@ -7461,6 +7458,15 @@ react@^16.4.2:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
+  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -7895,6 +7901,14 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
+  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.0, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"