@treyorr/voca-svelte 0.1.0 → 0.2.0

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 (2) hide show
  1. package/README.md +86 -33
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # @treyorr/voca-svelte
2
2
 
3
- Svelte 5 Runes wrapper for Voca WebRTC voice chat.
3
+ Svelte 5 wrapper for [Voca](https://voca.vc) WebRTC voice chat.
4
+
5
+ [![npm](https://img.shields.io/npm/v/@treyorr/voca-svelte)](https://www.npmjs.com/package/@treyorr/voca-svelte)
4
6
 
5
7
  ## Installation
6
8
 
@@ -8,58 +10,109 @@ Svelte 5 Runes wrapper for Voca WebRTC voice chat.
8
10
  npm install @treyorr/voca-svelte
9
11
  ```
10
12
 
11
- ## Quick Start
13
+ ## Prerequisites
14
+
15
+ You need a Voca server to connect to:
16
+ - **Free**: Use `https://voca.vc` with an API key from [voca.vc/docs](https://voca.vc/docs)
17
+ - **Self-hosted**: Run your own server (see [self-hosting guide](https://voca.vc/docs/self-hosting))
18
+
19
+ ## What This Package Provides
20
+
21
+ This package provides **reactive Svelte 5 state** around the core `@treyorr/voca-client`:
22
+
23
+ - `VocaRoom` - A class with reactive `$state` properties for Svelte components
24
+ - `VocaClient` - Re-exported for room creation
25
+
26
+ ## Usage
27
+
28
+ ### Full Example: Create Room → Join → Voice Chat
29
+
30
+ ```svelte
31
+ <script lang="ts">
32
+ import { VocaClient, VocaRoom } from '@treyorr/voca-svelte';
33
+ import { onDestroy } from 'svelte';
34
+
35
+ const SERVER_URL = 'https://voca.vc';
36
+ const API_KEY = 'your-api-key'; // Get from voca.vc/docs
12
37
 
13
- ### Create a Room
14
- ```typescript
15
- import { VocaClient } from '@treyorr/voca-client';
38
+ let room = $state<VocaRoom | null>(null);
39
+ let roomId = $state<string | null>(null);
16
40
 
17
- async function createRoom() {
18
- const client = await VocaClient.createRoom();
19
- goto(`/room/${client.roomId}`);
20
- }
41
+ async function createRoom() {
42
+ // Step 1: Create a room on the server
43
+ const client = await VocaClient.createRoom({
44
+ serverUrl: SERVER_URL,
45
+ apiKey: API_KEY,
46
+ });
47
+ roomId = client.roomId;
48
+
49
+ // Step 2: Create reactive VocaRoom and connect
50
+ room = new VocaRoom(roomId, { serverUrl: SERVER_URL, apiKey: API_KEY });
51
+ await room.connect();
52
+ }
53
+
54
+ onDestroy(() => room?.disconnect());
55
+ </script>
56
+
57
+ {#if room?.isConnected}
58
+ <p>Room: {roomId}</p>
59
+ <p>Status: {room.status}</p>
60
+ <p>Peers: {room.peerCount}</p>
61
+ <button onclick={() => room?.toggleMute()}>
62
+ {room.isMuted ? 'Unmute' : 'Mute'}
63
+ </button>
64
+ {:else}
65
+ <button onclick={createRoom}>Create Room</button>
66
+ {/if}
21
67
  ```
22
68
 
23
- ### Join a Room
69
+ ### Join an Existing Room
70
+
24
71
  ```svelte
25
72
  <script lang="ts">
26
73
  import { VocaRoom } from '@treyorr/voca-svelte';
74
+ import { onMount, onDestroy } from 'svelte';
27
75
 
28
- const room = new VocaRoom('my-room');
29
-
30
- $effect(() => {
31
- room.connect();
32
- return () => room.disconnect();
76
+ let { roomId } = $props<{ roomId: string }>();
77
+
78
+ const room = new VocaRoom(roomId, {
79
+ serverUrl: 'https://voca.vc',
80
+ apiKey: 'T8izjz8JpcWa3mtuhOFwprVk77uZKIzn',
33
81
  });
82
+
83
+ onMount(() => room.connect());
84
+ onDestroy(() => room.disconnect());
34
85
  </script>
35
86
 
36
87
  <p>Status: {room.status}</p>
37
- <p>Peers: {room.peers.size}</p>
38
-
39
- <button onclick={() => room.toggleMute()}>
40
- {room.isMuted ? 'Unmute' : 'Mute'}
41
- </button>
88
+ <p>Peers: {room.peerCount}</p>
42
89
  ```
43
90
 
44
- ## API
91
+ ## VocaRoom API
45
92
 
46
- ### `new VocaRoom(roomId, config?)`
93
+ ### Reactive Properties (Svelte 5 runes)
47
94
 
48
- Creates a reactive room instance with Svelte 5 runes.
95
+ | Property | Type | Description |
96
+ |----------|------|-------------|
97
+ | `status` | `ConnectionStatus` | `'connecting'`, `'connected'`, `'error'`, etc. |
98
+ | `isConnected` | `boolean` | Whether connected |
99
+ | `peers` | `Map<string, Peer>` | Connected peers |
100
+ | `peerCount` | `number` | Total participants (including you) |
101
+ | `isMuted` | `boolean` | Your mute state |
102
+ | `localAudioLevel` | `number` | Your audio level (0-1) |
103
+ | `error` | `string \| null` | Error message |
49
104
 
50
- ### Reactive Properties
105
+ ### Methods
51
106
 
52
- - `room.status` - Connection status
53
- - `room.peers` - Map of connected peers
54
- - `room.isMuted` - Mute state
55
- - `room.localAudioLevel` - Local audio level (0-1)
56
- - `room.localStream` - Local MediaStream
107
+ | Method | Description |
108
+ |--------|-------------|
109
+ | `connect()` | Connect to room |
110
+ | `disconnect()` | Leave room |
111
+ | `toggleMute()` | Toggle your microphone |
57
112
 
58
- ### Methods
113
+ ## Requirements
59
114
 
60
- - `room.connect()` - Connect to room
61
- - `room.disconnect()` - Disconnect from room
62
- - `room.toggleMute()` - Toggle mute
115
+ - Svelte 5+ (uses `$state`, `$props`, `$derived` runes)
63
116
 
64
117
  ## License
65
118
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@treyorr/voca-svelte",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Svelte 5 Runes wrapper for Voca Client SDK",
5
5
  "svelte": "./dist/index.svelte.js",
6
6
  "types": "./dist/index.svelte.d.ts",
@@ -37,7 +37,7 @@
37
37
  "access": "public"
38
38
  },
39
39
  "dependencies": {
40
- "@treyorr/voca-client": "*"
40
+ "@treyorr/voca-client": "^0.2.0"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@sveltejs/package": "^2.3.7",