fix(react): add <ClientOnly/> internally

.changeset/thirty-panthers-flash.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): add `<ClienOnly/>` for clientOnly prop of `<Suspense/>`

packages/react/src/Suspense.tsx

@@ -1,10 +1,13 @@
 import { Suspense as ReactSuspense, type SuspenseProps as ReactSuspenseProps, useContext } from 'react'
+import { ClientOnly } from './components/ClientOnly'
 import { SuspenseDefaultPropsContext, syncDevMode } from './contexts'
-import { useIsClient } from './hooks'
 import type { PropsWithDevMode } from './utility-types'
 
-const SuspenseClientOnly = (props: ReactSuspenseProps) =>
-  useIsClient() ? <ReactSuspense {...props} /> : <>{props.fallback}</>
+const SuspenseClientOnly = (props: ReactSuspenseProps) => (
+  <ClientOnly fallback={props.fallback}>
+    <ReactSuspense {...props} />
+  </ClientOnly>
+)
 
 export interface SuspenseProps extends PropsWithDevMode<ReactSuspenseProps, SuspenseDevModeProp> {
   /**
@@ -21,6 +24,7 @@ export interface SuspenseProps extends PropsWithDevMode<ReactSuspenseProps, Susp
 export const Suspense = ({ clientOnly, devMode, children, fallback }: SuspenseProps) => {
   const defaultProps = useContext(SuspenseDefaultPropsContext)
   const DefinedSuspense = defaultProps.clientOnly ?? clientOnly ? SuspenseClientOnly : ReactSuspense
+
   return (
     <DefinedSuspense fallback={typeof fallback === 'undefined' ? defaultProps.fallback : fallback}>
       {children}

packages/react/src/components/ClientOnly.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { type Mock } from 'vitest'
+import { useIsClient } from '../hooks/useIsClient'
+import { ClientOnly } from './ClientOnly'
+
+vi.mock('../hooks/useIsClient', () => ({
+  useIsClient: vi.fn(),
+}))
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('<ClientOnly/>', () => {
+  it('renders children when isClient is true', () => {
+    ;(useIsClient as Mock).mockReturnValue(true)
+
+    render(
+      <ClientOnly fallback={<div>Loading...</div>}>
+        <div>Client Content</div>
+      </ClientOnly>
+    )
+
+    expect(screen.getByText('Client Content')).toBeInTheDocument()
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
+  })
+
+  it('renders fallback when isClient is false', () => {
+    ;(useIsClient as Mock).mockReturnValue(false)
+
+    render(
+      <ClientOnly fallback={<div>Loading...</div>}>
+        <div>Client Content</div>
+      </ClientOnly>
+    )
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+    expect(screen.queryByText('Client Content')).not.toBeInTheDocument()
+  })
+})

packages/react/src/components/ClientOnly.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+import { useIsClient } from '../hooks/useIsClient'
+
+interface ClientOnlyProps {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+export const ClientOnly = ({ children, fallback }: ClientOnlyProps) => <>{useIsClient() ? children : fallback}</>