@livestore/livestore 0.0.24 → 0.0.27

package/dist/utils/bounded-collections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bounded-collections.d.ts","sourceRoot":"","sources":["../../src/utils/bounded-collections.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAC;;gBAIpB,SAAS,EAAE,MAAM;IAI7B,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAEvC,GAAG,QAAS,CAAC,SAAS,CAAC,UAUtB;IAED,GAAG,QAAS,CAAC,KAAG,CAAC,GAAG,SAAS,CAE5B;IAED,MAAM,QAAS,CAAC,UAEf;IAED,IAAI,4BAEH;CACF;AAED,qBAAa,QAAQ,CAAC,CAAC;;gBAGT,SAAS,EAAE,MAAM;IAW7B,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAEvC,GAAG,MAAO,CAAC,UAET;IAEF,CAAC,MAAM,CAAC,QAAQ,CAAC,4BAEhB;CACF;AAED,qBAAa,UAAU,CAAC,CAAC;;gBAIX,SAAS,EAAE,MAAM;IAI7B,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAEvC,IAAI,MAAO,CAAC,UAQX;IAED,GAAG,UAAW,MAAM,KAAG,CAAC,GAAG,SAAS,CAEnC;IAED,MAAM,UAAW,MAAM,UAEtB;IAED,IAAI,MAAM,WAET;IAED,CAAC,MAAM,CAAC,QAAQ,CAAC,4BAEhB;IAED,GAAG,cAAe,CAAC,eAElB;IAED,KAAK,aAEJ;IAED,IAAI,aAAa,CAAC,KAAK,CAAC,KAAK,MAAM,sBAElC;CACF"}

package/dist/utils/bounded-collections.js

@@ -0,0 +1,90 @@
+/**
+ * Creates a map that has a fixed number of entries.
+ * Once hitting the bound, earliest insertions are removed
+ */
+export default class BoundMap {
+    #map = new Map();
+    #sizeLimit;
+    constructor(sizeLimit) {
+        this.#sizeLimit = sizeLimit;
+    }
+    onEvict;
+    set = (key, value) => {
+        this.#map.set(key, value);
+        // console.log(this.#map.size, this.#sizeLimit);
+        if (this.#map.size > this.#sizeLimit) {
+            const firstKey = this.#map.keys().next().value;
+            this.#map.delete(firstKey);
+            if (this.onEvict) {
+                this.onEvict(firstKey);
+            }
+        }
+    };
+    get = (key) => {
+        return this.#map.get(key);
+    };
+    delete = (key) => {
+        this.#map.delete(key);
+    };
+    keys = () => {
+        return this.#map.keys();
+    };
+}
+export class BoundSet {
+    #map;
+    constructor(sizeLimit) {
+        this.#map = new BoundMap(sizeLimit);
+        this.#map.onEvict = this.#onEvict;
+    }
+    #onEvict = (v) => {
+        if (this.onEvict) {
+            this.onEvict(v);
+        }
+    };
+    onEvict;
+    add = (v) => {
+        this.#map.set(v, v);
+    };
+    [Symbol.iterator] = () => {
+        return this.#map.keys();
+    };
+}
+export class BoundArray {
+    #array = [];
+    #sizeLimit;
+    constructor(sizeLimit) {
+        this.#sizeLimit = sizeLimit;
+    }
+    onEvict;
+    push = (v) => {
+        this.#array.push(v);
+        if (this.#array.length > this.#sizeLimit) {
+            const first = this.#array.shift();
+            if (first && this.onEvict) {
+                this.onEvict(first);
+            }
+        }
+    };
+    get = (index) => {
+        return this.#array[index];
+    };
+    delete = (index) => {
+        this.#array.splice(index, 1);
+    };
+    get length() {
+        return this.#array.length;
+    }
+    [Symbol.iterator] = () => {
+        return this.#array[Symbol.iterator]();
+    };
+    map = (fn) => {
+        return this.#array.map(fn);
+    };
+    clear = () => {
+        this.#array = [];
+    };
+    sort = (fn) => {
+        return this.#array.sort(fn);
+    };
+}
+//# sourceMappingURL=bounded-collections.js.map

package/dist/utils/bounded-collections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bounded-collections.js","sourceRoot":"","sources":["../../src/utils/bounded-collections.ts"],"names":[],"mappings":"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"}

