@depup/gatsby 5.16.1-depup.0

package/cache-dir/ensure-resources.js

@@ -0,0 +1,119 @@
+import React from "react"
+import loader, { PageResourceStatus } from "./loader"
+import shallowCompare from "shallow-compare"
+
+class EnsureResources extends React.Component {
+  constructor(props) {
+    super()
+    const { location, pageResources } = props
+    this.state = {
+      location: { ...location },
+      pageResources:
+        pageResources ||
+        loader.loadPageSync(location.pathname + location.search, {
+          withErrorDetails: true,
+        }),
+    }
+  }
+
+  static getDerivedStateFromProps({ location }, prevState) {
+    if (prevState.location.href !== location.href) {
+      const pageResources = loader.loadPageSync(
+        location.pathname + location.search,
+        {
+          withErrorDetails: true,
+        }
+      )
+
+      return {
+        pageResources,
+        location: { ...location },
+      }
+    }
+
+    return {
+      location: { ...location },
+    }
+  }
+
+  loadResources(rawPath) {
+    loader.loadPage(rawPath).then(pageResources => {
+      if (pageResources && pageResources.status !== PageResourceStatus.Error) {
+        this.setState({
+          location: { ...window.location },
+          pageResources,
+        })
+      } else {
+        window.history.replaceState({}, ``, location.href)
+        window.location = rawPath
+      }
+    })
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    // Always return false if we're missing resources.
+    if (!nextState.pageResources) {
+      this.loadResources(
+        nextProps.location.pathname + nextProps.location.search
+      )
+      return false
+    }
+
+    if (
+      process.env.BUILD_STAGE === `develop` &&
+      nextState.pageResources.stale
+    ) {
+      this.loadResources(
+        nextProps.location.pathname + nextProps.location.search
+      )
+      return false
+    }
+
+    // Check if the component or json have changed.
+    if (this.state.pageResources !== nextState.pageResources) {
+      return true
+    }
+    if (
+      this.state.pageResources.component !== nextState.pageResources.component
+    ) {
+      return true
+    }
+
+    if (this.state.pageResources.json !== nextState.pageResources.json) {
+      return true
+    }
+    // Check if location has changed on a page using internal routing
+    // via matchPath configuration.
+    if (
+      this.state.location.key !== nextState.location.key &&
+      nextState.pageResources.page &&
+      (nextState.pageResources.page.matchPath ||
+        nextState.pageResources.page.path)
+    ) {
+      return true
+    }
+    return shallowCompare(this, nextProps, nextState)
+  }
+
+  render() {
+    if (
+      process.env.NODE_ENV !== `production` &&
+      (!this.state.pageResources ||
+        this.state.pageResources.status === PageResourceStatus.Error)
+    ) {
+      const message = `EnsureResources was not able to find resources for path: "${this.props.location.pathname}"
+This typically means that an issue occurred building components for that path.
+Run \`gatsby clean\` to remove any cached elements.`
+      if (this.state.pageResources?.error) {
+        console.error(message)
+        throw this.state.pageResources.error
+      }
+
+      throw new Error(message)
+    }
+
+    return this.props.children(this.state)
+  }
+}
+
+export default EnsureResources

package/cache-dir/error-overlay-handler.js

@@ -0,0 +1,36 @@
+const errorMap = {}
+
+const handleErrorOverlay = () => {
+  const errors = Object.values(errorMap)
+  let errorsToDisplay = []
+  if (errors.length > 0) {
+    errorsToDisplay = errors.flatMap(e => e).filter(Boolean)
+  }
+
+  if (errorsToDisplay.length > 0) {
+    window._gatsbyEvents.push([
+      `FAST_REFRESH`,
+      {
+        action: `SHOW_GRAPHQL_ERRORS`,
+        payload: errorsToDisplay,
+      },
+    ])
+  } else {
+    window._gatsbyEvents.push([
+      `FAST_REFRESH`,
+      { action: `CLEAR_GRAPHQL_ERRORS` },
+    ])
+  }
+}
+
+export const clearError = errorID => {
+  delete errorMap[errorID]
+  handleErrorOverlay()
+}
+
+export const reportError = (errorID, error) => {
+  if (error) {
+    errorMap[errorID] = error
+  }
+  handleErrorOverlay()
+}

