diff --git a/.changeset/chilly-socks-act.md b/.changeset/chilly-socks-act.md deleted file mode 100644 index 970880975..000000000 --- a/.changeset/chilly-socks-act.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@suspensive/react-query": patch -"@suspensive/react": patch ---- - -docs(docusaurus): add npm2yarn plugin diff --git a/package.json b/package.json index d4e3824df..50c45e3fd 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,6 @@ "turbo": "latest", "typescript": "^5.1.6", "vite": "^4.4.9", - "vitest": "^0.34.3" + "vitest": "^0.34.6" } } diff --git a/packages/react-query/CHANGELOG.md b/packages/react-query/CHANGELOG.md index afdd42e42..c4e4220bc 100644 --- a/packages/react-query/CHANGELOG.md +++ b/packages/react-query/CHANGELOG.md @@ -1,5 +1,15 @@ # @suspensive/react-query +## 1.15.2 + +### Patch Changes + +- cbfbc02: docs(docusaurus): add npm2yarn plugin +- cfcafd2: docs(react): update tips as admonitions +- Updated dependencies [cbfbc02] +- Updated dependencies [cfcafd2] + - @suspensive/react@1.15.2 + ## 1.15.1 ### Patch Changes diff --git a/packages/react-query/package.json b/packages/react-query/package.json index cdbfdaa6d..0f3536379 100644 --- a/packages/react-query/package.json +++ b/packages/react-query/package.json @@ -1,6 +1,6 @@ { "name": "@suspensive/react-query", - "version": "1.15.1", + "version": "1.15.2", "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.1", + "@suspensive/react": "workspace:^1.15.2", "@tanstack/react-query": "^4", "react": "^16.8 || ^17 || ^18" }, diff --git a/packages/react-query/src/QueryErrorResetBoundary.en.mdx b/packages/react-query/src/QueryErrorResetBoundary.en.mdx index 1bfd432de..6e46c4bb5 100644 --- a/packages/react-query/src/QueryErrorResetBoundary.en.mdx +++ b/packages/react-query/src/QueryErrorResetBoundary.en.mdx @@ -3,11 +3,48 @@ sidebar_position: 4 title: ', ' --- +@suspensive/react-query provide ``, `` to reduce repeating implementation like using `` + ``, `` + ``. + +You can just use ``, `` like using [``](/docs/react/src/ErrorBoundary.i18n), [``](/docs/react/src/AsyncBoundary.i18n). All other features are same with original ``, `` of @suspensive/react without resetting react-query's error. + +```tsx +import { QueryErrorBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +```tsx +import { QueryAsyncBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +:::note + +### peerDependency + +these apis (``, ``) have peerDependency on @suspensive/react's ``, ``. +So if you want to use these, you must install @suspensive/react first. + +```shell npm2yarn +npm install @suspensive/react @suspensive/react-query +``` + +::: + ### Motivation -With the [QueryErrorResetBoundary](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary) component you can reset any query errors within the boundaries of the component. but If you use react-query with suspense continuously, Continuous repeating to use QueryErrorResetBoundary + [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n), QueryErrorResetBoundary + [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n) will be coded. +With the [``](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary) component you can reset any query errors within the boundaries of the component. but If you use react-query with suspense continuously, Continuous repeating to use `` + [``](/docs/react/src/ErrorBoundary.i18n), `` + [``](/docs/react/src/AsyncBoundary.i18n) will be coded. -#### QueryErrorResetBoundary + ErrorBoundary +#### `` + `` ```tsx import { ErrorBoundary } from '@suspensive/react' @@ -24,7 +61,7 @@ const Example = () => ( ) ``` -#### QueryErrorResetBoundary + AsyncBoundary +#### `` + `` ```tsx import { AsyncBoundary } from '@suspensive/react' @@ -43,40 +80,3 @@ const Example = () => ( ) ``` - -### peerDependency - -Below apis (QueryErrorBoundary, QueryAsyncBoundary) have peerDependency on @suspensive/react's ErrorBoundary, AsyncBoundary. -So if you want to use these, you must install @suspensive/react first. - -```shell npm2yarn -npm install @suspensive/react @suspensive/react-query -``` - -@suspensive/react-query provide QueryErrorBoundary, QueryAsyncBoundary to reduce repeating implementation like using QueryErrorResetBoundary + ErrorBoundary, QueryErrorResetBoundary + AsyncBoundary. - -## QueryErrorBoundary - -```tsx -import { QueryErrorBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -## QueryAsyncBoundary - -```tsx -import { QueryAsyncBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -You can just use QueryErrorBoundary / QueryAsyncBoundary like using [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n) / [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n). All other features are same with original ErrorBoundary, AsyncBoundary of @suspensive/react without resetting react-query's error. diff --git a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx index a82d41f56..4a0a6a63d 100644 --- a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx +++ b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx @@ -3,11 +3,48 @@ sidebar_position: 4 title: ', ' --- +@suspensive/react-query는 `` + ``, `` + `AsyncBoundary/`와 같은 반복되는 구현을 줄이기 위해 ``, ``를 제공합니다. + +[``](/docs/react/src/ErrorBoundary.i18n), [``](/docs/react/src/AsyncBoundary.i18n)를 사용하는 것처럼 ``, ``를 사용할 수 있습니다. react-query의 캐싱된 error를 reset한다는 점만 빼면 모든 다른 기능은 @suspensive/react의 ``, ``와 같습니다. + +```tsx +import { QueryErrorBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +```tsx +import { QueryAsyncBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +:::note + +### peerDependency + +이 api(``, ``)는 @suspensive/react의 ``, ``에 peerDependency를 갖습니다. +따라서 이를 사용하려면 먼저 @suspensive/react를 설치해야 합니다. + +```shell npm2yarn +npm install @suspensive/react @suspensive/react-query +``` + +::: + ### 동기 -[QueryErrorResetBoundary](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary)를 사용하면 캐싱된 임의의 query error들을 reset할 수 있습니다. 하지만 react-query와 suspense를 계속 사용하면, QueryErrorResetBoundary + [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n), QueryErrorResetBoundary + [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n)를 계속 반복적으로 작성해야 합니다. +[``](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary)를 사용하면 캐싱된 임의의 query error들을 reset할 수 있습니다. 하지만 react-query와 suspense를 계속 사용하면, `` + [``](/docs/react/src/ErrorBoundary.i18n), `` + [``](/docs/react/src/AsyncBoundary.i18n)를 계속 반복적으로 작성해야 합니다. -#### QueryErrorResetBoundary + ErrorBoundary +#### `` + `` ```tsx import { ErrorBoundary } from '@suspensive/react' @@ -24,7 +61,7 @@ const Example = () => ( ) ``` -#### QueryErrorResetBoundary + AsyncBoundary +#### `` + `` ```tsx import { AsyncBoundary } from '@suspensive/react' @@ -43,40 +80,3 @@ const Example = () => ( ) ``` - -### peerDependency - -아래 api(QueryErrorBoundary, QueryAsyncBoundary)는 @suspensive/react의 ErrorBoundary, AsyncBoundary에 peerDependency를 갖습니다. -따라서 이를 사용하려면 먼저 @suspensive/react를 설치해야 합니다. - -```shell npm2yarn -npm install @suspensive/react @suspensive/react-query -``` - -@suspensive/react-query는 QueryErrorResetBoundary + ErrorBoundary, QueryErrorResetBoundary + AsyncBoundary와 같은 반복되는 구현을 줄이기 위해 QueryErrorBoundary, QueryAsyncBoundary를 제공합니다. - -## QueryErrorBoundary - -```tsx -import { QueryErrorBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -## QueryAsyncBoundary - -```tsx -import { QueryAsyncBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -[ErrorBoundary](/docs/react/src/ErrorBoundary.i18n) / [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n)를 사용하는 것처럼 QueryErrorBoundary / QueryAsyncBoundary를 사용할 수 있습니다. react-query의 캐싱된 error를 reset한다는 점만 빼면 모든 다른 기능은 @suspensive/react의 ErrorBoundary, AsyncBoundary와 같습니다. diff --git a/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx b/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx index 14e7351bc..e6f7be0fa 100644 --- a/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx +++ b/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx @@ -3,9 +3,25 @@ sidebar_position: 3 title: 'useSuspenseInfiniteQuery' --- +Return type of this hook have no isLoading, isError property. because `` and `` will guarantee this hook's data. In addition, this hook's options have default suspense: true. and you can provide new options to this hook like useInfiniteQuery of @tanstack/react-query. + +```tsx +import { useSuspenseInfiniteQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseInfiniteQuery({ + queryKey, + queryFn, + }) // suspense:true is default. + + // No need to do type narrowing by isSuccess + query.data // InfiniteData +} +``` + ### Motivation -If you turn suspense mode on in @tanstack/react-query, You can use useInfiniteQuery with Suspense and ErrorBoundary. +If you turn suspense mode on in @tanstack/react-query, You can use useInfiniteQuery with `` and ``. ```tsx import { useInfiniteQuery } from '@tanstack/react-query' @@ -25,30 +41,14 @@ const Example = () => { } ``` -but useInfiniteQuery's return type:query.data will be always fulfilled because of Suspense as parent of this component. +but useInfiniteQuery's return type:query.data will be always fulfilled because of `` as parent of this component. This is why @suspensive/react-query provide **useSuspenseInfiniteQuery** -## useSuspenseInfiniteQuery - -Return type of this hook have no isLoading, isError property. because Suspense and ErrorBoundary will guarantee this hook's data. - -In addition, this hook's options have default suspense: true. and you can provide new options to this hook like useInfiniteQuery of @tanstack/react-query. - -```tsx -import { useSuspenseInfiniteQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseInfiniteQuery({ - queryKey, - queryFn, - }) // suspense:true is default. - - // No need to do type narrowing by isSuccess - query.data // InfiniteData -} -``` +:::info ### Concentrate on only Success Now, we can concentrate component as any fetching will be always success. + +::: diff --git a/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx b/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx index e69f33acb..d9be4731b 100644 --- a/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx +++ b/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx @@ -3,9 +3,25 @@ sidebar_position: 3 title: 'useSuspenseInfiniteQuery' --- +이 hook의 return 타입에는 isLoading, isError이 없습니다. `` and ``가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useInfiniteQuery처럼 사용하면 됩니다. + +```tsx +import { useSuspenseInfiniteQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseInfiniteQuery({ + queryKey, + queryFn, + }) // suspense 옵션은 true가 기본입니다. + + // isSuccess으로 type narrowing이 필요하지 않습니다. + query.data // InfiniteData +} +``` + ### 동기 -@tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery를 Suspense, ErrorBoundary와 함께 사용할 수 있습니다. +@tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery를 ``, ``와 함께 사용할 수 있습니다. ```tsx import { useInfiniteQuery } from '@tanstack/react-query' @@ -25,30 +41,14 @@ const Example = () => { } ``` -하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 Suspense 덕분에 항상 성공한 경우일 것입니다. +하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 `` 덕분에 항상 성공한 경우일 것입니다. 이것이 @suspensive/react-query가 **useSuspenseInfiniteQuery**를 제공하는 이유입니다. -## useSuspenseInfiniteQuery - -이 hook의 return 타입에는 isLoading, isError이 없습니다. Suspense and ErrorBoundary가 이 hook의 data를 보장해주기 때문입니다. - -또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useInfiniteQuery처럼 사용하면 됩니다. - -```tsx -import { useSuspenseInfiniteQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseInfiniteQuery({ - queryKey, - queryFn, - }) // suspense 옵션은 true가 기본입니다. - - // isSuccess으로 type narrowing이 필요하지 않습니다. - query.data // InfiniteData -} -``` +:::info ### 성공한 케이스에 집중하세요. 이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다. + +::: diff --git a/packages/react-query/src/useSuspenseQueries.en.mdx b/packages/react-query/src/useSuspenseQueries.en.mdx index 948e27d35..81300c759 100644 --- a/packages/react-query/src/useSuspenseQueries.en.mdx +++ b/packages/react-query/src/useSuspenseQueries.en.mdx @@ -3,9 +3,28 @@ sidebar_position: 2 title: 'useSuspenseQueries' --- +There is no isLoading or isError in the return type of this hook. This is because `` and `` guarantee the data of this hook. Also, in the options of this hook, suspense is set to true by default. You can use @tanstack/react-query's useQueries for the new options you need. + +```tsx +import { useSuspenseQueries } from '@suspensive/react-query' + +const Example = () => { + const [query1, query2] = useSuspenseQueries({ + queries: [ + { queryKey: [1], queryFn }, + { queryKey: [2], queryFn }, + ], + }) // suspense: true is the default. + + // No type narrowing required with isSuccess. + query1.data // TData + query2.data // TData +} +``` + ### Motivation -You can use useQueries with Suspense and ErrorBoundary by using the suspense option of @tanstack/react-query useQueries. +You can use useQueries with `` and `` by using the suspense option of @tanstack/react-query useQueries. ```tsx import { useQueries } from '@tanstack/react-query' @@ -30,34 +49,15 @@ const Example = () => { } ``` -The return type of useQueries (query1.data, query2.data) will always be a success case thanks to this component's parents, Suspense and ErrorBoundary. +The return type of useQueries (query1.data, query2.data) will always be a success case thanks to this component's parents, `` and ``. But @tanstack/react-query doesn't express this typologically. That's why @suspensive/react-query provides **useSuspenseQueries**. -## useSuspenseQueries - -There is no isLoading or isError in the return type of this hook. This is because Suspense and ErrorBoundary guarantee the data of this hook. - -Also, in the options of this hook, suspense is set to true by default. You can use @tanstack/react-query's useQueries for the new options you need. - -```tsx -import { useSuspenseQueries } from '@suspensive/react-query' - -const Example = () => { - const [query1, query2] = useSuspenseQueries({ - queries: [ - { queryKey: [1], queryFn }, - { queryKey: [2], queryFn }, - ], - }) // suspense: true is the default. - - // No type narrowing required with isSuccess. - query1.data // TData - query2.data // TData -} -``` +:::info ### Focus on successful cases. Now we can focus only on successful cases as fetching always succeeds inside our component. + +::: diff --git a/packages/react-query/src/useSuspenseQueries.ko.mdx b/packages/react-query/src/useSuspenseQueries.ko.mdx index 3920d088e..bcb6af3d9 100644 --- a/packages/react-query/src/useSuspenseQueries.ko.mdx +++ b/packages/react-query/src/useSuspenseQueries.ko.mdx @@ -3,9 +3,28 @@ sidebar_position: 2 title: 'useSuspenseQueries' --- +이 hook의 return 타입에는 isLoading, isError이 없습니다. `` and ``가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQueries처럼 사용하면 됩니다. + +```tsx +import { useSuspenseQueries } from '@suspensive/react-query' + +const Example = () => { + const [query1, query2] = useSuspenseQueries({ + queries: [ + { queryKey: [1], queryFn }, + { queryKey: [2], queryFn }, + ], + }) // suspense: true가 기본입니다. + + // isSuccess으로 type narrowing이 필요하지 않습니다. + query1.data // TData + query2.data // TData +} +``` + ### 동기 -@tanstack/react-query useQueries의 suspense 옵션을 사용하면, useQueries를 Suspense and ErrorBoundary와 함께 사용할 수 있습니다. +@tanstack/react-query useQueries의 suspense 옵션을 사용하면, useQueries를 ``, ``와 함께 사용할 수 있습니다. ```tsx import { useQueries } from '@tanstack/react-query' @@ -30,34 +49,15 @@ const Example = () => { } ``` -useQueries의 return 타입(query1.data, query2.data)은 이 컴포넌트의 부모인 Suspense와 ErrorBoundary 덕분에 항상 성공한 경우일 것입니다. +useQueries의 return 타입(query1.data, query2.data)은 이 컴포넌트의 부모인 ``와 `` 덕분에 항상 성공한 경우일 것입니다. 하지만 @tanstack/react-query는 타입적으로 이것을 표현하지 않습니다. 이것이 @suspensive/react-query가 **useSuspenseQueries**를 제공하는 이유입니다. -## useSuspenseQueries - -이 hook의 return 타입에는 isLoading, isError이 없습니다. Suspense and ErrorBoundary가 이 hook의 data를 보장해주기 때문입니다. - -또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQueries처럼 사용하면 됩니다. - -```tsx -import { useSuspenseQueries } from '@suspensive/react-query' - -const Example = () => { - const [query1, query2] = useSuspenseQueries({ - queries: [ - { queryKey: [1], queryFn }, - { queryKey: [2], queryFn }, - ], - }) // suspense: true가 기본입니다. - - // isSuccess으로 type narrowing이 필요하지 않습니다. - query1.data // TData - query2.data // TData -} -``` +:::info ### 성공한 케이스에 집중하세요. 이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다. + +::: diff --git a/packages/react-query/src/useSuspenseQuery.en.mdx b/packages/react-query/src/useSuspenseQuery.en.mdx index 51546db78..26a1873a2 100644 --- a/packages/react-query/src/useSuspenseQuery.en.mdx +++ b/packages/react-query/src/useSuspenseQuery.en.mdx @@ -3,9 +3,25 @@ sidebar_position: 1 title: 'useSuspenseQuery' --- +There is no isLoading or isError in the return type of this hook. This is because `` and `` guarantee the data of this hook. Also, in the options of this hook, suspense is set to true by default. Any new options you need can be used like @tanstack/react-query's useQuery. + +```tsx +import { useSuspenseQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseQuery({ + queryKey, + queryFn, + }) // suspense: true is the default. + + // No type narrowing required with isSuccess. + query.data // TData +} +``` + ### motivation -You can use useQuery with Suspense and ErrorBoundary by using the suspense option in @tanstack/react-query. +You can use useQuery with `` and `` by using the suspense option in @tanstack/react-query. ```tsx import { useQuery } from '@tanstack/react-query' @@ -25,31 +41,15 @@ const Example = () => { } ``` -The return type of useQuery (query.data) will always be a success case thanks to this component's parents, Suspense and ErrorBoundary. +The return type of useQuery (query.data) will always be a success case thanks to this component's parents, `` and ``. But @tanstack/react-query doesn't express this typescript typely. That's why @suspensive/react-query provides **useSuspenseQuery**. -## useSuspenseQuery - -There is no isLoading or isError in the return type of this hook. This is because Suspense and ErrorBoundary guarantee the data of this hook. - -Also, in the options of this hook, suspense is set to true by default. Any new options you need can be used like @tanstack/react-query's useQuery. - -```tsx -import { useSuspenseQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseQuery({ - queryKey, - queryFn, - }) // suspense: true is the default. - - // No type narrowing required with isSuccess. - query.data // TData -} -``` +:::info ### Focus on successful cases. Now we can focus only on successful cases as fetching always succeeds inside our component. + +::: diff --git a/packages/react-query/src/useSuspenseQuery.ko.mdx b/packages/react-query/src/useSuspenseQuery.ko.mdx index f8cfc09c5..b1b156be3 100644 --- a/packages/react-query/src/useSuspenseQuery.ko.mdx +++ b/packages/react-query/src/useSuspenseQuery.ko.mdx @@ -3,9 +3,25 @@ sidebar_position: 1 title: 'useSuspenseQuery' --- +이 hook의 return 타입에는 isLoading, isError이 없습니다. ``와 ``가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQuery처럼 사용하면 됩니다. + +```tsx +import { useSuspenseQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseQuery({ + queryKey, + queryFn, + }) // suspense: true가 기본입니다. + + // isSuccess으로 type narrowing이 필요하지 않습니다. + query.data // TData +} +``` + ### 동기 -@tanstack/react-query에서 suspense 옵션을 사용하면, useQuery를 Suspense and ErrorBoundary와 함께 사용할 수 있습니다. +@tanstack/react-query에서 suspense 옵션을 사용하면, useQuery를 `` and ``와 함께 사용할 수 있습니다. ```tsx import { useQuery } from '@tanstack/react-query' @@ -25,31 +41,15 @@ const Example = () => { } ``` -useQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 Suspense와 ErrorBoundary 덕분에 항상 성공한 경우일 것입니다. +useQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 ``와 `` 덕분에 항상 성공한 경우일 것입니다. 하지만 @tanstack/react-query는 타입스크립트 타입적으로 이것을 표현하지 않습니다. 이것이 @suspensive/react-query가 **useSuspenseQuery**를 제공하는 이유입니다. -## useSuspenseQuery - -이 hook의 return 타입에는 isLoading, isError이 없습니다. Suspense와 ErrorBoundary가 이 hook의 data를 보장해주기 때문입니다. - -또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQuery처럼 사용하면 됩니다. - -```tsx -import { useSuspenseQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseQuery({ - queryKey, - queryFn, - }) // suspense: true가 기본입니다. - - // isSuccess으로 type narrowing이 필요하지 않습니다. - query.data // TData -} -``` +:::info ### 성공한 케이스에 집중하세요. 이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다. + +::: diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 46f290902..7e6a7473d 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,12 @@ # @suspensive/react +## 1.15.2 + +### Patch Changes + +- cbfbc02: docs(docusaurus): add npm2yarn plugin +- cfcafd2: docs(react): update tips as admonitions + ## 1.15.1 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index c7f629c7b..fa3be6260 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@suspensive/react", - "version": "1.15.1", + "version": "1.15.2", "description": "Useful interfaces for React Suspense", "keywords": [ "suspensive", diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx index f3977d7dc..c0c51e529 100644 --- a/packages/react/src/ErrorBoundary.en.mdx +++ b/packages/react/src/ErrorBoundary.en.mdx @@ -171,9 +171,10 @@ const Example = withErrorBoundary( ) ``` -## Controlling multiple ``s +:::tip -`` is more powerful when used with ``. -Control multiple ``s with ``. +### Controlling multiple ``s -Details are introduced in [`` page](./ErrorBoundaryGroup.i18n). +`` is more powerful when used with ``. Control multiple ``s with ``. Details are introduced in [`` page](./ErrorBoundaryGroup.i18n). + +::: diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx index 78427e6b4..dcc9f00c6 100644 --- a/packages/react/src/ErrorBoundary.ko.mdx +++ b/packages/react/src/ErrorBoundary.ko.mdx @@ -112,7 +112,6 @@ ErrorBoundaryFallback에서 useErrorBoundary.reset을 사용해 props 없이도 ```tsx import { ErrorBoundary, useErrorBoundary } from '@suspensive/react' -import { useState } from 'react' const ErrorBoundaryFallback = () => { const errorBoundary = useErrorBoundary() @@ -172,9 +171,10 @@ const Example = withErrorBoundary( ) ``` -## 다수의 ``를 제어하기 +:::tip -``은 ``과 사용하면 더 강력하게 사용할 수 있습니다. -``로 다수의 ``를 제어하세요. +### 다수의 ``를 제어하기 -자세한 내용은 [``페이지](./ErrorBoundaryGroup.i18n)에서 소개합니다. +``은 ``과 사용하면 더 강력하게 사용할 수 있습니다. ``로 다수의 ``를 제어하세요. 자세한 내용은 [``페이지](./ErrorBoundaryGroup.i18n)에서 소개합니다. + +::: diff --git a/packages/react/src/Suspense.en.mdx b/packages/react/src/Suspense.en.mdx index 38f8e28ca..e1344382e 100644 --- a/packages/react/src/Suspense.en.mdx +++ b/packages/react/src/Suspense.en.mdx @@ -19,12 +19,14 @@ const Example = () => ( ) ``` -#### Default fallback +:::tip + +### Default fallback `` are more powerful when used with ``. -Control multiple ``s default fallback with ``. +Control multiple ``s default fallback with ``. Details are introduced in [`` page](./SuspensiveProvider.i18n). -Details are introduced in [`` page](./SuspensiveProvider.i18n). +::: ### Avoid Server side rendering (CSROnly) @@ -40,10 +42,14 @@ const Example = () => ( ) ``` -#### Migration support SSR gradually (`` -> ``) +:::tip + +### Migration support SSR gradually (`` -> ``) If you want to use Suspense working in both SSR/CSR, You can change `` to `` gradually. +::: + ## withSuspense You can use withSuspense to wrap component by `` easily. diff --git a/packages/react/src/Suspense.ko.mdx b/packages/react/src/Suspense.ko.mdx index b2d0d09fc..f550ca204 100644 --- a/packages/react/src/Suspense.ko.mdx +++ b/packages/react/src/Suspense.ko.mdx @@ -19,12 +19,13 @@ const Example = () => ( ) ``` -#### Default fallback +:::tip -``는 ``와 함께 사용할 때 더욱 강력해집니다. -``를 사용하여 여러 ``의 default fallback를 제어합니다. +### Default fallback -자세한 내용은 [`` 페이지](./SuspensiveProvider.i18n)에 소개되어 있습니다. +``는 ``와 함께 사용할 때 더욱 강력해집니다. ``를 사용하여 여러 ``의 default fallback를 제어합니다. 자세한 내용은 [`` 페이지](./SuspensiveProvider.i18n)에 소개되어 있습니다. + +::: ### 서버사이드 렌더링을 피하기 (CSROnly) @@ -40,10 +41,14 @@ const Example = () => ( ) ``` -#### SSR을 지원하도록 점진적으로 마이그레이션하기 (`` -> ``) +:::tip + +### SSR을 지원하도록 점진적으로 마이그레이션하기 (`` -> ``) React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 ``에서 ``로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다. +::: + ## withSuspense withSuspense를 사용하면 컴포넌트를 ``로 쉽게 래핑할 수 있습니다. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75489e90e..1fb407c08 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,10 +39,10 @@ importers: version: 5.14.5 '@vitest/coverage-v8': specifier: ^0.34.3 - version: 0.34.3(vitest@0.34.3) + version: 0.34.3(vitest@0.34.6) '@vitest/ui': specifier: ^0.34.4 - version: 0.34.4(vitest@0.34.3) + version: 0.34.4(vitest@0.34.6) commitizen: specifier: ^4.3.0 version: 4.3.0 @@ -78,7 +78,7 @@ importers: version: 7.1.0(ts-node@10.9.1)(typescript@5.1.6) turbo: specifier: latest - version: 1.10.14 + version: 1.10.15 typescript: specifier: ^5.1.6 version: 5.1.6 @@ -86,8 +86,8 @@ importers: specifier: ^4.4.9 version: 4.4.9(@types/node@18.16.2) vitest: - specifier: ^0.34.3 - version: 0.34.3(@vitest/ui@0.34.4)(jsdom@22.1.0) + specifier: ^0.34.6 + version: 0.34.6(@vitest/ui@0.34.4)(jsdom@22.1.0) configs/eslint-config: dependencies: @@ -129,7 +129,7 @@ importers: version: 4.2.1(eslint-config-prettier@8.3.0)(eslint@8.42.0)(prettier@2.8.8) eslint-plugin-vitest: specifier: 0.3.1 - version: 0.3.1(eslint@8.42.0)(vitest@0.34.3) + version: 0.3.1(eslint@8.42.0)(vitest@0.34.6) configs/eslint-config-ts: dependencies: @@ -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.1 + specifier: workspace:1.15.2 version: link:../../packages/react '@suspensive/react-query': - specifier: workspace:1.15.1 + specifier: workspace:1.15.2 version: link:../../packages/react-query '@tanstack/react-query': specifier: ^4.29.5 @@ -4386,7 +4386,7 @@ packages: eslint-visitor-keys: 3.4.1 dev: false - /@vitest/coverage-v8@0.34.3(vitest@0.34.3): + /@vitest/coverage-v8@0.34.3(vitest@0.34.6): resolution: {integrity: sha512-bNjP0RHe8UxdklCigZlk6FVCNbOiqVjWnpZJ1zKixpvb7YHSaZiN/w+mzpvXIoqyxyePzKC+L+G1oj7SB20PJw==} peerDependencies: vitest: '>=0.32.0 <1' @@ -4402,38 +4402,38 @@ packages: std-env: 3.3.3 test-exclude: 6.0.0 v8-to-istanbul: 9.1.0 - vitest: 0.34.3(@vitest/ui@0.34.4)(jsdom@22.1.0) + vitest: 0.34.6(@vitest/ui@0.34.4)(jsdom@22.1.0) transitivePeerDependencies: - supports-color dev: true - /@vitest/expect@0.34.3: - resolution: {integrity: sha512-F8MTXZUYRBVsYL1uoIft1HHWhwDbSzwAU9Zgh8S6WFC3YgVb4AnFV2GXO3P5Em8FjEYaZtTnQYoNwwBrlOMXgg==} + /@vitest/expect@0.34.6: + resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==} dependencies: - '@vitest/spy': 0.34.3 - '@vitest/utils': 0.34.3 - chai: 4.3.8 + '@vitest/spy': 0.34.6 + '@vitest/utils': 0.34.6 + chai: 4.3.10 - /@vitest/runner@0.34.3: - resolution: {integrity: sha512-lYNq7N3vR57VMKMPLVvmJoiN4bqwzZ1euTW+XXYH5kzr3W/+xQG3b41xJn9ChJ3AhYOSoweu974S1V3qDcFESA==} + /@vitest/runner@0.34.6: + resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==} dependencies: - '@vitest/utils': 0.34.3 + '@vitest/utils': 0.34.6 p-limit: 4.0.0 pathe: 1.1.1 - /@vitest/snapshot@0.34.3: - resolution: {integrity: sha512-QyPaE15DQwbnIBp/yNJ8lbvXTZxS00kRly0kfFgAD5EYmCbYcA+1EEyRalc93M0gosL/xHeg3lKAClIXYpmUiQ==} + /@vitest/snapshot@0.34.6: + resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==} dependencies: magic-string: 0.30.3 pathe: 1.1.1 pretty-format: 29.5.0 - /@vitest/spy@0.34.3: - resolution: {integrity: sha512-N1V0RFQ6AI7CPgzBq9kzjRdPIgThC340DGjdKdPSE8r86aUSmeliTUgkTqLSgtEwWWsGfBQ+UetZWhK0BgJmkQ==} + /@vitest/spy@0.34.6: + resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==} dependencies: tinyspy: 2.1.1 - /@vitest/ui@0.34.4(vitest@0.34.3): + /@vitest/ui@0.34.4(vitest@0.34.6): resolution: {integrity: sha512-gz0m0r9ErFG32r+DRdwuLJpUDpbi+jrMcw9nJZAau48Fs4LDIBg561PvczvGqyYxzbyFU7vgkSnSlSDfK0d53w==} peerDependencies: vitest: '>=0.30.1 <1' @@ -4445,17 +4445,17 @@ packages: pathe: 1.1.1 picocolors: 1.0.0 sirv: 2.0.3 - vitest: 0.34.3(@vitest/ui@0.34.4)(jsdom@22.1.0) + vitest: 0.34.6(@vitest/ui@0.34.4)(jsdom@22.1.0) - /@vitest/utils@0.34.3: - resolution: {integrity: sha512-kiSnzLG6m/tiT0XEl4U2H8JDBjFtwVlaE8I3QfGiMFR0QvnRDfYfdP3YvTBWM/6iJDAyaPY6yVQiCTUc7ZzTHA==} + /@vitest/utils@0.34.4: + resolution: {integrity: sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==} dependencies: diff-sequences: 29.4.3 loupe: 2.3.6 pretty-format: 29.5.0 - /@vitest/utils@0.34.4: - resolution: {integrity: sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==} + /@vitest/utils@0.34.6: + resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==} dependencies: diff-sequences: 29.4.3 loupe: 2.3.6 @@ -5363,14 +5363,14 @@ packages: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} dev: true - /chai@4.3.8: - resolution: {integrity: sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==} + /chai@4.3.10: + resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==} engines: {node: '>=4'} dependencies: assertion-error: 1.1.0 - check-error: 1.0.2 + check-error: 1.0.3 deep-eql: 4.1.3 - get-func-name: 2.0.0 + get-func-name: 2.0.2 loupe: 2.3.6 pathval: 1.1.1 type-detect: 4.0.8 @@ -5428,8 +5428,10 @@ packages: resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==} dev: true - /check-error@1.0.2: - resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==} + /check-error@1.0.3: + resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==} + dependencies: + get-func-name: 2.0.2 /cheerio-select@2.1.0: resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==} @@ -7122,7 +7124,7 @@ packages: semver: 6.3.0 string.prototype.matchall: 4.0.8 - /eslint-plugin-vitest@0.3.1(eslint@8.42.0)(vitest@0.34.3): + /eslint-plugin-vitest@0.3.1(eslint@8.42.0)(vitest@0.34.6): resolution: {integrity: sha512-GeR3zISHmqUGWK2sfW+eyCZivMqiQYzPf9UttHXBiEyMveS/jkKLHCrHUllwr3Hz1+i0zoseANd2xL0cFha8Eg==} engines: {node: 14.x || >= 16} peerDependencies: @@ -7136,7 +7138,7 @@ packages: '@typescript-eslint/utils': 6.5.0(eslint@8.42.0)(typescript@5.2.2) eslint: 8.42.0 typescript: 5.2.2 - vitest: 0.34.3(@vitest/ui@0.34.4)(jsdom@22.1.0) + vitest: 0.34.6(@vitest/ui@0.34.4)(jsdom@22.1.0) transitivePeerDependencies: - supports-color dev: false @@ -7772,6 +7774,9 @@ packages: /get-func-name@2.0.0: resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==} + /get-func-name@2.0.2: + resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==} + /get-intrinsic@1.2.1: resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==} dependencies: @@ -13517,64 +13522,64 @@ packages: yargs: 17.7.2 dev: true - /turbo-darwin-64@1.10.14: - resolution: {integrity: sha512-I8RtFk1b9UILAExPdG/XRgGQz95nmXPE7OiGb6ytjtNIR5/UZBS/xVX/7HYpCdmfriKdVwBKhalCoV4oDvAGEg==} + /turbo-darwin-64@1.10.15: + resolution: {integrity: sha512-Sik5uogjkRTe1XVP9TC2GryEMOJCaKE2pM/O9uLn4koQDnWKGcLQv+mDU+H+9DXvKLnJnKCD18OVRkwK5tdpoA==} cpu: [x64] os: [darwin] requiresBuild: true dev: true optional: true - /turbo-darwin-arm64@1.10.14: - resolution: {integrity: sha512-KAdUWryJi/XX7OD0alOuOa0aJ5TLyd4DNIYkHPHYcM6/d7YAovYvxRNwmx9iv6Vx6IkzTnLeTiUB8zy69QkG9Q==} + /turbo-darwin-arm64@1.10.15: + resolution: {integrity: sha512-xwqyFDYUcl2xwXyGPmHkmgnNm4Cy0oNzMpMOBGRr5x64SErS7QQLR4VHb0ubiR+VAb8M+ECPklU6vD1Gm+wekg==} cpu: [arm64] os: [darwin] requiresBuild: true dev: true optional: true - /turbo-linux-64@1.10.14: - resolution: {integrity: sha512-BOBzoREC2u4Vgpap/WDxM6wETVqVMRcM8OZw4hWzqCj2bqbQ6L0wxs1LCLWVrghQf93JBQtIGAdFFLyCSBXjWQ==} + /turbo-linux-64@1.10.15: + resolution: {integrity: sha512-dM07SiO3RMAJ09Z+uB2LNUSkPp3I1IMF8goH5eLj+d8Kkwoxd/+qbUZOj9RvInyxU/IhlnO9w3PGd3Hp14m/nA==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /turbo-linux-arm64@1.10.14: - resolution: {integrity: sha512-D8T6XxoTdN5D4V5qE2VZG+/lbZX/89BkAEHzXcsSUTRjrwfMepT3d2z8aT6hxv4yu8EDdooZq/2Bn/vjMI32xw==} + /turbo-linux-arm64@1.10.15: + resolution: {integrity: sha512-MkzKLkKYKyrz4lwfjNXH8aTny5+Hmiu4SFBZbx+5C0vOlyp6fV5jZANDBvLXWiDDL4DSEAuCEK/2cmN6FVH1ow==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /turbo-windows-64@1.10.14: - resolution: {integrity: sha512-zKNS3c1w4i6432N0cexZ20r/aIhV62g69opUn82FLVs/zk3Ie0GVkSB6h0rqIvMalCp7enIR87LkPSDGz9K4UA==} + /turbo-windows-64@1.10.15: + resolution: {integrity: sha512-3TdVU+WEH9ThvQGwV3ieX/XHebtYNHv9HARHauPwmVj3kakoALkpGxLclkHFBLdLKkqDvmHmXtcsfs6cXXRHJg==} cpu: [x64] os: [win32] requiresBuild: true dev: true optional: true - /turbo-windows-arm64@1.10.14: - resolution: {integrity: sha512-rkBwrTPTxNSOUF7of8eVvvM+BkfkhA2OvpHM94if8tVsU+khrjglilp8MTVPHlyS9byfemPAmFN90oRIPB05BA==} + /turbo-windows-arm64@1.10.15: + resolution: {integrity: sha512-l+7UOBCbfadvPMYsX08hyLD+UIoAkg6ojfH+E8aud3gcA1padpjCJTh9gMpm3QdMbKwZteT5uUM+wyi6Rbbyww==} cpu: [arm64] os: [win32] requiresBuild: true dev: true optional: true - /turbo@1.10.14: - resolution: {integrity: sha512-hr9wDNYcsee+vLkCDIm8qTtwhJ6+UAMJc3nIY6+PNgUTtXcQgHxCq8BGoL7gbABvNWv76CNbK5qL4Lp9G3ZYRA==} + /turbo@1.10.15: + resolution: {integrity: sha512-mKKkqsuDAQy1wCCIjCdG+jOCwUflhckDMSRoeBPcIL/CnCl7c5yRDFe7SyaXloUUkt4tUR0rvNIhVCcT7YeQpg==} hasBin: true optionalDependencies: - turbo-darwin-64: 1.10.14 - turbo-darwin-arm64: 1.10.14 - turbo-linux-64: 1.10.14 - turbo-linux-arm64: 1.10.14 - turbo-windows-64: 1.10.14 - turbo-windows-arm64: 1.10.14 + turbo-darwin-64: 1.10.15 + turbo-darwin-arm64: 1.10.15 + turbo-linux-64: 1.10.15 + turbo-linux-arm64: 1.10.15 + turbo-windows-64: 1.10.15 + turbo-windows-arm64: 1.10.15 dev: true /typanion@3.12.1: @@ -14078,8 +14083,8 @@ packages: vfile-message: 3.1.4 dev: true - /vite-node@0.34.3(@types/node@18.16.2): - resolution: {integrity: sha512-+0TzJf1g0tYXj6tR2vEyiA42OPq68QkRZCu/ERSo2PtsDJfBpDyEfuKbRvLmZqi/CgC7SCBtyC+WjTGNMRIaig==} + /vite-node@0.34.6(@types/node@18.16.2): + resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==} engines: {node: '>=v14.18.0'} hasBin: true dependencies: @@ -14134,8 +14139,8 @@ packages: optionalDependencies: fsevents: 2.3.2 - /vitest@0.34.3(@vitest/ui@0.34.4)(jsdom@22.1.0): - resolution: {integrity: sha512-7+VA5Iw4S3USYk+qwPxHl8plCMhA5rtfwMjgoQXMT7rO5ldWcdsdo3U1QD289JgglGK4WeOzgoLTsGFu6VISyQ==} + /vitest@0.34.6(@vitest/ui@0.34.4)(jsdom@22.1.0): + resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==} engines: {node: '>=v14.18.0'} hasBin: true peerDependencies: @@ -14168,16 +14173,16 @@ packages: '@types/chai': 4.3.5 '@types/chai-subset': 1.3.3 '@types/node': 18.16.2 - '@vitest/expect': 0.34.3 - '@vitest/runner': 0.34.3 - '@vitest/snapshot': 0.34.3 - '@vitest/spy': 0.34.3 - '@vitest/ui': 0.34.4(vitest@0.34.3) - '@vitest/utils': 0.34.3 + '@vitest/expect': 0.34.6 + '@vitest/runner': 0.34.6 + '@vitest/snapshot': 0.34.6 + '@vitest/spy': 0.34.6 + '@vitest/ui': 0.34.4(vitest@0.34.6) + '@vitest/utils': 0.34.6 acorn: 8.10.0 acorn-walk: 8.2.0 cac: 6.7.14 - chai: 4.3.8 + chai: 4.3.10 debug: 4.3.4 jsdom: 22.1.0 local-pkg: 0.4.3 @@ -14189,7 +14194,7 @@ packages: tinybench: 2.5.0 tinypool: 0.7.0 vite: 4.4.9(@types/node@18.16.2) - vite-node: 0.34.3(@types/node@18.16.2) + vite-node: 0.34.6(@types/node@18.16.2) why-is-node-running: 2.2.2 transitivePeerDependencies: - less diff --git a/websites/docs/intro/visualization.en.md b/websites/docs/intro/visualization.en.md index 42d6b2d23..afc7630b8 100644 --- a/websites/docs/intro/visualization.en.md +++ b/websites/docs/intro/visualization.en.md @@ -5,14 +5,18 @@ title: Visualization I made [Concepts Visualization](https://visualization.suspensive.org/react) that whoever can understand core concepts of Suspensive(``, `ErrorBoundary/>`, ``, ``) visually. You can interact this site now. -### First, See how boundaries do +### See how each components work 1. How [``](/docs/react/src/Suspense.i18n) treat loading and success at once in multiple fetching. 2. How [``](/docs/react/src/ErrorBoundary.i18n) treat error at once and how to reset. and what resetKeys do. 3. How [``](/docs/react/src/ErrorBoundaryGroup.i18n) reset multiple ``s without using resetKeys easily. 4. How [``](/docs/react/src/AsyncBoundary.i18n) treat loading, success and error at once. -[**🔗 Click here to see Visualization**](https://visualization.suspensive.org/react) +:::info + +[**Click here to see Visualization**](https://visualization.suspensive.org/react) + +:::