@livestore/livestore 0.4.0-dev.22 → 0.4.0-dev.23

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 (207) hide show
  1. package/README.md +0 -1
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/QueryCache.js +1 -1
  4. package/dist/QueryCache.js.map +1 -1
  5. package/dist/SqliteDbWrapper.d.ts +5 -5
  6. package/dist/SqliteDbWrapper.d.ts.map +1 -1
  7. package/dist/SqliteDbWrapper.js +8 -8
  8. package/dist/SqliteDbWrapper.js.map +1 -1
  9. package/dist/SqliteDbWrapper.test.js +2 -2
  10. package/dist/SqliteDbWrapper.test.js.map +1 -1
  11. package/dist/effect/LiveStore.d.ts +14 -7
  12. package/dist/effect/LiveStore.d.ts.map +1 -1
  13. package/dist/effect/LiveStore.js +0 -15
  14. package/dist/effect/LiveStore.js.map +1 -1
  15. package/dist/effect/LiveStore.test.d.ts +2 -0
  16. package/dist/effect/LiveStore.test.d.ts.map +1 -0
  17. package/dist/effect/LiveStore.test.js +42 -0
  18. package/dist/effect/LiveStore.test.js.map +1 -0
  19. package/dist/live-queries/base-class.d.ts +3 -3
  20. package/dist/live-queries/base-class.d.ts.map +1 -1
  21. package/dist/live-queries/base-class.js +2 -2
  22. package/dist/live-queries/base-class.js.map +1 -1
  23. package/dist/live-queries/client-document-get-query.d.ts +1 -1
  24. package/dist/live-queries/client-document-get-query.d.ts.map +1 -1
  25. package/dist/live-queries/client-document-get-query.js +1 -1
  26. package/dist/live-queries/client-document-get-query.js.map +1 -1
  27. package/dist/live-queries/computed.d.ts.map +1 -1
  28. package/dist/live-queries/computed.js +2 -2
  29. package/dist/live-queries/computed.js.map +1 -1
  30. package/dist/live-queries/db-query.js +14 -14
  31. package/dist/live-queries/db-query.js.map +1 -1
  32. package/dist/live-queries/db-query.test.js +2 -2
  33. package/dist/live-queries/db-query.test.js.map +1 -1
  34. package/dist/live-queries/signal.test.js +2 -2
  35. package/dist/live-queries/signal.test.js.map +1 -1
  36. package/dist/mod.d.ts +1 -1
  37. package/dist/mod.d.ts.map +1 -1
  38. package/dist/mod.js.map +1 -1
  39. package/dist/reactive.d.ts +9 -9
  40. package/dist/reactive.d.ts.map +1 -1
  41. package/dist/reactive.js +9 -26
  42. package/dist/reactive.js.map +1 -1
  43. package/dist/reactive.test.js +2 -2
  44. package/dist/reactive.test.js.map +1 -1
  45. package/dist/store/StoreRegistry.d.ts +30 -5
  46. package/dist/store/StoreRegistry.d.ts.map +1 -1
  47. package/dist/store/StoreRegistry.js +54 -31
  48. package/dist/store/StoreRegistry.js.map +1 -1
  49. package/dist/store/StoreRegistry.test.js +251 -250
  50. package/dist/store/StoreRegistry.test.js.map +1 -1
  51. package/dist/store/create-store.d.ts +6 -2
  52. package/dist/store/create-store.d.ts.map +1 -1
  53. package/dist/store/create-store.js +13 -7
  54. package/dist/store/create-store.js.map +1 -1
  55. package/dist/store/devtools.d.ts +1 -1
  56. package/dist/store/devtools.d.ts.map +1 -1
  57. package/dist/store/devtools.js +3 -3
  58. package/dist/store/devtools.js.map +1 -1
  59. package/dist/store/store-eventstream.test.js +2 -2
  60. package/dist/store/store-eventstream.test.js.map +1 -1
  61. package/dist/store/store-types.d.ts +70 -5
  62. package/dist/store/store-types.d.ts.map +1 -1
  63. package/dist/store/store-types.js.map +1 -1
  64. package/dist/store/store-types.test.js +1 -1
  65. package/dist/store/store-types.test.js.map +1 -1
  66. package/dist/store/store.d.ts +81 -2
  67. package/dist/store/store.d.ts.map +1 -1
  68. package/dist/store/store.js +128 -45
  69. package/dist/store/store.js.map +1 -1
  70. package/dist/utils/dev.js.map +1 -1
  71. package/dist/utils/stack-info.js +2 -2
  72. package/dist/utils/stack-info.js.map +1 -1
  73. package/dist/utils/tests/fixture.d.ts +1 -1
  74. package/dist/utils/tests/fixture.d.ts.map +1 -1
  75. package/dist/utils/tests/fixture.js.map +1 -1
  76. package/dist/utils/tests/otel.d.ts.map +1 -1
  77. package/dist/utils/tests/otel.js +5 -5
  78. package/dist/utils/tests/otel.js.map +1 -1
  79. package/package.json +58 -17
  80. package/src/QueryCache.ts +1 -1
  81. package/src/SqliteDbWrapper.test.ts +4 -2
  82. package/src/SqliteDbWrapper.ts +12 -11
  83. package/src/ambient.d.ts +0 -7
  84. package/src/effect/LiveStore.test.ts +61 -0
  85. package/src/effect/LiveStore.ts +17 -26
  86. package/src/live-queries/__snapshots__/db-query.test.ts.snap +336 -231
  87. package/src/live-queries/base-class.ts +7 -6
  88. package/src/live-queries/client-document-get-query.ts +4 -2
  89. package/src/live-queries/computed.ts +3 -2
  90. package/src/live-queries/db-query.test.ts +3 -2
  91. package/src/live-queries/db-query.ts +15 -15
  92. package/src/live-queries/signal.test.ts +3 -2
  93. package/src/mod.ts +1 -0
  94. package/src/reactive.test.ts +3 -2
  95. package/src/reactive.ts +22 -23
  96. package/src/store/StoreRegistry.test.ts +317 -293
  97. package/src/store/StoreRegistry.ts +63 -38
  98. package/src/store/create-store.ts +26 -11
  99. package/src/store/devtools.ts +5 -6
  100. package/src/store/store-eventstream.test.ts +4 -2
  101. package/src/store/store-types.test.ts +3 -1
  102. package/src/store/store-types.ts +47 -8
  103. package/src/store/store.ts +172 -55
  104. package/src/utils/dev.ts +2 -2
  105. package/src/utils/stack-info.ts +2 -2
  106. package/src/utils/tests/fixture.ts +2 -1
  107. package/src/utils/tests/otel.ts +8 -7
  108. package/docs/api/index.md +0 -3
  109. package/docs/building-with-livestore/complex-ui-state/index.md +0 -3
  110. package/docs/building-with-livestore/crud/index.md +0 -3
  111. package/docs/building-with-livestore/data-modeling/index.md +0 -30
  112. package/docs/building-with-livestore/debugging/index.md +0 -17
  113. package/docs/building-with-livestore/devtools/index.md +0 -79
  114. package/docs/building-with-livestore/events/index.md +0 -355
  115. package/docs/building-with-livestore/examples/ai-agent/index.md +0 -5
  116. package/docs/building-with-livestore/examples/todo-workspaces/index.md +0 -885
  117. package/docs/building-with-livestore/examples/turnbased-game/index.md +0 -7
  118. package/docs/building-with-livestore/opentelemetry/index.md +0 -227
  119. package/docs/building-with-livestore/production-checklist/index.md +0 -5
  120. package/docs/building-with-livestore/reactivity-system/index.md +0 -202
  121. package/docs/building-with-livestore/rules-for-ai-agents/index.md +0 -9
  122. package/docs/building-with-livestore/state/materializers/index.md +0 -300
  123. package/docs/building-with-livestore/state/sql-queries/index.md +0 -94
  124. package/docs/building-with-livestore/state/sqlite/index.md +0 -45
  125. package/docs/building-with-livestore/state/sqlite-schema/index.md +0 -306
  126. package/docs/building-with-livestore/state/sqlite-schema-effect/index.md +0 -300
  127. package/docs/building-with-livestore/store/index.md +0 -625
  128. package/docs/building-with-livestore/syncing/index.md +0 -136
  129. package/docs/building-with-livestore/tools/cli/index.md +0 -177
  130. package/docs/building-with-livestore/tools/mcp/index.md +0 -187
  131. package/docs/examples/cloudflare-adapter/index.md +0 -44
  132. package/docs/examples/expo-adapter/index.md +0 -44
  133. package/docs/examples/index.md +0 -55
  134. package/docs/examples/node-adapter/index.md +0 -44
  135. package/docs/examples/web-adapter/index.md +0 -52
  136. package/docs/framework-integrations/custom-elements/index.md +0 -142
  137. package/docs/framework-integrations/react-integration/index.md +0 -937
  138. package/docs/framework-integrations/solid-integration/index.md +0 -293
  139. package/docs/framework-integrations/svelte-integration/index.md +0 -42
  140. package/docs/framework-integrations/vue-integration/index.md +0 -294
  141. package/docs/getting-started/expo/index.md +0 -882
  142. package/docs/getting-started/node/index.md +0 -115
  143. package/docs/getting-started/react-web/index.md +0 -626
  144. package/docs/getting-started/solid/index.md +0 -3
  145. package/docs/getting-started/vue/index.md +0 -471
  146. package/docs/index.md +0 -208
  147. package/docs/llms.txt +0 -146
  148. package/docs/misc/CODE_OF_CONDUCT/index.md +0 -133
  149. package/docs/misc/FAQ/index.md +0 -37
  150. package/docs/misc/community/index.md +0 -88
  151. package/docs/misc/credits/index.md +0 -14
  152. package/docs/misc/design-partners/index.md +0 -13
  153. package/docs/misc/package-management/index.md +0 -21
  154. package/docs/misc/performance/index.md +0 -25
  155. package/docs/misc/resources/index.md +0 -46
  156. package/docs/misc/state-of-the-project/index.md +0 -37
  157. package/docs/misc/troubleshooting/index.md +0 -82
  158. package/docs/overview/concepts/index.md +0 -78
  159. package/docs/overview/how-livestore-works/index.md +0 -56
  160. package/docs/overview/introduction/index.md +0 -413
  161. package/docs/overview/technology-comparison/index.md +0 -40
  162. package/docs/overview/when-livestore/index.md +0 -81
  163. package/docs/overview/why-livestore/index.md +0 -111
  164. package/docs/patterns/ai/index.md +0 -15
  165. package/docs/patterns/anonymous-user-transition/index.md +0 -10
  166. package/docs/patterns/app-evolution/index.md +0 -72
  167. package/docs/patterns/auth/index.md +0 -377
  168. package/docs/patterns/effect/index.md +0 -1505
  169. package/docs/patterns/encryption/index.md +0 -6
  170. package/docs/patterns/external-data/index.md +0 -5
  171. package/docs/patterns/file-management/index.md +0 -11
  172. package/docs/patterns/file-structure/index.md +0 -14
  173. package/docs/patterns/list-ordering/index.md +0 -369
  174. package/docs/patterns/offline/index.md +0 -32
  175. package/docs/patterns/orm/index.md +0 -18
  176. package/docs/patterns/presence/index.md +0 -11
  177. package/docs/patterns/rich-text-editing/index.md +0 -11
  178. package/docs/patterns/server-side-clients/index.md +0 -97
  179. package/docs/patterns/side-effects/index.md +0 -11
  180. package/docs/patterns/state-machines/index.md +0 -11
  181. package/docs/patterns/storybook/index.md +0 -209
  182. package/docs/patterns/undo-redo/index.md +0 -9
  183. package/docs/patterns/version-control/index.md +0 -8
  184. package/docs/platform-adapters/cloudflare-durable-object-adapter/index.md +0 -453
  185. package/docs/platform-adapters/electron-adapter/index.md +0 -15
  186. package/docs/platform-adapters/expo-adapter/index.md +0 -262
  187. package/docs/platform-adapters/node-adapter/index.md +0 -160
  188. package/docs/platform-adapters/tauri-adapter/index.md +0 -15
  189. package/docs/platform-adapters/web-adapter/index.md +0 -287
  190. package/docs/sustainable-open-source/contributing/docs/index.md +0 -94
  191. package/docs/sustainable-open-source/contributing/info/index.md +0 -63
  192. package/docs/sustainable-open-source/contributing/monorepo/index.md +0 -195
  193. package/docs/sustainable-open-source/sponsoring/index.md +0 -104
  194. package/docs/sync-providers/cloudflare/index.md +0 -773
  195. package/docs/sync-providers/custom/index.md +0 -65
  196. package/docs/sync-providers/electricsql/index.md +0 -159
  197. package/docs/sync-providers/s2/index.md +0 -230
  198. package/docs/tutorial/0-welcome/index.md +0 -48
  199. package/docs/tutorial/1-setup-starter-project/index.md +0 -105
  200. package/docs/tutorial/2-deploy-to-cloudflare/index.md +0 -195
  201. package/docs/tutorial/3-read-and-write-todos-via-livestore/index.md +0 -530
  202. package/docs/tutorial/4-sync-data-via-cloudflare/index.md +0 -210
  203. package/docs/tutorial/5-expand-business-logic/index.md +0 -174
  204. package/docs/tutorial/6-persist-ui-state/index.md +0 -453
  205. package/docs/tutorial/7-next-steps/index.md +0 -22
  206. package/docs/understanding-livestore/design-decisions/index.md +0 -33
  207. package/docs/understanding-livestore/event-sourcing/index.md +0 -40
