More browser lifecycle APIs: wrapRootComponent and replaceDOMRenderer

This past week or two has seen a flood of new browser lifecycle APIs :-) which I guess means some people are building some interesting Gatsby sites!

In the latest @iansu added in #666 two ways of modifying the “Root” Gatsby React component. A low-level API replaceDOMRenderer and high-level one wrapRootComponent.

The high-level API is if you want to simply wrap the root component e.g. to add Redux or Mobx to a Gatsby site.

// in your gatsby-browser.js

import { Provider } from 'react-redux'
import store from './store'

// This gets returned to Gatsby which then renders the Root component as normal.
exports.wrapRootComponent = Root => {
  return () => (
    <Provider store={store}>
      <Root />
    </Provider>
  );
};

The low-level API is for completely replacing the DOM rendering e.g. if you want to override the default React Router setup.

// in your gatsby-browser.js
import { applyRouterMiddleware, hashHistory, Router } from 'react-router'

// Change the router to use hashHistory instead of browserHistory
exports.replaceDOMRenderer = ({ routes, defaultShouldUpdateScroll, onUpdate }) => (
    ReactDOM.render(
      <Router
        history={hashHistory}
        routes={routes}
        render={applyRouterMiddleware(useScroll(defaultShouldUpdateScroll))}
        onUpdate={onUpdate}
      />,
      typeof window !== 'undefined' ? document.getElementById('react-mount') : void 0)
)

In the land of bug fixes, @4rkanoid noticed that Gatsby wasn't handling correctly custom site .babelrc files that had presets in their array form. #668

Thanks all for your great PRs!