@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/realtime/sse.md

@@ -1,327 +0,0 @@
-# Server-Sent Events Patterns
-
-Patterns for real-time updates with Server-Sent Events.
-
-## SSE API Route
-
-```typescript
-// app/api/events/route.ts
-export const dynamic = 'force-dynamic'
-
-export async function GET(request: Request) {
-  const encoder = new TextEncoder()
-
-  const stream = new ReadableStream({
-    async start(controller) {
-      // Send initial connection message
-      controller.enqueue(
-        encoder.encode(`data: ${JSON.stringify({ type: 'connected' })}\n\n`)
-      )
-
-      // Simulated event source
-      const interval = setInterval(() => {
-        const event = {
-          type: 'update',
-          data: { timestamp: new Date().toISOString() }
-        }
-
-        controller.enqueue(
-          encoder.encode(`data: ${JSON.stringify(event)}\n\n`)
-        )
-      }, 5000)
-
-      // Clean up on close
-      request.signal.addEventListener('abort', () => {
-        clearInterval(interval)
-        controller.close()
-      })
-    }
-  })
-
-  return new Response(stream, {
-    headers: {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      'Connection': 'keep-alive'
-    }
-  })
-}
-```
-
-## SSE Client Hook
-
-```tsx
-// hooks/useEventSource.ts
-'use client'
-
-import { useEffect, useRef, useState, useCallback } from 'react'
-
-interface UseEventSourceOptions {
-  url: string
-  onMessage?: (event: MessageEvent) => void
-  onError?: (error: Event) => void
-  onOpen?: () => void
-}
-
-export function useEventSource({ url, onMessage, onError, onOpen }: UseEventSourceOptions) {
-  const eventSourceRef = useRef<EventSource | null>(null)
-  const [isConnected, setIsConnected] = useState(false)
-
-  useEffect(() => {
-    const eventSource = new EventSource(url)
-    eventSourceRef.current = eventSource
-
-    eventSource.onopen = () => {
-      setIsConnected(true)
-      onOpen?.()
-    }
-
-    eventSource.onmessage = (event) => {
-      onMessage?.(event)
-    }
-
-    eventSource.onerror = (error) => {
-      setIsConnected(false)
-      onError?.(error)
-    }
-
-    return () => {
-      eventSource.close()
-    }
-  }, [url, onMessage, onError, onOpen])
-
-  const close = useCallback(() => {
-    eventSourceRef.current?.close()
-  }, [])
-
-  return { isConnected, close }
-}
-```
-
-## Notification Stream
-
-```tsx
-// components/NotificationStream.tsx
-'use client'
-
-import { useState } from 'react'
-import { useEventSource } from '@/hooks/useEventSource'
-
-interface Notification {
-  id: string
-  type: string
-  message: string
-  timestamp: string
-}
-
-export function NotificationStream({ userId }: { userId: string }) {
-  const [notifications, setNotifications] = useState<Notification[]>([])
-
-  useEventSource({
-    url: `/api/notifications/stream?userId=${userId}`,
-    onMessage: (event) => {
-      const data = JSON.parse(event.data)
-
-      if (data.type === 'notification') {
-        setNotifications(prev => [data.notification, ...prev].slice(0, 50))
-      }
-    }
-  })
-
-  return (
-    <div className="space-y-2">
-      {notifications.map(notification => (
-        <div key={notification.id} className="rounded border p-3">
-          <p>{notification.message}</p>
-          <span className="text-sm text-gray-500">
-            {new Date(notification.timestamp).toLocaleTimeString()}
-          </span>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// API route
-// app/api/notifications/stream/route.ts
-export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url)
-  const userId = searchParams.get('userId')
-
-  const encoder = new TextEncoder()
-
-  const stream = new ReadableStream({
-    async start(controller) {
-      // Subscribe to notification events
-      const unsubscribe = subscribeToNotifications(userId!, (notification) => {
-        controller.enqueue(
-          encoder.encode(`data: ${JSON.stringify({
-            type: 'notification',
-            notification
-          })}\n\n`)
-        )
-      })
-
-      request.signal.addEventListener('abort', () => {
-        unsubscribe()
-        controller.close()
-      })
-    }
-  })
-
-  return new Response(stream, {
-    headers: {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      'Connection': 'keep-alive'
-    }
-  })
-}
-```
-
-## Progress Streaming
-
-```typescript
-// app/api/process/route.ts
-export async function POST(request: Request) {
-  const { taskId } = await request.json()
-
-  const encoder = new TextEncoder()
-
-  const stream = new ReadableStream({
-    async start(controller) {
-      // Simulate long-running process with progress updates
-      const steps = ['Initializing', 'Processing', 'Validating', 'Completing']
-
-      for (let i = 0; i < steps.length; i++) {
-        // Send progress update
-        controller.enqueue(
-          encoder.encode(`data: ${JSON.stringify({
-            type: 'progress',
-            step: steps[i],
-            progress: ((i + 1) / steps.length) * 100
-          })}\n\n`)
-        )
-
-        // Simulate work
-        await new Promise(resolve => setTimeout(resolve, 1000))
-      }
-
-      // Send completion
-      controller.enqueue(
-        encoder.encode(`data: ${JSON.stringify({
-          type: 'complete',
-          result: { success: true }
-        })}\n\n`)
-      )
-
-      controller.close()
-    }
-  })
-
-  return new Response(stream, {
-    headers: {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache'
-    }
-  })
-}
-
-// Client component
-function ProcessTracker({ taskId }: { taskId: string }) {
-  const [progress, setProgress] = useState(0)
-  const [step, setStep] = useState('')
-  const [isComplete, setIsComplete] = useState(false)
-
-  useEffect(() => {
-    const eventSource = new EventSource(`/api/process?taskId=${taskId}`)
-
-    eventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data)
-
-      if (data.type === 'progress') {
-        setProgress(data.progress)
-        setStep(data.step)
-      } else if (data.type === 'complete') {
-        setIsComplete(true)
-        eventSource.close()
-      }
-    }
-
-    return () => eventSource.close()
-  }, [taskId])
-
-  return (
-    <div>
-      <div className="mb-2">{step}</div>
-      <div className="h-2 rounded-full bg-gray-200">
-        <div
-          className="h-2 rounded-full bg-blue-600 transition-all"
-          style={{ width: `${progress}%` }}
-        />
-      </div>
-      {isComplete && <p className="mt-2 text-green-600">Complete!</p>}
-    </div>
-  )
-}
-```
-
-## Named Events
-
-```typescript
-// app/api/events/route.ts
-export async function GET(request: Request) {
-  const encoder = new TextEncoder()
-
-  const stream = new ReadableStream({
-    async start(controller) {
-      // Send named events
-      const sendEvent = (eventName: string, data: any) => {
-        controller.enqueue(
-          encoder.encode(`event: ${eventName}\ndata: ${JSON.stringify(data)}\n\n`)
-        )
-      }
-
-      sendEvent('user_online', { userId: '123', name: 'John' })
-      sendEvent('message', { text: 'Hello!' })
-      sendEvent('notification', { type: 'alert', message: 'New update' })
-
-      // Keep alive
-      const keepAlive = setInterval(() => {
-        controller.enqueue(encoder.encode(`: keep-alive\n\n`))
-      }, 15000)
-
-      request.signal.addEventListener('abort', () => {
-        clearInterval(keepAlive)
-        controller.close()
-      })
-    }
-  })
-
-  return new Response(stream, {
-    headers: { 'Content-Type': 'text/event-stream' }
-  })
-}
-
-// Client with named events
-const eventSource = new EventSource('/api/events')
-
-eventSource.addEventListener('user_online', (e) => {
-  console.log('User online:', JSON.parse(e.data))
-})
-
-eventSource.addEventListener('message', (e) => {
-  console.log('Message:', JSON.parse(e.data))
-})
-
-eventSource.addEventListener('notification', (e) => {
-  console.log('Notification:', JSON.parse(e.data))
-})
-```
-
-## When to Use
-
-- Live updates
-- Progress tracking
-- Notifications
-- Stock prices

