api-ape 2.0.0 → 2.2.2

package/example/Vite/README.md

@@ -1,68 +0,0 @@
-# api-ape Vite + Vue Example
-
-A modern Vue 3 + Vite frontend with a Bun backend, demonstrating `api-ape` real-time chat.
-
-Matches the NextJs example structure and features.
-
-## Project Structure
-
-```
-Vite/
-├── src/
-│   ├── App.vue              # Main chat component
-│   ├── components/
-│   │   └── Info.vue         # How api-ape works explanation
-│   ├── main.ts              # Vue app entry
-│   └── style.css            # Styles
-├── ape/
-│   ├── client.ts            # api-ape client wrapper (singleton)
-│   └── onConnect.ts         # Connection lifecycle hooks
-├── api/
-│   └── message.ts           # Message handler with broadcastOthers
-├── server.ts                # Bun backend server
-├── vite.config.ts           # Vite config with proxy
-└── package.json
-```
-
-## Quick Start
-
-```bash
-# Install dependencies
-npm install
-
-# Terminal 1: Start backend
-npm run dev
-
-# Terminal 2: Start Vue frontend
-npm run dev:vue
-```
-
-Open http://localhost:5173 in multiple tabs to test the chat.
-
-## Production Build
-
-```bash
-# Build Vue app
-npm run build
-
-# Run backend in production mode
-NODE_ENV=production npm run dev
-```
-
-## How It Works
-
-- **Development**: Vite runs on `:5173` with a proxy forwarding `/api` requests to the Bun server on `:3000`
-- **Production**: Bun serves the built Vue app from `dist/`
-- **api-ape**: Handles WebSocket connections for real-time messaging
-
-## Features
-
-- 🚀 Vue 3 Composition API with TypeScript
-- ⚡ Vite for instant HMR
-- 🦍 api-ape for WebSocket communication
-- 🥖 Bun for fast backend runtime
-- 👤 Join form before entering chat
-- 📊 Connection state management
-- 👥 Live user count
-- ⏰ Message timestamps
-- 📚 Info panel explaining api-ape concepts

package/example/Vite/ape/client.ts

@@ -1,66 +0,0 @@
-/**
- * api-ape client singleton
- * Initializes once and is ready for use throughout the app
- */
-
-let apeClient = null
-let isConnecting = false
-let connectionPromise = null
-
-/**
- * Get the api-ape client - initializes on first call
- */
-export async function getApeClient() {
-    if (apeClient) {
-        return apeClient
-    }
-
-    if (isConnecting) {
-        return connectionPromise
-    }
-
-    isConnecting = true
-    connectionPromise = initClient()
-
-    try {
-        apeClient = await connectionPromise
-        return apeClient
-    } finally {
-        isConnecting = false
-    }
-}
-
-/**
- * Initialize the api-ape client
- */
-async function initClient() {
-    if (typeof window === 'undefined') {
-        return null
-    }
-
-    const module = await import('api-ape/client/connectSocket')
-    const connectSocket = module.default
-
-    // Configure for current port
-    const port = window.location.port || (window.location.protocol === 'https:' ? 443 : 80)
-    connectSocket.configure({ port: parseInt(port, 10) })
-
-    // Connect and get sender/receiver/connection state
-    const { sender, setOnReciver, onConnectionChange } = connectSocket()
-
-    // Enable auto-reconnect
-    connectSocket.autoReconnect()
-
-    console.log('🦍 api-ape client initialized')
-
-    return { sender, setOnReciver, onConnectionChange, connectSocket }
-}
-
-/**
- * Check if client is connected
- */
-export function isConnected() {
-    return apeClient !== null
-}
-
-export default getApeClient

package/example/Vite/ape/onConnect.ts

@@ -1,52 +0,0 @@
-/**
- * api-ape onConnect handler
- * Creates the handlers object returned from onConnent
- */
-
-import ape from 'api-ape'
-
-// Get message history from the message controller
-function getHistory() {
-    try {
-        const messageController = require('../api/message')
-        return messageController.getHistory ? messageController.getHistory() : []
-    } catch (e) {
-        return []
-    }
-}
-
-export function onConnect(socket: any, req: any, send: any) {
-    const clientID = send.toString()
-    console.log(`🦍 Client connected: ${clientID}`)
-
-    // Send init message with history and user count after a tiny delay
-    // (to ensure client is ready to receive)
-    setTimeout(() => {
-        console.log(`📤 Sending init to ${clientID}, users: ${ape.online()}`)
-        try {
-            send('init', {
-                history: getHistory(),
-                users: ape.online()
-            })
-            console.log(`✅ Init sent to ${clientID}`)
-        } catch (e) {
-            console.error(`❌ Failed to send init:`, e)
-        }
-
-        // Broadcast updated user count to all clients
-        ape.broadcast('users', { count: ape.online() })
-    }, 100)
-
-    return {
-        onDisconnent: () => {
-            console.info(`👋 Disconnected [${clientID}]`)
-            // Broadcast updated user count after disconnect
-            // Use setTimeout to ensure client is removed first
-            setTimeout(() => {
-                ape.broadcast('users', { count: ape.online() })
-            }, 50)
-        }
-    }
-}
-
-export default onConnect

