fix: Several Fixes for Scroll Handling and Restoration

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

@@ -7,9 +7,7 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
-    "scroll-behavior": "^0.9.12",
-    "warning": "^3.0.0"
+    "@babel/runtime": "^7.9.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -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,66 @@
+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
+}
+
+class ScrollContainerImplementation extends React.Component<
+  IPropsWithContextAndLocation
+> {
+  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 || node.scroll).call(node, 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

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

@@ -0,0 +1,111 @@
+import * as React from "react"
+import { LocationContext } from "@reach/router"
+import PropTypes from "prop-types"
+import { SessionStorage } from "./session-storage"
+
+export const ScrollContext = React.createContext<SessionStorage>(
+  new SessionStorage()
+)
+ScrollContext.displayName = `GatsbyScrollContext`
+
+type ShouldUpdateScrollFn = (
+  prevRouterProps: LocationContext | undefined,
+  routerProps: LocationContext
+) => boolean
+type ShouldUpdateScroll = undefined | ShouldUpdateScrollFn
+
+export class ScrollHandler extends React.Component<
+  LocationContext & { shouldUpdateScroll: ShouldUpdateScroll }
+> {
+  static propTypes = {
+    shouldUpdateScroll: PropTypes.func,
+    children: PropTypes.element.isRequired,
+    location: PropTypes.object.isRequired,
+  }
+
+  _stateStorage: SessionStorage = new SessionStorage()
+
+  scrollListener = (): void => {
+    const { key } = this.props.location
+
+    if (key) {
+      this._stateStorage.save(this.props.location, key, window.scrollY)
+    }
+  }
+
+  componentDidMount(): void {
+    window.addEventListener(`scroll`, this.scrollListener)
+    let scrollPosition
+    const { key, hash } = this.props.location
+
+    if (key) {
+      scrollPosition = this._stateStorage.read(this.props.location, key)
+    }
+
+    if (scrollPosition) {
+      this.windowScroll(scrollPosition, undefined)
+    } else if (hash) {
+      this.scrollToHash(decodeURI(hash), undefined)
+    }
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener(`scroll`, this.scrollListener)
+  }
+
+  componentDidUpdate(prevProps: LocationContext): void {
+    const { hash, key } = this.props.location
+    let scrollPosition
+
+    if (key) {
+      scrollPosition = this._stateStorage.read(this.props.location, key)
+    }
+
+    if (scrollPosition !== null) {
+      this.windowScroll(scrollPosition, prevProps)
+    } else if (hash) {
+      this.scrollToHash(decodeURI(hash), prevProps)
+    }
+  }
+
+  windowScroll = (
+    position: number,
+    prevProps: LocationContext | undefined
+  ): void => {
+    if (this.shouldUpdateScroll(prevProps, this.props)) {
+      ;(window.scrollTo || window.scroll)(0, position)
+    }
+  }
+
+  scrollToHash = (
+    hash: string,
+    prevProps: LocationContext | undefined
+  ): void => {
+    const node = document.querySelector(hash)
+
+    if (node && this.shouldUpdateScroll(prevProps, this.props)) {
+      node.scrollIntoView()
+    }
+  }
+
+  shouldUpdateScroll = (
+    prevRouterProps: LocationContext | undefined,
+    routerProps: LocationContext
+  ): boolean => {
+    const { shouldUpdateScroll } = this.props
+    if (!shouldUpdateScroll) {
+      return true
+    }
+
+    // Hack to allow accessing this._stateStorage.
+    return shouldUpdateScroll.call(this, prevRouterProps, routerProps)
+  }
+
+  render(): React.ReactNode {
+    return (
+      <ScrollContext.Provider value={this._stateStorage}>
+        {this.props.children}
+      </ScrollContext.Provider>
+    )
+  }
+}