Feature/upgrade react to 17 (#4227)

* upgrade react and react-dom

* set runtime to automatic

* upgrade @mdx-js/loader

* remove unused React imports

Author: chenxsan

.babelrc

@@ -1,16 +1,17 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
+  "plugins": ["@babel/plugin-proposal-class-properties"],
   "env": {
     "development": {
-      "plugins": [
-        "react-refresh/babel"
-      ]
+      "plugins": ["react-refresh/babel"]
     }
   }
 }

package.json

@@ -83,7 +83,7 @@
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
-    "@mdx-js/loader": "^1.6.16",
+    "@mdx-js/loader": "^1.6.21",
     "@octokit/auth-action": "^1.3.0",
     "@octokit/rest": "^18.0.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
@@ -159,10 +159,10 @@
     "lodash.throttle": "^4.1.1",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
+    "react": "^17.0.1",
     "react-banner": "^1.0.0-rc.0",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.8.6",
+    "react-dom": "^17.0.1",
     "react-g-analytics": "0.4.2",
     "react-router-dom": "^5.2.0",
     "react-tiny-popover": "5",

src/components/Configuration/Configuration.jsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import { Children, isValidElement } from 'react';
 import { Details } from './components';
 
 const detailComponentsList = ['link', 'mode', 'entry', 'path', 'filename', 'publicPath', 'library', 'libraryType', 'libraryName', 'advancedLibrary', 'advancedOutput', 'expertOutput', 'expertOutputB', 'expert', 'advancedConditions', 'moduleType', 'advancedActions', 'advancedModule', 'modules', 'alias', 'advancedResolve', 'expertResolve', 'hints', 'devtool', 'target', 'externals', 'externalsType', 'externalsPresets', 'ignoreWarnings', 'stats', 'preset', 'advancedGlobal', 'advancedAssets', 'advancedChunkGroups', 'advancedChunks', 'advancedModules', 'expertModules', 'advancedStatsOptimization', 'advancedOptimization', 'cacheGroupAdvancedSelectors', 'cacheGroupAdvancedEffects', 'advancedSelectors', 'advancedEffects', 'fallbackCacheGroup', 'advanced', 'advancedCaching', 'advancedBuild'];
 
 export const Pre = props => {
-  const newChildren = React.Children.map(props.children.props.children, child => {
-    if (React.isValidElement(child)) {
+  const newChildren = Children.map(props.children.props.children, child => {
+    if (isValidElement(child)) {
       if (child.props.className.includes('keyword')) {
         if (!detailComponentsList.includes(child.props.componentname)) return child;
 
-        return <Details children={child.props.children.slice(4, React.Children.count(child.props.children) - 4)} url={child.props.url} />;
+        return <Details children={child.props.children.slice(4, Children.count(child.props.children) - 4)} url={child.props.url} />;
       }
     }
 

src/components/Configuration/components.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { isValidElement, Component } from 'react';
 import Popover from 'react-tiny-popover';
 import './Configuration.scss';
 import { timeout } from 'q';
@@ -29,7 +29,7 @@ const Card = ({ body }) => {
   );
 };
 
-export class Details extends React.Component {
+export class Details extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -50,7 +50,7 @@ export class Details extends React.Component {
 
     // Find the index of </default>
     const closeDefaultTagIndex = children.findIndex(child => {
-      if (React.isValidElement(child)) {
+      if (isValidElement(child)) {
         return (
           child.props.className.includes('tag') &&
           child.props.children.length === DEFAULT_CHILDREN_SIZE

src/components/Container/Container.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './Container.scss';
 
 export default (props = {}) => {

src/components/Contributors/Contributors.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { Component } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Contributors.scss';
 
-export default class Contributors extends React.Component {
+export default class Contributors extends Component {
   state = {
     inView: false
   }

src/components/Cube/Cube.jsx

@@ -1,11 +1,11 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 // Load Styling
 import './Cube.scss';
 
-export default class Cube extends React.Component {
+export default class Cube extends Component {
   static propTypes = {
     hover: PropTypes.bool,
     theme: PropTypes.string,

src/components/Dropdown/Dropdown.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Component } from 'react';
 import LanguageIcon from '../../assets/language-icon.svg';
 import './Dropdown.scss';
 
-export default class Dropdown extends React.Component {
+export default class Dropdown extends Component {
   state = {
     active: false
   };

src/components/Footer/Footer.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from '../Link/Link';
 import Container from '../Container/Container';
 import Icon from '../../assets/icon-square-small.svg';

src/components/Gitter/Gitter.jsx

@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 
 // Import Utilities
 import isClient from '../../utilities/is-client';
@@ -13,7 +13,7 @@ let sidecar = null;
 let sidecarLoadTriggered = false;
 
 // Create and export component
-export default class Gitter extends React.Component {
+export default class Gitter extends Component {
   render() {
     return (
       <div className="gitter">

src/components/Link/Link.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 export default ({

src/components/Logo/Logo.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Logo from '../../assets/site-logo.svg';
 import './Logo.scss';
 

src/components/Markdown/Markdown.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './Markdown.scss';
 
 const Markdown = props => (

src/components/Navigation/Navigation.jsx

@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 import Banner from 'react-banner';
 
 // Import Components
@@ -21,7 +21,7 @@ import StackOverflowIcon from '../../styles/icons/stack-overflow.svg';
 
 const onSearch = () => {};
 
-export default class Navigation extends React.Component {
+export default class Navigation extends Component {
   render() {
     let { pathname, links, toggleSidebar } = this.props;
 

src/components/NotificationBar/NotificationBar.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import Container from '../Container/Container';
 import testLocalStorage from '../../utilities/test-local-storage';
 import './NotificationBar.scss';
@@ -14,7 +14,7 @@ const barDismissed = () => {
   return false;
 };
 
-class MessageBar extends React.Component {
+class MessageBar extends Component {
   render() {
     return (
       <div className="notification-bar">
@@ -48,7 +48,7 @@ class MessageBar extends React.Component {
   }
 }
 
-export default class NotificationBar extends React.Component {
+export default class NotificationBar extends Component {
   constructor(props) {
     super(props);
     this.onClose = this.onClose.bind(this);
@@ -74,6 +74,6 @@ export default class NotificationBar extends React.Component {
   render() {
     const { dismissed } = this.state;
 
-    return <React.Fragment>{!dismissed ? <MessageBar onClose={this.onClose} /> : null}</React.Fragment>;
+    return <Fragment>{!dismissed ? <MessageBar onClose={this.onClose} /> : null}</Fragment>;
   }
 }

src/components/Organization/Organization.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Container from '../Container/Container';
 import Contributors from '../Contributors/Contributors';
 import Link from '../Link/Link';

src/components/Page/AdjacentPages.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from '../Link/Link';
 import './AdjacentPages.scss';
 import PropTypes from 'prop-types';

src/components/Page/Page.jsx

@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Children, isValidElement, Component } from 'react';
 
 // Import Components
 import PageLinks from '../PageLinks/PageLinks';
@@ -12,7 +12,7 @@ import AdjacentPages from './AdjacentPages';
 // Load Styling
 import './Page.scss';
 
-class Page extends React.Component {
+class Page extends Component {
   constructor(props) {
     super(props);
 
@@ -69,8 +69,8 @@ class Page extends React.Component {
 
     if (typeof content === 'function') {
       contentRender = content({}).props.children.slice(4); // Cut frontmatter information
-      contentRender = React.Children.map(contentRender, child => {
-        if (React.isValidElement(child)) {
+      contentRender = Children.map(contentRender, child => {
+        if (isValidElement(child)) {
           if (child.props.mdxType === 'pre') {
             return <Pre children={child.props.children} />;
           }

src/components/PageLinks/PageLinks.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Url from 'url';
 import './PageLinks.scss';
 import icon from '../../assets/icon-print.svg';

src/components/PageNotFound/PageNotFound.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 // Styles

src/components/Placeholder/Placeholder.js

@@ -1,6 +1,3 @@
-import React from 'react';
-
-// Import Styling
 import './Placeholder.scss';
 
 // Placeholder string

src/components/Print/Print.js

@@ -1,5 +1,3 @@
-import React from 'react';
-// Load Styling
 import './Print.scss';
 import icon from '../../assets/icon-print.svg';
 import BarIcon from '../../styles/icons/vertical-bar.svg';

src/components/Print/PrintScript.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const printScript = `
 window.matchMedia('print').addListener(function(mql) {
   if (!mql.matches) {

src/components/Shield/Shield.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default props => (
   <img alt="webpack shield" src={
     `https://img.shields.io/${props.content}.svg?label=${props.label}&style=flat-square&maxAge=3600`

src/components/Sidebar/Sidebar.jsx

@@ -1,7 +1,4 @@
 // Import External Dependencies
-import React from 'react';
-
-// Import Local Components
 import Shield from '../Shield/Shield';
 import SidebarItem from '../SidebarItem/SidebarItem';
 import Print from '../Print/Print';

src/components/SidebarItem/SidebarItem.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import Link from '../Link/Link';
 import './SidebarItem.scss';
 import list2Tree from '../../utilities/list2Tree';
@@ -7,7 +7,7 @@ import BarIcon from '../../styles/icons/vertical-bar.svg';
 
 const block = 'sidebar-item';
 
-export default class SidebarItem extends React.Component {
+export default class SidebarItem extends Component {
   state = {
     open: this._isOpen(this.props)
   };

src/components/SidebarMobile/SidebarMobile.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { Component } from 'react';
 import Link from '../Link/Link';
 import './SidebarMobile.scss';
 import CloseIcon from '../../styles/icons/cross.svg';
 
 // TODO: Check to make sure all pages are shown and properly sorted
-export default class SidebarMobile extends React.Component {
+export default class SidebarMobile extends Component {
   _container = null
   _initialTouchPosition = {}
   _lastTouchPosition = {}

src/components/Site/Site.jsx

@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component, Fragment } from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import DocumentTitle from 'react-document-title';
 
@@ -48,7 +48,7 @@ if (isClient) {
   }
 }
 
-class Site extends React.Component {
+class Site extends Component {
   state = {
     mobileSidebarOpen: false
   };
@@ -103,7 +103,7 @@ class Site extends React.Component {
                   <Route path="/vote" component={Vote} />
                   <Route path="/organization" component={Organization} />
                   <Route path="/starter-kits" component={StarterKits} />
-                  <Route path="/app-shell" component={() => <React.Fragment />} />
+                  <Route path="/app-shell" component={() => <Fragment />} />
                   {pages.map(page => (
                     <Route
                       key={page.url}
@@ -118,7 +118,7 @@ class Site extends React.Component {
                           'url'
                         );
                         return (
-                          <React.Fragment>
+                          <Fragment>
                             <Sponsors />
                             <Sidebar
                               className="site__sidebar"
@@ -132,7 +132,7 @@ class Site extends React.Component {
                               next={next}
                             />
                             <Gitter />
-                          </React.Fragment>
+                          </Fragment>
                         );
                       }}
                     />