api-ape 2.0.0 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/README.md +203 -124
  2. package/client/README.md +37 -30
  3. package/client/browser.js +10 -8
  4. package/client/connectSocket.js +662 -381
  5. package/client/index.js +171 -0
  6. package/client/transports/streaming.js +240 -0
  7. package/dist/ape.js +2 -699
  8. package/dist/ape.js.map +7 -0
  9. package/dist/api-ape.min.js +2 -0
  10. package/dist/api-ape.min.js.map +7 -0
  11. package/index.d.ts +71 -18
  12. package/package.json +50 -15
  13. package/server/README.md +99 -13
  14. package/server/lib/broadcast.js +25 -8
  15. package/server/lib/bun.js +122 -0
  16. package/server/lib/longPolling.js +226 -0
  17. package/server/lib/main.js +381 -38
  18. package/server/lib/wiring.js +19 -12
  19. package/server/lib/ws/adapters/bun.js +225 -0
  20. package/server/lib/ws/adapters/deno.js +186 -0
  21. package/server/lib/ws/frames.js +217 -0
  22. package/server/lib/ws/index.js +15 -0
  23. package/server/lib/ws/server.js +109 -0
  24. package/server/lib/ws/socket.js +222 -0
  25. package/server/lib/wsProvider.js +135 -0
  26. package/server/security/origin.js +16 -4
  27. package/server/socket/receive.js +14 -1
  28. package/server/socket/send.js +6 -6
  29. package/server/utils/deepRequire.js +25 -10
  30. package/server/utils/parseUserAgent.js +286 -0
  31. package/example/Bun/README.md +0 -74
  32. package/example/Bun/api/message.ts +0 -11
  33. package/example/Bun/index.html +0 -76
  34. package/example/Bun/package.json +0 -9
  35. package/example/Bun/server.ts +0 -59
  36. package/example/Bun/styles.css +0 -128
  37. package/example/ExpressJs/README.md +0 -95
  38. package/example/ExpressJs/api/message.js +0 -11
  39. package/example/ExpressJs/backend.js +0 -39
  40. package/example/ExpressJs/index.html +0 -88
  41. package/example/ExpressJs/package-lock.json +0 -834
  42. package/example/ExpressJs/package.json +0 -10
  43. package/example/ExpressJs/styles.css +0 -128
  44. package/example/NextJs/.dockerignore +0 -29
  45. package/example/NextJs/Dockerfile +0 -52
  46. package/example/NextJs/Dockerfile.dev +0 -27
  47. package/example/NextJs/README.md +0 -113
  48. package/example/NextJs/ape/client.js +0 -66
  49. package/example/NextJs/ape/embed.js +0 -12
  50. package/example/NextJs/ape/index.js +0 -23
  51. package/example/NextJs/ape/logic/chat.js +0 -62
  52. package/example/NextJs/ape/onConnect.js +0 -69
  53. package/example/NextJs/ape/onDisconnect.js +0 -13
  54. package/example/NextJs/ape/onError.js +0 -9
  55. package/example/NextJs/ape/onReceive.js +0 -15
  56. package/example/NextJs/ape/onSend.js +0 -15
  57. package/example/NextJs/api/message.js +0 -44
  58. package/example/NextJs/docker-compose.yml +0 -22
  59. package/example/NextJs/next-env.d.ts +0 -5
  60. package/example/NextJs/next.config.js +0 -8
  61. package/example/NextJs/package-lock.json +0 -6400
  62. package/example/NextJs/package.json +0 -24
  63. package/example/NextJs/pages/Info.tsx +0 -153
  64. package/example/NextJs/pages/_app.tsx +0 -6
  65. package/example/NextJs/pages/index.tsx +0 -275
  66. package/example/NextJs/public/favicon.ico +0 -0
  67. package/example/NextJs/public/vercel.svg +0 -4
  68. package/example/NextJs/server.js +0 -36
  69. package/example/NextJs/styles/Chat.module.css +0 -448
  70. package/example/NextJs/styles/Home.module.css +0 -129
  71. package/example/NextJs/styles/globals.css +0 -26
  72. package/example/NextJs/tsconfig.json +0 -20
  73. package/example/README.md +0 -117
  74. package/example/Vite/README.md +0 -68
  75. package/example/Vite/ape/client.ts +0 -66
  76. package/example/Vite/ape/onConnect.ts +0 -52
  77. package/example/Vite/api/message.ts +0 -57
  78. package/example/Vite/index.html +0 -16
  79. package/example/Vite/package.json +0 -19
  80. package/example/Vite/server.ts +0 -62
  81. package/example/Vite/src/App.vue +0 -170
  82. package/example/Vite/src/components/Info.vue +0 -352
  83. package/example/Vite/src/main.ts +0 -5
  84. package/example/Vite/src/style.css +0 -200
  85. package/example/Vite/src/vite-env.d.ts +0 -7
  86. package/example/Vite/vite.config.ts +0 -20
  87. package/todo.md +0 -85
  88. package/utils/jss.test.js +0 -261
  89. package/utils/messageHash.test.js +0 -56
