api-ape 2.0.0 → 2.2.2

package/example/NextJs/styles/Chat.module.css

@@ -1,448 +0,0 @@
-.container {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-  color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
-}
-
-.main {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 2rem;
-  width: 100%;
-}
-
-.title {
-  font-size: 2.5rem;
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
-.gradient {
-  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.subtitle {
-  text-align: center;
-  color: #0f0;
-  margin-bottom: 2rem;
-  font-weight: bold;
-}
-
-.joinForm {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-}
-
-.input {
-  padding: 1rem 1.5rem;
-  font-size: 1rem;
-  border: none;
-  border-radius: 50px;
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-  outline: none;
-  width: 250px;
-}
-
-.input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.button {
-  padding: 1rem 2rem;
-  font-size: 1rem;
-  border: none;
-  border-radius: 50px;
-  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
-  color: #fff;
-  cursor: pointer;
-  font-weight: bold;
-}
-
-.button:hover {
-  opacity: 0.9;
-}
-
-.chatContainer {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  background: rgba(255, 255, 255, 0.1);
-  font-weight: bold;
-}
-
-.userCount {
-  font-size: 0.85rem;
-  color: #0f0;
-}
-
-.messages {
-  height: 300px;
-  overflow-y: auto;
-  padding: 1rem;
-}
-
-.emptyState {
-  text-align: center;
-  color: #666;
-  margin-top: 120px;
-}
-
-.message {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.75rem 1rem;
-  margin-bottom: 0.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 12px;
-  border-left: 3px solid #3a7bd5;
-}
-
-.myMessage {
-  background: rgba(0, 210, 255, 0.15);
-  border-left: 3px solid #00d2ff;
-}
-
-.username {
-  color: #00d2ff;
-  font-size: 0.85rem;
-}
-
-.time {
-  color: #666;
-  font-size: 0.7rem;
-}
-
-.inputForm {
-  display: flex;
-  gap: 0.5rem;
-  padding: 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.messageInput {
-  flex: 1;
-  padding: 0.75rem 1rem;
-  font-size: 1rem;
-  border: none;
-  border-radius: 50px;
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-  outline: none;
-}
-
-.messageInput::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.sendButton {
-  padding: 0.75rem 1.5rem;
-  font-size: 1rem;
-  border: none;
-  border-radius: 50px;
-  background: #3a7bd5;
-  color: #fff;
-  cursor: pointer;
-  font-weight: bold;
-}
-
-.sendButton:hover {
-  opacity: 0.9;
-}
-
-.codeSection {
-  margin-top: 2rem;
-}
-
-.codeTitle {
-  margin-bottom: 0.5rem;
-  color: #0f0;
-}
-
-.code {
-  background: rgba(0, 0, 0, 0.4);
-  padding: 1.5rem;
-  border-radius: 12px;
-  font-size: 0.75rem;
-  color: #0f0;
-  overflow: auto;
-}
-
-.clientInfo {
-  text-align: center;
-  margin-top: 1rem;
-  font-size: 0.85rem;
-  color: #888;
-}
-
-.clientInfo code {
-  background: rgba(0, 0, 0, 0.3);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-}
-
-.gridContainer {
-  max-width: 1200px;
-  margin: 1.5rem auto 0;
-  padding: 0 1rem;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.gridLayout {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 2rem;
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  .gridLayout {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (max-width: 767px) {
-  .gridContainer {
-    padding: 0 0.5rem;
-  }
-  
-  .main {
-    padding: 1rem;
-  }
-}
-
-/* Info component styles */
-.sectionHeading {
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
-  font-weight: bold;
-}
-
-.sectionHeadingLarge {
-  margin-bottom: 1rem;
-  font-size: 0.9rem;
-  font-weight: bold;
-}
-
-.dataFlowGrid {
-  display: grid;
-  grid-template-columns: 200px 1fr 200px;
-  grid-template-rows: auto auto auto auto auto;
-  gap: 1rem;
-  align-items: stretch;
-}
-
-.columnHeaderClient {
-  font-size: 0.8rem;
-  font-weight: bold;
-  text-align: center;
-  grid-row: 1;
-  grid-column: 1;
-  color: #00d2ff;
-}
-
-.columnHeaderServer {
-  font-size: 0.8rem;
-  font-weight: bold;
-  text-align: center;
-  grid-row: 1;
-  grid-column: 3;
-  color: #00e676;
-}
-
-.gridCell {
-  grid-row: 1;
-  grid-column: 2;
-}
-
-.clientBoxSpan3 {
-  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: bold;
-  box-shadow: 0 4px 12px rgba(58, 123, 213, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  grid-column: 1;
-  grid-row: 2 / 5;
-}
-
-.clientBoxSingle {
-  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: bold;
-  box-shadow: 0 4px 12px rgba(58, 123, 213, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  grid-column: 1;
-  grid-row: 5;
-}
-
-.serverBoxSpan2 {
-  background: linear-gradient(135deg, #00c851, #00e676);
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: bold;
-  box-shadow: 0 4px 12px rgba(0, 200, 81, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  grid-column: 3;
-  grid-row: 2 / 4;
-}
-
-.serverBoxSpan3 {
-  background: linear-gradient(135deg, #00c851, #00e676);
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: bold;
-  box-shadow: 0 4px 12px rgba(0, 200, 81, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  grid-column: 3;
-  grid-row: 4 / 6;
-}
-
-.arrowContainerRow2 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  grid-column: 2;
-  grid-row: 2;
-}
-
-.arrowContainerRow3 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  grid-column: 2;
-  grid-row: 3;
-}
-
-.arrowContainerRow4 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  grid-column: 2;
-  grid-row: 4;
-}
-
-.arrowContainerRow5 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  grid-column: 2;
-  grid-row: 5;
-}
-
-.arrowLineSend {
-  flex: 1;
-  height: 2px;
-  background: linear-gradient(90deg, #00d2ff, #00e676);
-}
-
-.arrowLineReturn {
-  flex: 1;
-  height: 2px;
-  background: linear-gradient(90deg, #00e676, transparent);
-}
-
-.arrowLineBroadcast {
-  flex: 1;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #00e676);
-}
-
-.arrowLineBroadcastReturn {
-  flex: 1;
-  height: 2px;
-  background: linear-gradient(90deg, #00d2ff, transparent);
-}
-
-.arrowLabelBlue {
-  font-size: 0.7rem;
-  white-space: nowrap;
-  padding: 0 0.5rem;
-  color: #00d2ff;
-}
-
-.arrowLabelGreen {
-  font-size: 0.7rem;
-  white-space: nowrap;
-  padding: 0 0.5rem;
-  color: #00e676;
-}
-
-.arrowHeadRight {
-  width: 0;
-  height: 0;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 8px solid #00e676;
-}
-
-.arrowHeadLeft {
-  width: 0;
-  height: 0;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-right: 8px solid #00e676;
-}
-
-.arrowHeadLeftBlue {
-  width: 0;
-  height: 0;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-right: 8px solid #00d2ff;
-}
-
-.emptyGridCell {
-  grid-row: 2;
-  grid-column: 3;
-}
-
-.emptyGridCellRow3 {
-  grid-row: 3;
-  grid-column: 1;
-}
-
-.emptyGridCellRow4 {
-  grid-row: 4;
-  grid-column: 1;
-}
-
-.emptyGridCellRow5 {
-  grid-row: 5;
-  grid-column: 3;
-}

package/example/NextJs/styles/Home.module.css

@@ -1,129 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
-    filter: invert(1);
-  }
-}

package/example/NextJs/styles/globals.css

@@ -1,26 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}

package/example/NextJs/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

package/example/README.md

@@ -1,117 +0,0 @@
-# 🦍 api-ape Examples
-
-Complete working examples demonstrating api-ape usage.
-
-## Examples
-
-| Example | Description | Complexity |
-|---------|-------------|------------|
-| [ExpressJs/](./ExpressJs/) | Basic real-time chat | Minimal setup |
-| [NextJs/](./NextJs/) | Full-featured chat app | Production-ready |
-| [Bun/](./Bun/) | Bun + Vue (CDN) | Minimal setup |
-| [Vite/](./Vite/) | Vite + Vue + TypeScript | Modern tooling |
-
----
-
-## ExpressJs — Basic Example
-
-A minimal real-time chat demonstrating core api-ape concepts.
-
-**Features:**
-- Simple Express.js server with api-ape
-- Broadcast messages to other clients
-- Message history
-
-**Quick Start:**
-```bash
-cd ExpressJs
-npm install
-npm start
-```
-
-**Key Files:**
-- `backend.js` — Server setup (22 lines)
-- `api/message.js` — Message handler with `this.broadcastOthers()`
-- `index.html` — Browser client using `window.ape`
-
----
-
-## NextJs — Complete Example
-
-A production-ready chat application with Next.js integration.
-
-**Features:**
-- Custom Next.js server with api-ape
-- React hooks integration
-- User presence tracking
-- Docker support
-- Connection lifecycle hooks
-
-**Quick Start:**
-```bash
-cd NextJs
-npm install
-npm run dev
-```
-
-**Or with Docker:**
-```bash
-cd NextJs
-docker-compose up --build
-```
-
-**Key Files:**
-- `server.js` — Custom Next.js server with api-ape
-- `api/message.js` — Message controller with validation
-- `ape/client.js` — React client wrapper
-- `ape/onConnect.js` — Connection lifecycle hooks
-- `pages/index.tsx` — Chat UI with React hooks
-
----
-
-## Bun — Vue CDN Example
-
-A lightweight Bun server with Vue 3 via CDN — no build step required.
-
-**Features:**
-- Bun runtime (TypeScript native)
-- Vue 3 Composition API
-- Single HTML file frontend
-
-**Quick Start:**
-```bash
-cd Bun
-bun install
-bun run server.ts
-```
-
-**Key Files:**
-- `server.ts` — Bun HTTP server with api-ape
-- `index.html` — Vue 3 app via CDN
-- `api/message.js` — Message handler
-
----
-
-## Vite — Vue + TypeScript Example
-
-A modern Vite + Vue 3 frontend with Bun backend.
-
-**Features:**
-- Vue 3 with TypeScript
-- Vite dev server with HMR
-- Component-based architecture
-- Production build support
-
-**Quick Start:**
-```bash
-cd Vite
-npm install
-npm run dev        # Backend on :3000
-npm run dev:vue    # Frontend on :5173
-```
-
-**Key Files:**
-- `server.ts` — Bun backend server
-- `src/App.vue` — Main Vue component
-- `vite.config.ts` — Vite config with API proxy
-