spacetimedb 2.4.1 → 2.5.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.
package/LICENSE.txt CHANGED
@@ -5,7 +5,7 @@ Business Source License 1.1
5
5
  Parameters
6
6
 
7
7
  Licensor: Clockwork Laboratories, Inc.
8
- Licensed Work: SpacetimeDB 2.4.1
8
+ Licensed Work: SpacetimeDB 2.5.0
9
9
  The Licensed Work is
10
10
  (c) 2023 Clockwork Laboratories, Inc.
11
11
 
@@ -21,7 +21,7 @@ Additional Use Grant: You may make use of the Licensed Work provided your
21
21
  Licensed Work by creating tables whose schemas are
22
22
  controlled by such third parties.
23
23
 
24
- Change Date: 2031-06-03
24
+ Change Date: 2031-06-09
25
25
 
26
26
  Change License: GNU Affero General Public License v3.0 with a linking
27
27
  exception
package/README.md CHANGED
@@ -111,6 +111,97 @@ function App() {
111
111
  }
112
112
  ```
113
113
 
114
+ #### SolidJS Usage
115
+
116
+ This module also includes SolidJS primitives to subscribe to tables under the `spacetimedb/solid` subpath. The SolidJS integration uses Solid's fine-grained reactivity system (`createSignal`, `createStore`, `createMemo`, `createComputed`) for optimal rendering performance. Reactive updates are scoped to only the data that actually changed.
117
+
118
+ In order to use SpacetimeDB SolidJS primitives in your project, first add a `SpacetimeDBProvider` at the top of your component hierarchy:
119
+
120
+ ```tsx
121
+ import { SpacetimeDBProvider } from 'spacetimedb/solid';
122
+ import { DbConnection, tables } from './module_bindings';
123
+
124
+ const connectionBuilder = DbConnection.builder()
125
+ .withUri('ws://localhost:3000')
126
+ .withDatabaseName('MODULE_NAME')
127
+ .withLightMode(true)
128
+ .onDisconnect(() => {
129
+ console.log('disconnected');
130
+ })
131
+ .onConnectError(() => {
132
+ console.log('client_error');
133
+ })
134
+ .onConnect((conn, identity, _token) => {
135
+ console.log(
136
+ 'Connected to SpacetimeDB with identity:',
137
+ identity.toHexString()
138
+ );
139
+
140
+ conn.subscriptionBuilder().subscribe(tables.player);
141
+ })
142
+ .withToken('TOKEN');
143
+
144
+ render(
145
+ () => (
146
+ <SpacetimeDBProvider connectionBuilder={connectionBuilder}>
147
+ <App />
148
+ </SpacetimeDBProvider>
149
+ ),
150
+ document.getElementById('root')!
151
+ );
152
+ ```
153
+
154
+ Once you add a `SpacetimeDBProvider` to your hierarchy, you can use the SpacetimeDB SolidJS primitives in your components:
155
+
156
+ ```tsx
157
+ import {
158
+ useSpacetimeDB,
159
+ useTable,
160
+ useReducer,
161
+ useProcedure,
162
+ } from 'spacetimedb/solid';
163
+
164
+ function App() {
165
+ // Access the connection state (identity, token, connection error, etc.)
166
+ const conn = useSpacetimeDB();
167
+
168
+ // Subscribe to a table — returns a reactive store of rows and an isReady accessor
169
+ const [rows, isReady] = useTable(() => tables.message);
170
+
171
+ // Subscribe to a filtered view
172
+ const [onlineUsers, onlineReady] = useTable(
173
+ () => tables.user.where(r => r.online.eq(true)),
174
+ {
175
+ onInsert: row => console.log('User came online:', row),
176
+ onDelete: row => console.log('User went offline:', row),
177
+ }
178
+ );
179
+
180
+ // Call a reducer — queues calls made before the connection is ready
181
+ const sendMessage = useReducer(reducers.sendMessage);
182
+
183
+ // Call a procedure — queues calls made before the connection is ready
184
+ const getResult = useProcedure(procedures.getSomeResult);
185
+
186
+ return (
187
+ <div>
188
+ <Show when={isReady()} fallback={<p>Loading...</p>}>
189
+ <p>{rows.length} messages</p>
190
+ <For each={rows}>{row => <div>{row.text}</div>}</For>
191
+ </Show>
192
+ <button onClick={() => sendMessage('hello')}>Send</button>
193
+ </div>
194
+ );
195
+ }
196
+ ```
197
+
198
+ **Key differences from the React API:**
199
+
200
+ - `useTable` takes a _getter function_ `() => Query<TableDef>` instead of a plain value, so the query can be reactive and update when signals change.
201
+ - `useTable` returns `[rows, isReady]` where `rows` is a Solid reactive store and `isReady` is an accessor function `() => boolean`.
202
+ - The `enabled` callback option is a getter `() => boolean` instead of a plain boolean, allowing it to depend on reactive state.
203
+ - `useReducer` and `useProcedure` queue calls made before the connection is ready and flush them once connected.
204
+
114
205
  ### Developer notes
115
206
 
116
207
  To run the tests, do: