[core] Upgrade Babel 6 to Babel 7 (#10964)

Author: oliviertassinari

.babelrc

@@ -1,12 +1,11 @@
 {
-  "presets": ["./scripts/material-ui-babel-preset", "stage-1", "react"],
-  "plugins": [
-    "transform-object-assign"
-  ],
+  "presets": ["./scripts/material-ui-babel-preset", "@babel/preset-stage-1", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-transform-object-assign"],
   "env": {
     "coverage": {
       "plugins": [
         "istanbul",
+        "@babel/plugin-transform-flow-strip-types",
         [
           "module-resolver",
           {
@@ -16,21 +15,17 @@
               "material-ui": "./packages/material-ui/src"
             }
           }
-        ],
+        ]
       ]
     },
     "development": {
       "sourceMaps": "both",
-      "plugins": [
-        "transform-flow-strip-types"
-      ]
+      "plugins": ["@babel/plugin-transform-flow-strip-types"]
     },
     "docs-development": {
-      "presets": [
-        "next/babel"
-      ],
+      "presets": ["next/babel"],
       "plugins": [
-        "preval",
+        "./scripts/material-ui-babel-preval",
         [
           "module-resolver",
           {
@@ -44,15 +39,13 @@
             }
           }
         ],
-        "transform-flow-strip-types"
+        "@babel/plugin-transform-flow-strip-types"
       ]
     },
     "docs-production": {
-      "presets": [
-        "next/babel"
-      ],
+      "presets": ["next/babel"],
       "plugins": [
-        "preval",
+        "./scripts/material-ui-babel-preval",
         [
           "module-resolver",
           {
@@ -68,43 +61,46 @@
         ],
         "transform-react-constant-elements",
         "transform-dev-warning",
-        "transform-runtime",
-        ["react-remove-properties", {"properties": ["data-mui-test"]}],
-        ["transform-react-remove-prop-types", {"mode": "remove"}]
+        "@babel/transform-runtime",
+        "@babel/plugin-transform-flow-strip-types",
+        ["react-remove-properties", { "properties": ["data-mui-test"] }],
+        ["transform-react-remove-prop-types", { "mode": "remove" }]
       ]
     },
     "es": {
       "plugins": [
         "transform-react-constant-elements",
         "transform-dev-warning",
-        "transform-runtime",
-        ["react-remove-properties", {"properties": ["data-mui-test"]}],
-        ["transform-react-remove-prop-types", {
-          "mode": "wrap",
-          "plugins": [
-            "babel-plugin-transform-flow-strip-types"
-          ]
-        }]
+        "@babel/transform-runtime",
+        "@babel/plugin-transform-flow-strip-types",
+        ["react-remove-properties", { "properties": ["data-mui-test"] }],
+        [
+          "transform-react-remove-prop-types",
+          {
+            "mode": "wrap"
+          }
+        ]
       ]
-   },
+    },
     "production": {
       "plugins": [
         "transform-react-constant-elements",
         "transform-dev-warning",
-        "transform-runtime",
-        ["react-remove-properties", {"properties": ["data-mui-test"]}],
-        ["transform-react-remove-prop-types", {
-          "mode": "wrap",
-          "plugins": [
-            "babel-plugin-transform-flow-strip-types"
-          ]
-        }]
+        "@babel/transform-runtime",
+        "@babel/plugin-transform-flow-strip-types",
+        ["react-remove-properties", { "properties": ["data-mui-test"] }],
+        [
+          "transform-react-remove-prop-types",
+          {
+            "mode": "wrap"
+          }
+        ]
       ]
-   },
+    },
     "test": {
       "sourceMaps": "both",
       "plugins": [
-        "transform-flow-strip-types",
+        "@babel/plugin-transform-flow-strip-types",
         [
           "module-resolver",
           {
@@ -114,8 +110,9 @@
               "material-ui": "./packages/material-ui/src"
             }
           }
-        ],
+        ]
       ]
     }
-  }
+  },
+  "ignore": ["scripts/material-ui-babel-preset.js", "scripts/*.js"]
 }

.size-limit

@@ -3,18 +3,18 @@
     "name": "The initial cost people pay for using one component",
     "webpack": true,
     "path": "packages/material-ui/build/Paper/index.js",