package/cache-dir/fast-refresh-overlay/components/accordion.js

@@ -0,0 +1,83 @@
+import * as React from "react"
+import { useId } from "./use-id"
+import * as keys from "../helpers/keys"
+import { match } from "../helpers/match"
+
+function ChevronIcon() {
+  return (
+    <svg
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      data-gatsby-overlay="chevron-icon"
+    >
+      <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" />
+    </svg>
+  )
+}
+
+export function Accordion({ children, ...rest }) {
+  return (
+    <ul data-gatsby-overlay="accordion" {...rest}>
+      {children}
+    </ul>
+  )
+}
+
+export function AccordionItem({
+  children,
+  disabled = false,
+  open = false,
+  title = `title`,
+  ...rest
+}) {
+  const [isOpen, setIsOpen] = React.useState(open)
+  const [prevIsOpen, setPrevIsOpen] = React.useState(open)
+  const id = useId(`accordion-item`)
+
+  if (open !== prevIsOpen) {
+    setIsOpen(open)
+    setPrevIsOpen(open)
+  }
+
+  const toggleOpen = () => {
+    const nextValue = !isOpen
+    setIsOpen(nextValue)
+  }
+
+  // If the AccordionItem is open, and the user hits the ESC key, then close it
+  const onKeyDown = event => {
+    if (isOpen && match(event, keys.Escape)) {
+      setIsOpen(false)
+    }
+  }
+
+  return (
+    <li
+      data-gatsby-overlay="accordion__item"
+      data-accordion-active={isOpen ? `true` : `false`}
+      {...rest}
+    >
+      <button
+        data-gatsby-overlay="accordion__item__heading"
+        type="button"
+        disabled={disabled}
+        aria-controls={id}
+        aria-expanded={isOpen}
+        onClick={toggleOpen}
+        onKeyDown={onKeyDown}
+      >
+        <ChevronIcon />
+        <div data-gatsby-overlay="accordion__item__title">{title}</div>
+      </button>
+      <div id={id} data-gatsby-overlay="accordion__item__content">
+        {children}
+      </div>
+    </li>
+  )
+}

package/cache-dir/fast-refresh-overlay/components/build-error.js

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Overlay, Header, Body, Footer, HeaderOpenClose } from "./overlay"
+import { CodeFrame } from "./code-frame"
+import { prettifyStack, openInEditor } from "../utils"
+
+// Error that is thrown on e.g. webpack errors and thus can't be dismissed and must be fixed
+export function BuildError({ error }) {
+  // Incoming build error shape is like this:
+  // Sometimes "Enter"
+  // ./relative-path-to-file
+  // Additional information (sometimes empty line => handled in "prettifyStack" function)
+  // /absolute-path-to-file
+  // Errors/Warnings
+  const decoded = prettifyStack(error)
+  const [filePath] = decoded
+  const file = filePath.content.split(`\n`)[0]
+  const lineMatch = filePath.content.match(/\((\d+)[^)]+\)/)
+  let line = 1
+
+  if (lineMatch) {
+    line = lineMatch[1]
+  }
+
+  return (
+    <Overlay>
+      <Header data-gatsby-error-type="build-error">
+        <div data-gatsby-overlay="header__cause-file">
+          <h1 id="gatsby-overlay-labelledby">Failed to compile</h1>
+          <span>{file}</span>
+        </div>
+        <HeaderOpenClose
+          open={() => openInEditor(file, line)}
+          dismiss={false}
+        />
+      </Header>
+      <Body>
+        <h2>Source</h2>
+        <CodeFrame decoded={decoded} />
+        <Footer id="gatsby-overlay-describedby">
+          This error occurred during the build process and can only be dismissed
+          by fixing the error.
+        </Footer>
+      </Body>
+    </Overlay>
+  )
+}

