From ab946a2f68015fe03c10ab665726bc13a922e63c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 10 Oct 2023 09:35:41 +0900 Subject: [PATCH 1/2] chore: version packages (#209) Co-authored-by: Jonghyeon Ko Co-authored-by: Chanhyuk Park --- .changeset/orange-pants-vanish.md | 5 ----- .changeset/silly-wolves-shave.md | 5 ----- packages/react-query/CHANGELOG.md | 8 ++++++++ packages/react-query/package.json | 4 ++-- packages/react/CHANGELOG.md | 7 +++++++ packages/react/package.json | 2 +- pnpm-lock.yaml | 4 ++-- websites/visualization/package.json | 4 ++-- 8 files changed, 22 insertions(+), 17 deletions(-) delete mode 100644 .changeset/orange-pants-vanish.md delete mode 100644 .changeset/silly-wolves-shave.md diff --git a/.changeset/orange-pants-vanish.md b/.changeset/orange-pants-vanish.md deleted file mode 100644 index 81b7f72e0..000000000 --- a/.changeset/orange-pants-vanish.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@suspensive/react": patch ---- - -docs(react): update doc for Delay diff --git a/.changeset/silly-wolves-shave.md b/.changeset/silly-wolves-shave.md deleted file mode 100644 index 7bc54179e..000000000 --- a/.changeset/silly-wolves-shave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@suspensive/react": patch ---- - -docs(react): update doc for ErrorBoundaryGroup diff --git a/packages/react-query/CHANGELOG.md b/packages/react-query/CHANGELOG.md index c4e4220bc..bac86b6e4 100644 --- a/packages/react-query/CHANGELOG.md +++ b/packages/react-query/CHANGELOG.md @@ -1,5 +1,13 @@ # @suspensive/react-query +## 1.15.3 + +### Patch Changes + +- Updated dependencies [b05b4e2] +- Updated dependencies [e1e9a6b] + - @suspensive/react@1.15.3 + ## 1.15.2 ### Patch Changes diff --git a/packages/react-query/package.json b/packages/react-query/package.json index 0f3536379..5b63c9528 100644 --- a/packages/react-query/package.json +++ b/packages/react-query/package.json @@ -1,6 +1,6 @@ { "name": "@suspensive/react-query", - "version": "1.15.2", + "version": "1.15.3", "description": "Useful helpers for @tanstack/react-query with suspense", "keywords": [ "suspensive", @@ -70,7 +70,7 @@ "tsd": "^0.28.1" }, "peerDependencies": { - "@suspensive/react": "workspace:^1.15.2", + "@suspensive/react": "workspace:^1.15.3", "@tanstack/react-query": "^4", "react": "^16.8 || ^17 || ^18" }, diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 7e6a7473d..61d51ee60 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,12 @@ # @suspensive/react +## 1.15.3 + +### Patch Changes + +- b05b4e2: docs(react): update doc for Delay +- e1e9a6b: docs(react): update doc for ErrorBoundaryGroup + ## 1.15.2 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index fa3be6260..e28cc5055 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@suspensive/react", - "version": "1.15.2", + "version": "1.15.3", "description": "Useful interfaces for React Suspense", "keywords": [ "suspensive", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1fb407c08..5379bf10a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -307,10 +307,10 @@ importers: specifier: ^1.3.9 version: 1.3.9(@emotion/react@11.11.0)(react@18.2.0) '@suspensive/react': - specifier: workspace:1.15.2 + specifier: workspace:1.15.3 version: link:../../packages/react '@suspensive/react-query': - specifier: workspace:1.15.2 + specifier: workspace:1.15.3 version: link:../../packages/react-query '@tanstack/react-query': specifier: ^4.29.5 diff --git a/websites/visualization/package.json b/websites/visualization/package.json index 9346187c7..d694e3a1e 100644 --- a/websites/visualization/package.json +++ b/websites/visualization/package.json @@ -29,8 +29,8 @@ "@emotion/react": "^11.10.8", "@emotion/styled": "^11.10.8", "@jsxcss/emotion": "^1.3.9", - "@suspensive/react": "workspace:1.15.2", - "@suspensive/react-query": "workspace:1.15.2", + "@suspensive/react": "workspace:1.15.3", + "@suspensive/react-query": "workspace:1.15.3", "@tanstack/react-query": "^4.29.5", "@tanstack/react-query-devtools": "^4.29.5", "axios": "^1.4.0", From ba1e1a6be781145baadef06325aa17cba3f4d7af Mon Sep 17 00:00:00 2001 From: Jonghyeon Ko Date: Wed, 11 Oct 2023 21:23:52 +0900 Subject: [PATCH 2/2] refactor(react): to easier code (#217) * refactor(react): to easier code * chore: update * test(react): update * Create olive-hounds-nail.md --- .changeset/olive-hounds-nail.md | 5 +++ README.md | 20 +++++++++-- .../src/QueryErrorResetBoundary.en.mdx | 35 ++++++++++++++++--- .../src/QueryErrorResetBoundary.ko.mdx | 35 ++++++++++++++++--- packages/react/src/AsyncBoundary.en.mdx | 24 ++++++------- packages/react/src/AsyncBoundary.ko.mdx | 24 ++++++------- packages/react/src/ErrorBoundary.en.mdx | 19 ++++++++-- packages/react/src/ErrorBoundary.ko.mdx | 19 ++++++++-- packages/react/src/ErrorBoundary.spec.tsx | 21 +++++++---- packages/react/src/ErrorBoundary.tsx | 2 +- packages/react/src/ErrorBoundaryGroup.en.mdx | 22 ++++++------ packages/react/src/ErrorBoundaryGroup.ko.mdx | 22 ++++++------ .../react/src/ErrorBoundaryGroup.spec.tsx | 7 ++-- packages/react/src/ErrorBoundaryGroup.tsx | 2 +- .../react/src/experimental/Await.spec.tsx | 8 ++--- packages/react/src/utils/assert.ts | 10 ++++++ packages/react/src/utils/toTest.tsx | 6 ++-- .../src/app/react/experimental/await/page.tsx | 14 ++++---- .../src/components/RejectedFallback.tsx | 9 +++-- 19 files changed, 213 insertions(+), 91 deletions(-) create mode 100644 .changeset/olive-hounds-nail.md diff --git a/.changeset/olive-hounds-nail.md b/.changeset/olive-hounds-nail.md new file mode 100644 index 000000000..0975ecb06 --- /dev/null +++ b/.changeset/olive-hounds-nail.md @@ -0,0 +1,5 @@ +--- +"@suspensive/react": patch +--- + +refactor(react): to easier code diff --git a/README.md b/README.md index 79f61e756..3c35eaa74 100644 --- a/README.md +++ b/README.md @@ -63,8 +63,15 @@ import { Suspense, ErrorBoundary, ErrorBoundaryGroup, Delay } from '@suspensive/ const Example = () => ( - } /> - }> + } /> + ( + <> + + {props.error.message} + + )} + > @@ -118,7 +125,14 @@ import { Suspense } from '@suspensive/react' import { QueryErrorBoundary, useSuspenseQuery } from '@suspensive/react-query' const Example = () => ( - }> + ( + <> + + {props.error.message} + + )} + > }> diff --git a/packages/react-query/src/QueryErrorResetBoundary.en.mdx b/packages/react-query/src/QueryErrorResetBoundary.en.mdx index 6e46c4bb5..9580aaae3 100644 --- a/packages/react-query/src/QueryErrorResetBoundary.en.mdx +++ b/packages/react-query/src/QueryErrorResetBoundary.en.mdx @@ -11,7 +11,14 @@ You can just use ``, `` like using [`< import { QueryErrorBoundary } from '@suspensive/react-query' const Example = () => ( - }> + ( + <> + + {props.error.message} + + )} + > ) @@ -21,7 +28,14 @@ const Example = () => ( import { QueryAsyncBoundary } from '@suspensive/react-query' const Example = () => ( - }> + ( + <> + + {props.error.message} + + )} + > ) @@ -53,7 +67,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query' const Example = () => ( {({ reset }) => ( - }> + ( + <> + + {props.error.message} + + )} + > )} @@ -72,7 +94,12 @@ const Example = () => ( {({ reset }) => ( } + rejectedFallback={(props) => ( + <> + + {props.error.message} + + )} > diff --git a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx index 4a0a6a63d..1b1475c33 100644 --- a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx +++ b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx @@ -11,7 +11,14 @@ title: ', ' import { QueryErrorBoundary } from '@suspensive/react-query' const Example = () => ( - }> + ( + <> + + {props.error.message} + + )} + > ) @@ -21,7 +28,14 @@ const Example = () => ( import { QueryAsyncBoundary } from '@suspensive/react-query' const Example = () => ( - }> + ( + <> + + {props.error.message} + + )} + > ) @@ -53,7 +67,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query' const Example = () => ( {({ reset }) => ( - }> + ( + <> + + {props.error.message} + + )} + > )} @@ -72,7 +94,12 @@ const Example = () => ( {({ reset }) => ( } + rejectedFallback={(props) => ( + <> + + {props.error.message} + + )} > diff --git a/packages/react/src/AsyncBoundary.en.mdx b/packages/react/src/AsyncBoundary.en.mdx index 6d3fc76fa..619fd5e2b 100644 --- a/packages/react/src/AsyncBoundary.en.mdx +++ b/packages/react/src/AsyncBoundary.en.mdx @@ -21,14 +21,14 @@ import { AsyncBoundary } from '@suspensive/react' const Example = () => ( } - rejectedFallback={(errorBoundary) => ( + rejectedFallback={(props) => ( <> - - {JSON.stringify(errorBoundary.error)} + + {props.error.message} )} onReset={() => console.log('reset')} - onError={(error) => console.log(JSON.stringify(error))} + onError={(error) => console.log(error)} > @@ -45,14 +45,14 @@ import { AsyncBoundary } from '@suspensive/react' const Example = () => ( } - rejectedFallback={(errorBoundary) => ( + rejectedFallback={(props) => ( <> - - {JSON.stringify(errorBoundary.error)} + + {props.error.message} )} onReset={() => console.log('reset')} - onError={(error) => console.log(JSON.stringify(error))} + onError={(error) => console.log(error)} > @@ -74,14 +74,14 @@ const Example = withAsyncBoundary( }, { pendingFallback: , - rejectedFallback: (errorBoundary) => ( + rejectedFallback: (props) => ( <> - - {JSON.stringify(errorBoundary.error)} + + {props.error.message} ), onReset: () => console.log('reset'), - onError: (error) => console.log(JSON.stringify(error)), + onError: (error) => console.log(error), } ) ``` diff --git a/packages/react/src/AsyncBoundary.ko.mdx b/packages/react/src/AsyncBoundary.ko.mdx index 6a2dd7527..70d438081 100644 --- a/packages/react/src/AsyncBoundary.ko.mdx +++ b/packages/react/src/AsyncBoundary.ko.mdx @@ -23,14 +23,14 @@ import { AsyncBoundary } from '@suspensive/react' const Example = () => ( } - rejectedFallback={(errorBoundary) => ( + rejectedFallback={(props) => ( <> - - {JSON.stringify(errorBoundary.error)} + + {props.error.message} )} onReset={() => console.log('reset')} - onError={(error) => console.log(JSON.stringify(error))} + onError={(error) => console.log(error)} > @@ -47,14 +47,14 @@ import { AsyncBoundary } from '@suspensive/react' const Example = () => ( } - rejectedFallback={(errorBoundary) => ( + rejectedFallback={(props) => ( <> - - {JSON.stringify(errorBoundary.error)} + + {props.error.message} )} onReset={() => console.log('reset')} - onError={(error) => console.log(JSON.stringify(error))} + onError={(error) => console.log(error)} > @@ -76,14 +76,14 @@ const Example = withAsyncBoundary( }, { pendingFallback: , - rejectedFallback: (errorBoundary) => ( + rejectedFallback: (props) => ( <> - - {JSON.stringify(errorBoundary.error)} + + {props.error.message} ), onReset: () => console.log('reset'), - onError: (error) => console.log(JSON.stringify(error)), + onError: (error) => console.log(error), } ) ``` diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx index c0c51e529..e11dc75aa 100644 --- a/packages/react/src/ErrorBoundary.en.mdx +++ b/packages/react/src/ErrorBoundary.en.mdx @@ -14,7 +14,14 @@ import { ErrorBoundary } from '@suspensive/react' import { useState, useEffect } from 'react' const Example = () => ( - }> + ( + <> + + {props.error.message} + + )} + > ) @@ -74,7 +81,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query' const Example = () => ( {({ reset }) => ( - }> + ( + <> + + {props.error.message} + + )} + > )} diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx index dcc9f00c6..976be5c01 100644 --- a/packages/react/src/ErrorBoundary.ko.mdx +++ b/packages/react/src/ErrorBoundary.ko.mdx @@ -14,7 +14,14 @@ import { ErrorBoundary } from '@suspensive/react' import { useState, useEffect } from 'react' const Example = () => ( - }> + ( + <> + + {props.error.message} + + )} + > ) @@ -74,7 +81,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query' const Example = () => ( {({ reset }) => ( - }> + ( + <> + + {props.error.message} + + )} + > )} diff --git a/packages/react/src/ErrorBoundary.spec.tsx b/packages/react/src/ErrorBoundary.spec.tsx index ac2e2cc92..3f1ff9351 100644 --- a/packages/react/src/ErrorBoundary.spec.tsx +++ b/packages/react/src/ErrorBoundary.spec.tsx @@ -3,6 +3,7 @@ import { ComponentProps, ComponentRef, createElement, createRef, useEffect } fro import { createRoot } from 'react-dom/client' import { vi } from 'vitest' import { useSetTimeout } from './hooks' +import { assert } from './utils' import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, ThrowError, ThrowNull } from './utils/toTest' import { ErrorBoundary, useErrorBoundary, withErrorBoundary } from '.' @@ -20,7 +21,11 @@ describe('', () => { const renderErrorBoundary = (props: Partial>) => act(() => root.render( - <>{caught.error.message}} {...props} /> + <>{errorBoundaryFallbackProps.error.message}} + {...props} + /> ) ) @@ -48,7 +53,7 @@ describe('', () => { it('should show children if no error but if error in children, catch it and show fallback component', () => { vi.useFakeTimers() renderErrorBoundary({ - fallback: (caught) => <>{caught.error.message}, + fallback: (props) => <>{props.error.message}, children: ( {TEXT} @@ -188,7 +193,7 @@ describe('withErrorBoundary', () => { it("should render the wrapped component when there's no error", () => { const WrappedComponent = withErrorBoundary(() => <>{TEXT}, { - fallback: (caught) => <>{caught.error.message}, + fallback: (props) => <>{props.error.message}, }) act(() => root.render()) @@ -205,7 +210,7 @@ describe('withErrorBoundary', () => { ), { - fallback: (caught) => <>{caught.error.message}, + fallback: (props) => <>{props.error.message}, } ) @@ -236,7 +241,11 @@ describe('useErrorBoundary', () => { const renderErrorBoundary = (props: Partial>) => act(() => root.render( - <>{caught.error.message}} {...props} /> + <>{errorBoundaryFallbackProps.error.message}} + {...props} + /> ) ) @@ -319,6 +328,6 @@ describe('useErrorBoundary', () => { return <>{TEXT} }) ) - ).toThrow('useErrorBoundary: ErrorBoundary is required in parent') + ).toThrow(assert.message.useErrorBoundary.onlyInChildrenOfErrorBoundary) }) }) diff --git a/packages/react/src/ErrorBoundary.tsx b/packages/react/src/ErrorBoundary.tsx index 606507dd9..a5f56f037 100644 --- a/packages/react/src/ErrorBoundary.tsx +++ b/packages/react/src/ErrorBoundary.tsx @@ -169,7 +169,7 @@ export const useErrorBoundary = () => { } const errorBoundaryContext = useContext(ErrorBoundaryContext) - assert(errorBoundaryContext != null, 'useErrorBoundary: ErrorBoundary is required in parent') + assert(errorBoundaryContext != null, assert.message.useErrorBoundary.onlyInChildrenOfErrorBoundary) return useMemo( () => ({ diff --git a/packages/react/src/ErrorBoundaryGroup.en.mdx b/packages/react/src/ErrorBoundaryGroup.en.mdx index 3770a3e18..13c0b74be 100644 --- a/packages/react/src/ErrorBoundaryGroup.en.mdx +++ b/packages/react/src/ErrorBoundaryGroup.en.mdx @@ -13,13 +13,13 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react' const Example = () => ( {/* Resets all ErrorBoundaries that are children of ErrorBoundaryGroup. All ErrorBoundaries within nested ErrorBoundaryGroups are also reset. */} - } /> - <>{caught.error}}> + } /> + <>{props.error}}> - } /> - <>{caught.error}}> + } /> + <>{props.error}}> @@ -44,14 +44,14 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react' const Example = () => ( - } /> - <>{caught.error}}> + } /> + <>{props.error}}> {/* blockOutside prop prevents reset by the parent ErrorBoundaryGroup*/} - } /> - <>{caught.error}}> + } /> + <>{props.error}}> @@ -67,7 +67,7 @@ If you use useErrorBoundaryGroup, you can get a function to reset ` { const group = useErrorBoundaryGroup() - return + return } ``` @@ -86,8 +86,8 @@ const Example = withErrorBoundaryGroup( return ( <> - - <>{caught.error}}> + + <>{props.error}}> diff --git a/packages/react/src/ErrorBoundaryGroup.ko.mdx b/packages/react/src/ErrorBoundaryGroup.ko.mdx index 2dc7c7bad..2c5793d2e 100644 --- a/packages/react/src/ErrorBoundaryGroup.ko.mdx +++ b/packages/react/src/ErrorBoundaryGroup.ko.mdx @@ -13,13 +13,13 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react' const Example = () => ( {/* ErrorBoundaryGroup의 children인 ErrorBoundary를 모두 reset합니다. 중첩된 ErrorBoundaryGroup내의 ErrorBoundary도 모두 reset합니다. */} - } /> - <>{caught.error}}> + } /> + <>{props.error}}> - } /> - <>{caught.error}}> + } /> + <>{props.error}}> @@ -44,14 +44,14 @@ import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react' const Example = () => ( - } /> - <>{caught.error}}> + } /> + <>{props.error}}> {/* blockOutside prop으로 상위 ErrorBoundaryGroup에 의한 reset을 막습니다 */} - } /> - <>{caught.error}}> + } /> + <>{props.error}}> @@ -67,7 +67,7 @@ useErrorBoundaryGroup을 사용하면 ``내의 ` { const group = useErrorBoundaryGroup() - return + return } ``` @@ -86,8 +86,8 @@ const Example = withErrorBoundaryGroup( return ( <> - - <>{caught.error}}> + + <>{props.error}}> diff --git a/packages/react/src/ErrorBoundaryGroup.spec.tsx b/packages/react/src/ErrorBoundaryGroup.spec.tsx index c7fcf459b..20632238f 100644 --- a/packages/react/src/ErrorBoundaryGroup.spec.tsx +++ b/packages/react/src/ErrorBoundaryGroup.spec.tsx @@ -1,6 +1,7 @@ import { act, render, screen } from '@testing-library/react' import { createElement } from 'react' import { vi } from 'vitest' +import { assert } from './utils' import { ERROR_MESSAGE, MS_100, TEXT, ThrowError } from './utils/toTest' import { ErrorBoundary, ErrorBoundaryGroup, useErrorBoundaryGroup, withErrorBoundaryGroup } from '.' @@ -14,7 +15,7 @@ describe('', () => { } /> {Array.from({ length: innerErrorBoundaryCount }).map((_, key) => ( -
{caught.error.message}
}> +
{props.error.message}
}>
{TEXT}
 @@ -43,7 +44,7 @@ describe('', () => { } /> {Array.from({ length: innerErrorBoundaryCount }).map((_, index) => ( -
{caught.error.message}
}> +
{props.error.message}
}>
{TEXT}
 @@ -74,7 +75,7 @@ const UsingUseErrorBoundary = () => { describe('useErrorBoundaryGroup', () => { it('should throw error without ErrorBoundaryGroup in parent', () => { expect(() => render()).toThrow( - 'useErrorBoundaryGroup: ErrorBoundaryGroup is required in parent' + assert.message.useErrorBoundaryGroup.onlyInChildrenOfErrorBoundaryGroup ) }) }) diff --git a/packages/react/src/ErrorBoundaryGroup.tsx b/packages/react/src/ErrorBoundaryGroup.tsx index e532a3dc1..8fe9bdc69 100644 --- a/packages/react/src/ErrorBoundaryGroup.tsx +++ b/packages/react/src/ErrorBoundaryGroup.tsx @@ -54,7 +54,7 @@ ErrorBoundaryGroup.Reset = ErrorBoundaryGroupReset export const useErrorBoundaryGroup = () => { const group = useContext(ErrorBoundaryGroupContext) - assert(group != null, 'useErrorBoundaryGroup: ErrorBoundaryGroup is required in parent') + assert(group != null, assert.message.useErrorBoundaryGroup.onlyInChildrenOfErrorBoundaryGroup) return useMemo( () => ({ /** diff --git a/packages/react/src/experimental/Await.spec.tsx b/packages/react/src/experimental/Await.spec.tsx index b651ee429..e08b55314 100644 --- a/packages/react/src/experimental/Await.spec.tsx +++ b/packages/react/src/experimental/Await.spec.tsx @@ -12,7 +12,7 @@ const AwaitSuccess = () => { return ( <> {awaited.data} - + ) } @@ -66,7 +66,7 @@ describe('useAwait', () => { it('should throw Error, and It will be cached', async () => { vi.useFakeTimers() const { unmount } = render( - <>{caught.error.message}}> + <>{props.error.message}}> @@ -79,7 +79,7 @@ describe('useAwait', () => { // error cache test unmount() render( - <>{caught.error.message}}> + <>{props.error.message}}> @@ -99,7 +99,7 @@ describe('useAwait', () => { expect(screen.queryByText(FALLBACK)).toBeInTheDocument() act(() => vi.advanceTimersByTime(MS_100)) await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument()) - const resetButton = await screen.findByRole('button', { name: 'reset' }) + const resetButton = await screen.findByRole('button', { name: 'Try again' }) resetButton.click() rerender( diff --git a/packages/react/src/utils/assert.ts b/packages/react/src/utils/assert.ts index 8cf8d160c..823f639b2 100644 --- a/packages/react/src/utils/assert.ts +++ b/packages/react/src/utils/assert.ts @@ -3,3 +3,13 @@ export function assert(condition: boolean, message: string): asserts condition { throw new Error(message) } } + +assert.message = { + useErrorBoundary: { + onlyInChildrenOfErrorBoundary: 'useErrorBoundary: this hook should be called in ErrorBoundary.props.children', + }, + useErrorBoundaryGroup: { + onlyInChildrenOfErrorBoundaryGroup: + 'useErrorBoundaryGroup: this hook should be called in ErrorBoundaryGroup.props.children', + }, +} as const diff --git a/packages/react/src/utils/toTest.tsx b/packages/react/src/utils/toTest.tsx index 2043dc761..f11b4fe7c 100644 --- a/packages/react/src/utils/toTest.tsx +++ b/packages/react/src/utils/toTest.tsx @@ -19,9 +19,9 @@ Suspend.reset = () => { } const throwErrorIsNeed = { current: false } -type ThrowErrorProps = PropsWithChildren<{ message: string; after: number }> -export const ThrowError = ({ message, after, children }: ThrowErrorProps) => { - const [isNeedError, setIsNeedError] = useState(throwErrorIsNeed.current) +type ThrowErrorProps = PropsWithChildren<{ message: string; after?: number }> +export const ThrowError = ({ message, after = 0, children }: ThrowErrorProps) => { + const [isNeedError, setIsNeedError] = useState(after === 0 ? true : throwErrorIsNeed.current) if (isNeedError) { throw new Error(message) } diff --git a/websites/visualization/src/app/react/experimental/await/page.tsx b/websites/visualization/src/app/react/experimental/await/page.tsx index b013d204b..78e4d4207 100644 --- a/websites/visualization/src/app/react/experimental/await/page.tsx +++ b/websites/visualization/src/app/react/experimental/await/page.tsx @@ -18,7 +18,7 @@ export default function Page() { > {(awaited) => (
- +
{awaited.data}
)} @@ -33,7 +33,7 @@ export default function Page() { > {(awaited) => (
- +
{awaited.data}
)} @@ -43,7 +43,7 @@ export default function Page() { api.delay(ms, { percentage: 100 }) }}> {(awaited) => (
- +
{awaited.data}
)} @@ -58,7 +58,7 @@ export default function Page() { > {(awaited) => (
- +
{awaited.data}
)} @@ -71,7 +71,7 @@ export default function Page() { api.delay(ms, { percentage: 100 }) }}> {(awaited) => (
- +
{awaited.data}
)} @@ -81,7 +81,7 @@ export default function Page() { api.delay(ms, { percentage: 100 }) }}> {(awaited) => (
- +
{awaited.data}
)} @@ -91,7 +91,7 @@ export default function Page() { api.delay(ms, { percentage: 100 }) }}> {(awaited) => (
- +
{awaited.data}
)} diff --git a/websites/visualization/src/components/RejectedFallback.tsx b/websites/visualization/src/components/RejectedFallback.tsx index 0d162e7fd..b4a5f565a 100644 --- a/websites/visualization/src/components/RejectedFallback.tsx +++ b/websites/visualization/src/components/RejectedFallback.tsx @@ -1,12 +1,11 @@ 'use client' -import { ErrorBoundary } from '@suspensive/react' -import { ComponentProps } from 'react' +import { ErrorBoundaryFallbackProps } from '@suspensive/react' import { Box, Button, Description } from './uis' -export const RejectedFallback: ComponentProps['fallback'] = ({ error, reset }) => ( +export const RejectedFallback = (props: ErrorBoundaryFallbackProps) => ( - Error: {JSON.stringify(error.message)} - + Error: {props.error.message} + )