Next page context for page transitions (#2833)

* pass loader to replaceComponentRenderer

* pass nextPageResources to children

* export a "public" loader

* allow async nextPageResources

* bump gatsby to 1.9.102 in examples/using-page-transitions

Author: stevensurgnier

examples/using-page-transitions/gatsby-browser.js

@@ -9,27 +9,31 @@ import getTransitionStyle from "./src/utils/getTransitionStyle"
 const timeout = 250
 const historyExitingEventType = `history::exiting`
 
-const getUserConfirmation = (message, callback) => {
-  const event = new CustomEvent(historyExitingEventType, { detail: { message } })
+const getUserConfirmation = (pathname, callback) => {
+  const event = new CustomEvent(historyExitingEventType, { detail: { pathname } })
   window.dispatchEvent(event)
   setTimeout(() => {
     callback(true)
   }, timeout)
 }
 const history = createHistory({ getUserConfirmation })
 // block must return a string to conform
-history.block((location, action) => location.key)
+history.block((location, action) => location.pathname)
 exports.replaceHistory = () => history
 
 class ReplaceComponentRenderer extends React.Component {
   constructor(props) {
     super(props)
-    this.state = { exiting: false }
+    this.state = { exiting: false, nextPageResources: {} }
     this.listenerHandler = this.listenerHandler.bind(this)
   }
 
   listenerHandler(event) {
-    this.setState({ exiting: true })
+    const nextPageResources = this.props.loader.getResourcesForPathname(
+      event.detail.pathname,
+      nextPageResources => this.setState({ nextPageResources })
+    ) || {}
+    this.setState({ exiting: true, nextPageResources })
   }
 
   componentDidMount() {
@@ -42,7 +46,7 @@ class ReplaceComponentRenderer extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (this.props.location.key !== nextProps.location.key) {
-      this.setState({ exiting: false })
+      this.setState({ exiting: false, nextPageResources: {} })
     }
   }
 
@@ -66,6 +70,7 @@ class ReplaceComponentRenderer extends React.Component {
             status,
             timeout,
             style: getTransitionStyle({ status, timeout }),
+            nextPageResources: this.state.nextPageResources,
           },
         })
       }
@@ -75,9 +80,9 @@ class ReplaceComponentRenderer extends React.Component {
 }
 
 // eslint-disable-next-line react/display-name
-exports.replaceComponentRenderer = ({ props }) => {
+exports.replaceComponentRenderer = ({ props, loader }) => {
   if (props.layout) {
     return undefined
   }
-  return createElement(ReplaceComponentRenderer, props)
+  return createElement(ReplaceComponentRenderer, { ...props, loader })
 }

examples/using-page-transitions/package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "author": "Steven Surgnier <[email protected]>",
   "dependencies": {
-    "gatsby": "^1.9.73",
+    "gatsby": "^1.9.102",
     "gatsby-link": "^1.6.22",
     "gatsby-plugin-react-helmet": "^1.0.8",
     "react-transition-group": "^2.2.1"

packages/gatsby/cache-dir/component-renderer.js

@@ -1,6 +1,6 @@
 import React, { createElement } from "react"
 import PropTypes from "prop-types"
-import loader from "./loader"
+import loader, { publicLoader } from "./loader"
 import emitter from "./emitter"
 import { apiRunner } from "./api-runner-browser"
 
@@ -105,6 +105,7 @@ class ComponentRenderer extends React.Component {
   render() {
     const pluginResponses = apiRunner(`replaceComponentRenderer`, {
       props: { ...this.props, pageResources: this.state.pageResources },
+      loader: publicLoader,
     })
     const replacementComponent = pluginResponses[0]
     // If page.

packages/gatsby/cache-dir/loader.js

@@ -319,4 +319,8 @@ const queue = {
   indexOf: path => pathArray.length - pathArray.indexOf(path) - 1,
 }
 
-module.exports = queue
+export const publicLoader = {
+  getResourcesForPathname: queue.getResourcesForPathname,
+}
+
+export default queue

packages/gatsby/src/utils/api-browser-docs.js

@@ -50,6 +50,7 @@ exports.replaceRouterComponent = true
  * implement page transitions. See https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions for an example of this.
  * @param {object} $0
  * @param {object} $0.props The props of the page or layout.
+ * @param {object} $0.loader The gatsby loader.
  */
 exports.replaceComponentRenderer = true