docs: update

docs/v1/src/pages/docs/react/AsyncBoundary.en.mdx

@@ -50,7 +50,7 @@ type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
 
 <Callout type='warning'>
 
-deprecated: Use [wrap.ErrorBoundary().Suspense().on](./wrap), [wrap.ErrorBoundary().Suspense.CSROnly().on](./wrap) instead
+deprecated: Use [wrap.ErrorBoundary().Suspense().on](./wrap) instead
 
 </Callout>
 

docs/v1/src/pages/docs/react/AsyncBoundary.ko.mdx

@@ -52,7 +52,7 @@ type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
 
 <Callout type='warning'>
 
-deprecated: [wrap.ErrorBoundary().Suspense().on](./wrap), [wrap.ErrorBoundary().Suspense.CSROnly().on](./wrap)을 대신 사용하세요
+deprecated: [wrap.ErrorBoundary().Suspense().on](./wrap)을 대신 사용하세요
 
 </Callout>
 

docs/v1/src/pages/docs/react/Suspense.en.mdx

@@ -53,7 +53,7 @@ If you want to use Suspense working in both SSR/CSR, You can change `<Suspense c
 
 <Callout type='warning'>
 
-deprecated: Use [wrap.Suspense().on](./wrap), [wrap.Suspense.CSROnly().on](./wrap) instead
+deprecated: Use [wrap.Suspense().on](./wrap) instead
 
 </Callout>
 

docs/v1/src/pages/docs/react/Suspense.ko.mdx

@@ -52,7 +52,7 @@ React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense csrO
 
 <Callout type='warning'>
 
-deprecated: [wrap.Suspense().on](./wrap), [wrap.Suspense.CSROnly().on](./wrap)을 사용하세요
+deprecated: [wrap.Suspense().on](./wrap)을 사용하세요
 
 </Callout>
 

docs/v1/src/pages/docs/why.en.mdx

@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 If you have used React Suspense in SSR environment like Next.js, you may encounter error like below.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-It's why [`<Suspense/>` and `<Suspense.CSROnly/>`](/docs/react/Suspense) is added in this library.
+It's why [`<Suspense csrOnly/>`](/docs/react/Suspense) is added in this library.
 
 ### ErrorBoundary more simply
 

docs/v1/src/pages/docs/why.ko.mdx

@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 React Suspense를 Next.js와 같은 서버사이드 렌더링 환경에서 사용해본 적이 있다면 아마 종종 아래 사진과 같은 에러를 겪게 된 적이 있을 겁니다.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-이것이 [`<Suspense/>` 와 `<Suspense.CSROnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
+이것이 [`<Suspense csrOnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
 
 ### ErrorBoundary를 더욱 단순하게 사용하고 싶습니다.
 

docs/v2/src/pages/docs/react/Suspense.en.mdx

@@ -27,24 +27,24 @@ Control multiple `<Suspense/>`s default fallback with `<SuspensiveProvider/>`. D
 
 </Callout>
 
-### Avoid Server side rendering (CSROnly)
+### Avoid Server side rendering (csrOnly)
 
-`<Suspense.CSROnly/>` will return fallback in server. After mount(in client) return children. Since mount only happens on the client, server-side rendering can be avoided.
+`<Suspense csrOnly/>` will return fallback in server. After mount(in client) return children. Since mount only happens on the client, server-side rendering can be avoided.
 
-```tsx /Suspense.CSROnly/
+```tsx /csrOnly/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
-  <Suspense.CSROnly fallback={<Loading />}>
+  <Suspense csrOnly fallback={<Loading />}>
     <Children />
-  </Suspense.CSROnly>
+  </Suspense>
 )
 ```
 
 <Callout type='info'>
 
-Migration support SSR gradually (`<Suspense.CSROnly/>` -> `<Suspense/>`)
+Migration support SSR gradually (`<Suspense csrOnly/>` -> `<Suspense/>`)
 
-If you want to use Suspense working in both SSR/CSR, You can change `<Suspense.CSROnly/>` to `<Suspense/>` gradually.
+If you want to use Suspense working in both SSR/CSR, You can change `<Suspense csrOnly/>` to `<Suspense/>` gradually.
 
 </Callout>

docs/v2/src/pages/docs/react/Suspense.ko.mdx

@@ -26,24 +26,24 @@ Default fallback
 
 </Callout>
 
-### 서버사이드 렌더링을 피하기 (CSROnly)
+### 서버사이드 렌더링을 피하기 (csrOnly)
 
-`<Suspense.CSROnly/>`는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.
+`<Suspense csrOnly/>`는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.
 
-```tsx /Suspense.CSROnly/
+```tsx /csrOnly/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
-  <Suspense.CSROnly fallback={<Loading />}>
+  <Suspense csrOnly fallback={<Loading />}>
     <Children />
-  </Suspense.CSROnly>
+  </Suspense>
 )
 ```
 
 <Callout type='info'>
 
-SSR을 지원하도록 점진적으로 마이그레이션하기 (`<Suspense.CSROnly/>` -> `<Suspense/>`)
+SSR을 지원하도록 점진적으로 마이그레이션하기 (`<Suspense csrOnly/>` -> `<Suspense/>`)
 
-React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense.CSROnly/>`에서 `<Suspense/>`로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
+React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense csrOnly/>`에서 `<Suspense/>`로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
 
 </Callout>

docs/v2/src/pages/docs/why.en.mdx

@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 If you have used React Suspense in SSR environment like Next.js, you may encounter error like below.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-It's why [`<Suspense/>` and `<Suspense.CSROnly/>`](/docs/react/Suspense) is added in this library.
+It's why [`<Suspense csrOnly/>`](/docs/react/Suspense) is added in this library.
 
 ### ErrorBoundary more simply
 

docs/v2/src/pages/docs/why.ko.mdx

@@ -9,7 +9,7 @@ import { Steps } from 'nextra/components'
 React Suspense를 Next.js와 같은 서버사이드 렌더링 환경에서 사용해본 적이 있다면 아마 종종 아래 사진과 같은 에러를 겪게 된 적이 있을 겁니다.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-이것이 [`<Suspense/>` 와 `<Suspense.CSROnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
