Skip to content

Commit 051367b

Browse files
stevensurgnierKyleAMathews
authored andcommitted
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
1 parent ad0b4e8 commit 051367b

File tree

5 files changed

+22
-11
lines changed

5 files changed

+22
-11
lines changed

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,31 @@ import getTransitionStyle from "./src/utils/getTransitionStyle"
99
const timeout = 250
1010
const historyExitingEventType = `history::exiting`
1111

12-
const getUserConfirmation = (message, callback) => {
13-
const event = new CustomEvent(historyExitingEventType, { detail: { message } })
12+
const getUserConfirmation = (pathname, callback) => {
13+
const event = new CustomEvent(historyExitingEventType, { detail: { pathname } })
1414
window.dispatchEvent(event)
1515
setTimeout(() => {
1616
callback(true)
1717
}, timeout)
1818
}
1919
const history = createHistory({ getUserConfirmation })
2020
// block must return a string to conform
21-
history.block((location, action) => location.key)
21+
history.block((location, action) => location.pathname)
2222
exports.replaceHistory = () => history
2323

2424
class ReplaceComponentRenderer extends React.Component {
2525
constructor(props) {
2626
super(props)
27-
this.state = { exiting: false }
27+
this.state = { exiting: false, nextPageResources: {} }
2828
this.listenerHandler = this.listenerHandler.bind(this)
2929
}
3030

3131
listenerHandler(event) {
32-
this.setState({ exiting: true })
32+
const nextPageResources = this.props.loader.getResourcesForPathname(
33+
event.detail.pathname,
34+
nextPageResources => this.setState({ nextPageResources })
35+
) || {}
36+
this.setState({ exiting: true, nextPageResources })
3337
}
3438

3539
componentDidMount() {
@@ -42,7 +46,7 @@ class ReplaceComponentRenderer extends React.Component {
4246

4347
componentWillReceiveProps(nextProps) {
4448
if (this.props.location.key !== nextProps.location.key) {
45-
this.setState({ exiting: false })
49+
this.setState({ exiting: false, nextPageResources: {} })
4650
}
4751
}
4852

@@ -66,6 +70,7 @@ class ReplaceComponentRenderer extends React.Component {
6670
status,
6771
timeout,
6872
style: getTransitionStyle({ status, timeout }),
73+
nextPageResources: this.state.nextPageResources,
6974
},
7075
})
7176
}
@@ -75,9 +80,9 @@ class ReplaceComponentRenderer extends React.Component {
7580
}
7681

7782
// eslint-disable-next-line react/display-name
78-
exports.replaceComponentRenderer = ({ props }) => {
83+
exports.replaceComponentRenderer = ({ props, loader }) => {
7984
if (props.layout) {
8085
return undefined
8186
}
82-
return createElement(ReplaceComponentRenderer, props)
87+
return createElement(ReplaceComponentRenderer, { ...props, loader })
8388
}

examples/using-page-transitions/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"version": "1.0.0",
55
"author": "Steven Surgnier <[email protected]>",
66
"dependencies": {
7-
"gatsby": "^1.9.73",
7+
"gatsby": "^1.9.102",
88
"gatsby-link": "^1.6.22",
99
"gatsby-plugin-react-helmet": "^1.0.8",
1010
"react-transition-group": "^2.2.1"

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { createElement } from "react"
22
import PropTypes from "prop-types"
3-
import loader from "./loader"
3+
import loader, { publicLoader } from "./loader"
44
import emitter from "./emitter"
55
import { apiRunner } from "./api-runner-browser"
66

@@ -105,6 +105,7 @@ class ComponentRenderer extends React.Component {
105105
render() {
106106
const pluginResponses = apiRunner(`replaceComponentRenderer`, {
107107
props: { ...this.props, pageResources: this.state.pageResources },
108+
loader: publicLoader,
108109
})
109110
const replacementComponent = pluginResponses[0]
110111
// If page.

packages/gatsby/cache-dir/loader.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -319,4 +319,8 @@ const queue = {
319319
indexOf: path => pathArray.length - pathArray.indexOf(path) - 1,
320320
}
321321

322-
module.exports = queue
322+
export const publicLoader = {
323+
getResourcesForPathname: queue.getResourcesForPathname,
324+
}
325+
326+
export default queue

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ exports.replaceRouterComponent = true
5050
* implement page transitions. See https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions for an example of this.
5151
* @param {object} $0
5252
* @param {object} $0.props The props of the page or layout.
53+
* @param {object} $0.loader The gatsby loader.
5354
*/
5455
exports.replaceComponentRenderer = true
5556

0 commit comments

Comments
 (0)