package/cache-dir/fast-refresh-overlay/components/code-frame.js

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export function CodeFrame({ decoded }) {
+  if (!decoded) {
+    return (
+      <pre data-gatsby-overlay="pre">
+        <code data-gatsby-overlay="pre__code" />
+      </pre>
+    )
+  }
+
+  return (
+    <pre data-gatsby-overlay="pre">
+      <code data-gatsby-overlay="pre__code">
+        {decoded.map((entry, index) => {
+          const style = {
+            color: entry.fg ? `var(--color-${entry.fg})` : undefined,
+            ...(entry.decoration === `bold`
+              ? { fontWeight: 800 }
+              : entry.decoration === `italic`
+              ? { fontStyle: `italic` }
+              : undefined),
+          }
+
+          return (
+            <span
+              key={`frame-${index}`}
+              data-gatsby-overlay="pre__code__span"
+              style={style}
+            >
+              {entry.content}
+            </span>
+          )
+        })}
+      </code>
+    </pre>
+  )
+}

package/cache-dir/fast-refresh-overlay/components/dev-ssr-error.js

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Overlay, Header, Body, Footer, HeaderOpenClose } from "./overlay"
+import { CodeFrame } from "./code-frame"
+import { prettifyStack, openInEditor, skipSSR, reloadPage } from "../utils"
+
+export function DevSsrError({ error }) {
+  const { codeFrame, source, line } = error
+  const decoded = prettifyStack(codeFrame)
+
+  return (
+    <Overlay>
+      <Header data-gatsby-error-type="build-error">
+        <div data-gatsby-overlay="header__cause-file">
+          <h1 id="gatsby-overlay-labelledby">Failed to server render (SSR)</h1>
+          <span>{source}</span>
+        </div>
+        <HeaderOpenClose
+          open={() => openInEditor(source, line)}
+          dismiss={false}
+        />
+      </Header>
+      <Body>
+        <p
+          id="gatsby-overlay-describedby"
+          data-gatsby-overlay="body__describedby"
+        >
+          React Components in Gatsby must render both successfully in the
+          browser and in a Node.js environment. When we tried to render your
+          page component in Node.js, it errored.
+        </p>
+        <h2>Source</h2>
+        <CodeFrame decoded={decoded} />
+        <div data-gatsby-overlay="codeframe__bottom">
+          See our docs page for more info on SSR errors:{` `}
+          <a href="https://www.gatsbyjs.com/docs/debugging-html-builds/">
+            Debugging HTML Builds
+          </a>
+        </div>
+        <p>
+          If you fixed the error, saved your file, and want to retry server
+          rendering this page, please reload the page.
+        </p>
+        <button
+          onClick={() => reloadPage()}
+          data-gatsby-overlay="primary-button"
+        >
+          Reload page
+        </button>
+        <h2 style={{ marginTop: `var(--space)` }}>Skip Server Render</h2>
+        <p>
+          If you don't wish to fix the SSR error at the moment, press the button
+          below to reload the page without attempting to do SSR.
+        </p>
+        <button onClick={() => skipSSR()} data-gatsby-overlay="primary-button">
+          Skip SSR
+        </button>
+        <Footer>
+          <span data-font-weight="bold">Note:</span> This error will show up
+          during "gatsby build" so it must be fixed before then. SSR errors in
+          module scope, e.g. outside of your own React components can't be
+          skipped.
+        </Footer>
+      </Body>
+    </Overlay>
+  )
+}

package/cache-dir/fast-refresh-overlay/components/error-boundary.js

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export class ErrorBoundary extends React.Component {
+  state = { error: null }
+
+  componentDidCatch(error) {
+    this.setState({ error })
+
+    // Forward component errors to Fast Refresh overlay system
+    if (
+      window._gatsbyEvents &&
+      typeof window._gatsbyEvents.push === `function`
+    ) {
+      window._gatsbyEvents.push([
+        `FAST_REFRESH`,
+        {
+          action: `SHOW_RUNTIME_ERRORS`,
+          payload: [error],
+        },
+      ])
+    }
+  }
+
+  render() {
+    // Without this check => possible infinite loop
+    return this.state.error && this.props.hasErrors ? null : this.props.children
+  }
+}

package/cache-dir/fast-refresh-overlay/components/getserverdata-error.js