package/dist/utils/otel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otel.d.ts","sourceRoot":"","sources":["../../src/utils/otel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAE/C,eAAO,MAAM,qBAAqB,SAAU,KAAK,IAAI,KAAG,MAGvD,CAAA;AAED,eAAO,MAAM,2BAA2B,SAAU,KAAK,IAAI,KAAG,mBACF,CAAA"}

package/dist/{otel.js → utils/otel.js}

@@ -1,6 +1,6 @@
 export const getDurationMsFromSpan = (span) => {
     const durationHr = span._duration;
-    return durationHr[0] * 1000 + durationHr[1] / 1000000;
+    return durationHr[0] * 1000 + durationHr[1] / 1_000_000;
 };
 export const getStartTimeHighResFromSpan = (span) => span._performanceStartTime;
 //# sourceMappingURL=otel.js.map

package/dist/utils/otel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otel.js","sourceRoot":"","sources":["../../src/utils/otel.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,IAAe,EAAU,EAAE;IAC/D,MAAM,UAAU,GAAsC,IAAY,CAAC,SAAS,CAAA;IAC5E,OAAO,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;AACzD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,IAAe,EAAuB,EAAE,CACjF,IAAY,CAAC,qBAA4C,CAAA"}

package/dist/utils/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/utils/util.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAEpD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAA;AAE1D,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,GAAG,YAAY,CAAA;AAEhD,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;AAE9E;;;;;GAKG;AACH,eAAO,MAAM,GAAG,aAAc,oBAAoB,WAAW,OAAO,EAAE,KAAG,MAMxE,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,WAAY,QAAQ,aAAa,MAAM,KAAG,kBAWvE,CAAA;AAED;;;GAGG;AAEH,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,KAAK,CAE5C;AAED,eAAO,MAAM,cAAc,UAAW,GAAG,KAAG,MAa3C,CAAA;AAED,eAAO,MAAM,SAAS,UAAW,GAAG,8BAAiE,CAAA"}

