From 164eeba9c5e853aea278fd8d7c194193e0cbcdb8 Mon Sep 17 00:00:00 2001 From: madalynrose Date: Tue, 5 Nov 2019 17:27:10 -0500 Subject: [PATCH 01/11] add announcer live region for routing --- packages/gatsby/cache-dir/navigation.js | 12 +++-- packages/gatsby/cache-dir/production-app.js | 56 +++++++++++++++++++-- packages/gatsby/cache-dir/root.js | 10 ++-- 3 files changed, 69 insertions(+), 9 deletions(-) diff --git a/packages/gatsby/cache-dir/navigation.js b/packages/gatsby/cache-dir/navigation.js index 55451cd5319c0..b4681fcf6c9f6 100644 --- a/packages/gatsby/cache-dir/navigation.js +++ b/packages/gatsby/cache-dir/navigation.js @@ -40,10 +40,12 @@ const onPreRouteUpdate = (location, prevLocation) => { } } -const onRouteUpdate = (location, prevLocation) => { +const onRouteUpdate = (location, prevLocation, announceLocation) => { if (!maybeRedirect(location.pathname)) { apiRunner(`onRouteUpdate`, { location, prevLocation }) - + if (announceLocation) { + announceLocation() + } // Temp hack while awaiting https://github.com/reach/router/issues/119 window.__navigatingToLink = false } @@ -172,7 +174,11 @@ class RouteUpdates extends React.Component { componentDidUpdate(prevProps, prevState, shouldFireRouteUpdate) { if (shouldFireRouteUpdate) { - onRouteUpdate(this.props.location, prevProps.location) + onRouteUpdate( + this.props.location, + prevProps.location, + this.props.announceLocation + ) } } diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 8fd5979e51240..4bc301911fc62 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -1,5 +1,5 @@ import { apiRunner, apiRunnerAsync } from "./api-runner-browser" -import React from "react" +import React, { useEffect, useState } from "react" import ReactDOM from "react-dom" import { Router, navigate, Location, BaseContext } from "@reach/router" import { ScrollContext } from "gatsby-react-router-scroll" @@ -55,13 +55,17 @@ apiRunnerAsync(`onClientEntry`).then(() => { ) + let announceLocation = null class LocationHandler extends React.Component { render() { const { location } = this.props return ( {({ pageResources, location }) => ( - + { /> + )} @@ -92,6 +97,51 @@ apiRunnerAsync(`onClientEntry`).then(() => { } } + const RouteAnnouncer = () => { + const [announcement, setAnnouncement] = useState(``) + useEffect(() => { + announceLocation = () => { + requestAnimationFrame(() => { + let pageName = `new page` + if (document.title) { + pageName = document.title + } + const pageHeadings = document + .getElementById(`gatsby-focus-wrapper`) + .getElementsByTagName(`h1`) + if (pageHeadings) { + pageName = pageHeadings[0].innerHTML + } + setAnnouncement(`Navigated to ${pageName}`) + }) + } + // cleanup + return () => { + announceLocation = null + } + }) + return ( +
+ {announcement} +
+ ) + } + const { pagePath, location: browserLoc } = window // Explicitly call navigate if the canonical path (window.pagePath) @@ -140,7 +190,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { } ).pop() - let NewRoot = () => WrappedRoot + const NewRoot = () => WrappedRoot const renderer = apiRunner( `replaceHydrateFunction`, diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js index c6bcc7fac6767..23b123430cea2 100644 --- a/packages/gatsby/cache-dir/root.js +++ b/packages/gatsby/cache-dir/root.js @@ -52,15 +52,19 @@ const RouteHandler = props => ( ) +let locationListener class LocationHandler extends React.Component { render() { - let { location } = this.props + const { location } = this.props if (!loader.isPageNotFound(location.pathname)) { return ( {locationAndPageResources => ( - + + Date: Wed, 6 Nov 2019 10:01:41 -0500 Subject: [PATCH 02/11] Update packages/gatsby/cache-dir/production-app.js Co-Authored-By: David Bailey <4248177+davidbailey00@users.noreply.github.com> --- packages/gatsby/cache-dir/production-app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 4bc301911fc62..da9d64d27661b 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -110,7 +110,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { .getElementById(`gatsby-focus-wrapper`) .getElementsByTagName(`h1`) if (pageHeadings) { - pageName = pageHeadings[0].innerHTML + pageName = pageHeadings[0].textContent } setAnnouncement(`Navigated to ${pageName}`) }) From 752682ea1ac374d20bae17437007956fcc7080cd Mon Sep 17 00:00:00 2001 From: madalynrose Date: Wed, 18 Dec 2019 13:27:44 -0500 Subject: [PATCH 03/11] refactor announcement updates to happen in lifecycle method instead of hooks, use pathName instead of vague string as default announcement --- packages/gatsby/cache-dir/navigation.js | 6 +- packages/gatsby/cache-dir/production-app.js | 89 ++++++++++++--------- 2 files changed, 53 insertions(+), 42 deletions(-) diff --git a/packages/gatsby/cache-dir/navigation.js b/packages/gatsby/cache-dir/navigation.js index cdd8ece78b335..b33655a5f5722 100644 --- a/packages/gatsby/cache-dir/navigation.js +++ b/packages/gatsby/cache-dir/navigation.js @@ -174,11 +174,7 @@ class RouteUpdates extends React.Component { componentDidUpdate(prevProps, prevState, shouldFireRouteUpdate) { if (shouldFireRouteUpdate) { - onRouteUpdate( - this.props.location, - prevProps.location, - this.props.announceLocation - ) + onRouteUpdate(this.props.location, prevProps.location) } } diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 4bc301911fc62..ff2e4b6ea2728 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -30,6 +30,7 @@ window.___loader = publicLoader navigationInit() apiRunnerAsync(`onClientEntry`).then(() => { + console.log(`HELLO`) // Let plugins register a service worker. The plugin just needs // to return true. if (apiRunner(`registerServiceWorker`).length > 0) { @@ -55,17 +56,13 @@ apiRunnerAsync(`onClientEntry`).then(() => { ) - let announceLocation = null class LocationHandler extends React.Component { render() { const { location } = this.props return ( {({ pageResources, location }) => ( - + { /> - + )} @@ -97,12 +94,19 @@ apiRunnerAsync(`onClientEntry`).then(() => { } } - const RouteAnnouncer = () => { - const [announcement, setAnnouncement] = useState(``) - useEffect(() => { - announceLocation = () => { + class RouteAnnouncer extends React.Component { + constructor(props) { + super(props) + this.state = { announcement: `` } + console.log(`constructor`) + } + + componentDidUpdate(prevProps) { + console.log(`did update`, this.props.location.pathname) + if (this.props.location.pathname !== prevProps.location.pathname) { requestAnimationFrame(() => { - let pageName = `new page` + console.log(`updating`, this.props.location.pathname) + let pageName = `new page at ${this.props.location.pathname}` if (document.title) { pageName = document.title } @@ -112,34 +116,45 @@ apiRunnerAsync(`onClientEntry`).then(() => { if (pageHeadings) { pageName = pageHeadings[0].innerHTML } - setAnnouncement(`Navigated to ${pageName}`) + let newAnnouncement = `Navigated to ${pageName}` + if (this.state.announcement !== newAnnouncement) { + console.log( + `setting state`, + this.state.announcement, + newAnnouncement + ) + this.setState({ + announcement: newAnnouncement, + }) + } }) } - // cleanup - return () => { - announceLocation = null - } - }) - return ( -
- {announcement} -
- ) + } + + render() { + console.log(`rendering`, this.props.location.pathname) + const { announcement } = this.state + return ( + + ) + } } const { pagePath, location: browserLoc } = window From 6f52df16e192ec9ec75ebda8186a8f075511d966 Mon Sep 17 00:00:00 2001 From: madalynrose Date: Wed, 18 Dec 2019 13:28:15 -0500 Subject: [PATCH 04/11] remove unused imports --- packages/gatsby/cache-dir/production-app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index ff2e4b6ea2728..ada7d9eed6ca8 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -1,5 +1,5 @@ import { apiRunner, apiRunnerAsync } from "./api-runner-browser" -import React, { useEffect, useState } from "react" +import React from "react" import ReactDOM from "react-dom" import { Router, navigate, Location, BaseContext } from "@reach/router" import { ScrollContext } from "gatsby-react-router-scroll" From 842830f0ebfa5a81f9d0ff301753c8469e434fac Mon Sep 17 00:00:00 2001 From: madalynrose Date: Tue, 7 Jan 2020 14:08:01 -0500 Subject: [PATCH 05/11] move RouteAnnouncer inside of RouteUpdates in navigation.js --- packages/gatsby/cache-dir/navigation.js | 63 +++++++++- packages/gatsby/cache-dir/production-app.js | 125 ++++++++++---------- 2 files changed, 124 insertions(+), 64 deletions(-) diff --git a/packages/gatsby/cache-dir/navigation.js b/packages/gatsby/cache-dir/navigation.js index b33655a5f5722..634e5c685aeb4 100644 --- a/packages/gatsby/cache-dir/navigation.js +++ b/packages/gatsby/cache-dir/navigation.js @@ -161,6 +161,62 @@ function init() { maybeRedirect(window.location.pathname) } +class RouteAnnouncer extends React.Component { + constructor(props) { + super(props) + this.state = { announcement: `` } + console.log(`constructor`) + } + + componentDidUpdate(prevProps) { + requestAnimationFrame(() => { + console.log(`updating`, this.props.location.pathname) + let pageName = `new page at ${this.props.location.pathname}` + if (document.title) { + pageName = document.title + } + const pageHeadings = document + .getElementById(`gatsby-focus-wrapper`) + .getElementsByTagName(`h1`) + if (pageHeadings) { + pageName = pageHeadings[0].textContent + } + let newAnnouncement = `Navigated to ${pageName}` + if (this.state.announcement !== newAnnouncement) { + console.log(`setting state`, this.state.announcement, newAnnouncement) + this.setState({ + announcement: newAnnouncement, + }) + } + }) + } + + render() { + console.log(`rendering`, this.props.location.pathname) + const { announcement } = this.state + return ( + + ) + } +} + // Fire on(Pre)RouteUpdate APIs class RouteUpdates extends React.Component { constructor(props) { @@ -188,7 +244,12 @@ class RouteUpdates extends React.Component { } render() { - return this.props.children + return ( +
+ {this.props.children} + +
+ ) } } diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index d9eb5c42ad4e6..d9245f07cae7f 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -86,7 +86,6 @@ apiRunnerAsync(`onClientEntry`).then(() => { /> - )} @@ -94,68 +93,68 @@ apiRunnerAsync(`onClientEntry`).then(() => { } } - class RouteAnnouncer extends React.Component { - constructor(props) { - super(props) - this.state = { announcement: `` } - console.log(`constructor`) - } - - componentDidUpdate(prevProps) { - console.log(`did update`, this.props.location.pathname) - if (this.props.location.pathname !== prevProps.location.pathname) { - requestAnimationFrame(() => { - console.log(`updating`, this.props.location.pathname) - let pageName = `new page at ${this.props.location.pathname}` - if (document.title) { - pageName = document.title - } - const pageHeadings = document - .getElementById(`gatsby-focus-wrapper`) - .getElementsByTagName(`h1`) - if (pageHeadings) { - pageName = pageHeadings[0].textContent - } - let newAnnouncement = `Navigated to ${pageName}` - if (this.state.announcement !== newAnnouncement) { - console.log( - `setting state`, - this.state.announcement, - newAnnouncement - ) - this.setState({ - announcement: newAnnouncement, - }) - } - }) - } - } - - render() { - console.log(`rendering`, this.props.location.pathname) - const { announcement } = this.state - return ( - - ) - } - } + // class RouteAnnouncer extends React.Component { + // constructor(props) { + // super(props) + // this.state = { announcement: `` } + // console.log(`constructor`) + // } + + // componentDidUpdate(prevProps) { + // console.log(`did update`, this.props.location.pathname) + // if (this.props.location.pathname !== prevProps.location.pathname) { + // requestAnimationFrame(() => { + // console.log(`updating`, this.props.location.pathname) + // let pageName = `new page at ${this.props.location.pathname}` + // if (document.title) { + // pageName = document.title + // } + // const pageHeadings = document + // .getElementById(`gatsby-focus-wrapper`) + // .getElementsByTagName(`h1`) + // if (pageHeadings) { + // pageName = pageHeadings[0].textContent + // } + // let newAnnouncement = `Navigated to ${pageName}` + // if (this.state.announcement !== newAnnouncement) { + // console.log( + // `setting state`, + // this.state.announcement, + // newAnnouncement + // ) + // this.setState({ + // announcement: newAnnouncement, + // }) + // } + // }) + // } + // } + + // render() { + // console.log(`rendering`, this.props.location.pathname) + // const { announcement } = this.state + // return ( + // + // ) + // } + // } const { pagePath, location: browserLoc } = window From 810b9e116169539e52fbc2c57795f916f6939b29 Mon Sep 17 00:00:00 2001 From: madalynrose Date: Tue, 7 Jan 2020 14:37:25 -0500 Subject: [PATCH 06/11] remove console.logs --- packages/gatsby/cache-dir/navigation.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/gatsby/cache-dir/navigation.js b/packages/gatsby/cache-dir/navigation.js index 634e5c685aeb4..7371eb71c7c0c 100644 --- a/packages/gatsby/cache-dir/navigation.js +++ b/packages/gatsby/cache-dir/navigation.js @@ -40,12 +40,9 @@ const onPreRouteUpdate = (location, prevLocation) => { } } -const onRouteUpdate = (location, prevLocation, announceLocation) => { +const onRouteUpdate = (location, prevLocation) => { if (!maybeRedirect(location.pathname)) { apiRunner(`onRouteUpdate`, { location, prevLocation }) - if (announceLocation) { - announceLocation() - } // Temp hack while awaiting https://github.com/reach/router/issues/119 window.__navigatingToLink = false } @@ -165,12 +162,10 @@ class RouteAnnouncer extends React.Component { constructor(props) { super(props) this.state = { announcement: `` } - console.log(`constructor`) } componentDidUpdate(prevProps) { requestAnimationFrame(() => { - console.log(`updating`, this.props.location.pathname) let pageName = `new page at ${this.props.location.pathname}` if (document.title) { pageName = document.title @@ -183,7 +178,6 @@ class RouteAnnouncer extends React.Component { } let newAnnouncement = `Navigated to ${pageName}` if (this.state.announcement !== newAnnouncement) { - console.log(`setting state`, this.state.announcement, newAnnouncement) this.setState({ announcement: newAnnouncement, }) @@ -192,7 +186,6 @@ class RouteAnnouncer extends React.Component { } render() { - console.log(`rendering`, this.props.location.pathname) const { announcement } = this.state return (
Date: Thu, 9 Jan 2020 17:38:38 +0200 Subject: [PATCH 07/11] Trying with ref --- packages/gatsby/cache-dir/navigation.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/gatsby/cache-dir/navigation.js b/packages/gatsby/cache-dir/navigation.js index 7371eb71c7c0c..8d626f66c7608 100644 --- a/packages/gatsby/cache-dir/navigation.js +++ b/packages/gatsby/cache-dir/navigation.js @@ -161,10 +161,10 @@ function init() { class RouteAnnouncer extends React.Component { constructor(props) { super(props) - this.state = { announcement: `` } + this.announcementRef = React.createRef() } - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps, nextProps) { requestAnimationFrame(() => { let pageName = `new page at ${this.props.location.pathname}` if (document.title) { @@ -173,20 +173,18 @@ class RouteAnnouncer extends React.Component { const pageHeadings = document .getElementById(`gatsby-focus-wrapper`) .getElementsByTagName(`h1`) - if (pageHeadings) { + if (pageHeadings && pageHeadings.length) { pageName = pageHeadings[0].textContent } - let newAnnouncement = `Navigated to ${pageName}` - if (this.state.announcement !== newAnnouncement) { - this.setState({ - announcement: newAnnouncement, - }) + const newAnnouncement = `Navigated to ${pageName}` + const oldAnnouncement = this.announcementRef.current.innerText + if (oldAnnouncement !== newAnnouncement) { + this.announcementRef.current.innerText = newAnnouncement } }) } render() { - const { announcement } = this.state return ( + ref={this.announcementRef} + >
) } } From 2b0b6b66c45b48e0a9cfe1d238b3c823dabd58d0 Mon Sep 17 00:00:00 2001 From: madalynrose Date: Fri, 10 Jan 2020 17:18:30 -0500 Subject: [PATCH 08/11] remove stray console.log --- packages/gatsby/cache-dir/production-app.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 4442ea54835e3..53062b785f6dc 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -30,7 +30,6 @@ window.___loader = publicLoader navigationInit() apiRunnerAsync(`onClientEntry`).then(() => { - console.log(`HELLO`) // Let plugins register a service worker. The plugin just needs // to return true. if (apiRunner(`registerServiceWorker`).length > 0) { From 73caa3e98603c3d44371d8ea833c65f05d258897 Mon Sep 17 00:00:00 2001 From: madalynrose Date: Thu, 16 Jan 2020 13:40:00 -0500 Subject: [PATCH 09/11] change div for adding announcer to a react fragment --- packages/gatsby/cache-dir/navigation.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/cache-dir/navigation.js b/packages/gatsby/cache-dir/navigation.js index 8d626f66c7608..6d7e31d7e3fad 100644 --- a/packages/gatsby/cache-dir/navigation.js +++ b/packages/gatsby/cache-dir/navigation.js @@ -235,10 +235,10 @@ class RouteUpdates extends React.Component { render() { return ( -
+ {this.props.children} -
+ ) } } From ba53b68e0c3b1fd41a1e21b1c098afff49b3684a Mon Sep 17 00:00:00 2001 From: madalynrose Date: Fri, 17 Jan 2020 10:22:49 -0500 Subject: [PATCH 10/11] remove commented out code --- packages/gatsby/cache-dir/production-app.js | 69 --------------------- 1 file changed, 69 deletions(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 53062b785f6dc..ea251a656e407 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -94,75 +94,6 @@ apiRunnerAsync(`onClientEntry`).then(() => { } } - // class RouteAnnouncer extends React.Component { - // constructor(props) { - // super(props) - // this.state = { announcement: `` } - // console.log(`constructor`) - // } - - // componentDidUpdate(prevProps) { - // console.log(`did update`, this.props.location.pathname) - // if (this.props.location.pathname !== prevProps.location.pathname) { - // requestAnimationFrame(() => { - // console.log(`updating`, this.props.location.pathname) - // let pageName = `new page at ${this.props.location.pathname}` - // if (document.title) { - // pageName = document.title - // } - // const pageHeadings = document - // .getElementById(`gatsby-focus-wrapper`) - // .getElementsByTagName(`h1`) - // if (pageHeadings) { - // pageName = pageHeadings[0].textContent - // } - // let newAnnouncement = `Navigated to ${pageName}` - // if (this.state.announcement !== newAnnouncement) { - // console.log( - // `setting state`, - // this.state.announcement, - // newAnnouncement - // ) - // this.setState({ - // announcement: newAnnouncement, - // }) - // } - // }) - // } - // } - - // render() { - // console.log(`rendering`, this.props.location.pathname) - // const { announcement } = this.state - // return ( - // - // ) - // } - // } - - const { pagePath, location: browserLoc } = window - - // Explicitly call navigate if the canonical path (window.pagePath) - // is different to the browser path (window.location.pathname). But - // only if NONE of the following conditions hold: - // // - The url matches a client side route (page.matchPath) // - it's a 404 page // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/) From 5b15471e793aa16d8e63ad920d0f8c4c4f46052f Mon Sep 17 00:00:00 2001 From: madalynrose Date: Fri, 17 Jan 2020 10:32:01 -0500 Subject: [PATCH 11/11] add accidentally deleted code back in, remove changes in root.js --- packages/gatsby/cache-dir/production-app.js | 6 ++++++ packages/gatsby/cache-dir/root.js | 8 ++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index ea251a656e407..dcb870ef00d24 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -94,6 +94,12 @@ apiRunnerAsync(`onClientEntry`).then(() => { } } + const { pagePath, location: browserLoc } = window + + // Explicitly call navigate if the canonical path (window.pagePath) + // is different to the browser path (window.location.pathname). But + // only if NONE of the following conditions hold: + // // - The url matches a client side route (page.matchPath) // - it's a 404 page // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/) diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js index 33fa310702156..155f6b063317f 100644 --- a/packages/gatsby/cache-dir/root.js +++ b/packages/gatsby/cache-dir/root.js @@ -52,7 +52,6 @@ const RouteHandler = props => ( ) -let locationListener class LocationHandler extends React.Component { render() { const { location } = this.props @@ -61,10 +60,7 @@ class LocationHandler extends React.Component { return ( {locationAndPageResources => ( - + +