feat(react): add Suspense clientOnly prop to deprecate Suspense.CSROn…

…ly (#521)

fix #469

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

@minsoo-web @okinawaa
When I introduce Suspense.CSROnly to the interested, half of someone
don't understand at once. In addition, we need to make depth of wrap's
interface(only wrap.Suspense.CSROnly have 2 depth). It have incosistency
to be understood at once.

So I replace Suspense.CSRonly by clientOnly prop of Suspense and mark it
as deprecated. And I want to remove it in v2

## 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.

---------

.changeset/three-seahorses-peel.md

@@ -0,0 +1,6 @@
+---
+'@suspensive/react-query': minor
+'@suspensive/react': minor
+---
+
+feat(react): add Suspense clientOnly prop to deprecate Suspense.CSROnly, wrap.Suspense.CSROnly

README.md

@@ -30,11 +30,12 @@ All declarative components to use suspense on both CSR, SSR.
 
 ### Features
 
-- Suspense Suspense.CSROnly
+- Suspense
 - ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps
 - ErrorBoundaryGroup, useErrorBoundaryGroup
 - Delay
 - SuspensiveProvider, Suspensive
+- DevMode
 
 ### Installation
 

configs/tsup/src/index.ts

@@ -9,5 +9,4 @@ export const options: Options = {
   dts: true,
   minify: true,
   treeshake: true,
-  clean: true,
 }

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

@@ -46,41 +46,11 @@ type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
   }
 ```
 
-### Avoid Server side rendering (CSROnly)
-
-<Callout type='warning'>
-
-deprecated: Use `<Suspense.CSROnly/>` and `<ErrorBoundary/>` directly
-
-</Callout>
-
-Since it wraps `<Suspense.CSROnly/>`, it provides the same CSROnly.
-
-```tsx /AsyncBoundary.CSROnly/
-import { AsyncBoundary } from '@suspensive/react'
-
-const Example = () => (
-  <AsyncBoundary.CSROnly
-    pendingFallback={<Loading />}
-    rejectedFallback={(props) => (
-      <>
-        <button onClick={props.reset}>Try again</button>
-        {props.error.message}
-      </>
-    )}
-    onReset={() => console.log('reset')}
-    onError={(error) => console.log(error)}
-  >
-    <Children />
-  </AsyncBoundary.CSROnly>
-)
-```
-
 ## withAsyncBoundary
 
 <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

@@ -48,41 +48,11 @@ type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
   }
 ```
 
-### 서버사이드 렌더링을 피하기 (CSROnly)
-
-<Callout type='warning'>
-
-deprecated: `<Suspense.CSROnly/>`와 `<ErrorBoundary/>`를 직접 사용하세요
-
-</Callout>
-
-`<Suspense.CSROnly/>`를 래핑하기 때문에 동일하게 CSROnly를 제공합니다.
-
-```tsx /AsyncBoundary.CSROnly/
-import { AsyncBoundary } from '@suspensive/react'
-
-const Example = () => (
-  <AsyncBoundary.CSROnly
-    pendingFallback={<Loading />}
-    rejectedFallback={(props) => (
-      <>
-        <button onClick={props.reset}>Try again</button>
-        {props.error.message}
-      </>
-    )}
-    onReset={() => console.log('reset')}
-    onError={(error) => console.log(error)}
-  >
-    <Children />
-  </AsyncBoundary.CSROnly>
-)
-```
-
 ## withAsyncBoundary
 
 <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

@@ -27,41 +27,41 @@ Control multiple `<Suspense/>`s default fallback with `<SuspensiveProvider/>`. D
 
 </Callout>
 
-### Avoid Server side rendering (CSROnly)
+### Avoid Server side rendering (clientOnly)
 
-`<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.
+If you use clientOnly prop, `<Suspense/>` 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 /clientOnly/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
-  <Suspense.CSROnly fallback={<Loading />}>
+  <Suspense clientOnly fallback={<Loading />}>
     <Children />
-  </Suspense.CSROnly>
+  </Suspense>
 )
 ```
 
 <Callout type='info'>
 