@@ -0,0 +1,53 @@
+import * as React from "react"
+import { Overlay, Header, HeaderOpenClose, Body, Footer } from "./overlay"
+import { useFileCodeFrame } from "./hooks"
+import { CodeFrame } from "./code-frame"
+import { openInEditor } from "../utils"
+
+const filePathRegex = /webpack:\/[^/]+\/(.*)$/
+
+export function GetServerDataError({ error }) {
+  const stacktrace = error.stack
+  const info = stacktrace.find(CallSite => CallSite.fileName)
+  const filePath = `./${filePathRegex.exec(info?.fileName)[1]}`
+  const lineNumber = info?.lineNumber
+  const columnNumber = info?.columnNumber
+  const name =
+    info?.functionName === `Module.getServerData`
+      ? `getServerData`
+      : info?.functionName
+
+  const res = useFileCodeFrame({ filePath, lineNumber, columnNumber })
+
+  return (
+    <Overlay>
+      <Header data-gatsby-error-type="build-error">
+        <div data-gatsby-overlay="header__cause-file">
+          <h1 id="gatsby-overlay-labelledby">Unhandled getServerData Error</h1>
+          <span>{filePath}</span>
+        </div>
+        <HeaderOpenClose
+          dismiss={false}
+          open={() => openInEditor(filePath, lineNumber)}
+        />
+      </Header>
+      <Body>
+        <h2>Error Message</h2>
+        <p data-gatsby-overlay="body__error-message">
+          {error?.context?.sourceMessage}
+        </p>
+        <h2>Source</h2>
+        {filePath && (
+          <div data-gatsby-overlay="codeframe__top">
+            Function {name} in {filePath}:{lineNumber}
+          </div>
+        )}
+        <CodeFrame decoded={res.decoded} />
+        <Footer id="gatsby-overlay-describedby">
+          This error occured in the getServerData function and can only be
+          dismissed by fixing the error or adding error handling.
+        </Footer>
+      </Body>
+    </Overlay>
+  )
+}

package/cache-dir/fast-refresh-overlay/components/graphql-errors.js

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { Body, Header, HeaderOpenClose, Overlay } from "./overlay"
+import { Accordion, AccordionItem } from "./accordion"
+import { openInEditor, prettifyStack } from "../utils"
+import { CodeFrame } from "./code-frame"
+
+function WrappedAccordionItem({ error, open }) {
+  const title =
+    error?.error?.message ||
+    error.context.sourceMessage ||
+    `Unknown GraphQL error`
+  const docsUrl = error?.docsUrl
+  const filePath = error?.filePath
+  const lineNumber = error?.location?.start?.line
+  const columnNumber = error?.location?.start?.column
+
+  let locString = ``
+  if (typeof lineNumber !== `undefined`) {
+    locString += `:${lineNumber}`
+    if (typeof columnNumber !== `undefined`) {
+      locString += `:${columnNumber}`
+    }
+  }
+
+  // Sometimes the GraphQL error text has ANSI in it. If it's only text, it'll be passed through
+  const decoded = prettifyStack(error.text)
+
+  return (
+    <AccordionItem open={open} title={title}>
+      <div data-gatsby-overlay="body__graphql-error-message">
+        <div data-gatsby-overlay="codeframe__top">
+          <div data-gatsby-overlay="tag">
+            {error.level}
+            {` `}#{error.code}
+          </div>
+          <button
+            data-gatsby-overlay="body__open-in-editor"
+            onClick={() => openInEditor(filePath, lineNumber)}
+          >
+            Open in Editor
+          </button>
+        </div>
+        {filePath && (
+          <div data-gatsby-overlay="codeframe__top">
+            {filePath}
+            {locString}
+          </div>
+        )}
+        <CodeFrame decoded={decoded} />
+        {docsUrl && (
+          <div data-gatsby-overlay="codeframe__bottom">
+            See our docs page for more info on this error:{` `}
+            <a href={docsUrl}>{docsUrl}</a>
+          </div>
+        )}
+      </div>
+    </AccordionItem>
+  )
+}
+
+export function GraphqlErrors({ errors, dismiss }) {
+  const deduplicatedErrors = React.useMemo(
+    () => Array.from(new Set(errors)),
+    [errors]
+  )
+  const hasMultipleErrors = deduplicatedErrors.length > 1
+  return (
+    <Overlay>
+      <Header data-gatsby-error-type="graphql-error">
+        <div data-gatsby-overlay="header__cause-file">
+          <h1 id="gatsby-overlay-labelledby">
+            {hasMultipleErrors
+              ? `${errors.length} Unhandled GraphQL Errors`
+              : `Unhandled GraphQL Error`}
+          </h1>
+        </div>
+        <HeaderOpenClose dismiss={dismiss} />
+      </Header>
+      <Body>
+        <p
+          data-gatsby-overlay="body__describedby"
+          id="gatsby-overlay-describedby"
+        >
+          {hasMultipleErrors ? `Multiple` : `One`} unhandled GraphQL{` `}
+          {hasMultipleErrors ? `errors` : `error`} found in your files. See the
+          list below to fix {hasMultipleErrors ? `them` : `it`}:
+        </p>
+        <Accordion>
+          {deduplicatedErrors.map((error, index) => (
+            <WrappedAccordionItem
+              open={index === 0}
+              error={error}
+              key={`${error.sourceMessage}-${index}`}
+            />
+          ))}
+        </Accordion>
+      </Body>
+    </Overlay>
+  )
+}

