[example] Support Gatsby v2 (#12331)

* fix gatsby-ssr.js * let's merge
mui · Aug 21, 2018 · 9bd1e8e · 9bd1e8e
1 parent 199db2a
commit 9bd1e8e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/examples/gatsby/.babelrc b/examples/gatsby/.babelrc
diff --git a/examples/gatsby/gatsby-ssr.js b/examples/gatsby/gatsby-ssr.js
@@ -1,21 +1,22 @@
 /* eslint-disable react/no-danger */
 
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import { JssProvider } from 'react-jss';
-import getPageContext from './src/getPageContext';
+const React = require('react');
+const { renderToString } = require('react-dom/server');
+const { JssProvider } = require('react-jss');
+const getPageContext = require('./src/getPageContext');
 
-exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) => {
+function replaceRenderer({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) {
   // Get the context of the page to collected side effects.
-  const pageContext = getPageContext();
+  // Ternary to support Gatsby@1 and Gatsby@2 at the same time.
+  const muiPageContext = getPageContext.default ? getPageContext.default() : getPageContext();
 
   const bodyHTML = renderToString(
     <JssProvider
-      registry={pageContext.sheetsRegistry}
-      generateClassName={pageContext.generateClassName}
+      registry={muiPageContext.sheetsRegistry}
+      generateClassName={muiPageContext.generateClassName}
     >
       {React.cloneElement(bodyComponent, {
-        pageContext,
+        muiPageContext,
       })}
     </JssProvider>,
   );
@@ -26,7 +27,9 @@ exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadCompon
       type="text/css"
       id="server-side-jss"
       key="server-side-jss"
-      dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
+      dangerouslySetInnerHTML={{ __html: muiPageContext.sheetsRegistry.toString() }}
     />,
   ]);
-};
+}
+
+exports.replaceRenderer = replaceRenderer;
diff --git a/examples/gatsby/src/withRoot.js b/examples/gatsby/src/withRoot.js
@@ -6,12 +6,11 @@ import getPageContext from './getPageContext';
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
-    pageContext = null;
+    muiPageContext = null;
 
     constructor(props) {
       super(props);
-
-      this.pageContext = this.props.pageContext || getPageContext();
+      this.muiPageContext = props.muiPageContext || getPageContext();
     }
 
     componentDidMount() {
@@ -26,8 +25,8 @@ function withRoot(Component) {
       // MuiThemeProvider makes the theme available down the React tree thanks to React context.
       return (
         <MuiThemeProvider
-          theme={this.pageContext.theme}
-          sheetsManager={this.pageContext.sheetsManager}
+          theme={this.muiPageContext.theme}
+          sheetsManager={this.muiPageContext.sheetsManager}
         >
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
           <CssBaseline />
@@ -38,7 +37,7 @@ function withRoot(Component) {
   }
 
   WithRoot.propTypes = {
-    pageContext: PropTypes.object,
+    muiPageContext: PropTypes.object,
   };
 
   return WithRoot;