fix(gatsby): Update styles & overlay for Fast Refresh (#29797)

Co-authored-by: gatsbybot <[email protected]>
gatsbyjs · Feb 26, 2021 · 22da802 · 22da802
1 parent 1c66153
commit 22da802
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 35 deletions.
diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/build-error.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/build-error.js
@@ -6,12 +6,14 @@ 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 [file, ...rest] = error.split(`\n`)
-  const decoded = prettifyStack(rest)
+  const decoded = prettifyStack(error)
+  const [filePath] = decoded
+  const file = filePath.content.split(`\n`)[0]
 
   return (
     <Overlay>
@@ -25,11 +27,11 @@ export function BuildError({ error }) {
       <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>
-      <Footer id="gatsby-overlay-describedby">
-        This error occurred during the build process and can only be dismissed
-        by fixing the error.
-      </Footer>
     </Overlay>
   )
 }
diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/code-frame.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/code-frame.js
@@ -13,22 +13,6 @@ export function CodeFrame({ decoded }) {
     <pre data-gatsby-overlay="pre">
       <code data-gatsby-overlay="pre__code">
         {decoded.map((entry, index) => {
-          // Check if content is "Enter" and render other element that collapses
-          // Otherwise an empty line would be printed
-          if (
-            index === 0 &&
-            entry.content ===
-              `
-`
-          ) {
-            return (
-              <span
-                key={`frame-${index}`}
-                data-gatsby-overlay="pre__code__span__empty"
-              />
-            )
-          }
-
           const style = {
             color: entry.fg ? `var(--color-${entry.fg})` : undefined,
             ...(entry.decoration === `bold`

diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js
@@ -1,7 +1,8 @@
 import * as React from "react"
 import { Body, Header, HeaderOpenClose, Overlay } from "./overlay"
 import { Accordion, AccordionItem } from "./accordion"
-import { openInEditor } from "../utils"
+import { openInEditor, prettifyStack } from "../utils"
+import { CodeFrame } from "./code-frame"
 
 function WrappedAccordionItem({ error, open }) {
   const title =
@@ -12,6 +13,7 @@ function WrappedAccordionItem({ error, open }) {
   const filePath = error?.filePath
   const lineNumber = error?.location?.start?.line
   const columnNumber = error?.location?.start?.column
+
   let locString = ``
   if (typeof lineNumber !== `undefined`) {
     locString += `:${lineNumber}`
@@ -20,6 +22,9 @@ function WrappedAccordionItem({ error, open }) {
     }
   }
 
+  // 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">
@@ -41,9 +46,7 @@ function WrappedAccordionItem({ error, open }) {
             {locString}
           </div>
         )}
-        <pre data-gatsby-overlay="pre">
-          <code data-gatsby-overlay="pre__code">{error.text}</code>
-        </pre>
+        <CodeFrame decoded={decoded} />
         {docsUrl && (
           <div data-gatsby-overlay="codeframe__bottom">
             See our docs page for more info on this error:{` `}

diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/style.js b/packages/gatsby/cache-dir/fast-refresh-overlay/style.js
@@ -42,7 +42,8 @@ export const Style = () => (
           --color-ansi-bright-red: #d91e18;
           --color-ansi-bright-yellow: #aa5d00;
           --radii: 5px;
-          --z-index-elevated: 1000;
+          --z-index-backdrop: 8000;
+          --z-index-overlay: 9000;
           --space: 1.5em;
           --space-sm: 1em;
           --space-lg: 2.5em;
@@ -59,6 +60,7 @@ export const Style = () => (
           width: 100%;
           backdrop-filter: blur(10px);
           cursor: not-allowed;
+          z-index: var(--z-index-backdrop);
         }
 
         [data-gatsby-overlay="root"] {
@@ -79,20 +81,24 @@ export const Style = () => (
           border-radius: var(--radii);
           display: inline-flex;
           flex-direction: column;
-          z-index: var(--z-index-elevated);
+          z-index: var(--z-index-overlay);
         }
 
         [data-gatsby-overlay="header"] {
           display: grid;
           grid-gap: var(--space-sm);
-          grid-template-columns: 1fr;
+          grid-template-columns: 1fr auto;
           color: var(--dimmedWhite);
           background: var(--gatsby);
           padding: var(--space);
           border-top-left-radius: var(--radii);
           border-top-right-radius: var(--radii);
         }
 
+        [data-gatsby-error-type="build-error"][data-gatsby-overlay="header"] {
+          grid-template-columns: 1fr;
+        }
+
         [data-gatsby-overlay="body"] {
           padding: var(--space);
           overflow: auto;
@@ -143,6 +149,9 @@ export const Style = () => (
         }
 
         header[data-gatsby-error-type="runtime-error"]
+          [data-gatsby-overlay="header__cause-file"]
+          h1,
+        header[data-gatsby-error-type="graphql-error"]
           [data-gatsby-overlay="header__cause-file"]
           h1 {
           color: var(--white);
@@ -172,10 +181,13 @@ export const Style = () => (
 
         [data-gatsby-overlay="codeframe__top"] {
           display: flex;
+          flex-wrap: wrap;
+          align-items: center;
           justify-content: space-between;
           background: var(--codeFrame-bg);
           padding: 0.5em var(--space-sm);
           color: var(--codeFrame-color);
+          word-break: break-word;
         }
 
         [data-gatsby-overlay="body__open-in-editor"] {
@@ -190,6 +202,14 @@ export const Style = () => (
           min-width: 2em;
           padding: 0.25em 0.75em;
           appearance: none;
+          margin-right: var(--space-sm);
+        }
+
+        [data-gatsby-overlay="codeframe__top"]
+          [data-gatsby-overlay="body__open-in-editor"] {
+          margin-right: 0;
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
         }
 
         [data-gatsby-overlay="header__close-button"] {
@@ -205,7 +225,6 @@ export const Style = () => (
           align-items: center;
           justify-content: center;
           border-radius: var(--radii);
-          margin-left: var(--space-sm);
         }
 
         [data-gatsby-overlay="body__graphql-error-message"] {
@@ -227,7 +246,7 @@ export const Style = () => (
         }
 
         [data-gatsby-overlay="footer"] {
-          padding: 0 var(--space) var(--space) var(--space);
+          padding-top: var(--space);
         }
 
         [data-gatsby-overlay="accordion"] {
@@ -312,7 +331,8 @@ export const Style = () => (
         }
 
         @media (min-width: 768px) {
-          [data-gatsby-overlay="header"] {
+          [data-gatsby-overlay="header"],
+          [data-gatsby-error-type="build-error"][data-gatsby-overlay="header"] {
             grid-template-columns: 1fr auto;
           }
         }

diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/utils.js b/packages/gatsby/cache-dir/fast-refresh-overlay/utils.js
@@ -1,17 +1,25 @@
 import Anser from "anser"
 
+const enterRegex = /^\s$/
+
 export function prettifyStack(errorInformation) {
   let txt
   if (Array.isArray(errorInformation)) {
     txt = errorInformation.join(`\n`)
   } else {
     txt = errorInformation
   }
-  return Anser.ansiToJson(txt, {
+  const generated = Anser.ansiToJson(txt, {
     remove_empty: true,
     use_classes: true,
     json: true,
   })
+  // Sometimes the first line/entry is an "Enter", so we need to filter this out
+  const [firstLine, ...rest] = generated
+  if (enterRegex.test(firstLine.content)) {
+    return rest
+  }
+  return generated
 }
 
 export function openInEditor(file, lineNumber = 1) {

diff --git a/packages/gatsby/src/utils/start-server.ts b/packages/gatsby/src/utils/start-server.ts
@@ -371,10 +371,15 @@ module.exports = {
       }
     }
 
+    if (!fileModule) {
+      res.json(emptyResponse)
+      return
+    }
+
     // We need the internal webpack file that is used in the bundle, not the module source.
     // It doesn't have the correct sourceMap.
-    const webpackSource = compilation.codeGenerationResults
-      .get(fileModule)
+    const webpackSource = compilation?.codeGenerationResults
+      ?.get(fileModule)
       ?.sources.get(`javascript`)
 
     const sourceMap = webpackSource?.map()