[dev-overlay] Move Redbox open/close into dispatcher

Author: eps1lon

packages/next/src/client/components/react-dev-overlay/app/app-dev-overlay.tsx

@@ -1,7 +1,11 @@
-import type { OverlayState } from '../shared'
+import {
+  ACTION_ERROR_OVERLAY_OPEN,
+  type OverlayDispatch,
+  type OverlayState,
+} from '../shared'
 import type { GlobalErrorComponent } from '../../global-error'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { AppDevOverlayErrorBoundary } from './app-dev-overlay-error-boundary'
 import { FontStyles } from '../font/font-styles'
 import { DevOverlay } from '../ui/dev-overlay'
@@ -70,17 +74,18 @@ function ReplaySsrOnlyErrors({
 
 export function AppDevOverlay({
   state,
+  dispatch,
   globalError,
   children,
 }: {
   state: OverlayState
+  dispatch: OverlayDispatch
   globalError: [GlobalErrorComponent, React.ReactNode]
   children: React.ReactNode
 }) {
-  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(false)
   const openOverlay = useCallback(() => {
-    setIsErrorOverlayOpen(true)
-  }, [])
+    dispatch({ type: ACTION_ERROR_OVERLAY_OPEN })
+  }, [dispatch])
 
   return (
     <>
@@ -94,11 +99,7 @@ export function AppDevOverlay({
       <>
         {/* Fonts can only be loaded outside the Shadow DOM. */}
         <FontStyles />
-        <DevOverlay
-          state={state}
-          isErrorOverlayOpen={isErrorOverlayOpen}
-          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-        />
+        <DevOverlay state={state} dispatch={dispatch} />
       </>
     </>
   )

packages/next/src/client/components/react-dev-overlay/pages/hooks.ts

@@ -30,5 +30,6 @@ export const usePagesDevOverlay = () => {
   return {
     state,
     onComponentError,
+    dispatch,
   }
 }

packages/next/src/client/components/react-dev-overlay/pages/pages-dev-overlay.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { PagesDevOverlayErrorBoundary } from './pages-dev-overlay-error-boundary'
 import { usePagesDevOverlay } from './hooks'
 import { FontStyles } from '../font/font-styles'
@@ -13,9 +12,7 @@ interface PagesDevOverlayProps {
 }
 
 export function PagesDevOverlay({ children }: PagesDevOverlayProps) {
-  const { state, onComponentError } = usePagesDevOverlay()
-
-  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)
+  const { state, dispatch, onComponentError } = usePagesDevOverlay()
 
   return (
     <>
@@ -25,11 +22,7 @@ export function PagesDevOverlay({ children }: PagesDevOverlayProps) {
 
       {/* Fonts can only be loaded outside the Shadow DOM. */}
       <FontStyles />
-      <DevOverlay
-        state={state}
-        isErrorOverlayOpen={isErrorOverlayOpen}
-        setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-      />
+      <DevOverlay state={state} dispatch={dispatch} />
     </>
   )
 }

packages/next/src/client/components/react-dev-overlay/shared.ts

@@ -27,7 +27,9 @@ export interface OverlayState {
   disableDevIndicator: boolean
   debugInfo: DebugInfo
   routerType: 'pages' | 'app'
+  isErrorOverlayOpen: boolean
 }
+export type OverlayDispatch = React.Dispatch<BusEvent>
 
 export const ACTION_STATIC_INDICATOR = 'static-indicator'
 export const ACTION_BUILD_OK = 'build-ok'
@@ -39,6 +41,9 @@ export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_DEBUG_INFO = 'debug-info'
 export const ACTION_DEV_INDICATOR = 'dev-indicator'
+export const ACTION_ERROR_OVERLAY_OPEN = 'error-overlay-open'
+export const ACTION_ERROR_OVERLAY_CLOSE = 'error-overlay-close'
+export const ACTION_ERROR_OVERLAY_TOGGLE = 'error-overlay-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -90,6 +95,16 @@ interface DevIndicatorAction {
   devIndicator: DevIndicatorServerState
 }
 
+export interface ErrorOverlayOpenAction {
+  type: typeof ACTION_ERROR_OVERLAY_OPEN
+}
+export interface ErrorOverlayCloseAction {
+  type: typeof ACTION_ERROR_OVERLAY_CLOSE
+}
+export interface ErrorOverlayToggleAction {
+  type: typeof ACTION_ERROR_OVERLAY_TOGGLE
+}
+
 export type BusEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -101,6 +116,9 @@ export type BusEvent =
   | StaticIndicatorAction
   | DebugInfoAction
   | DevIndicatorAction
+  | ErrorOverlayOpenAction
+  | ErrorOverlayCloseAction
+  | ErrorOverlayToggleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -140,6 +158,7 @@ export const INITIAL_OVERLAY_STATE: Omit<OverlayState, 'routerType'> = {
   nextId: 1,
   buildError: null,
   errors: [],
+  isErrorOverlayOpen: false,
   notFound: false,
   staticIndicator: false,
   /* 
@@ -239,6 +258,15 @@ export function useErrorOverlayReducer(routerType: 'pages' | 'app') {
             shouldDisableDevIndicator || !!action.devIndicator.disabledUntil,
         }
       }
+      case ACTION_ERROR_OVERLAY_OPEN: {
+        return { ...state, isErrorOverlayOpen: true }
+      }
+      case ACTION_ERROR_OVERLAY_CLOSE: {
+        return { ...state, isErrorOverlayOpen: false }
+      }
+      case ACTION_ERROR_OVERLAY_TOGGLE: {
+        return { ...state, isErrorOverlayOpen: !state.isErrorOverlayOpen }
+      }
       default: {
         return state
       }

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -1,5 +1,11 @@
 import type { CSSProperties, Dispatch, SetStateAction } from 'react'
-import { STORAGE_KEY_POSITION, type OverlayState } from '../../../../shared'
+import {
+  ACTION_ERROR_OVERLAY_OPEN,
+  ACTION_ERROR_OVERLAY_TOGGLE,
+  STORAGE_KEY_POSITION,
+  type OverlayDispatch,
+  type OverlayState,
+} from '../../../../shared'
 
 import { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Toast } from '../../toast'
@@ -30,15 +36,13 @@ export function DevToolsIndicator({
   state,
   errorCount,
   isBuildError,
-  setIsErrorOverlayOpen,
   ...props
 }: {
   state: OverlayState
+  dispatch: OverlayDispatch
   errorCount: number
   isBuildError: boolean
-  setIsErrorOverlayOpen: (
-    isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)
-  ) => void
+
   scale: DevToolsScale
   setScale: (value: DevToolsScale) => void
 }) {
@@ -57,7 +61,6 @@ export function DevToolsIndicator({
           method: 'POST',
         })
       }}
-      setIsErrorOverlayOpen={setIsErrorOverlayOpen}
       isTurbopack={!!process.env.TURBOPACK}
       disabled={state.disableDevIndicator || !isDevToolsIndicatorVisible}
       isBuildError={isBuildError}
@@ -96,7 +99,7 @@ function DevToolsPopover({
   isTurbopack,
   isBuildError,
   hide,
-  setIsErrorOverlayOpen,
+  dispatch,
   scale,
   setScale,
 }: {
@@ -108,9 +111,7 @@ function DevToolsPopover({
   isTurbopack: boolean
   isBuildError: boolean
   hide: () => void
-  setIsErrorOverlayOpen: (
-    isOverlayOpen: boolean | ((prev: boolean) => boolean)
-  ) => void
+  dispatch: OverlayDispatch
   scale: DevToolsScale
   setScale: (value: DevToolsScale) => void
 }) {
@@ -210,12 +211,12 @@ function DevToolsPopover({
   function openErrorOverlay() {
     setOpen(null)
     if (issueCount > 0) {
-      setIsErrorOverlayOpen(true)
+      dispatch({ type: ACTION_ERROR_OVERLAY_OPEN })
     }
   }
 
   function toggleErrorOverlay() {
-    setIsErrorOverlayOpen((prev) => !prev)
+    dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
   }
 
   function openRootMenu() {

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay/error-overlay.tsx

@@ -1,4 +1,8 @@
-import type { OverlayState } from '../../../../shared'
+import {
+  ACTION_ERROR_OVERLAY_CLOSE,
+  type OverlayDispatch,
+  type OverlayState,
+} from '../../../../shared'
 
 import { Suspense } from 'react'
 import { BuildError } from '../../../container/build-error'
@@ -18,21 +22,19 @@ export interface ErrorBaseProps {
 
 export function ErrorOverlay({
   state,
+  dispatch,
   runtimeErrors,
-  isErrorOverlayOpen,
-  setIsErrorOverlayOpen,
   errorCount,
 }: {
   state: OverlayState
+  dispatch: OverlayDispatch
   runtimeErrors: ReadyRuntimeError[]
-  isErrorOverlayOpen: boolean
-  setIsErrorOverlayOpen: (value: boolean) => void
   errorCount: number
 }) {
   const isTurbopack = !!process.env.TURBOPACK
 
   // This hook lets us do an exit animation before unmounting the component
-  const { mounted, rendered } = useDelayedRender(isErrorOverlayOpen, {
+  const { mounted, rendered } = useDelayedRender(state.isErrorOverlayOpen, {
     exitDelay: transitionDurationMs,
   })
 
@@ -74,7 +76,7 @@ export function ErrorOverlay({
       debugInfo={state.debugInfo}
       runtimeErrors={runtimeErrors}
       onClose={() => {
-        setIsErrorOverlayOpen(false)
+        dispatch({ type: ACTION_ERROR_OVERLAY_CLOSE })
       }}
     />
   )

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.tsx

@@ -1,4 +1,4 @@
-import type { OverlayState } from '../shared'
+import type { OverlayDispatch, OverlayState } from '../shared'
 
 import { ShadowPortal } from './components/shadow-portal'
 import { Base } from './styles/base'
@@ -13,14 +13,10 @@ import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-to
 
 export function DevOverlay({
   state,
-  isErrorOverlayOpen,
-  setIsErrorOverlayOpen,
+  dispatch,
 }: {
   state: OverlayState
-  isErrorOverlayOpen: boolean
-  setIsErrorOverlayOpen: (
-    isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)
-  ) => void
+  dispatch: OverlayDispatch
 }) {
   const [scale, setScale] = useDevToolsScale()
   return (
@@ -41,18 +37,17 @@ export function DevOverlay({
                   scale={scale}
                   setScale={setScale}
                   state={state}
+                  dispatch={dispatch}
                   errorCount={totalErrorCount}
                   isBuildError={isBuildError}
-                  setIsErrorOverlayOpen={setIsErrorOverlayOpen}
                 />
               )}
 
               <ErrorOverlay
                 state={state}
+                dispatch={dispatch}
                 runtimeErrors={runtimeErrors}
                 errorCount={totalErrorCount}
-                isErrorOverlayOpen={isErrorOverlayOpen}
-                setIsErrorOverlayOpen={setIsErrorOverlayOpen}
               />
             </>
           )