-    "limit": "25.4 KB"
+    "limit": "26.0 KB"
   },
   {
     "name": "The size of all the modules of material-ui.",
     "webpack": true,
     "path": "packages/material-ui/build/index.js",
-    "limit": "101.4 KB"
+    "limit": "102.3 KB"
   },
   {
     "name": "The main bundle of the docs",
     "webpack": false,
-    "path": ".next/main.js",
+    "path": ".next/bundles/pages/_app.js",
     "limit": "186 KB"
   },
   {

.yarnrc

@@ -0,0 +1 @@
+network-timeout 150000

docs/src/modules/components/Link.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import compose from 'recompose/compose';
+import { withRouter } from 'next/router';
 import NextLink from 'next/link';
 import { withStyles } from 'material-ui/styles';
 
@@ -50,17 +52,18 @@ OnClick.propTypes = {
   onCustomClick: PropTypes.func,
 };
 
-function Link(props, context) {
+function Link(props) {
   const {
     activeClassName,
     children: childrenProp,
-    component: ComponentProp,
     classes,
     className: classNameProp,
-    variant,
+    component: ComponentProp,
     href,
     onClick,
     prefetch,
+    router,
+    variant,
     ...other
   } = props;
 
@@ -82,12 +85,11 @@ function Link(props, context) {
       prefetch,
       passHref: true,
     };
-    const active = context.url.pathname === href;
     children = (
       <OnClick
         component="a"
         className={classNames(className, {
-          [activeClassName]: active && activeClassName,
+          [activeClassName]: router.pathname === href && activeClassName,
         })}
         onCustomClick={onClick}
         {...other}
@@ -111,12 +113,6 @@ Link.defaultProps = {
   activeClassName: 'active',
 };
 
-Link.contextTypes = {
-  url: PropTypes.shape({
-    pathname: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
 Link.propTypes = {
   activeClassName: PropTypes.string,
   children: PropTypes.node.isRequired,
@@ -126,7 +122,10 @@ Link.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
   prefetch: PropTypes.bool,
+  router: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
   variant: PropTypes.oneOf(['default', 'primary', 'secondary', 'button']),
 };
 
-export default withStyles(styles)(Link);
+export default compose(withRouter, withStyles(styles))(Link);

docs/src/modules/components/withRoot.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import find from 'lodash/find';
+import { withRouter } from 'next/router';
 import { Provider } from 'react-redux';
 import AppWrapper from 'docs/src/modules/components/AppWrapper';
 import initRedux from 'docs/src/modules/redux/initRedux';
@@ -229,23 +230,23 @@ const pages = [
   },
 ];
 
-function findActivePage(currentPages, url) {
+function findActivePage(currentPages, router) {
   const activePage = find(currentPages, page => {
     if (page.children) {
-      return url.pathname.indexOf(page.pathname) === 0;
+      return router.pathname.indexOf(page.pathname) === 0;
     }
 
     // Should be an exact match if no children
-    return url.pathname === page.pathname;
+    return router.pathname === page.pathname;
   });
 
   if (!activePage) {
     return null;
   }
 
   // We need to drill down
-  if (activePage.pathname !== url.pathname) {
-    return findActivePage(activePage.children, url);
+  if (activePage.pathname !== router.pathname) {
+    return findActivePage(activePage.children, router);
   }
 
   return activePage;
@@ -260,19 +261,18 @@ function withRoot(Component) {
     }
 
     getChildContext() {
-      const url = this.props.url;
+      const { router } = this.props;
 
-      let pathname = url.pathname;
+      let pathname = router.pathname;
       if (pathname !== '/') {
         // The leading / is only added to support static hosting (resolve /index.html).
         // We remove it to normalize the pathname.
         pathname = pathname.replace(/\/$/, '');
       }
 
       return {
-        url,
         pages,
-        activePage: findActivePage(pages, { ...url, pathname }),
+        activePage: findActivePage(pages, { ...router, pathname }),
       };
     }
 
@@ -296,11 +296,10 @@ function withRoot(Component) {
   WithRoot.propTypes = {
     pageContext: PropTypes.object,
     reduxServerState: PropTypes.object,
-    url: PropTypes.object,
+    router: PropTypes.object.isRequired,
   };
 
   WithRoot.childContextTypes = {
-    url: PropTypes.object,
     pages: PropTypes.array,
     activePage: PropTypes.object,
   };
@@ -329,7 +328,7 @@ function withRoot(Component) {
     };
   };
 
-  return WithRoot;
+  return withRouter(WithRoot);
 }
 
 export default withRoot;

docs/src/pages/customization/css-in-js/JssRegistry.js

@@ -7,7 +7,7 @@ import CssInJs from './CssInJs';
 const sheetsRegistry = new SheetsRegistry();
 const theme = createMuiTheme();
 
-class JssRegistry extends React.Component<any, any> {
+class JssRegistry extends React.Component {
   state = {
     length: 0,
   };

docs/src/pages/demos/dialogs/ConfirmationDialog.js

@@ -35,6 +35,7 @@ class ConfirmationDialog extends React.Component {
 
   state = {};
 
+  // TODO
   componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.setState({ value: nextProps.value });

next.config.js

@@ -29,6 +29,9 @@ module.exports = {
 
     return Object.assign({}, config, {
       plugins,
+      node: {
+        fs: 'empty',
+      },
       module: Object.assign({}, config.module, {
         rules: config.module.rules.concat([
           {