chore: example

Author: hi-ogawa

packages/plugin-rsc/examples/basic/src/routes/browser-only/browser-dep.tsx

@@ -0,0 +1,3 @@
+export default function BrowserDep() {
+  return <>{String(!!window)}</>
+}

packages/plugin-rsc/examples/basic/src/routes/browser-only/client.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+
+const BrowserDep = (
+  import.meta.env.SSR ? undefined : React.lazy(() => import('./browser-dep'))
+)!
+
+export function TestBrowserOnly() {
+  return (
+    <div>
+      test-browser-only:{' '}
+      <BrowserOnly fallback={<>loading...</>}>
+        <BrowserDep />
+      </BrowserOnly>
+    </div>
+  )
+}
+
+function BrowserOnly(props: React.SuspenseProps) {
+  const hydrated = useHydrated()
+  if (!hydrated) {
+    return props.fallback
+  }
+  return <React.Suspense {...props} />
+}
+
+const noopStore = () => () => {}
+
+const useHydrated = () =>
+  React.useSyncExternalStore(
+    noopStore,
+    () => true,
+    () => false,
+  )
+
+/*
+If we were to implement this whole logic via `browserOnly` helper with transform:
+
+[input]
+
+  const SomeDep = browserOnly(() => import('./some-dep'))
+
+[output]
+
+  const __TmpLazy = import.meta.env.SSR ? undefined : React.lazy(() => import('./some-dep'}));
+
+  const SomeDep = ({ browserOnlyFallback, ...props }) => {
+    const hydrated = useHydrated()
+    if (!hydrated) {
+      return browserOnlyFallback
+    }
+    return (
+      <React.Suspense fallback={browserOnlyFallback}>
+        <__TmpLazy {...props} />
+      </React.Suspense>
+    )
+  }
+*/
+
+// declare function browserOnly<T>(fn: () => Promise<{ default: React.ComponentType<T> }>): React.ComponentType<T & { browserOnlyFallback?: React.ReactNode }>

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -28,6 +28,7 @@ import { TestTailwindServer } from './tailwind/server'
 import { TestTemporaryReference } from './temporary-reference/client'
 import { TestUseCache } from './use-cache/server'
 import { TestHydrationMismatch } from './hydration-mismatch/server'
+import { TestBrowserOnly } from './browser-only/client'
 
 export function Root(props: { url: URL }) {
   return (
@@ -67,6 +68,7 @@ export function Root(props: { url: URL }) {
         <TestServerInClient />
         <TestActionStateServer />
         <TestModuleInvalidationServer />
+        <TestBrowserOnly />
         <TestUseCache />
       </body>
     </html>