[examples] Use Reboot (#9691)

mui · Jan 1, 2018 · 5d3fb19 · 5d3fb19
1 parent aad7186
commit 5d3fb19
Show file tree

Hide file tree

Showing 44 changed files with 528 additions and 516 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -36,7 +36,7 @@ module.system.node.resolve_dirname=.
 
 suppress_type=$FlowFixMe
 suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment= \\(.\\|\n\\)*\\$FlowExpectedError
+suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore
 
 [lints]
 

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -6,7 +6,6 @@ import NProgress from 'nprogress';
 import Router from 'next/router';
 import { withStyles } from 'material-ui/styles';
 import Typography from 'material-ui/Typography';
-import Reboot from 'material-ui/Reboot';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import IconButton from 'material-ui/IconButton';
@@ -179,7 +178,6 @@ class AppFrame extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Reboot />
         <AppBar className={appBarClassName}>
           <Toolbar>
             <IconButton

diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js
@@ -4,8 +4,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { MuiThemeProvider } from 'material-ui/styles';
-import getContext, { getTheme } from 'docs/src/modules/styles/getContext';
+import Reboot from 'material-ui/Reboot';
 import JssProvider from 'react-jss/lib/JssProvider';
+import getPageContext, { getTheme } from 'docs/src/modules/styles/getPageContext';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import { lightTheme, darkTheme, setPrismTheme } from 'docs/src/modules/utils/prism';
 import GoogleTag from 'docs/src/modules/components/GoogleTag';
@@ -23,7 +24,7 @@ if (process.browser && !global.__INSERTION_POINT__) {
 
 class AppWrapper extends React.Component {
   componentWillMount() {
-    this.styleContext = getContext();
+    this.pageContext = this.props.pageContext || getPageContext();
   }
 
   componentDidMount() {
@@ -49,7 +50,7 @@ class AppWrapper extends React.Component {
       nextProps.uiTheme.paletteType !== this.props.uiTheme.paletteType ||
       nextProps.uiTheme.direction !== this.props.uiTheme.direction
     ) {
-      this.styleContext.theme = getTheme(nextProps.uiTheme);
+      this.pageContext.theme = getTheme(nextProps.uiTheme);
 
       if (nextProps.uiTheme.paletteType === 'light') {
         setPrismTheme(lightTheme);
@@ -63,21 +64,22 @@ class AppWrapper extends React.Component {
     }
   }
 
-  styleContext = null;
+  context = null;
 
   render() {
-    const { children, sheetsRegistry } = this.props;
+    const { children } = this.props;
 
     return (
       <JssProvider
-        registry={sheetsRegistry}
-        jss={this.styleContext.jss}
-        generateClassName={this.styleContext.generateClassName}
+        jss={this.pageContext.jss}
+        registry={this.pageContext.sheetsRegistry}
+        generateClassName={this.pageContext.generateClassName}
       >
         <MuiThemeProvider
-          theme={this.styleContext.theme}
-          sheetsManager={this.styleContext.sheetsManager}
+          theme={this.pageContext.theme}
+          sheetsManager={this.pageContext.sheetsManager}
         >
+          <Reboot />
           <AppFrame>{children}</AppFrame>
           <GoogleTag />
         </MuiThemeProvider>
@@ -88,7 +90,7 @@ class AppWrapper extends React.Component {
 
 AppWrapper.propTypes = {
   children: PropTypes.node.isRequired,
-  sheetsRegistry: PropTypes.object,
+  pageContext: PropTypes.object,
   uiTheme: PropTypes.object.isRequired,
 };
 

diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import find from 'lodash/find';
 import { Provider } from 'react-redux';
-import pure from 'recompose/pure';
 import AppWrapper from 'docs/src/modules/components/AppWrapper';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import findPages from /* preval */ 'docs/src/modules/utils/findPages';
@@ -205,47 +204,8 @@ function findActivePage(currentPages, url) {
   return activePage;
 }
 
-function withRoot(BaseComponent) {
-  // Prevent rerendering
-  const PureBaseComponent = pure(BaseComponent);
-
-  type WithRootProps = {
-    reduxServerState?: Object,
-    sheetsRegistry?: Object,
-    url: Object,
-  };
-
-  class WithRoot extends React.Component<WithRootProps> {
-    static childContextTypes = {
-      url: PropTypes.object,
-      pages: PropTypes.array,
-      activePage: PropTypes.object,
-    };
-
-    static getInitialProps(ctx) {
-      let initialProps = {};
-      const redux = initRedux({});
-
-      if (BaseComponent.getInitialProps) {
-        const baseComponentInitialProps = BaseComponent.getInitialProps({ ...ctx, redux });
-        initialProps = {
-          ...baseComponentInitialProps,
-          ...initialProps,
-        };
-      }
-
-      if (process.browser) {
-        return initialProps;
-      }
-
-      return {
-        ...initialProps,
-        // No need to include other initial Redux state because when it
-        // initialises on the client-side it'll create it again anyway
-        reduxServerState: redux.getState(),
-      };
-    }
-
+function withRoot(Component) {
+  class WithRoot extends React.Component {
     constructor(props, context) {
       super(props, context);
       this.redux = initRedux(this.props.reduxServerState || {});
@@ -262,18 +222,54 @@ function withRoot(BaseComponent) {
     redux = null;
 
     render() {
-      const { sheetsRegistry, ...other } = this.props;
+      const { pageContext, ...other } = this.props;
 
       return (
         <Provider store={this.redux}>
-          <AppWrapper sheetsRegistry={sheetsRegistry}>
-            <PureBaseComponent initialProps={other} />
+          <AppWrapper pageContext={pageContext}>
+            <Component initialProps={other} />
           </AppWrapper>
         </Provider>
       );
     }
   }
 
+  WithRoot.propTypes = {
+    pageContext: PropTypes.object,
+    reduxServerState: PropTypes.object,
+    url: PropTypes.object,
+  };
+
+  WithRoot.childContextTypes = {
+    url: PropTypes.object,
+    pages: PropTypes.array,
+    activePage: PropTypes.object,
+  };
+
+  WithRoot.getInitialProps = ctx => {
+    let initialProps = {};
+    const redux = initRedux({});
+
+    if (Component.getInitialProps) {
+      const componentInitialProps = Component.getInitialProps({ ...ctx, redux });
+      initialProps = {
+        ...componentInitialProps,
+        ...initialProps,
+      };
+    }
+
+    if (process.browser) {
+      return initialProps;
+    }
+
+    return {
+      ...initialProps,
+      // No need to include other initial Redux state because when it
+      // initialises on the client-side it'll create it again anyway
+      reduxServerState: redux.getState(),
+    };
+  };
+
   return WithRoot;
 }
 

diff --git a/docs/src/modules/styles/getContext.js → docs/src/modules/styles/getPageContext.js b/docs/src/modules/styles/getContext.js → docs/src/modules/styles/getPageContext.js
@@ -27,7 +27,7 @@ const theme = getTheme({
 const jss = create({ plugins: [...preset().plugins, rtl()] });
 jss.options.insertionPoint = 'insertion-point-jss';
 
-function createContext() {
+function createPageContext() {
   return {
     jss,
     theme,
@@ -39,16 +39,16 @@ function createContext() {
   };
 }
 
-export default function getContext() {
+export default function getPageContext() {
   // Make sure to create a new store for every server-side request so that data
   // isn't shared between connections (which would be bad)
   if (!process.browser) {
-    return createContext();
+    return createPageContext();
   }
 
   // Reuse context on the client-side
   if (!global.__INIT_MATERIAL_UI__) {
-    global.__INIT_MATERIAL_UI__ = createContext();
+    global.__INIT_MATERIAL_UI__ = createPageContext();
   }
 
   return global.__INIT_MATERIAL_UI__;

diff --git a/docs/src/pages/customization/overrides.md b/docs/src/pages/customization/overrides.md
@@ -72,6 +72,6 @@ In order to promote consistency and manage the user interface as a whole, Materi
 
 ### Customizing all instances of a component type
 
-When the configuration variables aren't powerful enough, you can take advantage of the `overrides` key of the `theme`
-to potentially change every single style injected by Material-UI into the DOM. Learn more about it in
-the [themes](/customization/themes#customizing-all-instances-of-a-component-type)section of the documentation.
+When the configuration variables aren't powerful enough,
+you can take advantage of the `overrides` key of the `theme` to potentially change every single style injected by Material-UI into the DOM.
+Learn more about it in the [themes](/customization/themes#customizing-all-instances-of-a-component-type) section of the documentation.
diff --git a/examples/create-react-app-with-flow/package.json b/examples/create-react-app-with-flow/package.json
@@ -5,13 +5,12 @@
   "dependencies": {
     "jss": "^9.0.0",
     "jss-preset-default": "^4.0.0",
-    "material-ui": "^1.0.0-beta.22",
+    "material-ui": "^1.0.0-beta.26",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-jss": "^8.2.0",
-    "react-scripts": "^1.0.16",
-    "recompose": "^0.26.0"
+    "react-scripts": "^1.0.16"
   },
   "devDependencies": {
     "flow-bin": "^0.62.0"

diff --git a/examples/create-react-app-with-flow/src/components/withRoot.js b/examples/create-react-app-with-flow/src/components/withRoot.js
diff --git a/examples/create-react-app-with-flow/src/index.js b/examples/create-react-app-with-flow/src/index.js
@@ -1,10 +1,8 @@
 // @flow
 
 import React from 'react';
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom';
 import Index from './pages/index';
 
-const rootElement = document.querySelector('#root');
-if (rootElement) {
-  render(<Index />, rootElement);
-}
+// $FlowIgnore - we don't want the missing dom element to be a silent error.
+ReactDOM.render(<Index />, document.querySelector('#root'));
diff --git a/examples/create-react-app-with-flow/src/pages/index.js b/examples/create-react-app-with-flow/src/pages/index.js
@@ -10,21 +10,20 @@ import Dialog, {
 } from 'material-ui/Dialog';
 import Typography from 'material-ui/Typography';
 import { withStyles } from 'material-ui/styles';
-import withRoot from '../components/withRoot';
+import withRoot from '../withRoot';
 
-const styles = {
+const styles = (theme: Object) => ({
   root: {
     textAlign: 'center',
-    paddingTop: 200,
+    paddingTop: theme.spacing.unit * 20,
   },
-};
+});
 
 type ProvidedProps = {
   classes: Object,
-  theme?: Object,
 };
 
-export type Props = {
+type Props = {
   classes: Object,
 };
 

diff --git a/examples/create-react-app-with-flow/src/styles/createContext.js b/examples/create-react-app-with-flow/src/styles/createContext.js