package/example/ExpressJs/README.md DELETED
@@ -1,95 +0,0 @@
1
- # 🦍 ExpressJs — Basic Example
2
-
3
- A minimal real-time chat app demonstrating api-ape core concepts.
4
-
5
- ## Quick Start
6
-
7
- ```bash
8
- npm install
9
- npm start
10
- ```
11
-
12
- Open http://localhost:3000 in multiple browser windows.
13
-
14
- ## Project Structure
15
-
16
- ```
17
- ExpressJs/
18
- ├── backend.js # Express server with api-ape + onConnect hook
19
- ├── api/
20
- │ └── message.js # Broadcast to other clients
21
- ├── index.html # Chat UI
22
- └── styles.css # Styling
23
- ```
24
-
25
- ## How It Works
26
-
27
- ### Server (backend.js)
28
-
29
- ```bash
30
- npm i api-ape
31
- ```
32
-
33
- ```js
34
- const express = require('express')
35
- const ape = require('api-ape')
36
-
37
- const app = express()
38
- const server = app.listen(3000)
39
-
40
- ape(server, {
41
- where: 'api',
42
- onConnent: (socket, req, send) => {
43
- // Push history + user count on connect
44
- const { _messages } = require('./api/message')
45
- send('init', { history: _messages, users: ape.online() })
46
- ape.broadcast('users', { count: ape.online() })
47
-
48
- return {
49
- onDisconnent: () => ape.broadcast('users', { count: ape.online() })
50
- }
51
- }
52
- })
53
- ```
54
-
55
- ### Controller (api/message.js)
56
-
57
- ```js
58
- module.exports = function (data) {
59
- this.broadcastOthers('message', data) // Send to other clients
60
- return data // Reply to sender
61
- }
62
- ```
63
-
64
- ### Client (index.html)
65
-
66
- ```html
67
- <script src="/api/ape.js"></script>
68
- <script>
69
- // Receive init on connect (pushed by server)
70
- ape.on('init', ({ data }) => {
71
- console.log('History:', data.history)
72
- console.log('Users online:', data.users)
73
- })
74
-
75
- // Listen for user count updates
76
- ape.on('users', ({ data }) => console.log('Online:', data.count))
77
-
78
- // Listen for messages
79
- ape.on('message', ({ data }) => console.log(data))
80
-
81
- // Send message
82
- ape.message({ text: 'Hello!' })
83
- </script>
84
- ```
85
-
86
- ## Key Concepts Demonstrated
87
-
88
- | Concept | Example |
89
- |---------|---------|
90
- | Auto-wiring | `ape(app, { where: 'api' })` loads `api/*.js` |
91
- | onConnect hook | `onConnent: (socket, req, send) => { ... }` |
92
- | Push on connect | `send('init', { history, users })` |
93
- | Broadcast all | `broadcast('users', { count })` |
94
- | Broadcast others | `this.broadcastOthers('message', data)` |
95
- | Listen | `ape.on('init', handler)` |
package/example/ExpressJs/api/message.js DELETED
@@ -1,11 +0,0 @@
1
- const messages = []
2
-
3
- // Send message → broadcast to others
4
- module.exports = function (data) {
5
- messages.push(data)
6
- this.broadcastOthers('message', data)
7
- return data
8
- }
9
-
10
- // Export messages for history
11
- module.exports._messages = messages
package/example/ExpressJs/backend.js DELETED
@@ -1,39 +0,0 @@
1
- const express = require('express')
2
- const path = require('path')
3
- const ape = require('api-ape')
4
-
5
- const app = express()
6
-
7
- // Serve static files
8
- app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')))
9
- app.get('/styles.css', (req, res) => res.sendFile(path.join(__dirname, 'styles.css')))
10
-
11
- // Find available port
12
- const net = require('net')
13
- const findPort = (port, cb) => {
14
- const server = net.createServer()
15
- server.once('error', () => findPort(port + 1, cb))
16
- server.once('listening', () => server.close(() => cb(port)))
17
- server.listen(port)
18
- }
19
-
20
- findPort(3000, port => {
21
- // Create HTTP server from Express app
22
- const server = app.listen(port, () => console.log(`http://localhost:${port}`))
23
-
24
- // Initialize api-ape with the HTTP server
25
- ape(server, {
26
- where: 'api',
27
- onConnent: (socket, req, send) => {
28
- const { _messages } = require('./api/message')
29
- setTimeout(() => {
30
- send('init', { history: _messages, users: ape.online() })
31
- ape.broadcast('users', { count: ape.online() })
32
- }, 100)
33
-
34
- return {
35
- onDisconnent: () => ape.broadcast('users', { count: ape.online() })
36
- }
37
- }
38
- })
39
- })
package/example/ExpressJs/index.html DELETED
@@ -1,88 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <title>Chat - api-ape</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <link rel="stylesheet" href="/styles.css">
8
- </head>
9
-
10
- <body>
11
- <chat-app></chat-app>
12
- <script src="https://unpkg.com/hyperhtml"></script>
13
- <script src="https://unpkg.com/hyper-element"></script>
14
- <script src="/api/ape.js"></script>
15
- <script>
16
- customElements.define('chat-app', class extends hyperElement {
17
- setup(attachStore) {
18
- this.user = 'User' + Math.random().toString(36).slice(2, 6)
19
- this.messages = []
20
-
21
- this.onStoreChange = attachStore(() => this.messages)
22
-
23
- // Receive init with history + user count on connect
24
- ape.on('init', ({ data }) => {
25
- this.messages = data.history || []
26
- this.users = data.users || 0
27
- this.onStoreChange()
28
- })
29
-
30
- // Listen for user count updates
31
- ape.on('users', ({ data }) => {
32
- this.users = data.count
33
- this.onStoreChange()
34
- })
35
-
36
- // Listen for new messages from others
37
- ape.on('message', ({ data }) => {
38
- this.messages.push(data)
39
- this.onStoreChange()
40
- })
41
- }
42
-
43
- send(e) {
44
- if (e.key !== 'Enter' || !e.target.value) return
45
- const msg = { user: this.user, text: e.target.value }
46
- ape.message(msg).then(() => {
47
- this.messages.push(msg)
48
- this.onStoreChange()
49
- })
50
- e.target.value = ''
51
- }
52
-
53
- render(Html, messages) {
54
- messages = messages || []
55
- Html`
56
- <div class="chat-container">
57
- <div class="header">
58
- <span class="title">💬 Chat</span>
59
- <span class="online-count">🟢 ${this.users || 0} online</span>
60
- <span class="user-badge">● ${this.user}</span>
61
- </div>
62
- <div class="messages">
63
- ${messages.length === 0
64
- ? Html.wire()`<div class="empty-state">No messages yet...</div>`
65
- : messages.map(m => Html.wire(m, ':msg')`
66
- <div class="${'message' + (m.user === this.user ? ' mine' : '')}">
67
- <span class="username">${m.user}</span>
68
- <span class="text">${m.text}</span>
69
- </div>
70
- `)
71
- }
72
- </div>
73
- <div class="input-area">
74
- <input
75
- class="message-input"
76
- placeholder="Type a message..."
77
- onkeydown=${e => this.send(e)}
78
- autofocus
79
- >
80
- </div>
81
- </div>
82
- `
83
- }
84
- })
85
- </script>
86
- </body>
87
-
88
- </html>