fix(gatsby): Refactor overlay utils (#31005)

Author: LekoArts

packages/gatsby/cache-dir/css-to-object.js

@@ -0,0 +1,19 @@
+/**
+ * Converts a string of CSS into object syntax
+ * @param strings
+ * @param keys
+ * @returns {Object} CSS in object syntax
+ * @example
+ * const output = css`
+ *  html {
+ *    color: rebeccapurple;
+ *  }
+ * `
+ */
+export function css(strings, ...keys) {
+  const lastIndex = strings.length - 1
+  return (
+    strings.slice(0, lastIndex).reduce((p, s, i) => p + s + keys[i], ``) +
+    strings[lastIndex]
+  )
+}

packages/gatsby/cache-dir/fast-refresh-overlay/index.js

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { ErrorBoundary } from "./components/error-boundary"
-import { ShadowPortal } from "./components/portal"
+import { ShadowPortal } from "../shadow-portal"
 import { Style } from "./style"
 import { BuildError } from "./components/build-error"
 import { RuntimeErrors } from "./components/runtime-errors"
@@ -102,7 +102,7 @@ function DevOverlay({ children }) {
     <React.Fragment>
       <ErrorBoundary hasErrors={hasErrors}>{children ?? null}</ErrorBoundary>
       {hasErrors ? (
-        <ShadowPortal>
+        <ShadowPortal identifier="gatsby-fast-refresh">
           <Style />
           <ErrorComponent />
         </ShadowPortal>

packages/gatsby/cache-dir/fast-refresh-overlay/style.js

@@ -1,12 +1,5 @@
 import * as React from "react"
-
-function css(strings, ...keys) {
-  const lastIndex = strings.length - 1
-  return (
-    strings.slice(0, lastIndex).reduce((p, s, i) => p + s + keys[i], ``) +
-    strings[lastIndex]
-  )
-}
+import { css } from "../css-to-object"
 
 export const Style = () => (
   <style
@@ -46,8 +39,8 @@ export const Style = () => (
           --codeFrame-color: #414141;
           --codeFrame-button-bg: white;
           --radii: 5px;
-          --z-index-backdrop: 8000;
-          --z-index-overlay: 9000;
+          --z-index-backdrop: 9000;
+          --z-index-overlay: 10000;
           --space: 1.5em;
           --space-sm: 1em;
           --space-lg: 2.5em;

packages/gatsby/cache-dir/loading-indicator/index.js

@@ -1,31 +1,19 @@
-import React from "react"
-
+import * as React from "react"
 import emitter from "../emitter"
 import { Indicator } from "./indicator"
 
-// no hooks because we support react versions without hooks support
-export class LoadingIndicatorEventHandler extends React.Component {
-  state = { visible: false }
-
-  show = () => {
-    this.setState({ visible: true })
-  }
-
-  hide = () => {
-    this.setState({ visible: false })
-  }
+export function LoadingIndicatorEventHandler() {
+  const [visible, setVisible] = React.useState(false)
 
-  componentDidMount() {
-    emitter.on(`onDelayedLoadPageResources`, this.show)
-    emitter.on(`onRouteUpdate`, this.hide)
-  }
+  React.useEffect(() => {
+    emitter.on(`onDelayedLoadPageResources`, () => setVisible(true))
+    emitter.on(`onRouteUpdate`, () => setVisible(false))
 
-  componentWillUnmount() {
-    emitter.off(`onDelayedLoadPageResources`, this.show)
-    emitter.off(`onRouteUpdate`, this.hide)
-  }
+    return () => {
+      emitter.off(`onDelayedLoadPageResources`, () => setVisible(true))
+      emitter.off(`onRouteUpdate`, () => setVisible(false))
+    }
+  }, [])
 
-  render() {
-    return <Indicator visible={this.state.visible} />
-  }
+  return <Indicator visible={visible} />
 }

packages/gatsby/cache-dir/loading-indicator/indicator.js

@@ -1,6 +1,6 @@
-import React from "react"
-import Portal from "./portal"
-import Style from "./style"
+import * as React from "react"
+import { ShadowPortal } from "../shadow-portal"
+import { Style } from "./style"
 import { isLoadingIndicatorEnabled } from "$virtual/loading-indicator"
 import { debugLog } from "../debug-log"
 
@@ -38,7 +38,7 @@ export function Indicator({ visible = true }) {
   }
 
   return (
-    <Portal>
+    <ShadowPortal identifier="gatsby-qod">
       <Style />
       <div
         data-gatsby-loading-indicator="root"
@@ -60,6 +60,6 @@ export function Indicator({ visible = true }) {
           {visible ? `Preparing requested page` : ``}
         </div>
       </div>
-    </Portal>
+    </ShadowPortal>
   )
 }

packages/gatsby/cache-dir/loading-indicator/portal.js

@@ -1,28 +1,17 @@
 import React from "react"
+import { css } from "../css-to-object"
 
-function css(strings, ...keys) {
-  const lastIndex = strings.length - 1
-  return (
-    strings.slice(0, lastIndex).reduce((p, s, i) => p + s + keys[i], ``) +
-    strings[lastIndex]
-  )
-}
-
-const Style = () => (
+export const Style = () => (
   <style
     dangerouslySetInnerHTML={{
       __html: css`
         :host {
-          --purple-60: #663399;
-          --gatsby: var(--purple-60);
-          --purple-40: #b17acc;
-          --purple-20: #f1defa;
-          --dimmedWhite: rgba(255, 255, 255, 0.8);
-          --white: #ffffff;
-          --black: #000000;
-          --grey-90: #232129;
+          --spinnerColor: #663399;
+          --borderLeft: #b17acc;
+          --background: #ffffff;
+          --color: #232129;
           --radii: 4px;
-          --z-index-indicator: 9000;
+          --z-index-indicator: 10000;
           --shadow: 0px 2px 4px rgba(46, 41, 51, 0.08),
             0px 4px 8px rgba(71, 63, 79, 0.16);
         }
@@ -31,15 +20,15 @@ const Style = () => (
           font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
             "Segoe UI Symbol" !important;
-          background: var(--white);
-          color: var(--grey-90);
+          background: var(--background);
+          color: var(--color);
           position: fixed;
           bottom: 1.5em;
           left: 1.5em;
           box-shadow: var(--shadow);
           border-radius: var(--radii);
           z-index: var(--z-index-indicator);
-          border-left: 0.25em solid var(--purple-40);
+          border-left: 0.25em solid var(--borderLeft);
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -67,7 +56,7 @@ const Style = () => (
           animation: spin 1s linear infinite;
           height: 18px;
           width: 18px;
-          color: var(--gatsby);
+          color: var(--spinnerColor);
         }
 
         [data-gatsby-loading-indicator="text"] {
@@ -98,17 +87,13 @@ const Style = () => (
         }
 
         @media (prefers-color-scheme: dark) {
-          [data-gatsby-loading-indicator="root"] {
-            background: var(--grey-90);
-            color: var(--white);
-          }
-          [data-gatsby-loading-indicator="spinner"] {
-            color: var(--purple-20);
+          :host {
+            --spinnerColor: #f1defa;
+            --background: #232129;
+            --color: #ffffff;
           }
         }
       `,
     }}
   />
 )
-
-export default Style

packages/gatsby/cache-dir/loading-indicator/style.js

@@ -1,15 +1,15 @@
 import * as React from "react"
 import { createPortal } from "react-dom"
 
-export const ShadowPortal = function Portal({ children }) {
+export const ShadowPortal = ({ children, identifier }) => {
   const mountNode = React.useRef(null)
   const portalNode = React.useRef(null)
   const shadowNode = React.useRef(null)
   const [, forceUpdate] = React.useState()
 
   React.useLayoutEffect(() => {
     const ownerDocument = mountNode.current.ownerDocument
-    portalNode.current = ownerDocument.createElement(`gatsby-fast-refresh`)
+    portalNode.current = ownerDocument.createElement(identifier)
     shadowNode.current = portalNode.current.attachShadow({ mode: `open` })
     ownerDocument.body.appendChild(portalNode.current)
     forceUpdate({})