add uniform wrapPageElement and wrapRootElement apis to SSR and Browser

docs/docs/migrating-from-v1-to-v2.md

@@ -29,6 +29,7 @@ This is a reference for upgrading your site from Gatsby v1 to Gatsby v2. While t
   - [APIs onPreRouteUpdate and onRouteUpdate no longer called with the route update action](#apis-onprerouteupdate-and-onrouteupdate-no-longer-called-with-the-route-update-action)
   - [Browser API `replaceRouterComponent` was removed](#browser-api-replaceroutercomponent-was-removed)
   - [Browser API `replaceHistory` was removed](#browser-api-replacehistory-was-removed)
+  - [Browser API `wrapRootComponent` was replaced with `wrapRootElement`](#browser-api-wraprootcomponent-was-replaced-with-wraprootelement)
   - [Don't query nodes by ID](#dont-query-nodes-by-id)
   - [Use Query in place of RootQueryType](#use-query-in-place-of-rootquerytype)
   - [Typography.js Plugin Config](#typographyjs-plugin-config-changes)
@@ -122,7 +123,8 @@ In Gatsby v2, the special layout component (`src/layouts/index.js`) that wrapped
 There are a number of implications to this change:
 
 - To render different layouts for different pages, just use the standard React inheritance model. Gatsby no longer maintains, or needs to maintain, separate behavior for handling layouts.
-- Because the "top level component" changes between each page, React will rerender all children. This means that shared components previously in a Gatsby v1 layout-- like navigations-- will unmount and remount. This will break CSS transitions or React state within those shared components. For more information, including in-progress workarounds, [see this ongoing discussion](https://github.com/gatsbyjs/gatsby/issues/6127).
+- Because the "top level component" changes between each page, React will rerender all children. This means that shared components previously in a Gatsby v1 layout-- like navigations-- will unmount and remount. This will break CSS transitions or React state within those shared components. If your use case requires layout component to not unmount use [`gatsby-plugin-layout`](https://www.gatsbyjs.org/packages/gatsby-plugin-layout/).
+
 - To learn more about the original decisions behind this removal, read the [RFC for removing the special layout component](https://github.com/gatsbyjs/rfcs/blob/master/text/0002-remove-special-layout-components.md).
 
 The following migration path is recommended:
@@ -542,7 +544,27 @@ React Router allowed you to swap out its history object. To enable this in Gatsb
 We did, erroneously, suggest using this API for adding support for Redux, etc. where you need to wrap the root Gatsby component with your own component.
 
 If you were using `replaceRouterComponent` for this, you'll need to migrate to
-`wrapRootComponent`. See this PR migrating the `using-redux` example site as a pattern to follow https://github.com/gatsbyjs/gatsby/pull/6986
+`wrapRootElement`:
+
+```diff
+import React from 'react'
+import { Provider } from 'react-redux'
+-import { Router } from 'react-router-dom'
+
+-export const replaceRouterComponent = ({ history }) => {
++export const wrapRootElement = ({ element }) => {
+-  const ConnectedRouterWrapper = ({ children }) => (
++  const ConnectedRootElement = (
+    <Provider store={store}>
+-      <Router history={history}>{children}</Router>
++      {element}
+    </Provider>
+  )
+
+-  return ConnectedRouterWrapper
++  return ConnectedRootElement
+}
+```
 
 ### Browser API `replaceHistory` was removed
 
@@ -874,6 +896,26 @@ Import graphql types from `gatsby/graphql` to prevent `Schema must contain uniqu
 +const { GraphQLString } = require(`gatsby/graphql`)
 ```
 
+### Browser API `wrapRootComponent` was replaced with `wrapRootElement`
+
+Use new [`wrapRootElement`](/docs/browser-apis/#wrapRootComponent) API:
+We now pass `component` Element instead of `Root` Component and expect that `wrapRootElement` will return Element and not Component. This change was needed to keep all wrapping APIs uniform.
+
+```diff
+-export const wrapRootComponent = ({ Root }) => {
++export const wrapRootElement = ({ element }) => {
+-  const ConnectedRootComponent = () => (
++  const ConnectedRootElement = (
+    <Provider store={store}>
+-      <Root />
++      {element}
+    </Provider>
+  )
+-  return ConnectedRootComponent
++  return ConnectedRootElement
+}
+```
+
 ## For Explorers
 
 ### Starting a New Project with v2

examples/using-multiple-providers/gatsby-config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby with multiple providers`,
+  },
+  plugins: [
+    `gatsby-plugin-jss`,
+    `gatsby-plugin-styled-components`,
+    `gatsby-plugin-redux`,
+    `gatsby-plugin-apollo-client`,
+  ],
+}

examples/using-multiple-providers/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gatsby-example-using-multiple-providers",
+  "private": true,
+  "description": "Gatsby example site using multiple plugins implementing wrapping APIs",
+  "version": "1.0.0",
+  "author": "Michal Piechowiak <[email protected]>",
+  "dependencies": {
+    "apollo-boost": "^0.1.13",
+    "babel-plugin-styled-components": "^1.5.1",
+    "gatsby": "next",
+    "gatsby-plugin-jss": "next",
+    "gatsby-plugin-styled-components": "next",
+    "isomorphic-fetch": "^2.2.1",
+    "react": "^16.4.0",
+    "react-apollo": "^2.1.11",
+    "react-dom": "^16.4.0",
+    "react-jss": "^8.6.1",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0",
+    "styled-components": "^3.4.2"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve"
+  }
+}

examples/using-multiple-providers/plugins/gatsby-plugin-apollo-client/gatsby-browser.js

@@ -0,0 +1,2 @@
+const preferDefault = m => (m && m.default) || m
+exports.wrapRootElement = preferDefault(require(`./inject-provider`))

examples/using-multiple-providers/plugins/gatsby-plugin-apollo-client/gatsby-ssr.js

@@ -0,0 +1,4 @@
+require(`isomorphic-fetch`)
+
+const preferDefault = m => (m && m.default) || m
+exports.wrapRootElement = preferDefault(require(`./inject-provider`))

examples/using-multiple-providers/plugins/gatsby-plugin-apollo-client/inject-provider.js

@@ -0,0 +1,12 @@
+import React from "react"
+import ApolloClient from "apollo-boost"
+import { ApolloProvider } from "react-apollo"
+
+const client = new ApolloClient({
+  uri: `https://api-euwest.graphcms.com/v1/cjjr1at6d0xb801c3scjrm0l0/master`,
+})
+
+// eslint-disable-next-line react/prop-types,react/display-name
+export default ({ element }) => (
+  <ApolloProvider client={client}>{element}</ApolloProvider>
+)

examples/using-multiple-providers/plugins/gatsby-plugin-apollo-client/package.json

@@ -0,0 +1 @@
+{}

examples/using-multiple-providers/plugins/gatsby-plugin-redux/gatsby-browser.js

@@ -0,0 +1 @@
+exports.wrapRootElement = require(`./inject-provider`)

examples/using-multiple-providers/plugins/gatsby-plugin-redux/gatsby-ssr.js

@@ -0,0 +1 @@
+exports.wrapRootElement = require(`./inject-provider`)

examples/using-multiple-providers/plugins/gatsby-plugin-redux/inject-provider.js

@@ -0,0 +1,16 @@
+const React = require(`react`)
+const { Provider } = require(`react-redux`)
+const { createStore } = require(`redux`)
+
+const reducer = (state, action) => {
+  if (action.type === `SET_BLOG_POST`) {
+    return action.payload
+  }
+  return state
+}
+
+const initialState = { id: null, title: `None` }
+const store = createStore(reducer, initialState)
+
+// eslint-disable-next-line react/prop-types,react/display-name
+module.exports = ({ element }) => <Provider store={store}>{element}</Provider>

examples/using-multiple-providers/plugins/gatsby-plugin-redux/package.json

@@ -0,0 +1 @@
+{}

examples/using-multiple-providers/src/pages/index.js

@@ -0,0 +1,112 @@
+import React from "react"
+import { connect } from "react-redux"
+import styled from "styled-components"
+import { gql } from "apollo-boost"
+import { Query } from "react-apollo"
+import injectSheet from "react-jss"
+
+const styles = {
+  listItem: {
+    cursor: `pointer`,
+    fontSize: `1.5em`,
+    color: `blue`,
+    textDecoration: `underline`,
+  },
+}
+
+const Counter = styled.p`
+  color: palevioletred;
+`
+
+const GET_POSTS = gql`
+  query {
+    blogPosts {
+      id
+      title
+    }
+  }
+`
+
+const GET_POST = gql`
+  query($id: ID) {
+    blogPost(where: { id: $id }) {
+      title
+      post
+    }
+  }
+`
+
+class IndexPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Multiple provider-example</h1>
+        <h2>Redux component:</h2>
+        <Counter>
+          ReduxState:
+          <pre>{JSON.stringify(this.props.reduxState)}</pre>
+        </Counter>
+        <h2>Apollo</h2>
+        <h3>List (click on something)</h3>
+        <Query query={GET_POSTS}>
+          {({ loading, error, data }) => {
+            if (loading) return <div>Loading...</div>
+            if (error) return <div>Error :(</div>
+
+            return (
+              <ul>
+                {data.blogPosts.map(data => {
+                  const { id, title } = data
+                  return (
+                    <li
+                      className={this.props.classes.listItem}
+                      onClick={() => {
+                        this.props.setBlogPost(data)
+                      }}
+                      key={id}
+                    >
+                      {title}
+                    </li>
+                  )
+                })}
+              </ul>
+            )
+          }}
+        </Query>
+        {this.props.reduxState.id && (
+          <Query query={GET_POST} variables={{ id: this.props.reduxState.id }}>
+            {({ loading, error, data }) => {
+              if (loading) return <div>Loading...</div>
+              if (error) return <div>Error :(</div>
+
+              return (
+                <>
+                  <h3>Details {data.blogPost.title}</h3>
+                  <div>{data.blogPost.post}</div>
+                </>
+              )
+            }}
+          </Query>
+        )}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return { reduxState: state }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setBlogPost: blogPost =>
+      dispatch({ type: `SET_BLOG_POST`, payload: blogPost }),
+  }
+}
+
+const ReduxConnectedIndexPage = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(IndexPage)
+
+export default injectSheet(styles)(ReduxConnectedIndexPage)

examples/using-redux/gatsby-browser.js

@@ -1,16 +1,2 @@
-import React from "react"
-import { Provider } from "react-redux"
-
-import createStore from "./src/state/createStore"
-
-const store = createStore()
-
-export const wrapRootComponent = ({ Root }) => {
-  const ConnectedRootComponent = () => (
-    <Provider store={store}>
-      <Root />
-    </Provider>
-  )
-
-  return ConnectedRootComponent
-}
+import wrapWithProvider from "./wrap-with-provider"
+export const wrapRootElement = wrapWithProvider

examples/using-redux/gatsby-ssr.js

@@ -1,16 +1,2 @@
-import React from 'react'
-import { Provider } from 'react-redux'
-import { renderToString } from 'react-dom/server'
-
-import createStore from './src/state/createStore'
-
-export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
-    const store = createStore()
-
-    const ConnectedBody = () => (
-        <Provider store={store}>
-            {bodyComponent}
-        </Provider>
-    )
-    replaceBodyHTMLString(renderToString(<ConnectedBody/>))
-}
+import wrapWithProvider from "./wrap-with-provider"
+export const wrapRootElement = wrapWithProvider

examples/using-redux/wrap-with-provider.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { Provider } from "react-redux"
+
+import createStore from "./src/state/createStore"
+
+const store = createStore()
+
+// eslint-disable-next-line react/display-name,react/prop-types
+export default ({ element }) => <Provider store={store}>{element}</Provider>

examples/using-styletron/gatsby-config.js

@@ -2,14 +2,5 @@ module.exports = {
   siteMetadata: {
     title: `Gatsby with Styletron`,
   },
-  plugins: [
-    `gatsby-plugin-styletron`,
-    {
-      resolve: `gatsby-plugin-google-analytics`,
-      options: {
-        trackingId: `UA-93349937-2`,
-      },
-    },
-    `gatsby-plugin-offline`,
-  ],
+  plugins: [`gatsby-plugin-styletron`],
 }

examples/using-styletron/package.json

@@ -6,20 +6,9 @@
   "author": "Nadiia Dmytrenko <[email protected]>",
   "dependencies": {
     "gatsby": "next",
-    "gatsby-plugin-google-analytics": "next",
-    "gatsby-plugin-offline": "next",
     "gatsby-plugin-styletron": "next",
-    "lodash": "^4.16.4",
     "react": "^16.4.0",
-    "react-dom": "^16.4.0",
-    "react-typography": "^0.15.0",
-    "slash": "^1.0.0",
-    "styletron-engine-atomic": "^1",
-    "styletron-react": "^4",
-    "styletron-react-core": "^1",
-    "styletron-standard": "^1",
-    "typography": "^0.15.8",
-    "typography-breakpoint-constants": "^0.14.0"
+    "react-dom": "^16.4.0"
   },
   "keywords": [
     "gatsby"