@@ -1,7 +0,0 @@
1
- # Turn-based game
2
-
3
- LiveStore is a great fit for turn-based games. In this guide we'll look at a simple turn-based game and how to model it in LiveStore.
4
-
5
- General idea: Let server enforce the logic that each player only commits one action per turn.
6
-
7
- TODO: write rest of guide
@@ -1,227 +0,0 @@
1
- # OpenTelemetry
2
-
3
- LiveStore has built-in support for OpenTelemetry.
4
-
5
- ## Usage with React
6
-
7
- <Tabs>
8
- <TabItem label="otel.ts">
9
-
10
- ## `reference/opentelemetry/otel.ts`
11
-
12
- ```ts filename="reference/opentelemetry/otel.ts"
13
-
14
- /**
15
- * Configure a browser tracer that preserves parent/child spans across async work.
16
- * Requires a zone.js runtime (e.g. provided by many frameworks) so the ZoneContextManager
17
- * can keep context during timers, promises, and event callbacks.
18
- */
19
- export const makeTracer = (serviceName: string) => {
20
- const url = import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT as string | undefined
21
- const provider = new WebTracerProvider({
22
- spanProcessors: url ? [new SimpleSpanProcessor(new OTLPTraceExporter({ url: `${url}/v1/traces` }))] : [],
23
- resource: resourceFromAttributes({ 'service.name': serviceName }),
24
- })
25
-
26
- provider.register({
27
- contextManager: new ZoneContextManager(),
28
- propagator: new W3CTraceContextPropagator(),
29
- })
30
-
31
- return provider.getTracer('livestore')
32
- }
33
-
34
- export const tracer = makeTracer('my-app')
35
- ```
36
-
37
- </TabItem>
38
- <TabItem label="App.tsx">
39
-
40
- ## `reference/opentelemetry/app.tsx`
41
-
42
- ```tsx filename="reference/opentelemetry/app.tsx"
43
-
44
- const adapter = makeInMemoryAdapter()
45
-
46
- // ---cut---
47
- const useAppStore = () =>
48
- useStore({
49
- storeId: 'otel-demo',
50
- schema,
51
- adapter,
52
- batchUpdates,
53
- otelOptions: { tracer },
54
- })
55
-
56
- export const App: FC = () => {
57
- const [storeRegistry] = useState(() => new StoreRegistry())
58
- return (
59
- <Suspense fallback={<div>Loading...</div>}>
60
- <StoreRegistryProvider storeRegistry={storeRegistry}>
61
- <AppContent />
62
- </StoreRegistryProvider>
63
- </Suspense>
64
- )
65
- }
66
-
67
- const AppContent: FC = () => {
68
- const _store = useAppStore()
69
- // Use the store in your components
70
- return <div>{/* Your app content */}</div>
71
- }
72
- ```
73
-
74
- ### `reference/framework-integrations/react/schema.ts`
75
-
76
- ```ts filename="reference/framework-integrations/react/schema.ts"
77
-
78
- export const tables = {
79
- todos: State.SQLite.table({
80
- name: 'todos',
81
- columns: {
82
- id: State.SQLite.text({ primaryKey: true }),
83
- text: State.SQLite.text(),
84
- completed: State.SQLite.boolean({ default: false }),
85
- },
86
- }),
87
- uiState: State.SQLite.clientDocument({
88
- name: 'UiState',
89
- schema: Schema.Struct({ text: Schema.String }),
90
- default: { value: { text: '' } },
91
- }),
92
- } as const
93
-
94
- export const events = {
95
- todoCreated: Events.synced({
96
- name: 'v1.TodoCreated',
97
- schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
98
- }),
99
- } as const
100
-
101
- const materializers = State.SQLite.materializers(events, {
102
- [events.todoCreated.name]: defineMaterializer(events.todoCreated, ({ id, text }) =>
103
- tables.todos.insert({ id, text, completed: false }),
104
- ),
105
- })
106
-
107
- const state = State.SQLite.makeState({ tables, materializers })
108
-
109
- export const schema = makeSchema({ events, state })
110
- ```
111
-
112
- ### `reference/opentelemetry/otel.ts`
113
-
114
- ```ts filename="reference/opentelemetry/otel.ts"
115
-
116
- /**
117
- * Configure a browser tracer that preserves parent/child spans across async work.
118
- * Requires a zone.js runtime (e.g. provided by many frameworks) so the ZoneContextManager
119
- * can keep context during timers, promises, and event callbacks.
120
- */
121
- export const makeTracer = (serviceName: string) => {
122
- const url = import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT as string | undefined
123
- const provider = new WebTracerProvider({
124
- spanProcessors: url ? [new SimpleSpanProcessor(new OTLPTraceExporter({ url: `${url}/v1/traces` }))] : [],
125
- resource: resourceFromAttributes({ 'service.name': serviceName }),
126
- })
127
-
128
- provider.register({
129
- contextManager: new ZoneContextManager(),
130
- propagator: new W3CTraceContextPropagator(),
131
- })
132
-
133
- return provider.getTracer('livestore')
134
- }
135
-
136
- export const tracer = makeTracer('my-app')
137
- ```
138
-
139
- ### `reference/opentelemetry/schema.ts`
140
-
141
- ```ts filename="reference/opentelemetry/schema.ts"
142
- export { schema } from '../framework-integrations/react/schema.ts'
143
- ```
144
-
145
- </TabItem>
146
- <TabItem label="livestore.worker.ts">
147
-
148
- ## `reference/opentelemetry/livestore.worker.ts`
149
-
150
- ```ts filename="reference/opentelemetry/livestore.worker.ts"
151
-
152
- makeWorker({ schema, otelOptions: { tracer } })
153
- ```
154
-
155
- ### `reference/framework-integrations/react/schema.ts`
156
-
157
- ```ts filename="reference/framework-integrations/react/schema.ts"
158
-
159
- export const tables = {
160
- todos: State.SQLite.table({
161
- name: 'todos',
162
- columns: {
163
- id: State.SQLite.text({ primaryKey: true }),
164
- text: State.SQLite.text(),
165
- completed: State.SQLite.boolean({ default: false }),
166
- },
167
- }),
168
- uiState: State.SQLite.clientDocument({
169
- name: 'UiState',
170
- schema: Schema.Struct({ text: Schema.String }),
171
- default: { value: { text: '' } },
172
- }),
173
- } as const
174
-
175
- export const events = {
176
- todoCreated: Events.synced({
177
- name: 'v1.TodoCreated',
178
- schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
179
- }),
180
- } as const
181
-
182
- const materializers = State.SQLite.materializers(events, {
183
- [events.todoCreated.name]: defineMaterializer(events.todoCreated, ({ id, text }) =>
184
- tables.todos.insert({ id, text, completed: false }),
185
- ),
186
- })
187
-
188
- const state = State.SQLite.makeState({ tables, materializers })
189
-
190
- export const schema = makeSchema({ events, state })
191
- ```
192
-
193
- ### `reference/opentelemetry/otel.ts`
194
-
195
- ```ts filename="reference/opentelemetry/otel.ts"
196
-
197
- /**
198
- * Configure a browser tracer that preserves parent/child spans across async work.
199
- * Requires a zone.js runtime (e.g. provided by many frameworks) so the ZoneContextManager
200
- * can keep context during timers, promises, and event callbacks.
201
- */
202
- export const makeTracer = (serviceName: string) => {
203
- const url = import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT as string | undefined
204
- const provider = new WebTracerProvider({
205
- spanProcessors: url ? [new SimpleSpanProcessor(new OTLPTraceExporter({ url: `${url}/v1/traces` }))] : [],
206
- resource: resourceFromAttributes({ 'service.name': serviceName }),
207
- })
208
-
209
- provider.register({
210
- contextManager: new ZoneContextManager(),
211
- propagator: new W3CTraceContextPropagator(),
212
- })
213
-
214
- return provider.getTracer('livestore')
215
- }
216
-
217
- export const tracer = makeTracer('my-app')
218
- ```
219
-
220
- ### `reference/opentelemetry/schema.ts`
221
-
222
- ```ts filename="reference/opentelemetry/schema.ts"
223
- export { schema } from '../framework-integrations/react/schema.ts'
224
- ```
225
-
226
- </TabItem>
227
- </Tabs>
@@ -1,5 +0,0 @@
1
- # Production checklist
2
-
3
- ## Production checklist
4
-
5
- TBD
@@ -1,202 +0,0 @@
1
- # Reactivity system
2
-
3
- LiveStore has a high-performance, fine-grained reactivity system built in which is similar to Signals (e.g. in [SolidJS](https://docs.solidjs.com/concepts/signals)).
4
-
5
- ## Defining reactive state
6
-
7
- LiveStore provides 3 types of reactive state:
8
- - Reactive SQL queries on top of SQLite state (`queryDb()`)
9
- - Reactive state values (`signal()`)
10
- - Reactive computed values (`computed()`)
11
-
12
- Reactive state variables end on a `$` by convention (e.g. `todos$`). The `label` option is optional but can be used to identify the reactive state variable in the devtools.
13
-
14
- ### Reactive SQL queries
15
-
16
- ## `reference/reactivity-system/query-db.ts`
17
-
18
- ```ts filename="reference/reactivity-system/query-db.ts"
19
- /** biome-ignore-all lint/correctness/noUnusedVariables: docs snippet exposes intermediate streams */
20
- // ---cut---
21
-
22
- const tables = {
23
- todos: State.SQLite.table({
24
- name: 'todos',
25
- columns: {
26
- id: State.SQLite.text({ primaryKey: true }),
27
- text: State.SQLite.text(),
28
- completed: State.SQLite.boolean({ default: false }),
29
- createdAt: State.SQLite.datetime(),
30
- },
31
- }),
32
- } as const
33
-
34
- const uiState$ = signal({ showCompleted: false }, { label: 'uiState$' })
35
-
36
- const todos$ = queryDb(tables.todos.orderBy('createdAt', 'desc'), { label: 'todos$' })
37
-
38
- {
39
- const todos$ = queryDb(
40
- (get) => {
41
- const { showCompleted } = get(uiState$)
42
- return tables.todos.where(showCompleted ? { completed: true } : {})
43
- },
44
- { label: 'todos$' },
45
- )
46
- }
47
- ```
48
-
49
- ### Signals
50
-
51
- Signals are reactive state values that can be set and get. This can be useful for state that is not materialized from events into SQLite tables.
52
-
53
- ## `reference/reactivity-system/signals.ts`
54
-
55
- ```ts filename="reference/reactivity-system/signals.ts"
56
-
57
- declare const store: Store
58
-
59
- const now$ = signal(Date.now(), { label: 'now$' })
60
-
61
- setInterval(() => {
62
- store.setSignal(now$, Date.now())
63
- }, 1000)
64
-
65
- const num$ = signal(0, { label: 'num$' })
66
- const increment = () => store.setSignal(num$, (prev) => prev + 1)
67
-
68
- increment()
69
- increment()
70
-
71
- console.log(store.query(num$))
72
- ```
73
-
74
- ### Computed values
75
-
76
- ## `reference/reactivity-system/computed.ts`
77
-
78
- ```ts filename="reference/reactivity-system/computed.ts"
79
- /** biome-ignore-all lint/correctness/noUnusedVariables: docs snippet highlights derived signal */
80
- // ---cut---
81
-
82
- const num$ = signal(0, { label: 'num$' })
83
- const duplicated$ = computed((get) => get(num$) * 2, { label: 'duplicated$' })
84
- ```
85
-
86
- ## Accessing reactive state
87
-
88
- Reactive state is always bound to a `Store` instance. You can access the current value of reactive state the following ways:
89
-
90
- ### Using the `Store` instance
91
-
92
- ## `reference/reactivity-system/store-access.ts`
93
-
94
- ```ts filename="reference/reactivity-system/store-access.ts"
95
-
96
- declare const store: Store
97
-
98
- const tables = {
99
- todos: State.SQLite.table({
100
- name: 'todos',
101
- columns: {
102
- id: State.SQLite.text({ primaryKey: true }),
103
- title: State.SQLite.text(),
104
- completed: State.SQLite.boolean({ default: false }),
105
- },
106
- }),
107
- } as const
108
-
109
- const count$ = queryDb(tables.todos.count(), { label: 'count$' })
110
- const count = store.query(count$)
111
- console.log(count)
112
-
113
- const unsubscribe = store.subscribe(count$, (value) => {
114
- console.log(value)
115
- })
116
-
117
- unsubscribe()
118
- ```
119
-
120
- ### Via framework integrations
121
-
122
- #### React
123
-
124
- ## `reference/reactivity-system/react-component.tsx`
125
-
126
- ```tsx filename="reference/reactivity-system/react-component.tsx"
127
-
128
- declare const state$: LiveQueryDef<number>
129
-
130
- export const MyComponent: FC = () => {
131
- const value = useQuery(state$)
132
-
133
- return <div>{value}</div>
134
- }
135
- ```
136
-
137
- #### Solid
138
-
139
- ## `reference/reactivity-system/solid-component.tsx`
140
-
141
- ```tsx filename="reference/reactivity-system/solid-component.tsx"
142
-
143
- declare const state$: LiveQueryDef<number>
144
-
145
- export const MyComponent = () => {
146
- const value = query(state$, 0)
147
-
148
- return <div>{value()}</div>
149
- }
150
- ```
151
-
152
- ### Reacting to changing variables passed to queries
153
-
154
- If your query depends on a variable passed in by the component, use the deps array to react to changes in this variable.
155
-
156
- ## `reference/reactivity-system/deps-query.tsx`
157
-
158
- ```tsx filename="reference/reactivity-system/deps-query.tsx"
159
-
160
- const tables = {
161
- todos: State.SQLite.table({
162
- name: 'todos',
163
- columns: {
164
- id: State.SQLite.text({ primaryKey: true }),
165
- text: State.SQLite.text(),
166
- completed: State.SQLite.boolean({ default: false }),
167
- },
168
- }),
169
- } as const
170
-
171
- declare const store: Store & ReactApi
172
-
173
- export const todos$ = ({ showCompleted }: { showCompleted: boolean }) =>
174
- queryDb(
175
- () => {
176
- return tables.todos.where(showCompleted ? { completed: true } : {})
177
- },
178
- {
179
- label: 'todos$',
180
- deps: [showCompleted ? 'true' : 'false'],
181
- },
182
- )
183
-
184
- export const MyComponent: FC<{ showCompleted: boolean }> = ({ showCompleted }) => {
185
- const todos = store.useQuery(todos$({ showCompleted })) as ReadonlyArray<{
186
- id: string
187
- text: string
188
- completed: boolean
189
- }>
190
-
191
- return <div>{todos.length} Done</div>
192
- }
193
- ```
194
-
195
- ## Further reading
196
-
197
- - [Riffle](https://riffle.systems/essays/prelude/): Building data-centric apps with a reactive relational database
198
- - [Adapton](http://adapton.org/) / [miniAdapton](https://arxiv.org/pdf/1609.05337)
199
-
200
- ## Related technologies
201
-
202
- - [Signia](https://signia.tldraw.dev/): Signia is a minimal, fast, and scalable signals library for TypeScript developed by TLDraw.
@@ -1,9 +0,0 @@
1
- # Rules for AI agents
2
-
3
- ## AGENTS.md
4
-
5
- Add the content of this `AGENTS.md` file or other custom rules:
6
-
7
- ```md wrap
8
- - When you need to look up information about LiveStore, always use the `docs` directory that's shipped as part of the `@livestore/livestore` package in `node_modules/@livestore/livestore/docs`.
9
- ```