@@ -141,17 +141,25 @@ const connectionBuilder = DbConnection.builder()
141141 })
142142 .withToken (' TOKEN' );
143143
144- render (() => (
145- <SpacetimeDBProvider connectionBuilder = { connectionBuilder } >
146- <App />
147- </SpacetimeDBProvider >
148- ), document .getElementById (' root' )! );
144+ render (
145+ () => (
146+ <SpacetimeDBProvider connectionBuilder = { connectionBuilder } >
147+ <App />
148+ </SpacetimeDBProvider >
149+ ),
150+ document .getElementById (' root' )!
151+ );
149152```
150153
151154Once you add a ` SpacetimeDBProvider ` to your hierarchy, you can use the SpacetimeDB SolidJS primitives in your components:
152155
153156``` tsx
154- import { useSpacetimeDB , useTable , useReducer , useProcedure } from ' spacetimedb/solid' ;
157+ import {
158+ useSpacetimeDB ,
159+ useTable ,
160+ useReducer ,
161+ useProcedure ,
162+ } from ' spacetimedb/solid' ;
155163
156164function App() {
157165 // Access the connection state (identity, token, connection error, etc.)
@@ -164,8 +172,8 @@ function App() {
164172 const [onlineUsers, onlineReady] = useTable (
165173 () => tables .user .where (r => r .online .eq (true )),
166174 {
167- onInsert : ( row ) => console .log (' User came online:' , row ),
168- onDelete : ( row ) => console .log (' User went offline:' , row ),
175+ onInsert : row => console .log (' User came online:' , row ),
176+ onDelete : row => console .log (' User went offline:' , row ),
169177 }
170178 );
171179
@@ -179,9 +187,7 @@ function App() {
179187 <div >
180188 <Show when = { isReady ()} fallback = { <p >Loading...</p >} >
181189 <p >{ rows .length } messages</p >
182- <For each = { rows } >
183- { (row ) => <div >{ row .text } </div >}
184- </For >
190+ <For each = { rows } >{ row => <div >{ row .text } </div >} </For >
185191 </Show >
186192 <button onClick = { () => sendMessage (' hello' )} >Send</button >
187193 </div >
0 commit comments