@livestore/livestore 0.0.25 → 0.0.27

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.25",
+  "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,7 +42,7 @@
         "./dist/effect/index.d.ts"
       ],
       "util": [
-        "./dist/util.d.ts"
+        "./dist/utils/util.d.ts"
       ]
     }
   },
@@ -53,22 +53,22 @@
     "lodash-es": "^4.17.21",
     "sqlite-esm": "3.42.0-build6",
     "uuid": "^9.0.1",
-    "@livestore/utils": "0.0.25",
-    "effect-db-schema": "0.0.25"
+    "@livestore/utils": "0.0.27",
+    "effect-db-schema": "0.0.27"
   },
   "devDependencies": {
     "@opentelemetry/sdk-trace-base": "1.18.1",
     "@tauri-apps/api": "^1.5.1",
     "@testing-library/react": "^14.1.2",
-    "@types/lodash-es": "^4.17.11",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
     "@types/uuid": "^9.0.7",
-    "jsdom": "^22.1.0",
+    "jsdom": "^23.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "5.2.2",
-    "vite": "5.0.0",
+    "typescript": "5.3.2",
+    "vite": "5.0.4",
     "vitest": "^0.34.6"
   },
   "peerDependencies": {

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

package/src/__tests__/react/fixture.tsx

@@ -2,8 +2,8 @@ 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'
 
@@ -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 AppComponentSchema = 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,7 +77,7 @@ 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>

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

@@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest'
 
 import * as LiveStoreReact from '../../react/index.js'
 import { querySQL } from '../../reactiveQueries/sql.js'
-import { sql } from '../../util.js'
+import { sql } from '../../utils/util.js'
 import type { Todo } from './fixture.js'
 import { makeTodoMvc } from './fixture.js'
 
@@ -29,7 +29,7 @@ describe('useQuery', () => {
     expect(renderCount).toBe(1)
 
     act(() =>
-      store.applyEvent('RawSql', {
+      store.applyEvent('livestore.RawSql', {
         sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
         writeTables: ['todos'],
       }),
@@ -48,12 +48,12 @@ describe('useQuery', () => {
     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('RawSql', {
+    store.applyEvent('livestore.RawSql', {
       sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
       writeTables: ['todos'],
     })
 
-    store.applyEvent('RawSql', {
+    store.applyEvent('livestore.RawSql', {
       sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
       writeTables: ['todos'],
     })
@@ -73,7 +73,7 @@ describe('useQuery', () => {
     expect(renderCount).toBe(1)
 
     act(() =>
-      store.applyEvent('RawSql', {
+      store.applyEvent('livestore.RawSql', {
         sql: sql`UPDATE todos SET text = 'buy soy milk' WHERE id = 't1'`,
         writeTables: ['todos'],
       }),

package/src/__tests__/react/{useComponentState.test.tsx → useRow.test.tsx}

@@ -7,7 +7,7 @@ import * as LiveStoreReact from '../../react/index.js'
 import type { Todo } from './fixture.js'
 import { makeTodoMvc } from './fixture.js'
 
-describe('useComponentState', () => {
+describe('useRow', () => {
   it('should update the data based on component key', async () => {
     let renderCount = 0
 
@@ -17,10 +17,8 @@ describe('useComponentState', () => {
       (userId: string) => {
         renderCount++
 
-        return LiveStoreReact.useComponentState({
-          schema: AppComponentSchema,
-          componentKey: { name: 'UserInfo', id: userId },
-        })
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
     )
@@ -30,7 +28,7 @@ describe('useComponentState', () => {
     expect(renderCount).toBe(1)
 
     act(() => {
-      void store.execute(LiveStore.sql`INSERT INTO components__UserInfo (id, username) VALUES ('u2', 'username_u2');`)
+      void store.execute(LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2');`)
     })
 
     rerender('u2')
@@ -49,10 +47,8 @@ describe('useComponentState', () => {
       (userId: string) => {
         renderCount++
 
-        return LiveStoreReact.useComponentState({
-          schema: AppComponentSchema,
-          componentKey: { name: 'UserInfo', id: userId },
-        })
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
     )
@@ -77,10 +73,8 @@ describe('useComponentState', () => {
       (userId: string) => {
         renderCount++
 
-        return LiveStoreReact.useComponentState({
-          schema: AppComponentSchema,
-          componentKey: { name: 'UserInfo', id: userId },
-        })
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
     )
@@ -92,7 +86,7 @@ describe('useComponentState', () => {
     act(() => result.current.setState.username('username_u1_hello'))
 
     act(() => {
-      void store.execute(LiveStore.sql`UPDATE components__UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`)
+      void store.execute(LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`)
     })
 
     expect(result.current.state.id).toBe('u1')
@@ -105,18 +99,20 @@ describe('useComponentState', () => {
 
     const { wrapper, store } = await makeTodoMvc()
 
-    const AppRouterSchema = LiveStore.defineComponentStateSchema('AppRouter', {
-      currentTaskId: LiveStore.DbSchema.text({ default: null, nullable: true }),
-    })
-
-    const componentKey = { name: 'AppRouter', id: 'static' }
+    const AppRouterSchema = LiveStore.DbSchema.table(
+      'AppRouter',
+      {
+        currentTaskId: LiveStore.DbSchema.text({ default: null, nullable: true }),
+      },
+      { isSingleton: true },
+    )
 
     let appRouterRenderCount = 0
-    let globalSetState: LiveStoreReact.Setters<LiveStoreReact.GetStateTypeEncoded<typeof AppRouterSchema>> | undefined
+    let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
     const AppRouter: React.FC = () => {
       appRouterRenderCount++
 
-      const { state, setState } = LiveStoreReact.useComponentState({ schema: AppRouterSchema, componentKey })
+      const [state, setState] = LiveStoreReact.useRow(AppRouterSchema)
 
       globalSetState = setState
 
@@ -155,7 +151,7 @@ describe('useComponentState', () => {
     expect(appRouterRenderCount).toBe(1)
 
     act(() =>
-      store.applyEvent('RawSql', {
+      store.applyEvent('livestore.RawSql', {
         sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
         writeTables: ['todos'],
       }),
@@ -176,22 +172,23 @@ describe('useComponentState', () => {
     act(() =>
       store.applyEvents([
         {
-          eventType: 'RawSql',
+          eventType: 'livestore.RawSql',
           args: {
             sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0);`,
             writeTables: ['todos'],
           },
         },
         {
-          eventType: 'updateComponentState',
+          eventType: 'livestore.UpdateComponentState',
           args: {
-            componentKey: { _tag: 'custom', componentName: 'AppRouter', id: 'static' },
+            id: 'singleton',
             columnNames: ['currentTaskId'],
-            currentTaskId: 't2',
+            tableName: AppRouterSchema.schema.name,
+            bindValues: { currentTaskId: 't2' },
           },
         },
         {
-          eventType: 'RawSql',
+          eventType: 'livestore.RawSql',
           args: {
             sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t3', 'buy bread', 0);`,
             writeTables: ['todos'],
@@ -204,3 +201,5 @@ describe('useComponentState', () => {
     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",
+        },
+      ],
+    }
+  `)
+})

package/src/__tests__/reactiveQueries/sql.test.ts

@@ -33,7 +33,7 @@ describe('otel', () => {
     const query = querySQL(`select * from todos`, { queriedTables: new Set(['todos']) })
     expect(query.run()).toMatchInlineSnapshot('[]')
 
-    store.applyEvent('RawSql', {
+    store.applyEvent('livestore.RawSql', {
       sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
       writeTables: ['todos'],
     })
@@ -92,7 +92,7 @@ describe('otel', () => {
                   {
                     "_name": "LiveStore:applyEventWithoutRefresh",
                     "attributes": {
-                      "livestore.actionType": "RawSql",
+                      "livestore.actionType": "livestore.RawSql",
                       "livestore.args": "{
         \\"sql\\": \\"INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);\\",
         \\"writeTables\\": [
@@ -175,7 +175,7 @@ describe('otel', () => {
       }
     `)
 
-    store.applyEvent('RawSql', {
+    store.applyEvent('livestore.RawSql', {
       sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
       writeTables: ['todos'],
     })
@@ -232,7 +232,7 @@ describe('otel', () => {
                   {
                     "_name": "LiveStore:applyEventWithoutRefresh",
                     "attributes": {
-                      "livestore.actionType": "RawSql",
+                      "livestore.actionType": "livestore.RawSql",
                       "livestore.args": "{
         \\"sql\\": \\"INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);\\",
         \\"writeTables\\": [

package/src/effect/LiveStore.ts

@@ -5,7 +5,7 @@ import type { GraphQLSchema } from 'graphql'
 import initSqlite3Wasm from 'sqlite-esm'
 
 import type { InMemoryDatabase } from '../inMemoryDatabase.js'
-import type { Schema } from '../schema.js'
+import type { LiveStoreSchema } from '../schema/index.js'
 import type { StorageInit } from '../storage/index.js'
 import type { BaseGraphQLContext, GraphQLOptions, LiveStoreQuery, Store } from '../store.js'
 import { createStore } from '../store.js'
@@ -25,7 +25,7 @@ export type LiveStoreContext = {
 export type QueryDefinition = (store: Store) => LiveStoreQuery
 
 export type LiveStoreCreateStoreOptions<GraphQLContext extends BaseGraphQLContext> = {
-  schema: Schema
+  schema: LiveStoreSchema
   loadStorage: () => StorageInit | Promise<StorageInit>
   graphQLOptions?: GraphQLOptions<GraphQLContext>
   otelTracer?: otel.Tracer
@@ -43,7 +43,7 @@ export const DeferredStoreContext = Context.Tag<DeferredStoreContext>(
 // export const DeferredStoreContext = Effect.cached(Effect.flatMap(StoreContext, (_) => Effect.succeed(_)))
 
 export type LiveStoreContextProps<GraphQLContext extends BaseGraphQLContext> = {
-  schema: Schema
+  schema: LiveStoreSchema
   loadStorage: () => StorageInit | Promise<StorageInit>
   graphQLOptions?: {
     schema: Effect.Effect<otel.Tracer, never, GraphQLSchema>
@@ -55,9 +55,9 @@ export type LiveStoreContextProps<GraphQLContext extends BaseGraphQLContext> = {
 export const LiveStoreContextLayer = <GraphQLContext extends BaseGraphQLContext>(
   props: LiveStoreContextProps<GraphQLContext>,
 ): Layer.Layer<otel.Tracer, never, LiveStoreContext> =>
-  Layer.provide(
-    LiveStoreContextDeferred,
-    Layer.scoped(LiveStoreContext, makeLiveStoreContext(props)).pipe(Layer.withSpan('LiveStore')),
+  Layer.scoped(LiveStoreContext, makeLiveStoreContext(props)).pipe(
+    Layer.withSpan('LiveStore'),
+    Layer.provide(LiveStoreContextDeferred),
   )
 
 export const LiveStoreContextDeferred = Layer.effect(DeferredStoreContext, Deferred.make<never, LiveStoreContext>())

package/src/global-state.ts

@@ -0,0 +1,26 @@
+/**
+ *
+ * LiveStore currently relies on some global state in order to simplify the end-user API.
+ * This however also has the downside that LiveStore can't be used in multiple instances in the same app.
+ * It could possibly also lead to some other problems.
+ *
+ * We should find some better way to do this and ideally remove this global state.
+ *
+ * Another approach could be to use the global state by default but provide an additional way to let the user
+ * explicitly pass instances of state below into the LiveStore constructors.
+ *
+ */
+
+import ReactDOM from 'react-dom'
+
+import { ReactiveGraph } from './reactive.js'
+import type { DbContext } from './reactiveQueries/base-class.js'
+import type { TableDef } from './schema/table-def.js'
+import type { QueryDebugInfo, RefreshReason } from './store.js'
+
+export const dbGraph = new ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>({
+  // TODO also find a better way to only use this effects wrapper when used in a React app
+  effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
+})
+
+export const dynamicallyRegisteredTables: Map<string, TableDef> = new Map()

package/src/inMemoryDatabase.ts

@@ -4,12 +4,12 @@ import { shouldNeverHappen } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
 import type * as Sqlite from 'sqlite-esm'
 
-import BoundMap, { BoundArray } from './bounded-collections.js'
 // import { EVENTS_TABLE_NAME } from './events.js'
 import { sql } from './index.js'
-import { getDurationMsFromSpan, getStartTimeHighResFromSpan } from './otel.js'
 import QueryCache from './QueryCache.js'
-import type { Bindable, PreparedBindValues } from './util.js'
+import BoundMap, { BoundArray } from './utils/bounded-collections.js'
+import { getDurationMsFromSpan, getStartTimeHighResFromSpan } from './utils/otel.js'
+import type { Bindable, PreparedBindValues } from './utils/util.js'
 
 type DatabaseWithCAPI = Sqlite.Database & { capi: Sqlite.CAPI }
 
@@ -135,9 +135,11 @@ export class InMemoryDatabase {
   execute(
     query: string,
     bindValues?: PreparedBindValues,
-    writeTables?: string[],
+    writeTables?: ReadonlyArray<string>,
     options?: { hasNoEffects?: boolean; otelContext?: otel.Context },
   ): { durationMs: number } {
+    // console.debug('in-memory-db:execute', query, bindValues)
+
     return this.otelTracer.startActiveSpan(
       'livestore.in-memory-db:execute',
       // TODO truncate query string