package/example/Vite/api/message.ts

@@ -1,57 +0,0 @@
-/**
- * Message controller for api-ape
- * Called when client sends type="message"
- * 
- * Uses this.broadcastOthers from api-ape to broadcast to all other clients
- */
-
-// In-memory message store
-const messages: Array<{ user: string; text: string; time: string }> = []
-const MAX_MESSAGES = 100
-
-interface MessageData {
-    user: string
-    text: string
-}
-
-interface MessageContext {
-    broadcastOthers: (type: string, data: any) => void
-}
-
-/**
- * Message handler - receives { user, text } from client
- * Broadcasts to all OTHER clients, returns to sender
- */
-function message(this: MessageContext, data: MessageData) {
-    const { user, text } = data
-
-    if (!user || !text) {
-        throw new Error('Missing user or text')
-    }
-
-    const msg = {
-        user,
-        text,
-        time: new Date().toISOString()
-    }
-
-    // Store message
-    messages.push(msg)
-    if (messages.length > MAX_MESSAGES) {
-        messages.shift()
-    }
-
-    // Broadcast to all OTHER clients (exclude sender)
-    // this.broadcastOthers is provided by api-ape!
-    this.broadcastOthers('message', { message: msg })
-
-    // Return to sender (fulfills promise)
-    return { ok: true, message: msg }
-}
-
-// Export history for other uses
-export function getHistory() {
-    return messages.slice(-50)
-}
-
-export default message

package/example/Vite/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chat - api-ape + Vue</title>
-    <link rel="stylesheet" href="/src/style.css">
-</head>
-
-<body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>

package/example/Vite/package.json

@@ -1,19 +0,0 @@
-{
-    "name": "vite-example",
-    "version": "1.0.0",
-    "type": "module",
-    "scripts": {
-        "dev": "bun run server.ts",
-        "dev:vue": "vite",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "api-ape": "file:../../"
-    },
-    "devDependencies": {
-        "@vitejs/plugin-vue": "^5.0.0",
-        "vite": "^5.0.0",
-        "vue": "^3.4.0"
-    }
-}

package/example/Vite/server.ts

