@livestore/react 0.3.0-dev.27 → 0.3.0-dev.29

package/src/__snapshots__/{useRow.test.tsx.snap → useClientDocument.test.tsx.snap}

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`useRow > otel > should update the data based on component key strictMode={ strictMode: false } 1`] = `
+exports[`useClientDocument > otel > should update the data based on component key strictMode={ strictMode: false } 1`] = `
 {
   "_name": "createStore",
   "attributes": {
@@ -24,21 +24,25 @@ exports[`useRow > otel > should update the data based on component key strictMod
       "_name": "LiveStore:sync",
     },
     {
-      "_name": "LiveStore:mutations",
+      "_name": "LiveStore:commits",
       "children": [
         {
           "_name": "LiveStore:commit",
           "attributes": {
-            "livestore.mutationEventTags": [
-              "_Derived_Create_UserInfo",
+            "livestore.eventTags": [
+              "UserInfoSet",
             ],
-            "livestore.mutationEventsCount": 1,
+            "livestore.eventsCount": 1,
           },
           "children": [
             {
               "_name": "livestore.in-memory-db:execute",
               "attributes": {
-                "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(value, ?, json(?))
+    ",
               },
             },
           ],
@@ -49,9 +53,9 @@ exports[`useRow > otel > should update the data based on component key strictMod
       "_name": "LiveStore:queries",
       "children": [
         {
-          "_name": "LiveStore:useRow:UserInfo:u1",
+          "_name": "LiveStore:useClientDocument:UserInfo:u1",
           "attributes": {
-            "firstStackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+            "firstStackInfo": "{"frames":[{"name":"Store.store.useClientDocument","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useClientDocument","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
             "label": "SELECT * FROM 'UserInfo' WHERE id = ?",
           },
           "children": [
@@ -66,17 +70,21 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "LiveStore:commit",
               "attributes": {
-                "livestore.commitLabel": "rowQuery:UserInfo:u1",
-                "livestore.mutationEventTags": [
-                  "_Derived_Create_UserInfo",
+                "livestore.commitLabel": "UserInfo.set:u1",
+                "livestore.eventTags": [
+                  "UserInfoSet",
                 ],
-                "livestore.mutationEventsCount": 1,
+                "livestore.eventsCount": 1,
               },
               "children": [
                 {
                   "_name": "livestore.in-memory-db:execute",
                   "attributes": {
-                    "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                    "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(json_set(value, ?, json(?)), ?, json(?))
+    ",
                   },
                 },
               ],
@@ -84,7 +92,7 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
               "attributes": {
-                "livestore.debugRefreshReason": "useQuery:initial-run:row:UserInfo:u1",
+                "livestore.debugRefreshReason": "useQuery:initial-run:UserInfo.get:u1",
                 "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
                 "sql.rowsCount": 1,
               },
@@ -102,8 +110,8 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "LiveStore.subscribe",
               "attributes": {
-                "label": "row:UserInfo:u1",
-                "queryLabel": "row:UserInfo:u1",
+                "label": "UserInfo.get:u1",
+                "queryLabel": "UserInfo.get:u1",
               },
               "children": [
                 {
@@ -129,9 +137,9 @@ exports[`useRow > otel > should update the data based on component key strictMod
           ],
         },
         {
-          "_name": "LiveStore:useRow:UserInfo:u2",
+          "_name": "LiveStore:useClientDocument:UserInfo:u2",
           "attributes": {
-            "firstStackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+            "firstStackInfo": "{"frames":[{"name":"Store.store.useClientDocument","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useClientDocument","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
             "label": "SELECT * FROM 'UserInfo' WHERE id = ?",
           },
           "children": [
@@ -146,7 +154,7 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
               "attributes": {
-                "livestore.debugRefreshReason": "useQuery:initial-run:row:UserInfo:u2",
+                "livestore.debugRefreshReason": "useQuery:initial-run:UserInfo.get:u2",
                 "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
                 "sql.rowsCount": 1,
               },
@@ -164,14 +172,14 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "LiveStore.subscribe",
               "attributes": {
-                "label": "row:UserInfo:u2",
-                "queryLabel": "row:UserInfo:u2",
+                "label": "UserInfo.get:u2",
+                "queryLabel": "UserInfo.get:u2",
               },
               "children": [
                 {
                   "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
                   "attributes": {
-                    "livestore.debugRefreshReason": "subscribe-initial-run:row:UserInfo:u2",
+                    "livestore.debugRefreshReason": "subscribe-initial-run:UserInfo.get:u2",
                     "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
                     "sql.rowsCount": 1,
                   },
@@ -196,7 +204,7 @@ exports[`useRow > otel > should update the data based on component key strictMod
 }
 `;
 
-exports[`useRow > otel > should update the data based on component key strictMode={ strictMode: true } 1`] = `
+exports[`useClientDocument > otel > should update the data based on component key strictMode={ strictMode: true } 1`] = `
 {
   "_name": "createStore",
   "attributes": {
@@ -220,21 +228,25 @@ exports[`useRow > otel > should update the data based on component key strictMod
       "_name": "LiveStore:sync",
     },
     {
-      "_name": "LiveStore:mutations",
+      "_name": "LiveStore:commits",
       "children": [
         {
           "_name": "LiveStore:commit",
           "attributes": {
-            "livestore.mutationEventTags": [
-              "_Derived_Create_UserInfo",
+            "livestore.eventTags": [
+              "UserInfoSet",
             ],
-            "livestore.mutationEventsCount": 1,
+            "livestore.eventsCount": 1,
           },
           "children": [
             {
               "_name": "livestore.in-memory-db:execute",
               "attributes": {
-                "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(value, ?, json(?))
+    ",
               },
             },
           ],
@@ -245,9 +257,9 @@ exports[`useRow > otel > should update the data based on component key strictMod
       "_name": "LiveStore:queries",
       "children": [
         {
-          "_name": "LiveStore:useRow:UserInfo:u1",
+          "_name": "LiveStore:useClientDocument:UserInfo:u1",
           "attributes": {
-            "firstStackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+            "firstStackInfo": "{"frames":[{"name":"Store.store.useClientDocument","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useClientDocument","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
             "label": "SELECT * FROM 'UserInfo' WHERE id = ?",
           },
           "children": [
@@ -262,17 +274,21 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "LiveStore:commit",
               "attributes": {
-                "livestore.commitLabel": "rowQuery:UserInfo:u1",
-                "livestore.mutationEventTags": [
-                  "_Derived_Create_UserInfo",
+                "livestore.commitLabel": "UserInfo.set:u1",
+                "livestore.eventTags": [
+                  "UserInfoSet",
                 ],
-                "livestore.mutationEventsCount": 1,
+                "livestore.eventsCount": 1,
               },
               "children": [
                 {
                   "_name": "livestore.in-memory-db:execute",
                   "attributes": {
-                    "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                    "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(json_set(value, ?, json(?)), ?, json(?))
+    ",
                   },
                 },
               ],
@@ -280,7 +296,7 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
               "attributes": {
-                "livestore.debugRefreshReason": "useQuery:initial-run:row:UserInfo:u1",
+                "livestore.debugRefreshReason": "useQuery:initial-run:UserInfo.get:u1",
                 "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
                 "sql.rowsCount": 1,
               },
@@ -298,8 +314,8 @@ exports[`useRow > otel > should update the data based on component key strictMod
             {
               "_name": "LiveStore.subscribe",
               "attributes": {
-                "label": "row:UserInfo:u1",
-                "queryLabel": "row:UserInfo:u1",
+                "label": "UserInfo.get:u1",
+                "queryLabel": "UserInfo.get:u1",
               },
               "children": [
                 {
@@ -330,7 +346,7 @@ exports[`useRow > otel > should update the data based on component key strictMod
 }
 `;
 
-exports[`useRow > should update the data based on component key 1`] = `
+exports[`useClientDocument > should update the data based on component key 1`] = `
 {
   "atoms": [
     {
@@ -408,13 +424,13 @@ exports[`useRow > should update the data based on component key 1`] = `
       "id": "node-5",
       "isDestroyed": false,
       "isDirty": false,
-      "label": "row:UserInfo:u1:results",
+      "label": "UserInfo.get:u1:results",
       "meta": {
         "liveStoreThunkType": "db.result",
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"username":"","text":"","id":"u1"}",
+        "value": "{"username":"","text":""}",
       },
       "recomputations": 1,
       "sub": [
@@ -432,7 +448,7 @@ exports[`useRow > should update the data based on component key 1`] = `
       "id": "node-6",
       "invocations": 1,
       "isDestroyed": false,
-      "label": "subscribe:row:UserInfo:u1",
+      "label": "subscribe:UserInfo.get:u1",
       "sub": [
         "node-5",
       ],
@@ -441,7 +457,7 @@ exports[`useRow > should update the data based on component key 1`] = `
 }
 `;
 
-exports[`useRow > should update the data based on component key 2`] = `
+exports[`useClientDocument > should update the data based on component key 2`] = `
 {
   "atoms": [
     {
@@ -519,13 +535,13 @@ exports[`useRow > should update the data based on component key 2`] = `
       "id": "node-7",
       "isDestroyed": false,
       "isDirty": false,
-      "label": "row:UserInfo:u2:results",
+      "label": "UserInfo.get:u2:results",
       "meta": {
         "liveStoreThunkType": "db.result",
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"username":"username_u2","text":"","id":"u2"}",
+        "value": "{"username":"username_u2","text":""}",
       },
       "recomputations": 2,
       "sub": [
@@ -543,7 +559,7 @@ exports[`useRow > should update the data based on component key 2`] = `
       "id": "node-8",
       "invocations": 1,
       "isDestroyed": false,
-      "label": "subscribe:row:UserInfo:u2",
+      "label": "subscribe:UserInfo.get:u2",
       "sub": [
         "node-7",
       ],

package/src/__snapshots__/useQuery.test.tsx.snap

@@ -84,7 +84,7 @@ exports[`useQuery (strictMode={ strictMode: false }) > filtered dependency query
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{},"queryInfo":{"_tag":"None"}}",
+        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{}}",
       },
       "recomputations": 1,
       "sub": [
@@ -234,7 +234,7 @@ exports[`useQuery (strictMode={ strictMode: false }) > filtered dependency query
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{},"queryInfo":{"_tag":"None"}}",
+        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{}}",
       },
       "recomputations": 1,
       "sub": [
@@ -384,7 +384,7 @@ exports[`useQuery (strictMode={ strictMode: false }) > filtered dependency query
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t2"],"queriedTables":{},"queryInfo":{"_tag":"None"}}",
+        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t2"],"queriedTables":{}}",
       },
       "recomputations": 2,
       "sub": [
@@ -561,7 +561,7 @@ exports[`useQuery (strictMode={ strictMode: false }) > same \`useQuery\` hook in
 }
 `;
 
-exports[`useQuery (strictMode={ strictMode: false }) > same \`useQuery\` hook invoked with different queries > 2: after first mutation 1`] = `
+exports[`useQuery (strictMode={ strictMode: false }) > same \`useQuery\` hook invoked with different queries > 2: after first commit 1`] = `
 {
   "atoms": [
     {
@@ -1089,7 +1089,7 @@ exports[`useQuery (strictMode={ strictMode: true }) > filtered dependency query
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{},"queryInfo":{"_tag":"None"}}",
+        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{}}",
       },
       "recomputations": 1,
       "sub": [
@@ -1239,7 +1239,7 @@ exports[`useQuery (strictMode={ strictMode: true }) > filtered dependency query
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{},"queryInfo":{"_tag":"None"}}",
+        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t1"],"queriedTables":{}}",
       },
       "recomputations": 1,
       "sub": [
@@ -1389,7 +1389,7 @@ exports[`useQuery (strictMode={ strictMode: true }) > filtered dependency query
       },
       "previousResult": {
         "_tag": "Some",
-        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t2"],"queriedTables":{},"queryInfo":{"_tag":"None"}}",
+        "value": "{"query":"SELECT * FROM 'todos' WHERE id = ?","bindValues":["t2"],"queriedTables":{}}",
       },
       "recomputations": 2,
       "sub": [
@@ -1566,7 +1566,7 @@ exports[`useQuery (strictMode={ strictMode: true }) > same \`useQuery\` hook inv
 }
 `;
 
-exports[`useQuery (strictMode={ strictMode: true }) > same \`useQuery\` hook invoked with different queries > 2: after first mutation 1`] = `
+exports[`useQuery (strictMode={ strictMode: true }) > same \`useQuery\` hook invoked with different queries > 2: after first commit 1`] = `
 {
   "atoms": [
     {

package/src/__tests__/fixture.tsx

@@ -1,9 +1,9 @@
 import { makeInMemoryAdapter } from '@livestore/adapter-web'
 import { provideOtel } from '@livestore/common'
-import { DbSchema, makeSchema } from '@livestore/common/schema'
-import type { LiveStoreContextRunning } from '@livestore/livestore'
+import { Events, makeSchema, State } from '@livestore/common/schema'
+import type { Store } from '@livestore/livestore'
 import { createStore } from '@livestore/livestore'
-import { Effect } from '@livestore/utils/effect'
+import { Effect, Schema } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import React from 'react'
 
@@ -22,45 +22,70 @@ export type AppState = {
   filter: Filter
 }
 
-export const todos = DbSchema.table(
-  'todos',
-  {
-    id: DbSchema.text({ primaryKey: true }),
-    text: DbSchema.text({ default: '', nullable: false }),
-    completed: DbSchema.boolean({ default: false, nullable: false }),
+const todos = State.SQLite.table({
+  name: 'todos',
+  columns: {
+    id: State.SQLite.text({ primaryKey: true }),
+    text: State.SQLite.text({ default: '', nullable: false }),
+    completed: State.SQLite.boolean({ default: false, nullable: false }),
   },
-  { deriveMutations: { clientOnly: true }, isSingleton: false },
-)
-
-export const app = DbSchema.table(
-  'app',
-  {
-    id: DbSchema.text({ primaryKey: true, default: 'static' }),
-    newTodoText: DbSchema.text({ default: '', nullable: true }),
-    filter: DbSchema.text({ default: 'all', nullable: false }),
+})
+
+const app = State.SQLite.table({
+  name: 'app',
+  columns: {
+    id: State.SQLite.text({ primaryKey: true, default: 'static' }),
+    newTodoText: State.SQLite.text({ default: '', nullable: true }),
+    filter: State.SQLite.text({ default: 'all', nullable: false }),
   },
-  { isSingleton: true },
-)
-
-export const userInfo = DbSchema.table(
-  'UserInfo',
-  {
-    username: DbSchema.text({ default: '' }),
-    text: DbSchema.text({ default: '' }),
+})
+
+const userInfo = State.SQLite.clientDocument({
+  name: 'UserInfo',
+  schema: Schema.Struct({
+    username: Schema.String,
+    text: Schema.String,
+  }),
+  default: { value: { username: '', text: '' } },
+})
+
+const AppRouterSchema = State.SQLite.clientDocument({
+  name: 'AppRouter',
+  schema: Schema.Struct({
+    currentTaskId: Schema.String.pipe(Schema.NullOr),
+  }),
+  default: {
+    value: { currentTaskId: null },
+    id: 'singleton',
   },
-  { deriveMutations: { clientOnly: true } },
-)
+})
+
+export const events = {
+  todoCreated: Events.synced({
+    name: 'todoCreated',
+    schema: Schema.Struct({ id: Schema.String, text: Schema.String, completed: Schema.Boolean }),
+  }),
+  todoUpdated: Events.synced({
+    name: 'todoUpdated',
+    schema: Schema.Struct({
+      id: Schema.String,
+      text: Schema.String.pipe(Schema.optional),
+      completed: Schema.Boolean.pipe(Schema.optional),
+    }),
+  }),
+  AppRouterSet: AppRouterSchema.set,
+  UserInfoSet: userInfo.set,
+}
 
-export const AppRouterSchema = DbSchema.table(
-  'AppRouter',
-  {
-    currentTaskId: DbSchema.text({ default: null, nullable: true }),
-  },
-  { isSingleton: true, deriveMutations: { clientOnly: true } },
-)
+const materializers = State.SQLite.materializers(events, {
+  todoCreated: ({ id, text, completed }) => todos.insert({ id, text, completed }),
+  todoUpdated: ({ id, text, completed }) => todos.update({ completed, text }).where({ id }),
+})
 
 export const tables = { todos, app, userInfo, AppRouterSchema }
-export const schema = makeSchema({ tables })
+
+const state = State.SQLite.makeState({ tables, materializers })
+export const schema = makeSchema({ state, events })
 
 export const makeTodoMvcReact = ({
   otelTracer,
@@ -87,15 +112,20 @@ export const makeTodoMvcReact = ({
       }
     }
 
-    const store = yield* createStore({
+    const store: Store<any> = yield* createStore({
       schema,
       storeId: 'default',
       adapter: makeInMemoryAdapter(),
       debug: { instanceId: 'test' },
     })
 
+    const storeWithReactApi = LiveStoreReact.withReactApi(store)
+
     // TODO improve typing of `LiveStoreContext`
-    const storeContext = { stage: 'running', store } as any as LiveStoreContextRunning
+    const storeContext = {
+      stage: 'running' as const,
+      store: storeWithReactApi,
+    }
 
     const MaybeStrictMode = strictMode ? React.StrictMode : React.Fragment
 
@@ -109,5 +139,5 @@ export const makeTodoMvcReact = ({
 
     const renderCount = makeRenderCount()
 
-    return { wrapper, store, renderCount }
+    return { wrapper, store: storeWithReactApi, renderCount }
   }).pipe(provideOtel({ parentSpanContext: otelContext, otelTracer }))

package/src/mod.ts

@@ -1,12 +1,12 @@
-export { LiveStoreContext, useStore } from './LiveStoreContext.js'
+export { LiveStoreContext, type ReactApi } from './LiveStoreContext.js'
+export { useStore, withReactApi } from './useStore.js'
 export { LiveStoreProvider } from './LiveStoreProvider.js'
-export { useQuery } from './useQuery.js'
 export { useStackInfo } from './utils/stack-info.js'
+export { useQuery, useQueryRef } from './useQuery.js'
 export {
-  useRow,
+  useClientDocument,
   type StateSetters,
   type SetStateAction,
   type Dispatch,
   type UseRowResult as UseStateResult,
-} from './useRow.js'
-export { useAtom } from './useAtom.js'
+} from './useClientDocument.js'