@blinkdotnew/sdk 0.14.8 → 0.14.9

package/README.md

@@ -1275,6 +1275,8 @@ All `{{secret_name}}` placeholders are replaced with encrypted values from your
 The most common mistake is using async functions in useEffect that lose the cleanup function:
 
 ```typescript
+import type { RealtimeChannel } from '@blinkdotnew/sdk'
+
 // ❌ WRONG - Async function loses cleanup (causes "Subscription cancelled" errors)
 useEffect(() => {
   const initApp = async () => {
@@ -1298,7 +1300,9 @@ useEffect(() => {
 ```typescript
 // ✅ CORRECT - Proper async cleanup handling
 useEffect(() => {
-  let channel = null
+  if (!user?.id) return
+  
+  let channel: RealtimeChannel | null = null
   
   const initApp = async () => {
     channel = blink.realtime.channel('room')
@@ -1311,32 +1315,78 @@ useEffect(() => {
   return () => {
     channel?.unsubscribe()
   }
-}, [user.id]) // ✅ Only user.id dependency
+}, [user?.id]) // ✅ Optional chaining in dependency too
 ```
 
 ```typescript
 // ✅ ALTERNATIVE - Using state for cleanup
-const [channel, setChannel] = useState(null)
+const [channel, setChannel] = useState<RealtimeChannel | null>(null)
 
 useEffect(() => {
+  if (!user?.id) return
+  
   const initApp = async () => {
     const ch = blink.realtime.channel('room')
     await ch.subscribe({ userId: user.id })
     setChannel(ch)
   }
   initApp().catch(console.error)
-}, [user.id])
+}, [user?.id])
 
 useEffect(() => {
   return () => channel?.unsubscribe()
 }, [channel])
 ```
 
+```typescript
+// ✅ COMPLETE EXAMPLE - With proper loading states
+function MyRealtimeComponent() {
+  const [user, setUser] = useState(null)
+  const [messages, setMessages] = useState([])
+  
+  // Auth state management
+  useEffect(() => {
+    const unsubscribe = blink.auth.onAuthStateChanged((state) => {
+      setUser(state.user)
+    })
+    return unsubscribe
+  }, [])
+  
+  // Guard clause - prevent rendering if user not loaded
+  if (!user) return <div>Loading...</div>
+  
+  // Now safe to use user.id everywhere
+  useEffect(() => {
+    if (!user?.id) return
+    
+    let channel: RealtimeChannel | null = null
+    
+    const initApp = async () => {
+      channel = blink.realtime.channel('room')
+      await channel.subscribe({ userId: user.id })
+      
+      channel.onMessage((message) => {
+        setMessages(prev => [...prev, message])
+      })
+    }
+    
+    initApp().catch(console.error)
+    
+    return () => {
+      channel?.unsubscribe()
+    }
+  }, [user?.id])
+  
+  return <div>Welcome {user.email}! Messages: {messages.length}</div>
+}
+```
+
 **Rules:**
 1. **Never return cleanup from async functions** - useEffect cleanup must be synchronous
-2. **useEffect dependency**: `[user.id]` not `[user]` to avoid reconnections  
+2. **useEffect dependency**: `[user?.id]` not `[user]` to avoid reconnections  
 3. **Store channel reference** outside async function for cleanup access
-4. **Zero connection management**: SDK handles all connection states automatically
+4. **Add component-level guards** - Check `if (!user) return <Loading />` before rendering
+5. **Zero connection management**: SDK handles all connection states automatically
 
 ### React
 
@@ -1462,15 +1512,23 @@ function RealtimeChat() {
   const [onlineUsers, setOnlineUsers] = useState([])
   const [user] = useState({ id: 'user123', name: 'John Doe' }) // From auth
   
+  // Guard clause - prevent rendering if user not loaded
+  if (!user) return <div>Loading...</div>
+  
+  const userRef = useRef(user)
+  useEffect(() => { userRef.current = user }, [user])
+  
   useEffect(() => {
-    let channel = null
+    if (!user?.id) return
+    
+    let channel: RealtimeChannel | null = null
     
     // Subscribe and listen for messages
     const setupRealtime = async () => {
       channel = blink.realtime.channel('chat-room')
       await channel.subscribe({
-        userId: user.id,
-        metadata: { displayName: user.name, avatar: '/avatar.png' }
+        userId: userRef.current.id,
+        metadata: { displayName: userRef.current.name, avatar: '/avatar.png' }
       })
       
       // Listen for new messages
@@ -1513,7 +1571,7 @@ function RealtimeChat() {
     return () => {
       channel?.unsubscribe()
     }
-  }, [user.id, user.name])
+  }, [user?.id]) // ✅ Optional chaining in dependency
   
   const sendMessage = async () => {
     if (!newMessage.trim()) return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blinkdotnew/sdk",
-  "version": "0.14.8",
+  "version": "0.14.9",
   "description": "Blink TypeScript SDK for client-side applications - Zero-boilerplate CRUD + auth + AI + analytics + notifications for modern SaaS/AI apps",
   "keywords": [
     "blink",