-Migration support SSR gradually (`<Suspense.CSROnly/>` -> `<Suspense/>`)
+Migration support SSR gradually (`<Suspense clientOnly/>` -> `<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 clientOnly/>` to `<Suspense/>` gradually.
 
 </Callout>
 
 ## withSuspense
 
 <Callout type='warning'>
 
-deprecated: Use [wrap.Suspense().on](./wrap), [wrap.Suspense.CSROnly().on](./wrap) instead
+deprecated: Use [wrap.Suspense().on](./wrap) instead
 
 </Callout>
 
 You can use withSuspense to wrap component by `<Suspense/>` easily.
 we don't need to make unncessary code to wrap it if we use withSuspense like below.
 withSuspense's 2nd parameter is props of `<Suspense/>` without children
 
-```tsx /withSuspense.CSROnly/ /withSuspense/
+```jsx /withSuspense/
 import { withSuspense } from '@suspensive/react'
 
 const Example = withSuspense(
@@ -72,13 +72,4 @@ const Example = withSuspense(
   },
   { fallback: <Spinner /> }
 )
-
-const Example = withSuspense.CSROnly(
-  function Component() {
-    // code make suspending
-
-    return <>...</>
-  },
-  { fallback: <Spinner /> }
-)
 ```

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

@@ -26,41 +26,41 @@ Default fallback
 
 </Callout>
 
-### 서버사이드 렌더링을 피하기 (CSROnly)
+### 서버사이드 렌더링을 피하기 (clientOnly)
 
-`<Suspense.CSROnly/>`는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.
+clientOnly prop을 사용하면 `<Suspense/>`는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.
 
-```tsx /Suspense.CSROnly/
+```tsx /clientOnly/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
-  <Suspense.CSROnly fallback={<Loading />}>
+  <Suspense clientOnly fallback={<Loading />}>
     <Children />
-  </Suspense.CSROnly>
+  </Suspense>
 )
 ```
 
 <Callout type='info'>
 
-SSR을 지원하도록 점진적으로 마이그레이션하기 (`<Suspense.CSROnly/>` -> `<Suspense/>`)
+SSR을 지원하도록 점진적으로 마이그레이션하기 (`<Suspense clientOnly/>` -> `<Suspense/>`)
 
-React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense.CSROnly/>`에서 `<Suspense/>`로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
+React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense clientOnly/>`에서 `<Suspense/>`로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
 
 </Callout>
 
 ## withSuspense
 
 <Callout type='warning'>
 
-deprecated: [wrap.Suspense().on](./wrap), [wrap.Suspense.CSROnly().on](./wrap)을 사용하세요
+deprecated: [wrap.Suspense().on](./wrap)을 사용하세요
 
 </Callout>
 
 withSuspense를 사용하면 컴포넌트를 `<Suspense/>`로 쉽게 래핑할 수 있습니다.
 아래와 같이 withSuspense를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
 withSuspense의 두 번째 인자는 children이 없는 `<Suspense/>`의 props입니다.
 
-```tsx /withSuspense.CSROnly/ /withSuspense/
+```jsx /withSuspense/
 import { withSuspense } from '@suspensive/react'
 
 const Example = withSuspense(
@@ -71,13 +71,4 @@ const Example = withSuspense(
   },
   { fallback: <Spinner /> }
 )
-
-const Example = withSuspense.CSROnly(
-  function Component() {
-    // code make suspending
-
-    return <>...</>
-  },
-  { fallback: <Spinner /> }
-)
 ```

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

@@ -2,7 +2,7 @@
 
 This component controls the settings of the components provided by Suspensive (Suspense, Delay, etc.) at once.
 
-```tsx /SuspensiveProvider/ /Suspensive/
+```jsx /SuspensiveProvider/ /Suspensive/
 import { Suspensive, SuspensiveProvider } from '@suspensive/react'
 
 const suspensive = new Suspensive({
@@ -12,6 +12,7 @@ const suspensive = new Suspensive({
     },
     suspense: {
       fallback: <Spinner />,
+      clientOnly: false,
     },
   },
 })

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

@@ -2,7 +2,7 @@
 
 이 컴포넌트는 Suspensive가 제공하는 컴포넌트들(Suspense, Delay 등)의 설정을 한 번에 제어합니다.
 
-```tsx /SuspensiveProvider/ /Suspensive/
+```jsx /SuspensiveProvider/ /Suspensive/
 import { Suspensive, SuspensiveProvider } from '@suspensive/react'
 
 const suspensive = new Suspensive({
@@ -12,6 +12,7 @@ const suspensive = new Suspensive({
     },
     suspense: {
       fallback: <Spinner />,
+      clientOnly: false,
     },
   },
 })

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 [clientOnly prop of `<Suspense/>`](/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/>`](/docs/react/Suspense)의 clientOnly를 이 라이브러리에 추가한 이유입니다.
 
 ### ErrorBoundary를 더욱 단순하게 사용하고 싶습니다.
 

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

@@ -20,7 +20,7 @@ import { HomePage } from '../components/HomePage.tsx'
     },
     {
       title: 'Suspense in SSR easily',
-      desc: 'Suspensive provide CSROnly that make developer can adopt React Suspense gradually in Server-side rendering environment',
+      desc: 'Suspensive provide clientOnly that make developer can adopt React Suspense gradually in Server-side rendering environment',
     },
   ]}
 />

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

@@ -20,7 +20,7 @@ import { HomePage } from '../components/HomePage.tsx'
     },
     {
       title: '서버 사이드 렌더링에서도 쉽게',
-      desc: 'Suspensive는 개발자가 서버 사이드 렌더링 환경에서도 React Suspense를 점진적으로 채택할 수 있도록 CSROnly를 제공합니다',
+      desc: 'Suspensive는 개발자가 서버 사이드 렌더링 환경에서도 React Suspense를 점진적으로 채택할 수 있도록 clientOnly를 제공합니다',
     },
   ]}
 />

docs/v1/theme.config.tsx

@@ -1,8 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router.js'
-import type { DocsThemeConfig } from 'nextra-theme-docs'
-import { useConfig } from 'nextra-theme-docs'
+import { type DocsThemeConfig, useConfig } from 'nextra-theme-docs'
 
 const localeBanner = {
   en: (

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 (clientOnly)
 
-`<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.
+If you use clientOnly prop, `<Suspense/>` 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 /clientOnly/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
-  <Suspense.CSROnly fallback={<Loading />}>
+  <Suspense clientOnly fallback={<Loading />}>
     <Children />
-  </Suspense.CSROnly>
+  </Suspense>
 )
 ```
 
 <Callout type='info'>
 
-Migration support SSR gradually (`<Suspense.CSROnly/>` -> `<Suspense/>`)
+Migration support SSR gradually (`<Suspense clientOnly/>` -> `<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 clientOnly/>` to `<Suspense/>` gradually.
 
 </Callout>

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

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