fix: Several Fixes for Scroll Handling and Restoration

e2e-tests/production-runtime/cypress/integration/scroll-behavior.js

@@ -34,6 +34,25 @@ describe(`Scroll behaviour`, () => {
     cy.getTestElement(`index-link`).click().waitForRouteChange()
   })
 
+  it(`should scroll to hashes - even with encoded characters`, () => {
+    cy.visit(`/`).waitForRouteChange()
+    cy.getTestElement(`long-page-id`).click().waitForRouteChange()
+
+    // UI should auto scroll to the id with a matching hash
+    cy.window().then(win => {
+      let idScrollY = win.scrollY
+      expect(win.scrollY).not.to.eq(0, 0)
+
+      cy.scrollTo(`bottom`)
+      cy.go(`back`).waitForRouteChange()
+      cy.go(`forward`).waitForRouteChange()
+
+      cy.window().then(updatedWindow => {
+        expect(updatedWindow.scrollY).not.to.eq(idScrollY)
+      })
+    })
+  })
+
   it(`should keep track of location.key`, () => {
     cy.visit(`/`).waitForRouteChange()
 

e2e-tests/production-runtime/src/pages/index.js

@@ -26,6 +26,11 @@ const IndexPage = ({ pageContext }) => (
           To long page
         </Link>
       </li>
+      <li>
+        <Link to="/long-page#áccentuated" data-testid="long-page-id">
+          To long page (at id)
+        </Link>
+      </li>
       <li>
         <Link to="/duplicated/" data-testid="duplicated">
           Another page using Index template

e2e-tests/production-runtime/src/pages/long-page.js

@@ -12,6 +12,8 @@ const LongPage = () => (
       Go back to the homepage - middle of the page
     </Link>
     <div style={{ height: `200vh` }} />
+    <h1 id="áccentuated">Special Hash ID</h1>
+    <div style={{ height: `200vh` }} />
     <Link to="/" data-testid="even-more-below-the-fold">
       Go back to the homepage - bottom of the page
     </Link>

packages/gatsby-react-router-scroll/package.json

@@ -7,9 +7,7 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.2",
-    "scroll-behavior": "^0.9.12",
-    "warning": "^3.0.0"
+    "@babel/runtime": "^7.10.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",
@@ -35,9 +33,9 @@
     "directory": "packages/gatsby-react-router-scroll"
   },
   "scripts": {
-    "build": "babel src --out-dir . --ignore \"**/__tests__\"",
+    "build": "babel src --out-dir . --ignore \"**/__tests__\" --extensions \".ts,.tsx\"",
     "prepare": "cross-env NODE_ENV=production npm run build",
-    "watch": "babel -w src --out-dir . --ignore \"**/__tests__\""
+    "watch": "babel -w src --out-dir . --ignore \"**/__tests__\" --extensions \".ts,.tsx\""
   },
   "engines": {
     "node": ">=10.13.0"

packages/gatsby-react-router-scroll/src/index.ts

@@ -0,0 +1,3 @@
+export { ScrollHandler as ScrollContext } from "./scroll-handler"
+export { ScrollContainer } from "./scroll-container"
+export { useScrollRestoration } from "./use-scroll-restoration"

packages/gatsby-react-router-scroll/src/scroll-container.tsx

@@ -0,0 +1,96 @@
+// TODO: In Gatsby v3, this file should be removed.
+// We are deprecating this in V2 in favor of useScrollRestoration
+import * as React from "react"
+import ReactDOM from "react-dom"
+import PropTypes from "prop-types"
+import { ScrollContext } from "./scroll-handler"
+import { SessionStorage } from "./session-storage"
+import { Location } from "@reach/router"
+import { Location as HLocation } from "history"
+
+const propTypes = {
+  scrollKey: PropTypes.string.isRequired,
+  shouldUpdateScroll: PropTypes.func,
+  children: PropTypes.element.isRequired,
+}
+
+interface IProps {
+  scrollKey: string
+  shouldUpdateScroll?: Function
+  children: React.ReactNode
+}
+
+interface IPropsWithContextAndLocation extends IProps {
+  context: SessionStorage
+  location: HLocation
+}
+
+let hasNotWarnedDeprecation = true
+
+class ScrollContainerImplementation extends React.Component<
+  IPropsWithContextAndLocation
+> {
+  constructor(props: IPropsWithContextAndLocation) {
+    super(props)
+
+    if (process.env.NODE_ENV !== `production` && hasNotWarnedDeprecation) {
+      hasNotWarnedDeprecation = false
+      console.log(
+        `Deprecation Warning:
+
+  Gatsby <ScrollContainer> is deprecated in Gatsby v2 and will be removed in Gatsby v3.
+  Update to the React hook alternative useScrollRestoration, like this:.
+
+  \`\`\`
+  import React from 'react';
+  import { useScrollRestoration } from 'gatsby-react-router-scroll';
+
+  function Component() {
+    const scrollRestoration = useScrollRestoration('${this.props.scrollKey}');
+
+    return <ul {...scrollRestoration} />;
+  }
+  \`\`\`
+  `
+      )
+    }
+  }
+
+  componentDidMount(): void {
+    // eslint-disable-next-line react/no-find-dom-node
+    const node = ReactDOM.findDOMNode(this) as Element
+    const { location, scrollKey } = this.props
+
+    if (!node) return
+
+    node.addEventListener(`scroll`, () => {
+      this.props.context.save(location, scrollKey, node.scrollTop)
+    })
+
+    const position = this.props.context.read(location, scrollKey)
+
+    node.scrollTo(0, position || 0)
+  }
+
+  render(): React.ReactNode {
+    return this.props.children
+  }
+}
+
+export const ScrollContainer = (props: IProps): React.ReactNode => (
+  <Location>
+    {({ location }): React.ReactNode => (
+      <ScrollContext.Consumer>
+        {(context): React.ReactNode => (
+          <ScrollContainerImplementation
+            {...props}
+            context={context}
+            location={location}
+          />
+        )}
+      </ScrollContext.Consumer>
+    )}
+  </Location>
+)
+
+ScrollContainer.propTypes = propTypes