feat(gatsby): Set up Fast Refresh

[LekoArts]

Description

This PR improves our current Fast Refresh integration. Instead of completely disabling the overlay for the ReactRefreshWebpackPlugin we now pass a custom module and rely on the whm integration. We also needed to vendor webpack-hot-middleware.

List of changes made:

• GraphQL errors (handled in error-overlay-handler) are also pushed to our new overlay now
• Instead of directly relying on mitt we push to a queue in window._gatsbyEvents because sometimes we need actions before React rehydrated and mitt was too late for that then
• Rewrite the frontend code (inside cache-dir/fast-refresh-overlay) to use named exports, more modular components
• Adapted components and code to account for new Webpack 5 shape + changed the sourcing for source-maps. compilation.codeGenerationResults inside start-server.ts
• Use an Accordion to display multiple runtime/graphql errors
• Add helpers to lock the body and trap focus
• Rewrite the fast-refresh-overlay/index.js to use a reducer for its state logic
• Use a custom fast-refresh-module for the module option and expose all expected options

Documentation

In case we have pages where we show an error overlay screenshot, those would need to be updated.

Testing

In case you want to test it, here's a src/pages/index.js file I used for development.

import React from "react"
import { graphql } from 'gatsby'

// Compile error: Remove the } from ({ data })
const IndexPage = ({ data }) => {
  // Multiple runtime errors
  // React.useEffect(() => {
  //   setTimeout(() => {
  //     window.blabla()
  //   }, 100)

  //   setTimeout(() => {
  //     window.blabla2()
  //   }, 150)
  // })

  // Runtime error
  // const foo = null;foo.bar = 'bar'

  return (
    <main>
      <div>
        Hello
      </div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  )
}

export default IndexPage

/*
Possible changes to GraphQL query:
siteMetadata {
  title2
  test
}

Or

site {
  buildTime(format: "ASDF")
}
*/

export const query = graphql`
  {
    site {
      buildTime
      siteMetadata {
        title
      }
    }
  }
`

Related Issues

Initial integration: #26664

[ch25595]
[ch25647]
[ch19583]
[ch25648]

[wardpeet]

I didn't go through the whole code but this is what I found with a rough glimpse

[wardpeet]

you probably want to use abortcontroller here so the fetch aborts when we unmount.

A dirty fix could be to add a is Mounted ref and not set the response when it's false.

[LekoArts]

I tried it with this and it completely broke the current working behavior:

  const controller = new AbortController()
  const { signal } = controller

  React.useEffect(() => {
    async function fetchData() {
      const res = await fetch(url, { signal })
      const json = await res.json()
      const decoded = prettifyStack(json.codeFrame)
      const { sourcePosition, sourceContent } = json
      setResponse({
        decoded,
        sourceContent,
        sourcePosition,
      })
    }
    fetchData()

    return () => {
      controller.abort()
    }
  }, [])

[wardpeet]

:o you need to ue refs but let's do it after :)

[LekoArts]

Not necessary to do this handling here, I grab all info in the graphql-error component itself.
Also, we can use flatMap because we're now at Node 12.13 👍 and that's a Node 11 feature.

[LekoArts]

We need a stable id here (for both SSR and client for re-hydration) so that's why this helper exists

[LekoArts]

Necessary to also have this.state.error so that the background doesn't vanish

[LekoArts]

Purposefully chose alertdialog here and not dialog.

The difference with regular dialogs is that the alertdialog role should only used when an alert, error, or warning occurs. In other words, when a dialog's information and controls require the user's immediate attention alertdialog should be used instead of dialog. It is up to the developer to make this distinction though.

This fits our use case here

[wardpeet]

This is a follow up: we should put this openInEditor on the same place as runtime errors so people know where to look.