Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(TS): help typescript to find his way for the ErrorBoundaryProps #90

Merged
merged 1 commit into from
May 5, 2021
Merged

fix(TS): help typescript to find his way for the ErrorBoundaryProps #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/__tests__/hook.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ test('handleError forwards along async errors', async () => {
"The above error occurred in the <AsyncBomb> component:

at AsyncBomb (<PROJECT_ROOT>/src/__tests__/hook.tsx:21:41)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:66:3)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:72:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary."
`)
Expand Down Expand Up @@ -95,7 +95,7 @@ test('can pass an error to useErrorHandler', async () => {
"The above error occurred in the <AsyncBomb> component:

at AsyncBomb (<PROJECT_ROOT>/src/__tests__/hook.tsx:66:37)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:66:3)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:72:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary."
`)
Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ test('standard use-case', () => {
"The above error occurred in the <Bomb> component:

at Bomb (<PROJECT_ROOT>/src/__tests__/index.tsx:18:9)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:66:3)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:72:3)
at div
at div
at App (<PROJECT_ROOT>/src/__tests__/index.tsx:28:43)
Expand Down Expand Up @@ -162,7 +162,7 @@ test('withErrorBoundary HOC', () => {
"The above error occurred in one of your React components:

at Boundary.FallbackComponent (<PROJECT_ROOT>/src/__tests__/index.tsx:150:13)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:66:3)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:72:3)
at withErrorBoundary(Unknown)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary."
Expand All @@ -178,7 +178,7 @@ test('withErrorBoundary HOC', () => {
Object {
"componentStack": "
at Boundary.FallbackComponent (<PROJECT_ROOT>/src/__tests__/index.tsx:150:13)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:66:3)
at ErrorBoundary (<PROJECT_ROOT>/src/index.tsx:72:3)
at withErrorBoundary(Unknown)",
}
`)
Expand Down
10 changes: 8 additions & 2 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ interface ErrorBoundaryPropsWithComponent {
onReset?: (...args: Array<unknown>) => void
onError?: (error: Error, info: {componentStack: string}) => void
resetKeys?: Array<unknown>
fallback?: never
FallbackComponent: React.ComponentType<FallbackProps>
fallbackRender?: never
}

declare function FallbackRender(
Expand All @@ -34,6 +36,8 @@ interface ErrorBoundaryPropsWithRender {
onReset?: (...args: Array<unknown>) => void
onError?: (error: Error, info: {componentStack: string}) => void
resetKeys?: Array<unknown>
fallback?: never
FallbackComponent?: never
fallbackRender: typeof FallbackRender
}

Expand All @@ -49,6 +53,8 @@ interface ErrorBoundaryPropsWithFallback {
unknown,
string | React.FunctionComponent | typeof React.Component
> | null
FallbackComponent?: never
fallbackRender?: never
}

type ErrorBoundaryProps =
Expand Down Expand Up @@ -115,7 +121,7 @@ class ErrorBoundary extends React.Component<

render() {
const {error} = this.state
// @ts-expect-error ts(2339) (at least one of these will be defined though, and we check for their existence)

const {fallbackRender, FallbackComponent, fallback} = this.props

if (error !== null) {
Expand All @@ -126,7 +132,7 @@ class ErrorBoundary extends React.Component<
if (React.isValidElement(fallback)) {
return fallback
} else if (typeof fallbackRender === 'function') {
return (fallbackRender as typeof FallbackRender)(props)
return fallbackRender(props)
} else if (FallbackComponent) {
return <FallbackComponent {...props} />
} else {
Expand Down