@@ -1,62 +0,0 @@
-/**
- * Vite + Vue server using api-ape library (TypeScript)
- * Matches the NextJs example structure
- */
-
-import { createServer, IncomingMessage, ServerResponse } from 'http'
-import path from 'path'
-import fs from 'fs'
-import ape from 'api-ape'
-import { onConnect } from './ape/onConnect'
-
-const port = parseInt(process.env.PORT || '3000', 10)
-const isProd = process.env.NODE_ENV === 'production'
-const distPath = path.join(__dirname, 'dist')
-
-// Create HTTP server
-const server = createServer((req: IncomingMessage, res: ServerResponse) => {
-    const url = new URL(req.url || '/', `http://localhost:${port}`)
-
-    // In production, serve built Vue app
-    if (isProd) {
-        let filePath = path.join(distPath, url.pathname === '/' ? 'index.html' : url.pathname)
-
-        if (fs.existsSync(filePath)) {
-            const ext = path.extname(filePath)
-            const contentTypes: Record<string, string> = {
-                '.html': 'text/html',
-                '.js': 'application/javascript',
-                '.css': 'text/css',
-                '.svg': 'image/svg+xml',
-                '.png': 'image/png',
-                '.jpg': 'image/jpeg',
-            }
-            res.writeHead(200, { 'Content-Type': contentTypes[ext] || 'application/octet-stream' })
-            res.end(fs.readFileSync(filePath))
-            return
-        }
-    }
-
-    res.writeHead(404)
-    res.end('Not Found - Run Vite dev server on port 5173 for development')
-})
-
-// Initialize api-ape with onConnect handler from ape folder
-ape(server, {
-    where: 'api',
-    onConnent: onConnect
-})
-
-server.listen(port, () => {
-    console.log(`
-╔═══════════════════════════════════════════════════════╗
-║       🦍 api-ape Vite + Vue Example                   ║
-╠═══════════════════════════════════════════════════════╣
-║  Backend:   http://localhost:${port}/                  ║
-║  WebSocket: ws://localhost:${port}/api/ape             ║
-${isProd
-            ? `║  Mode:      Production (serving dist/)               ║`
-            : `║  Frontend:  http://localhost:5173/ (run npm run dev:vue)║`}
-╚═══════════════════════════════════════════════════════╝
-`)
-})

package/example/Vite/src/App.vue

@@ -1,170 +0,0 @@
-<script setup lang="ts">
-/**
- * 🦍 api-ape Vue Chat Example
- * 
- * This component demonstrates how to use api-ape in a Vue application:
- * 
- * 1. **Client Initialization**: Connect to api-ape WebSocket server
- * 2. **Proxy Pattern**: Use `client.sender` as a Proxy to call server functions
- * 3. **Event Listeners**: Listen for server broadcasts using `setOnReciver`
- * 4. **Promise-based Calls**: Server functions return Promises automatically
- */
-
-import { ref, onMounted } from 'vue'
-import { getApeClient } from '../ape/client'
-import Info from './components/Info.vue'
-
-interface Message {
-  user: string
-  text: string
-  time: string
-}
-
-// Component state
-const messages = ref<Message[]>([])
-const input = ref('')
-const username = ref('')
-const joined = ref(false)
-const userCount = ref(0)
-const sending = ref(false)
-const connectionState = ref<'disconnected' | 'connecting' | 'connected'>('connecting')
-
-// Store the api-ape sender Proxy
-let api: any = null
-
-onMounted(async () => {
-  const client = await getApeClient()
-  if (!client) return
-
-  // Store the sender Proxy
-  api = client.sender
-  console.log('🦍 api-ape client connected')
-
-  // Subscribe to connection state changes
-  client.onConnectionChange((state: string) => {
-    connectionState.value = state as any
-  })
-
-  // Set up event listeners for server broadcasts
-  client.setOnReciver('init', ({ data }: { data: { history: Message[], users: number } }) => {
-    messages.value = data.history || []
-    userCount.value = data.users || 0
-    console.log('🦍 Initialized with', data.history?.length || 0, 'messages')
-  })
-
-  client.setOnReciver('message', ({ data }: { data: { message: Message } }) => {
-    messages.value.push(data.message)
-  })
-
-  client.setOnReciver('users', ({ data }: { data: { count: number } }) => {
-    userCount.value = data.count
-  })
-})
-
-async function sendMessage() {
-  if (!input.value.trim() || !api || sending.value) return
-
-  sending.value = true
-
-  try {
-    const response = await api.message({ user: username.value, text: input.value })
-    if (response?.message) {
-      messages.value.push(response.message)
-    }
-  } catch (err) {
-    console.error('Send failed:', err)
-  } finally {
-    sending.value = false
-  }
-
-  input.value = ''
-}
-
-function handleJoin() {
-  if (username.value.trim()) {
-    joined.value = true
-  }
-}
-
-function formatTime(time: string) {
-  return new Date(time).toLocaleTimeString()
-}
-
-function getConnectionStatus() {
-  if (connectionState.value === 'connected') {
-    if (userCount.value === 1) return '✅ Connected • Only You are online'
-    if (userCount.value > 1) return `✅ Connected • You + ${userCount.value - 1} are online`
-    return '✅ Connected'
-  }
-  if (connectionState.value === 'connecting') return '⏳ Connecting...'
-  return '❌ Disconnected'
-}
-</script>
-
-<template>
-  <div class="container">
-    <main class="main">
-      <h1 class="title">
-        🦍 <span class="gradient">api-ape</span> Chat
-      </h1>
-      <p class="subtitle">{{ getConnectionStatus() }}</p>
-
-      <!-- Join Form -->
-      <form v-if="!joined" @submit.prevent="handleJoin" class="join-form">
-        <input
-          type="text"
-          placeholder="Enter your name..."
-          v-model="username"
-          class="input"
-          autofocus
-        />
-        <button 
-          type="submit" 
-          class="button" 
-          :disabled="connectionState !== 'connected'"
-        >
-          {{ connectionState === 'connected' ? 'Join Chat →' : 'Connecting...' }}
-        </button>
-      </form>
-
-      <!-- Chat Interface -->
-      <div v-else class="chat-container">
-        <div class="header">
-          <span>💬 {{ username }}</span>
-          <span class="user-count">🟢 {{ userCount }} online</span>
-        </div>
-
-        <div class="messages">
-          <p v-if="messages.length === 0" class="empty-state">
-            No messages yet. Say hi! 👋
-          </p>
-          <div
-            v-for="(msg, i) in messages"
-            :key="i"
-            :class="['message', msg.user === username ? 'my-message' : '']"
-          >
-            <strong class="username">{{ msg.user }}</strong>
-            <span>{{ msg.text }}</span>
-            <span class="time">{{ formatTime(msg.time) }}</span>
-          </div>
-        </div>
-
-        <form @submit.prevent="sendMessage" class="input-form">
-          <input
-            type="text"
-            placeholder="Type a message..."
-            v-model="input"
-            class="message-input"
-            :disabled="sending"
-            autofocus
-          />
-          <button type="submit" class="send-button" :disabled="sending">
-            {{ sending ? '...' : 'Send' }}
-          </button>
-        </form>
-      </div>
-
-      <Info />
-    </main>
-  </div>
-</template>