Skip to content

Commit dcb69ee

Browse files
TimerTimer
authored
Strictly type react-dev-overlay (#15669)
Fixes #15668
1 parent 3caa996 commit dcb69ee

File tree

17 files changed

+78
-84
lines changed

17 files changed

+78
-84
lines changed

‎packages/react-dev-overlay/src/client.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function onUnhandledError(ev: ErrorEvent) {
1515
Bus.emit({
1616
type: Bus.TYPE_UNHANDLED_ERROR,
1717
reason: error,
18-
frames: parseStack(e.stack),
18+
frames: parseStack(e.stack!),
1919
})
2020
}
2121

@@ -34,7 +34,7 @@ function onUnhandledRejection(ev: PromiseRejectionEvent) {
3434
Bus.emit({
3535
type: Bus.TYPE_UNHANDLED_REJECTION,
3636
reason: reason,
37-
frames: parseStack(e.stack),
37+
frames: parseStack(e.stack!),
3838
})
3939
}
4040

‎packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
4141
}
4242
}
4343

44-
function ReactDevOverlay({ children }) {
44+
const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
45+
children,
46+
}) {
4547
const [state, dispatch] = React.useReducer<
4648
React.Reducer<OverlayState, Bus.BusEvent>
4749
>(reducer, { nextId: 1, buildError: null, errors: [] })
@@ -76,7 +78,7 @@ function ReactDevOverlay({ children }) {
7678
<ComponentStyles />
7779

7880
{hasBuildError ? (
79-
<BuildError message={state.buildError} />
81+
<BuildError message={state.buildError!} />
8082
) : hasRuntimeErrors ? (
8183
<Errors errors={state.errors} />
8284
) : undefined}

‎packages/react-dev-overlay/src/internal/bus.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function drain() {
4545
// event(s)
4646
Boolean(handlers.size)
4747
) {
48-
const ev = queue.shift()
48+
const ev = queue.shift()!
4949
handlers.forEach((handler) => handler(ev))
5050
}
5151
}, 1)