package/cache-dir/fast-refresh-overlay/components/hooks.js

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { prettifyStack } from "../utils"
+
+const initialResponse = {
+  decoded: null,
+  sourcePosition: {
+    line: null,
+    number: null,
+  },
+  sourceContent: null,
+}
+
+export function useStackFrame(codeFrameInformation) {
+  const {
+    moduleId,
+    lineNumber,
+    columnNumber,
+    skipSourceMap,
+    endLineNumber,
+    endColumnNumber,
+  } = codeFrameInformation ?? {}
+
+  let url =
+    `/__original-stack-frame?moduleId=` +
+    window.encodeURIComponent(moduleId) +
+    `&lineNumber=` +
+    window.encodeURIComponent(lineNumber) +
+    `&columnNumber=` +
+    window.encodeURIComponent(columnNumber)
+
+  if (skipSourceMap) {
+    url += `&skipSourceMap=true`
+  }
+
+  if (endLineNumber) {
+    url += `&endLineNumber=` + window.encodeURIComponent(endLineNumber)
+
+    if (endColumnNumber) {
+      url += `&endColumnNumber=` + window.encodeURIComponent(endColumnNumber)
+    }
+  }
+
+  const [response, setResponse] = React.useState(initialResponse)
+
+  React.useEffect(() => {
+    if (!codeFrameInformation) return
+
+    async function fetchData() {
+      try {
+        const res = await fetch(url)
+        const json = await res.json()
+        const decoded = prettifyStack(json.codeFrame)
+        const { sourcePosition, sourceContent } = json
+        setResponse({
+          decoded,
+          sourceContent,
+          sourcePosition,
+        })
+      } catch (err) {
+        setResponse({
+          ...initialResponse,
+          decoded: prettifyStack(err.message),
+        })
+      }
+    }
+    fetchData()
+  }, [])
+
+  return response
+}
+
+export function useFileCodeFrame({ filePath, lineNumber, columnNumber }) {
+  const url =
+    `/__file-code-frame?filePath=` +
+    window.encodeURIComponent(filePath) +
+    `&lineNumber=` +
+    window.encodeURIComponent(lineNumber) +
+    `&columnNumber=` +
+    window.encodeURIComponent(columnNumber)
+
+  const [response, setResponse] = React.useState({ decoded: null })
+
+  React.useEffect(() => {
+    async function fetchData() {
+      try {
+        const res = await fetch(url)
+        const json = await res.json()
+        const decoded = prettifyStack(json.codeFrame)
+        setResponse({
+          decoded,
+        })
+      } catch (err) {
+        setResponse({
+          decoded: prettifyStack(err.message),
+        })
+      }
+    }
+    fetchData()
+  }, [])
+
+  return response
+}