+이것이 [`<Suspense csrOnly/>`](/docs/react/Suspense)를 이 라이브러리에 추가한 이유입니다.
 
 ### ErrorBoundary를 더욱 단순하게 사용하고 싶습니다.
 

packages/react/src/AsyncBoundary.tsx

@@ -13,33 +13,45 @@ export interface AsyncBoundaryProps
   rejectedFallback: ErrorBoundaryProps['fallback']
 }
 
-const BaseAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBoundaryProps>(
-  ({ pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
-    <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
-      <Suspense fallback={pendingFallback}>{children}</Suspense>
-    </ErrorBoundary>
-  )
-)
-if (process.env.NODE_ENV !== 'production') {
-  BaseAsyncBoundary.displayName = 'AsyncBoundary'
-}
-const CSROnly = forwardRef<ComponentRef<typeof ErrorBoundary>, Omit<AsyncBoundaryProps, 'csrOnly'>>(
-  ({ pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
-    <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
-      <Suspense.CSROnly fallback={pendingFallback}>{children}</Suspense.CSROnly>
-    </ErrorBoundary>
-  )
-)
-if (process.env.NODE_ENV !== 'production') {
-  CSROnly.displayName = 'AsyncBoundary.CSROnly'
-}
-
 /**
  * @deprecated Use `<Suspense/>` and `<ErrorBoundary/>` instead
  */
-export const AsyncBoundary = Object.assign(BaseAsyncBoundary, {
-  /**
-   * @deprecated Use `<Suspense csrOnly />` and `<ErrorBoundary/>` instead
-   */
-  CSROnly,
-})
+export const AsyncBoundary = Object.assign(
+  (() => {
+    const BaseAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, AsyncBoundaryProps>(
+      ({ csrOnly, pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
+        <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
+          <Suspense csrOnly={csrOnly} fallback={pendingFallback}>
+            {children}
+          </Suspense>
+        </ErrorBoundary>
+      )
+    )
+    if (process.env.NODE_ENV !== 'production') {
+      BaseAsyncBoundary.displayName = 'AsyncBoundary'
+    }
+
+    return BaseAsyncBoundary
+  })(),
+  {
+    /**
+     * @deprecated Use `<Suspense csrOnly />` and `<ErrorBoundary/>` instead
+     */
+    CSROnly: (() => {
+      const CSROnly = forwardRef<ComponentRef<typeof ErrorBoundary>, Omit<AsyncBoundaryProps, 'csrOnly'>>(
+        ({ pendingFallback, rejectedFallback, children, ...errorBoundaryProps }, resetRef) => (
+          <ErrorBoundary {...errorBoundaryProps} ref={resetRef} fallback={rejectedFallback}>
+            <Suspense csrOnly fallback={pendingFallback}>
+              {children}
+            </Suspense>
+          </ErrorBoundary>
+        )
+      )
+      if (process.env.NODE_ENV !== 'production') {
+        CSROnly.displayName = 'AsyncBoundary.CSROnly'
+      }
+
+      return CSROnly
+    })(),
+  }
+)

packages/react/src/Suspense.tsx

@@ -36,7 +36,7 @@ export const Suspense = Object.assign(
   })(),
   {
     /**
-     * @deprecated Use <Suspense csrOnly /> instead
+     * @deprecated Use `<Suspense csrOnly/>` instead
      */
     CSROnly: (() => {
       const CSROnly = ({

packages/react/src/wrap.tsx

@@ -170,9 +170,9 @@ export const withAsyncBoundary = Object.assign(
       asyncBoundaryProps: PropsWithoutChildren<AsyncBoundaryProps>
     ) => {
       const Wrapped = (props: TProps) => (
-        <AsyncBoundary.CSROnly {...asyncBoundaryProps}>
+        <AsyncBoundary {...asyncBoundaryProps} csrOnly>
           <Component {...props} />
-        </AsyncBoundary.CSROnly>
+        </AsyncBoundary>
       )
 
       if (process.env.NODE_ENV !== 'production') {

websites/visualization/src/app/react-await/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   return (
     <ErrorBoundary fallback={() => <div>error</div>}>
       <div className="flex flex-col">
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -22,8 +22,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -37,8 +37,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -52,8 +52,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [2000] as const,
@@ -67,11 +67,11 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
+        </Suspense>
       </div>
 
       <div className="flex flex-col">
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [3000] as const,
@@ -85,8 +85,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [4000] as const,
@@ -100,8 +100,8 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
-        <Suspense.CSROnly fallback={<div>loading...</div>}>
+        </Suspense>
+        <Suspense csrOnly fallback={<div>loading...</div>}>
           <Await
             options={{
               key: [4000] as const,
@@ -115,7 +115,7 @@ export default function Page() {
               </div>
             )}
           </Await>
-        </Suspense.CSROnly>
+        </Suspense>
       </div>
     </ErrorBoundary>
   )

websites/visualization/src/app/react-image/page.tsx

@@ -5,7 +5,7 @@ import { Image } from '@suspensive/react-image'
 
 export default wrap
   .ErrorBoundary({ fallback: () => <div>error</div> })
-  .Suspense.CSROnly({ fallback: 'loading...' })
+  .Suspense({ csrOnly: true, fallback: 'loading...' })
   .on(function Page() {
     return (
       <div className="flex flex-col">

websites/visualization/src/app/react-query/page.tsx

@@ -17,19 +17,19 @@ export default wrap.ErrorBoundaryGroup({}).on(function Page() {
       </div>
       <Area title="QueryErrorResetBoundary + ErrorBoundary + Suspense">
         <ErrorBoundary onReset={queryErrorResetBoundary.reset} fallback={RejectedFallback}>
-          <Suspense.CSROnly fallback={<Spinner />}>
+          <Suspense csrOnly fallback={<Spinner />}>
             <UseSuspenseQuery queryKey={['query', 1] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
             <UseSuspenseQuery queryKey={['query', 2] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
-          </Suspense.CSROnly>
+          </Suspense>
         </ErrorBoundary>
       </Area>
 
       <Area title="QueryErrorBoundary + Suspense">
         <QueryErrorBoundary fallback={RejectedFallback}>
-          <Suspense.CSROnly fallback={<Spinner />}>
+          <Suspense csrOnly fallback={<Spinner />}>
             <UseSuspenseQuery queryKey={['query', 3] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
             <UseSuspenseQuery queryKey={['query', 4] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
-          </Suspense.CSROnly>
+          </Suspense>
         </QueryErrorBoundary>
       </Area>
     </Area>