‎packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const CodeFrame: React.FC<CodeFrameProps> = function CodeFrame({
1616
const prefixLength = lines
1717
.map((line) => /^>? +\d+ +\| ( *)/.exec(stripAnsi(line)))
1818
.filter(Boolean)
19-
.map((v) => v.pop())
19+
.map((v) => v!.pop()!)
2020
.reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)
2121

2222
if (prefixLength > 1) {
@@ -43,7 +43,7 @@ export const CodeFrame: React.FC<CodeFrameProps> = function CodeFrame({
4343
const open = React.useCallback(() => {
4444
const params = new URLSearchParams()
4545
for (const key in stackFrame) {
46-
params.append(key, (stackFrame[key] ?? '').toString())
46+
params.append(key, ((stackFrame as any)[key] ?? '').toString())
4747
}
4848

4949
self

‎packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Dialog: React.FC<DialogProps> = function Dialog({
1414
onClose,
1515
...props
1616
}) {
17-
const [dialog, setDialog] = React.useState<HTMLDivElement>(null)
17+
const [dialog, setDialog] = React.useState<HTMLDivElement | null>(null)
1818
const onDialog = React.useCallback((node) => {
1919
setDialog(node)
2020
}, [])
@@ -47,8 +47,9 @@ const Dialog: React.FC<DialogProps> = function Dialog({
4747
}
4848
}
4949

50-
shadowRoot.addEventListener('keydown', handler)
51-
return () => shadowRoot.removeEventListener('keydown', handler)
50+
shadowRoot.addEventListener('keydown', handler as EventListener)
51+
return () =>
52+
shadowRoot.removeEventListener('keydown', handler as EventListener)
5253
}, [dialog])
5354

5455
return (

‎packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
1414
next,
1515
close,
1616
}) {
17-
const buttonLeft = React.useRef<HTMLButtonElement>()
18-
const buttonRight = React.useRef<HTMLButtonElement>()
19-
const buttonClose = React.useRef<HTMLButtonElement>()
17+
const buttonLeft = React.useRef<HTMLButtonElement | null>(null)
18+
const buttonRight = React.useRef<HTMLButtonElement | null>(null)
19+
const buttonClose = React.useRef<HTMLButtonElement | null>(null)
2020

2121
const [nav, setNav] = React.useState<HTMLElement | null>(null)
2222
const onNav = React.useCallback((el: HTMLElement) => {
@@ -54,16 +54,18 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
5454
}
5555
}
5656

57-
close()
57+
if (close) {
58+
close()
59+
}
5860
}
5961
}
6062

61-
root.addEventListener('keydown', handler)
63+
root.addEventListener('keydown', handler as EventListener)
6264
if (root !== d) {
6365
d.addEventListener('keydown', handler)
6466
}
6567
return function () {
66-
root.removeEventListener('keydown', handler)
68+
root.removeEventListener('keydown', handler as EventListener)
6769
if (root !== d) {
6870
d.removeEventListener('keydown', handler)
6971
}
@@ -83,11 +85,11 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
8385
const a = root.activeElement
8486

8587
if (previous == null) {
86-
if (a === buttonLeft.current) {
88+
if (buttonLeft.current && a === buttonLeft.current) {
8789
buttonLeft.current.blur()
8890
}
8991
} else if (next == null) {
90-
if (a === buttonRight.current) {
92+
if (buttonRight.current && a === buttonRight.current) {
9193
buttonRight.current.blur()
9294
}
9395
}
@@ -142,7 +144,7 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
142144
&nbsp;
143145
{children}
144146
</nav>
145-
{close && (
147+
{close ? (
146148
<button
147149
ref={buttonClose}
148150
type="button"
@@ -174,7 +176,7 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
174176
</svg>
175177
</span>
176178
</button>
177-
)}
179+
) : null}
178180
</div>
179181
)
180182
}

‎packages/react-dev-overlay/src/internal/components/Overlay/Overlay.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
// @ts-ignore
12
import allyDisable from 'ally.js/maintain/disabled'
3+
// @ts-ignore
24
import allyTrap from 'ally.js/maintain/tab-focus'
35
import * as React from 'react'
46
import { lock, unlock } from './body-locker'
@@ -17,8 +19,8 @@ const Overlay: React.FC<OverlayProps> = function Overlay({
1719
}
1820
}, [])
1921

20-
const [overlay, setOverlay] = React.useState<HTMLElement | null>(null)
21-
const onOverlay = React.useCallback((el: HTMLElement) => {
22+
const [overlay, setOverlay] = React.useState<HTMLDivElement | null>(null)
23+
const onOverlay = React.useCallback((el: HTMLDivElement) => {
2224
setOverlay(el)
2325
}, [])
2426

‎packages/react-dev-overlay/src/internal/components/ShadowPortal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const ShadowPortal: React.FC<ShadowPortalProps> = function Portal({
1414
let [, forceUpdate] = React.useState()
1515

1616
React.useLayoutEffect(() => {
17-
const ownerDocument = mountNode.current.ownerDocument
17+
const ownerDocument = mountNode.current!.ownerDocument!
1818
portalNode.current = ownerDocument.createElement('nextjs-portal')
1919
shadowNode.current = portalNode.current.attachShadow({ mode: 'open' })
2020
ownerDocument.body.appendChild(portalNode.current)

‎packages/react-dev-overlay/src/internal/container/Errors.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export const Errors: React.FC<ErrorsProps> = function Errors({ errors }) {
209209

210210
// This component shouldn't be rendered with no errors, but if it is, let's
211211
// handle it gracefully by rendering nothing.
212-
if (errors.length < 1) {
212+
if (errors.length < 1 || activeError == null) {
213213
return null
214214
}
215215

@@ -252,14 +252,14 @@ export const Errors: React.FC<ErrorsProps> = function Errors({ errors }) {
252252
type="error"
253253
aria-labelledby="nextjs__container_errors_label"
254254
aria-describedby="nextjs__container_errors_desc"
255-
onClose={!isServerError && minimize}
255+
onClose={isServerError ? undefined : minimize}
256256
>
257257
<DialogContent>
258258
<DialogHeader className="nextjs-container-errors-header">
259259
<LeftRightDialogHeader
260260
previous={activeIdx > 0 ? previous : null}
261261
next={activeIdx < readyErrors.length - 1 ? next : null}
262-
close={!isServerError && minimize}
262+
close={isServerError ? undefined : minimize}
263263
>
264264
<small>
265265
<span>{activeIdx + 1}</span> of{' '}

‎packages/react-dev-overlay/src/internal/container/RuntimeError.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const CallStackFrame: React.FC<{
2121

2222
const params = new URLSearchParams()
2323
for (const key in f) {
24-
params.append(key, (f[key] ?? '').toString())
24+
params.append(key, ((f as any)[key] ?? '').toString())
2525
}
2626

2727
self
@@ -134,8 +134,8 @@ const RuntimeError: React.FC<RuntimeErrorProps> = function RuntimeError({
134134
/>
135135
))}
136136
<CodeFrame
137-
stackFrame={firstFrame.originalStackFrame}
138-
codeFrame={firstFrame.originalCodeFrame}
137+
stackFrame={firstFrame.originalStackFrame!}
138+
codeFrame={firstFrame.originalCodeFrame!}
139139
/>
140140
</React.Fragment>
141141
) : undefined}

0 commit comments

Comments
 (0)