package/dist/utils/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/utils/util.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAW9B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,QAA8B,EAAE,GAAG,IAAe,EAAU,EAAE;IAChF,IAAI,GAAG,GAAG,EAAE,CAAA;IACZ,KAAK,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;QACtC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;IAClC,CAAC;IACD,OAAO,GAAG,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9B,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAgB,EAAE,SAAiB,EAAsB,EAAE;IAC3F,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;QAAE,OAAO,MAA4B,CAAA;IAE9D,MAAM,MAAM,GAAiB,EAAE,CAAA;IAC/B,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAClD,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,KAAK,CAAA;QAC3B,CAAC;IACH,CAAC;IAED,OAAO,MAA4B,CAAA;AACrC,CAAC,CAAA;AAED;;;GAGG;AACH,kEAAkE;AAClE,MAAM,UAAU,YAAY,CAAC,CAAQ;IACnC,MAAM,IAAI,KAAK,CAAC,qCAAqC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;AAC3E,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAU,EAAU,EAAE;IACnD,MAAM,KAAK,GAAG,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9F,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1C,IAAI,GAAG,KAAK,iBAAiB;QAAE,OAAO,GAAG,GAAG,QAAQ,CAAA;IAEpD,IAAI,CAAC;QACH,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACrD,CAAC;IAAC,OAAO,CAAM,EAAE,CAAC;QAChB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAElB,OAAO,8BAA8B,GAAG,CAAC,CAAA;IAC3C,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAU,EAA6B,EAAE,CAAC,OAAO,KAAK,EAAE,IAAI,KAAK,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestore/livestore",
-  "version": "0.0.24",
+  "version": "0.0.27",
   "type": "module",
   "exports": {
     ".": {
@@ -28,8 +28,8 @@
       "default": "./dist/effect/index.js"
     },
     "./util": {
-      "types": "./dist/util.d.ts",
-      "default": "./dist/util.js"
+      "types": "./dist/utils/util.d.ts",
+      "default": "./dist/utils/util.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -42,44 +42,47 @@
         "./dist/effect/index.d.ts"
       ],
       "util": [
-        "./dist/util.d.ts"
+        "./dist/utils/util.d.ts"
       ]
     }
   },
   "dependencies": {
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@opentelemetry/api": "^1.6.0",
+    "@opentelemetry/api": "^1.7.0",
     "comlink": "^4.4.1",
-    "graphql": "^16.8.1",
     "lodash-es": "^4.17.21",
     "sqlite-esm": "3.42.0-build6",
     "uuid": "^9.0.1",
-    "@livestore/utils": "0.0.24",
-    "effect-db-schema": "0.0.24"
+    "@livestore/utils": "0.0.27",
+    "effect-db-schema": "0.0.27"
   },
   "devDependencies": {
-    "@tauri-apps/api": "^1.5.0",
-    "@opentelemetry/sdk-trace-base": "1.17.1",
-    "@testing-library/react": "^14.0.0",
-    "@types/lodash-es": "^4.17.9",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@types/uuid": "^9.0.5",
-    "jsdom": "^22.1.0",
+    "@opentelemetry/sdk-trace-base": "1.18.1",
+    "@tauri-apps/api": "^1.5.1",
+    "@testing-library/react": "^14.1.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@types/uuid": "^9.0.7",
+    "jsdom": "^23.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "5.2.2",
-    "vite": "4.4.11",
+    "typescript": "5.3.2",
+    "vite": "5.0.4",
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "@tauri-apps/api": "^1.4.0",
+    "graphql": "^16.8.1",
     "react": "^18",
     "react-dom": "^18"
   },
   "peerDependenciesMeta": {
     "@tauri-apps/api": {
       "optional": true
+    },
+    "graphql": {
+      "optional": true
     }
   },
   "publishConfig": {

package/src/QueryCache.ts

@@ -1,5 +1,5 @@
-import BoundMap, { BoundSet } from './bounded-collections.js'
-import type { Bindable } from './util.js'
+import BoundMap, { BoundSet } from './utils/bounded-collections.js'
+import type { Bindable } from './utils/util.js'
 
 type Opaque<BaseType, BrandType = unknown> = BaseType & {
   readonly [Symbols.base]: BaseType
@@ -38,7 +38,7 @@ export default class QueryCache {
     return this.#entries.get(key)
   }
 
-  set = (queriedTables: ReadonlyArray<string>, key: CacheKey, results: any) => {
+  set = (queriedTables: Iterable<string>, key: CacheKey, results: any) => {
     this.#entries.set(key, results)
     for (const table of queriedTables) {
       let keys = this.#dependencies.get(table)
@@ -67,7 +67,7 @@ export default class QueryCache {
   // b. incrementally updating the view on insert by the EventImporter
   //
   // We'll not try to tackle any generalized approach until we have a proof of concept working.
-  invalidate = (queriedTables: string[]) => {
+  invalidate = (queriedTables: Iterable<string>) => {
     for (const table of queriedTables) {
       const keys = this.#dependencies.get(table)
       if (keys == null) {

package/src/__tests__/react/fixture.tsx

@@ -2,14 +2,14 @@ import type * as otel from '@opentelemetry/api'
 import React from 'react'
 import initSqlite3Wasm from 'sqlite-esm'
 
-import * as LiveStore from '../../index.js'
-import { sql } from '../../index.js'
+import type { LiveStoreContext } from '../../index.js'
+import { createStore, DbSchema, makeSchema, sql } from '../../index.js'
 import * as LiveStoreReact from '../../react/index.js'
 import { InMemoryStorage } from '../../storage/in-memory/index.js'
 
 export type Todo = {
   id: string
-  text: string | null
+  text: string
   completed: boolean
 }
 
@@ -20,17 +20,17 @@ export type AppState = {
   filter: Filter
 }
 
-export const schema = LiveStore.makeSchema({
+export const schema = makeSchema({
   tables: {
-    todos: LiveStore.DbSchema.table('todos', {
-      id: LiveStore.DbSchema.text({ primaryKey: true }),
-      text: LiveStore.DbSchema.text({ default: '', nullable: false }),
-      completed: LiveStore.DbSchema.boolean({ default: false, nullable: false }),
+    todos: DbSchema.table('todos', {
+      id: DbSchema.text({ primaryKey: true }),
+      text: DbSchema.text({ default: '', nullable: false }),
+      completed: DbSchema.boolean({ default: false, nullable: false }),
     }),
-    app: LiveStore.DbSchema.table('app', {
-      id: LiveStore.DbSchema.text({ primaryKey: true }),
-      newTodoText: LiveStore.DbSchema.text({ default: '', nullable: true }),
-      filter: LiveStore.DbSchema.text({ default: 'all', nullable: false }),
+    app: DbSchema.table('app', {
+      id: DbSchema.text({ primaryKey: true }),
+      newTodoText: DbSchema.text({ default: '', nullable: true }),
+      filter: DbSchema.text({ default: 'all', nullable: false }),
     }),
   },
   actions: {
@@ -59,8 +59,8 @@ export const makeTodoMvc = async ({
   otelTracer?: otel.Tracer
   otelContext?: otel.Context
 } = {}) => {
-  const AppSchema = LiveStore.defineComponentStateSchema('UserInfo', {
-    username: LiveStore.DbSchema.text({ default: '' }),
+  const AppComponentSchema = DbSchema.table('UserInfo', {
+    username: DbSchema.text({ default: '' }),
   })
 
   const sqlite3 = await initSqlite3Wasm({
@@ -68,7 +68,7 @@ export const makeTodoMvc = async ({
     printErr: (message) => console.error(`[livestore sqlite] ${message}`),
   })
 
-  const store = await LiveStore.createStore({
+  const store = await createStore({
     schema,
     loadStorage: () => InMemoryStorage.load(),
     boot: (db) => db.execute(sql`INSERT OR IGNORE INTO app (id, newTodoText, filter) VALUES ('static', '', 'all');`),
@@ -77,11 +77,11 @@ export const makeTodoMvc = async ({
     otelRootSpanContext: otelContext,
   })
 
-  const storeContext: LiveStore.LiveStoreContext = { store }
+  const storeContext: LiveStoreContext = { store }
 
   const wrapper = ({ children }: any) => (
     <LiveStoreReact.LiveStoreContext.Provider value={storeContext}>{children}</LiveStoreReact.LiveStoreContext.Provider>
   )
 
-  return { wrapper, AppSchema, store }
+  return { wrapper, AppComponentSchema, store }
 }

package/src/__tests__/react/useQuery.test.tsx

@@ -1,29 +1,26 @@
 import { act, renderHook } from '@testing-library/react'
+import React from 'react'
 import { describe, expect, it } from 'vitest'
 
 import * as LiveStoreReact from '../../react/index.js'
-import { LiveStoreSQLQuery } from '../../reactiveQueries/sql.js'
-import { sql } from '../../util.js'
+import { querySQL } from '../../reactiveQueries/sql.js'
+import { sql } from '../../utils/util.js'
 import type { Todo } from './fixture.js'
 import { makeTodoMvc } from './fixture.js'
 
-const query = new LiveStoreSQLQuery<Todo>({
-  label: 'todo',
-  genQueryString: `select * from todos`,
-  // queriedTables: ['todos'],
-})
-
 describe('useQuery', () => {
   it('simple', async () => {
     let renderCount = 0
 
     const { wrapper, store } = await makeTodoMvc()
 
+    const allTodos$ = querySQL<Todo>(`select * from todos`)
+
     const { result } = renderHook(
       () => {
         renderCount++
 
-        return LiveStoreReact.useQuery(query)
+        return LiveStoreReact.useQuery(allTodos$)
       },
       { wrapper },
     )
@@ -32,9 +29,8 @@ describe('useQuery', () => {
     expect(renderCount).toBe(1)
 
     act(() =>
-      store.applyEvent('RawSql', {
-        sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
-        bindValues: {},
+      store.applyEvent('livestore.RawSql', {
+        sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
         writeTables: ['todos'],
       }),
     )
@@ -43,6 +39,52 @@ describe('useQuery', () => {
     expect(result.current[0]!.text).toBe('buy milk')
     expect(renderCount).toBe(2)
   })
-})
 
-// TODO write tests that use the same query in multiple components at the same time with different bind values
+  it('same `useQuery` hook invoked with different queries', async () => {
+    let renderCount = 0
+
+    const { wrapper, store } = await makeTodoMvc()
+
+    const todo1$ = querySQL<Todo>(`select * from todos where id = 't1'`, { label: 'libraryTracksView1' })
+    const todo2$ = querySQL<Todo>(`select * from todos where id = 't2'`, { label: 'libraryTracksView2' })
+
+    store.applyEvent('livestore.RawSql', {
+      sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
+      writeTables: ['todos'],
+    })
+
+    store.applyEvent('livestore.RawSql', {
+      sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
+      writeTables: ['todos'],
+    })
+
+    const { result, rerender } = renderHook(
+      (todoId: string) => {
+        renderCount++
+
+        const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId])
+
+        return LiveStoreReact.useQuery(query$)[0]!.text
+      },
+      { wrapper, initialProps: 't1' },
+    )
+
+    expect(result.current).toBe('buy milk')
+    expect(renderCount).toBe(1)
+
+    act(() =>
+      store.applyEvent('livestore.RawSql', {
+        sql: sql`UPDATE todos SET text = 'buy soy milk' WHERE id = 't1'`,
+        writeTables: ['todos'],
+      }),
+    )
+
+    expect(result.current).toBe('buy soy milk')
+    expect(renderCount).toBe(2)
+
+    rerender('t2')
+
+    expect(result.current).toBe('buy eggs')
+    expect(renderCount).toBe(3)
+  })
+})

package/src/__tests__/react/useRow.test.tsx

@@ -0,0 +1,205 @@
+import { act, render, renderHook } from '@testing-library/react'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import * as LiveStore from '../../index.js'
+import * as LiveStoreReact from '../../react/index.js'
+import type { Todo } from './fixture.js'
+import { makeTodoMvc } from './fixture.js'
+
+describe('useRow', () => {
+  it('should update the data based on component key', async () => {
+    let renderCount = 0
+
+    const { wrapper, AppComponentSchema, store } = await makeTodoMvc()
+
+    const { result, rerender } = renderHook(
+      (userId: string) => {
+        renderCount++
+
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        return { state, setState }
+      },
+      { wrapper, initialProps: 'u1' },
+    )
+
+    expect(result.current.state.id).toBe('u1')
+    expect(result.current.state.username).toBe('')
+    expect(renderCount).toBe(1)
+
+    act(() => {
+      void store.execute(LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2');`)
+    })
+
+    rerender('u2')
+
+    expect(result.current.state.id).toBe('u2')
+    expect(result.current.state.username).toBe('username_u2')
+    expect(renderCount).toBe(2)
+  })
+
+  it('should update the data reactively - via setState', async () => {
+    let renderCount = 0
+
+    const { wrapper, AppComponentSchema } = await makeTodoMvc()
+
+    const { result } = renderHook(
+      (userId: string) => {
+        renderCount++
+
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        return { state, setState }
+      },
+      { wrapper, initialProps: 'u1' },
+    )
+
+    expect(result.current.state.id).toBe('u1')
+    expect(result.current.state.username).toBe('')
+    expect(renderCount).toBe(1)
+
+    act(() => result.current.setState.username('username_u1_hello'))
+
+    expect(result.current.state.id).toBe('u1')
+    expect(result.current.state.username).toBe('username_u1_hello')
+    expect(renderCount).toBe(2)
+  })
+
+  it('should update the data reactively - via raw store update', async () => {
+    let renderCount = 0
+
+    const { wrapper, AppComponentSchema, store } = await makeTodoMvc()
+
+    const { result } = renderHook(
+      (userId: string) => {
+        renderCount++
+
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        return { state, setState }
+      },
+      { wrapper, initialProps: 'u1' },
+    )
+
+    expect(result.current.state.id).toBe('u1')
+    expect(result.current.state.username).toBe('')
+    expect(renderCount).toBe(1)
+
+    act(() => result.current.setState.username('username_u1_hello'))
+
+    act(() => {
+      void store.execute(LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`)
+    })
+
+    expect(result.current.state.id).toBe('u1')
+    expect(result.current.state.username).toBe('username_u1_hello')
+    expect(renderCount).toBe(2)
+  })
+
+  it('should work for a larger app', async () => {
+    const allTodos$ = LiveStore.querySQL<Todo>(`select * from todos`, { label: 'allTodos' })
+
+    const { wrapper, store } = await makeTodoMvc()
+
+    const AppRouterSchema = LiveStore.DbSchema.table(
+      'AppRouter',
+      {
+        currentTaskId: LiveStore.DbSchema.text({ default: null, nullable: true }),
+      },
+      { isSingleton: true },
+    )
+
+    let appRouterRenderCount = 0
+    let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
+    const AppRouter: React.FC = () => {
+      appRouterRenderCount++
+
+      const [state, setState] = LiveStoreReact.useRow(AppRouterSchema)
+
+      globalSetState = setState
+
+      return (
+        <div>
+          <TasksList setTaskId={setState.currentTaskId} />
+          <div role="current-id">Current Task Id: {state.currentTaskId ?? '-'}</div>
+          {state.currentTaskId ? <TaskDetails id={state.currentTaskId} /> : <div>Click on a task to see details</div>}
+        </div>
+      )
+    }
+
+    const TasksList: React.FC<{ setTaskId: (_: string) => void }> = ({ setTaskId }) => {
+      const allTodos = LiveStoreReact.useQuery(allTodos$)
+
+      return (
+        <div>
+          {allTodos.map((_) => (
+            <div key={_.id} onClick={() => setTaskId(_.id)}>
+              {_.id}
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
+      const todo = LiveStoreReact.useTemporaryQuery(() =>
+        LiveStore.querySQL<Todo>(`select * from todos where id = '${id}' limit 1`).getFirstRow(),
+      )
+      return <div role="content">{JSON.stringify(todo)}</div>
+    }
+
+    const renderResult = render(<AppRouter />, { wrapper })
+
+    expect(appRouterRenderCount).toBe(1)
+
+    act(() =>
+      store.applyEvent('livestore.RawSql', {
+        sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
+        writeTables: ['todos'],
+      }),
+    )
+
+    expect(appRouterRenderCount).toBe(1)
+    expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
+
+    act(() => globalSetState!.currentTaskId('t1'))
+
+    expect(appRouterRenderCount).toBe(2)
+    expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(
+      '"{\\"id\\":\\"t1\\",\\"text\\":\\"buy milk\\",\\"completed\\":0}"',
+    )
+
+    expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"')
+
+    act(() =>
+      store.applyEvents([
+        {
+          eventType: 'livestore.RawSql',
+          args: {
+            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0);`,
+            writeTables: ['todos'],
+          },
+        },
+        {
+          eventType: 'livestore.UpdateComponentState',
+          args: {
+            id: 'singleton',
+            columnNames: ['currentTaskId'],
+            tableName: AppRouterSchema.schema.name,
+            bindValues: { currentTaskId: 't2' },
+          },
+        },
+        {
+          eventType: 'livestore.RawSql',
+          args: {
+            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t3', 'buy bread', 0);`,
+            writeTables: ['todos'],
+          },
+        },
+      ]),
+    )
+
+    expect(appRouterRenderCount).toBe(3)
+    expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
+  })
+})
+
+// TODO add otel tests

package/src/__tests__/react/utils/stack-info.test.ts

@@ -43,3 +43,37 @@ Error
     }
   `)
 })
+
+it('Tracklist_ stacktrace', async () => {
+  const stackTrace = `\
+stack Error
+    at https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1701368568351:19:23
+    at mountMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:12817:27)
+    at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:13141:24)
+    at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-7P4K3U7O.js?v=86daed82:1094:29)
+    at useQueryRef (https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1701368568351:16:29)
+    at Module.useQuery (https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1701368568351:13:36)
+    at Tracklist_ (https://localhost:8081/src/components/Tracklist/Tracklist.tsx?t=1701368568351:148:44)
+    at renderWithHooks (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:12171:26)
+    at mountIndeterminateComponent (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:14921:21)
+    at beginWork (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:15902:22)
+`
+
+  const stackInfo = extractStackInfoFromStackTrace(stackTrace)
+  // Replacing file paths for snapshot testing as they are not stable
+  stackInfo.frames.forEach((_) => (_.filePath = '__REPLACED_FOR_SNAPSHOT__'))
+  expect(stackInfo).toMatchInlineSnapshot(`
+    {
+      "frames": [
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "Tracklist_",
+        },
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "useQuery",
+        },
+      ],
+    }
+  `)
+})