fix: lazy load code splitting

src/preview/PreviewMode.tsx

@@ -1,8 +1,11 @@
-import {memo, useEffect} from 'react'
+import {memo, Suspense, useEffect} from 'react'
 
-import {type PreviewSubscriptionProps, PreviewSubscription} from './PreviewSubscription'
-import {PreviewSubscriptionWithToken} from './PreviewSubscriptionWithToken'
-import {useAuthenticated} from './useAuthenticated'
+import {
+  type PreviewSubscriptionProps,
+  PreviewSubscription,
+  PreviewSubscriptionWithToken,
+  useAuthenticated,
+} from '.'
 
 export interface PreviewModeProps extends PreviewSubscriptionProps {
   authMode: 'dual' | 'token' | 'cookie'
@@ -28,7 +31,9 @@ const PreviewModeComponent = ({authMode, onAuth, ...props}: PreviewModeProps) =>
       return null
     case 'token':
       return !props.EventSource && props.token ? (
-        <PreviewSubscriptionWithToken {...props} token={props.token!} />
+        <Suspense fallback={null}>
+          <PreviewSubscriptionWithToken {...props} token={props.token!} />
+        </Suspense>
       ) : (
         <PreviewSubscription {...props} />
       )

src/preview/PreviewSubscription.tsx

@@ -1,7 +1,7 @@
 import {memo, useEffect} from 'react'
 import {unstable_batchedUpdates} from 'react-dom'
 
-import {type SyncGroqStoreHookProps, useSyncGroqStore} from './useSyncGroqStore'
+import {type SyncGroqStoreHookProps, useSyncGroqStore} from '.'
 
 export interface PreviewSubscriptionProps extends SyncGroqStoreHookProps {
   onChange: (data: any) => void

src/preview/PreviewSubscriptionWithToken.tsx

@@ -1,7 +1,7 @@
 import EventSource from 'eventsource'
 import {memo} from 'react'
 
-import {type PreviewSubscriptionProps, PreviewSubscription} from './PreviewSubscription'
+import {type PreviewSubscriptionProps, PreviewSubscription} from '.'
 
 // EventSource is a very chonky boi, that's why this is in a separate component
 // eslint-disable-next-line no-warning-comments
@@ -24,3 +24,6 @@ const PreviewSubscriptionWithTokenComponent = ({
 }
 
 export const PreviewSubscriptionWithToken = memo(PreviewSubscriptionWithTokenComponent)
+
+// Re-export as default to support React.lazy use cases
+export default PreviewSubscriptionWithToken

src/preview/index.ts

@@ -1,9 +1,13 @@
+import {lazy} from 'react'
+
 import {PreviewMode} from './PreviewMode'
 
 export default PreviewMode
 export * from './PreviewMode'
 export * from './PreviewSubscription'
-export * from './PreviewSubscriptionWithToken'
+export type {PreviewSubscriptionWithTokenProps} from './PreviewSubscriptionWithToken'
 export * from './useAuthenticated'
 export * from './useGroqStore'
 export * from './useSyncGroqStore'
+
+export const PreviewSubscriptionWithToken = lazy(() => import('./PreviewSubscriptionWithToken'))

src/preview/useSyncGroqStore.ts

@@ -1,6 +1,6 @@
 import {useSyncExternalStore} from 'use-sync-external-store/shim'
 
-import {type GroqStoreHookProps, useGroqStore} from './useGroqStore'
+import {type GroqStoreHookProps, useGroqStore} from '.'
 
 export type SyncGroqStoreHookProps = GroqStoreHookProps