package/skills/patterns/realtime/websockets.md

@@ -1,336 +0,0 @@
-# WebSocket Patterns
-
-Patterns for real-time communication with WebSockets.
-
-## WebSocket Client Hook
-
-```tsx
-// hooks/useWebSocket.ts
-'use client'
-
-import { useEffect, useRef, useState, useCallback } from 'react'
-
-interface UseWebSocketOptions {
-  url: string
-  onMessage?: (data: any) => void
-  onOpen?: () => void
-  onClose?: () => void
-  onError?: (error: Event) => void
-  reconnect?: boolean
-  reconnectInterval?: number
-  maxReconnectAttempts?: number
-}
-
-export function useWebSocket({
-  url,
-  onMessage,
-  onOpen,
-  onClose,
-  onError,
-  reconnect = true,
-  reconnectInterval = 3000,
-  maxReconnectAttempts = 5
-}: UseWebSocketOptions) {
-  const wsRef = useRef<WebSocket | null>(null)
-  const reconnectAttemptsRef = useRef(0)
-  const [isConnected, setIsConnected] = useState(false)
-
-  const connect = useCallback(() => {
-    try {
-      wsRef.current = new WebSocket(url)
-
-      wsRef.current.onopen = () => {
-        setIsConnected(true)
-        reconnectAttemptsRef.current = 0
-        onOpen?.()
-      }
-
-      wsRef.current.onmessage = (event) => {
-        const data = JSON.parse(event.data)
-        onMessage?.(data)
-      }
-
-      wsRef.current.onclose = () => {
-        setIsConnected(false)
-        onClose?.()
-
-        if (reconnect && reconnectAttemptsRef.current < maxReconnectAttempts) {
-          reconnectAttemptsRef.current++
-          setTimeout(connect, reconnectInterval)
-        }
-      }
-
-      wsRef.current.onerror = (error) => {
-        onError?.(error)
-      }
-    } catch (error) {
-      console.error('WebSocket connection error:', error)
-    }
-  }, [url, onMessage, onOpen, onClose, onError, reconnect, reconnectInterval, maxReconnectAttempts])
-
-  useEffect(() => {
-    connect()
-
-    return () => {
-      wsRef.current?.close()
-    }
-  }, [connect])
-
-  const send = useCallback((data: any) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      wsRef.current.send(JSON.stringify(data))
-    }
-  }, [])
-
-  return { isConnected, send }
-}
-```
-
-## Chat Application
-
-```tsx
-// components/Chat.tsx
-'use client'
-
-import { useState, useEffect, useRef } from 'react'
-import { useWebSocket } from '@/hooks/useWebSocket'
-
-interface Message {
-  id: string
-  userId: string
-  content: string
-  timestamp: string
-}
-
-export function Chat({ roomId, userId }: { roomId: string; userId: string }) {
-  const [messages, setMessages] = useState<Message[]>([])
-  const [input, setInput] = useState('')
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-
-  const { isConnected, send } = useWebSocket({
-    url: `${process.env.NEXT_PUBLIC_WS_URL}/chat/${roomId}`,
-    onMessage: (data) => {
-      switch (data.type) {
-        case 'message':
-          setMessages(prev => [...prev, data.message])
-          break
-        case 'history':
-          setMessages(data.messages)
-          break
-      }
-    }
-  })
-
-  // Auto-scroll to bottom
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
-
-  const handleSend = () => {
-    if (!input.trim()) return
-
-    send({
-      type: 'message',
-      content: input,
-      userId
-    })
-
-    setInput('')
-  }
-
-  return (
-    <div className="flex h-[500px] flex-col rounded-lg border">
-      {/* Status */}
-      <div className="border-b p-2 text-sm">
-        {isConnected ? (
-          <span className="text-green-600">Connected</span>
-        ) : (
-          <span className="text-red-600">Disconnected</span>
-        )}
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-2">
-        {messages.map(msg => (
-          <div
-            key={msg.id}
-            className={`rounded-lg p-2 ${
-              msg.userId === userId ? 'ml-auto bg-blue-500 text-white' : 'bg-gray-100'
-            }`}
-          >
-            {msg.content}
-          </div>
-        ))}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <div className="border-t p-2">
-        <div className="flex gap-2">
-          <input
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-            placeholder="Type a message..."
-            className="flex-1 rounded-lg border px-3 py-2"
-          />
-          <button
-            onClick={handleSend}
-            disabled={!isConnected}
-            className="rounded-lg bg-blue-500 px-4 py-2 text-white"
-          >
-            Send
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-```
-
-## Server-Side WebSocket (Node.js)
-
-```typescript
-// server/websocket.ts
-import { WebSocketServer, WebSocket } from 'ws'
-
-interface Client {
-  ws: WebSocket
-  userId: string
-  roomId: string
-}
-
-const clients = new Map<string, Client>()
-
-export function setupWebSocket(server: any) {
-  const wss = new WebSocketServer({ server, path: '/ws' })
-
-  wss.on('connection', (ws, request) => {
-    const url = new URL(request.url!, `http://${request.headers.host}`)
-    const roomId = url.searchParams.get('room')
-    const userId = url.searchParams.get('user')
-
-    if (!roomId || !userId) {
-      ws.close(1008, 'Missing room or user')
-      return
-    }
-
-    const clientId = `${userId}-${Date.now()}`
-    clients.set(clientId, { ws, userId, roomId })
-
-    // Send history
-    ws.send(JSON.stringify({
-      type: 'history',
-      messages: getMessageHistory(roomId)
-    }))
-
-    // Notify room
-    broadcastToRoom(roomId, {
-      type: 'user_joined',
-      userId
-    }, clientId)
-
-    ws.on('message', (data) => {
-      try {
-        const message = JSON.parse(data.toString())
-
-        if (message.type === 'message') {
-          const savedMessage = saveMessage({
-            roomId,
-            userId,
-            content: message.content
-          })
-
-          broadcastToRoom(roomId, {
-            type: 'message',
-            message: savedMessage
-          })
-        }
-      } catch (error) {
-        console.error('Message handling error:', error)
-      }
-    })
-
-    ws.on('close', () => {
-      clients.delete(clientId)
-      broadcastToRoom(roomId, {
-        type: 'user_left',
-        userId
-      })
-    })
-  })
-}
-
-function broadcastToRoom(roomId: string, data: any, excludeClient?: string) {
-  const message = JSON.stringify(data)
-
-  clients.forEach((client, clientId) => {
-    if (client.roomId === roomId && clientId !== excludeClient) {
-      if (client.ws.readyState === WebSocket.OPEN) {
-        client.ws.send(message)
-      }
-    }
-  })
-}
-```
-
-## Presence System
-
-```tsx
-// hooks/usePresence.ts
-'use client'
-
-import { useState, useEffect } from 'react'
-import { useWebSocket } from './useWebSocket'
-
-interface User {
-  id: string
-  name: string
-  status: 'online' | 'away' | 'offline'
-}
-
-export function usePresence(roomId: string, currentUser: User) {
-  const [users, setUsers] = useState<User[]>([])
-
-  const { send } = useWebSocket({
-    url: `${process.env.NEXT_PUBLIC_WS_URL}/presence/${roomId}`,
-    onMessage: (data) => {
-      switch (data.type) {
-        case 'presence_update':
-          setUsers(data.users)
-          break
-        case 'user_status':
-          setUsers(prev =>
-            prev.map(u => u.id === data.userId ? { ...u, status: data.status } : u)
-          )
-          break
-      }
-    },
-    onOpen: () => {
-      send({ type: 'join', user: currentUser })
-    }
-  })
-
-  // Send heartbeat
-  useEffect(() => {
-    const interval = setInterval(() => {
-      send({ type: 'heartbeat' })
-    }, 30000)
-
-    return () => clearInterval(interval)
-  }, [send])
-
-  const updateStatus = (status: User['status']) => {
-    send({ type: 'status', status })
-  }
-
-  return { users, updateStatus }
-}
-```
-
-## When to Use
-
-- Real-time chat
-- Live notifications
-- Collaborative editing
-- Gaming