docs: update codeline highlight (#261)

related with #202 # Overview  I updated codeline highlight we can compare current production official docs(https://suspensive.org) and preview of this Pull Request(https://docs-git-docs-codeline-highlight-suspensive.vercel.app/) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
toss · Oct 27, 2023 · be8199e · be8199e · vercel · Oct 27, 2023
1 parent c09f52a
commit be8199e
Show file tree

Hide file tree

Showing 22 changed files with 70 additions and 59 deletions.
diff --git a/docs/src/pages/docs/react-await/Await.en.mdx b/docs/src/pages/docs/react-await/Await.en.mdx
@@ -13,11 +13,11 @@ Afterwards, when the Promise is fulfilled, the guaranteed awaited data can be us
 
 Additionally, this data is cached in the received key and can be used immediately without pending when reused.
 
-```tsx
+```tsx /Await/
 import { Await } from '@suspensive/react-await'
 import { Suspense } from '@suspensive/react'
 
-const getPost = (postId: number) => fetch(`/post/${postId}`).then((res) => res.json()) as Post
+const getPost = (postId: number) => fetch(`/post/${postId}`).then<Post>((res) => res.json())
 
 const Example = () => (
   <Suspense fallback="awaiting...">

diff --git a/docs/src/pages/docs/react-await/Await.ko.mdx b/docs/src/pages/docs/react-await/Await.ko.mdx
@@ -13,11 +13,11 @@ import { Callout } from 'nextra/components'
 
 또한 이 data는 받은 키에 cache되어 재사용하는 경우 pending없이 즉시 사용할 수 있습니다.
 
-```tsx
+```tsx /Await/
 import { Await } from '@suspensive/react-await'
 import { Suspense } from '@suspensive/react'
 
-const getPost = (postId: number) => fetch(`/post/${postId}`).then((res) => res.json()) as Post
+const getPost = (postId: number) => fetch(`/post/${postId}`).then<Post>((res) => res.json())
 
 const Example = () => (
   <Suspense fallback="awaiting...">

diff --git a/docs/src/pages/docs/react-query/QueryErrorBoundary.en.mdx b/docs/src/pages/docs/react-query/QueryErrorBoundary.en.mdx
@@ -6,7 +6,7 @@ import { Callout } from 'nextra/components'
 
 You can just use `<QueryErrorBoundary/>`, `<QueryAsyncBoundary/>` like using [`<ErrorBoundary/>`](/docs/react/ErrorBoundary), [`<AsyncBoundary/>`](/docs/react/AsyncBoundary). All other features are same with original `<ErrorBoundary/>`, `<AsyncBoundary/>` of @suspensive/react without resetting react-query's error.
 
-```tsx
+```tsx /QueryErrorBoundary/
 import { QueryErrorBoundary } from '@suspensive/react-query'
 
 const Example = () => (
@@ -23,7 +23,7 @@ const Example = () => (
 )
 ```
 
-```tsx
+```tsx /QueryAsyncBoundary/
 import { QueryAsyncBoundary } from '@suspensive/react-query'
 
 const Example = () => (
@@ -59,7 +59,7 @@ With the [`<QueryErrorResetBoundary/>`](https://tanstack.com/query/v4/docs/refer
 
 #### `<QueryErrorResetBoundary/>` + `<ErrorBoundary/>`
 
-```tsx
+```tsx /QueryErrorResetBoundary/ /ErrorBoundary/
 import { ErrorBoundary } from '@suspensive/react'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 
@@ -84,7 +84,7 @@ const Example = () => (
 
 #### `<QueryErrorResetBoundary/>` + `<AsyncBoundary/>`
 
-```tsx
+```tsx /QueryErrorResetBoundary/ /AsyncBoundary/
 import { AsyncBoundary } from '@suspensive/react'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 

diff --git a/docs/src/pages/docs/react-query/QueryErrorBoundary.ko.mdx b/docs/src/pages/docs/react-query/QueryErrorBoundary.ko.mdx
@@ -6,7 +6,7 @@ import { Callout } from 'nextra/components'
 
 [`<ErrorBoundary/>`](/docs/react/ErrorBoundary), [`<AsyncBoundary/>`](/docs/react/AsyncBoundary)를 사용하는 것처럼 `<QueryErrorBoundary/>`, `<QueryAsyncBoundary/>`를 사용할 수 있습니다. react-query의 캐싱된 error를 reset한다는 점만 빼면 모든 다른 기능은 @suspensive/react의 `<ErrorBoundary/>`, `<AsyncBoundary/>`와 같습니다.
 
-```tsx
+```tsx /QueryErrorBoundary/
 import { QueryErrorBoundary } from '@suspensive/react-query'
 
 const Example = () => (
@@ -23,7 +23,7 @@ const Example = () => (
 )
 ```
 
-```tsx
+```tsx /QueryAsyncBoundary/
 import { QueryAsyncBoundary } from '@suspensive/react-query'
 
 const Example = () => (
@@ -59,7 +59,7 @@ npm install @suspensive/react @suspensive/react-query
 
 #### `<QueryErrorResetBoundary/>` + `<ErrorBoundary/>`
 
-```tsx
+```tsx /QueryErrorResetBoundary/ /ErrorBoundary/
 import { ErrorBoundary } from '@suspensive/react'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 
@@ -84,7 +84,7 @@ const Example = () => (
 
 #### `<QueryErrorResetBoundary/>` + `<AsyncBoundary/>`
 
-```tsx
+```tsx /QueryErrorResetBoundary/ /AsyncBoundary/
 import { AsyncBoundary } from '@suspensive/react'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 

diff --git a/docs/src/pages/docs/react-query/useSuspenseInfiniteQuery.en.mdx b/docs/src/pages/docs/react-query/useSuspenseInfiniteQuery.en.mdx
@@ -4,7 +4,7 @@ import { Callout } from 'nextra/components'
 
 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
+```tsx /useSuspenseInfiniteQuery/
 import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
 
 const Example = () => {
@@ -22,7 +22,7 @@ const Example = () => {
 
 If you turn suspense on in @tanstack/react-query, You can use useInfiniteQuery with `<Suspense/>` and `<ErrorBoundary/>`.
 
-```tsx
+```tsx /useInfiniteQuery/
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 const Example = () => {
@@ -44,7 +44,6 @@ but useInfiniteQuery's return type:query.data will be always fulfilled because o
 
 This is why @suspensive/react-query provide **useSuspenseInfiniteQuery**
 
-
 <Callout>
 
 Concentrate on only Success

diff --git a/docs/src/pages/docs/react-query/useSuspenseInfiniteQuery.ko.mdx b/docs/src/pages/docs/react-query/useSuspenseInfiniteQuery.ko.mdx
@@ -4,7 +4,7 @@ import { Callout } from 'nextra/components'
 
 이 hook의 return 타입에는 isLoading, isError이 없습니다. `<Suspense/>` and `<ErrorBoundary/>`가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useInfiniteQuery처럼 사용하면 됩니다.
 
-```tsx
+```tsx /useSuspenseInfiniteQuery/
 import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
 
 const Example = () => {
@@ -22,7 +22,7 @@ const Example = () => {
 
 @tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery를 `<Suspense/>`, `<ErrorBoundary/>`와 함께 사용할 수 있습니다.
 
-```tsx
+```tsx /useInfiniteQuery/
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 const Example = () => {

diff --git a/docs/src/pages/docs/react-query/useSuspenseQueries.en.mdx b/docs/src/pages/docs/react-query/useSuspenseQueries.en.mdx
@@ -4,7 +4,7 @@ import { Callout } from 'nextra/components'
 
 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
+```tsx /useSuspenseQueries/
 import { useSuspenseQueries } from '@suspensive/react-query'
 
 const Example = () => {
@@ -25,7 +25,7 @@ const Example = () => {
 
 You can use useQueries with `<Suspense/>` and `<ErrorBoundary/>` by using the suspense option of @tanstack/react-query useQueries.
 
-```tsx
+```tsx /useQueries/
 import { useQueries } from '@tanstack/react-query'
 
 const Example = () => {

diff --git a/docs/src/pages/docs/react-query/useSuspenseQueries.ko.mdx b/docs/src/pages/docs/react-query/useSuspenseQueries.ko.mdx
@@ -4,7 +4,7 @@ import { Callout } from 'nextra/components'
 
 이 hook의 return 타입에는 isLoading, isError이 없습니다. `<Suspense/>` and `<ErrorBoundary/>`가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQueries처럼 사용하면 됩니다.
 
-```tsx
+```tsx /useSuspenseQueries/
 import { useSuspenseQueries } from '@suspensive/react-query'
 
 const Example = () => {
@@ -25,7 +25,7 @@ const Example = () => {
 
 @tanstack/react-query useQueries의 suspense 옵션을 사용하면, useQueries를 `<Suspense/>`, `<ErrorBoundary/>`와 함께 사용할 수 있습니다.
 
-```tsx
+```tsx /useQueries/
 import { useQueries } from '@tanstack/react-query'
 
 const Example = () => {

diff --git a/docs/src/pages/docs/react-query/useSuspenseQuery.en.mdx b/docs/src/pages/docs/react-query/useSuspenseQuery.en.mdx
@@ -4,7 +4,7 @@ import { Callout } from 'nextra/components'
 
 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
+```tsx /useSuspenseQuery/
 import { useSuspenseQuery } from '@suspensive/react-query'
 
 const Example = () => {
@@ -22,7 +22,7 @@ const Example = () => {
 
 You can use useQuery with `<Suspense/>` and `<ErrorBoundary/>` by using the suspense option in @tanstack/react-query.
 
-```tsx
+```tsx /useQuery/
 import { useQuery } from '@tanstack/react-query'
 
 const Example = () => {

diff --git a/docs/src/pages/docs/react-query/useSuspenseQuery.ko.mdx b/docs/src/pages/docs/react-query/useSuspenseQuery.ko.mdx
@@ -4,7 +4,7 @@ import { Callout } from 'nextra/components'
 
 이 hook의 return 타입에는 isLoading, isError이 없습니다. `<Suspense/>`와 `<ErrorBoundary/>`가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQuery처럼 사용하면 됩니다.
 
-```tsx
+```tsx /useSuspenseQuery/
 import { useSuspenseQuery } from '@suspensive/react-query'
 
 const Example = () => {
@@ -22,7 +22,7 @@ const Example = () => {
 
 @tanstack/react-query에서 suspense 옵션을 사용하면, useQuery를 `<Suspense/>` and `<ErrorBoundary/>`와 함께 사용할 수 있습니다.
 
-```tsx
+```tsx /useQuery/
 import { useQuery } from '@tanstack/react-query'
 
 const Example = () => {

diff --git a/docs/src/pages/docs/react/AsyncBoundary.en.mdx b/docs/src/pages/docs/react/AsyncBoundary.en.mdx
@@ -2,19 +2,23 @@ import { Callout } from 'nextra/components'
 
 # AsyncBoundary
 
+<Callout>
+
 `<AsyncBoundary/>` wraps @suspensive/react's [`<Suspense/>`](./Suspense) and [`<ErrorBoundary/>`](./ErrorBoundary) to use them at once.
 
 ### AsyncBoundaryProps
 
-```tsx
+```tsx /AsyncBoundaryProps/
 type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
   Omit<ErrorBoundaryProps, 'fallback'> & {
     pendingFallback?: SuspenseProps['fallback']
     rejectedFallback: ErrorBoundaryProps['fallback']
   }
 ```
 
-```tsx
+</Callout>
+
+```tsx /AsyncBoundary/
 import { AsyncBoundary } from '@suspensive/react'
 
 const Example = () => (
@@ -38,7 +42,7 @@ const Example = () => (
 
 Since it wraps `<Suspense.CSROnly/>`, it provides the same CSROnly.
 
-```tsx
+```tsx /AsyncBoundary.CSROnly/
 import { AsyncBoundary } from '@suspensive/react'
 
 const Example = () => (
@@ -54,7 +58,7 @@ const Example = () => (
     onError={(error) => console.log(error)}
   >
     <Children />
-  </AsyncBoundary>
+  </AsyncBoundary.CSROnly>
 )
 ```
 
@@ -64,8 +68,8 @@ You can use withAsyncBoundary to wrap component by `<AsyncBoundary/>` easily.
 we don't need to make unncessary code to wrap it if we use withAsyncBoundary like below.
 withAsyncBoundary's 2nd parameter is props of `<AsyncBoundary/>` without children
 
-```tsx
-import { AsyncBoundary } from '@suspensive/react'
+```tsx /withAsyncBoundary/
+import { withAsyncBoundary } from '@suspensive/react'
 
 const Example = withAsyncBoundary(
   function Component() {

diff --git a/docs/src/pages/docs/react/AsyncBoundary.ko.mdx b/docs/src/pages/docs/react/AsyncBoundary.ko.mdx
@@ -2,21 +2,25 @@ import { Callout } from 'nextra/components'
 
 # AsyncBoundary
 
+<Callout>
+
 `<AsyncBoundary/>`는 @suspensive/react의 [`<Suspense/>`](./Suspense)와 [`<ErrorBoundary/>`](./ErrorBoundary)를 한번에 사용하기 위해 래핑한 컴포넌트입니다.
 
 ### AsyncBoundaryProps
 
 `<AsyncBoundary/>` Props의 타입은 `<Suspense/>`와 `<ErrorBoundary/>`를 조합합니다.
 
-```tsx
+```tsx /AsyncBoundaryProps/
 type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
   Omit<ErrorBoundaryProps, 'fallback'> & {
     pendingFallback?: SuspenseProps['fallback']
     rejectedFallback: ErrorBoundaryProps['fallback']
   }
 ```
 
-```tsx
+</Callout>
+
+```tsx /AsyncBoundary/
 import { AsyncBoundary } from '@suspensive/react'
 
 const Example = () => (
@@ -40,7 +44,7 @@ const Example = () => (
 
 `<Suspense.CSROnly/>`를 래핑하기 때문에 동일하게 CSROnly를 제공합니다.
 
-```tsx
+```tsx /AsyncBoundary.CSROnly/
 import { AsyncBoundary } from '@suspensive/react'
 
 const Example = () => (
@@ -56,7 +60,7 @@ const Example = () => (
     onError={(error) => console.log(error)}
   >
     <Children />
-  </AsyncBoundary>
+  </AsyncBoundary.CSROnly>
 )
 ```
 
@@ -66,8 +70,8 @@ withAsyncBoundary를 사용하면 컴포넌트를 `<AsyncBoundary/>`로 쉽게
 아래와 같이 withAsyncBoundary를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
 withAsyncBoundary의 두 번째 인자는 children이 없는 `<AsyncBoundary/>`의 props입니다.
 
-```tsx
-import { AsyncBoundary } from '@suspensive/react'
+```tsx /withAsyncBoundary/
+import { withAsyncBoundary } from '@suspensive/react'
 
 const Example = withAsyncBoundary(
   function Component() {

diff --git a/docs/src/pages/docs/react/Delay.en.mdx b/docs/src/pages/docs/react/Delay.en.mdx
@@ -6,7 +6,7 @@ import { Callout } from 'nextra/components'
 
 This component delays the exposure of children by ms. In the code below, exposure of children is delayed by 200ms.
 
-```tsx
+```tsx /Delay/
 import { Delay } from '@suspensive/react'
 
 const Example = () => (
@@ -20,7 +20,7 @@ const Example = () => (
 
 Delayed loading UI sometimes provides better usability
 
-```tsx
+```tsx /Delay/
 import { Delay, Suspense } from '@suspensive/react'
 
 const Example = () => (
@@ -52,7 +52,7 @@ We can use withDelay to wrap component by `<Delay/>` easily.
 we don't need to make unncessary code to wrap it if we use withDelay like below.
 withDelay's 2nd parameter is props of `<Delay/>` without children
 
-```tsx
+```tsx /withDelay/
 import { withDelay } from '@suspensive/react'
 
 const Example = withDelay(

diff --git a/docs/src/pages/docs/react/Delay.ko.mdx b/docs/src/pages/docs/react/Delay.ko.mdx
@@ -6,7 +6,7 @@ import { Callout } from 'nextra/components'
 
 이 컴포넌트는 children이 노출되는 시점을 ms만큼 지연시킵니다. 아래와 같은 코드에서는 200ms만큼 children 노출이 지연됩니다.
 
-```tsx
+```tsx /Delay/
 import { Delay } from '@suspensive/react'
 
 const Example = () => (
@@ -20,7 +20,7 @@ const Example = () => (
 
 로딩 UI가 지연되어 노출되는 것이 때에 따라 더 좋은 사용성을 제공합니다
 
-```tsx
+```tsx /Delay/
 import { Delay, Suspense } from '@suspensive/react'
 
 const Example = () => (
@@ -52,7 +52,7 @@ withDelay를 사용하면 컴포넌트를 `<Delay/>`로 쉽게 래핑할 수 있
 아래와 같이 withDelay를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
 withDelay의 두 번째 인자는 children이 없는 `<Delay/>`의 props입니다.
 
-```tsx
+```tsx /withDelay/
 import { withDelay } from '@suspensive/react'
 
 const Example = withDelay(

diff --git a/docs/src/pages/docs/react/ErrorBoundary.en.mdx b/docs/src/pages/docs/react/ErrorBoundary.en.mdx
@@ -8,7 +8,7 @@ this component can handle any errors in children
 
 If there is any thrown error in children of `<ErrorBoundary/>`, Error will be caught and then fallback will be rendered.
 
-```tsx /ErrorBoundary/ /fallback/
+```tsx /fallback/
 import { ErrorBoundary } from '@suspensive/react'
 import { useState, useEffect } from 'react'
 
@@ -83,7 +83,7 @@ Use `<ErrorBoundary/>` fallback props without prop drilling
 If component using `reset` method and `error` object is nested, prop drilling cannot be avoided.
 The `useErrorBoundaryFallbackProps` allows you to access the `reset` method and `error` objects without prop drilling.
 
-```tsx
+```tsx /useErrorBoundaryFallbackProps/
 import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
 
 const Nested = () => {