fix next.js

Author: oliviertassinari

.babelrc

@@ -25,7 +25,7 @@
     "docs-development": {
       "presets": ["next/babel"],
       "plugins": [
-        "preval",
+        "./scripts/material-ui-babel-preval",
         [
           "module-resolver",
           {
@@ -45,7 +45,7 @@
     "docs-production": {
       "presets": ["next/babel"],
       "plugins": [
-        "preval",
+        "./scripts/material-ui-babel-preval",
         [
           "module-resolver",
           {
@@ -62,6 +62,7 @@
         "transform-react-constant-elements",
         "transform-dev-warning",
         "@babel/transform-runtime",
+        "@babel/plugin-transform-flow-strip-types",
         ["react-remove-properties", { "properties": ["data-mui-test"] }],
         ["transform-react-remove-prop-types", { "mode": "remove" }]
       ]
@@ -112,5 +113,6 @@
         ]
       ]
     }
-  }
+  },
+  "ignore": ["scripts/material-ui-babel-preset.js", "scripts/*.js"]
 }

.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([
           {

packages/material-ui/src/Hidden/HiddenCss.js

@@ -28,7 +28,7 @@ const styles = theme => {
 /**
  * @ignore - internal component.
  */
-function HiddenCss(props: Props) {
+function HiddenCss(props) {
   const {
     children,
     classes,

packages/material-ui/src/Snackbar/Snackbar.js

@@ -144,21 +144,21 @@ class Snackbar extends React.Component {
 
   timerAutoHide = null;
 
-  handleMouseEnter = (event: SyntheticUIEvent<>) => {
+  handleMouseEnter = event => {
     if (this.props.onMouseEnter) {
       this.props.onMouseEnter(event);
     }
     this.handlePause();
   };
 
-  handleMouseLeave = (event: SyntheticUIEvent<>) => {
+  handleMouseLeave = event => {
     if (this.props.onMouseLeave) {
       this.props.onMouseLeave(event);
     }
     this.handleResume();
   };
 
-  handleClickAway = (event: Event) => {
+  handleClickAway = event => {
     if (this.props.onClose) {
       this.props.onClose(event, 'clickaway');
     }

packages/material-ui/src/Tabs/Tabs.js

@@ -152,7 +152,7 @@ class Tabs extends React.Component {
   };
 
   tabs = undefined;
-  valueToIndex: { [key: any]: any } = {};
+  valueToIndex = {};
 
   handleResize = debounce(() => {
     this.updateIndicatorState(this.props);

packages/material-ui/src/utils/reactHelpers.js

@@ -1,7 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 
 import React from 'react';
-import type { Node } from 'react';
 import classNames from 'classnames';
 
 export function cloneElementWithClassName(child, className) {
@@ -10,16 +9,16 @@ export function cloneElementWithClassName(child, className) {
   });
 }
 
-export function cloneChildrenWithClassName(children: Node, className: string) {
+export function cloneChildrenWithClassName(children, className) {
   return React.Children.map(children, child => {
     return React.isValidElement(child) && cloneElementWithClassName(child, className);
   });
 }
 
-export function isMuiElement(element: any, muiNames: Array<string>) {
+export function isMuiElement(element, muiNames) {
   return React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
 }
 
-export function isMuiComponent(element: any, muiNames: Array<string>) {
+export function isMuiComponent(element, muiNames) {
   return muiNames.indexOf(element.muiName) !== -1;
 }

scripts/get-replacement.js

@@ -0,0 +1,24 @@
+/* eslint-disable */
+// Waiting for https://github.com/kentcdodds/babel-plugin-preval/issues/52
+
+'use strict';
+
+var requireFromString = require('require-from-string');
+var objectToAST = require('babel-plugin-preval/dist/object-to-ast');
+
+module.exports = getReplacement;
+
+function getReplacement(_ref) {
+  var stringToPreval = _ref.string,
+    filename = _ref.filename,
+    babel = _ref.babel;
+
+  var _babel$transform = babel.transform(stringToPreval, {
+      filename,
+    }),
+    code = _babel$transform.code;
+
+  var transpiled = `require('@babel/register');\n${code}`;
+  var val = requireFromString(transpiled, filename);
+  return objectToAST(val);
+}