@livestore/livestore 0.0.24 → 0.0.25

package/src/__tests__/react/fixture.tsx

@@ -9,7 +9,7 @@ import { InMemoryStorage } from '../../storage/in-memory/index.js'
 
 export type Todo = {
   id: string
-  text: string | null
+  text: string
   completed: boolean
 }
 
@@ -59,7 +59,7 @@ export const makeTodoMvc = async ({
   otelTracer?: otel.Tracer
   otelContext?: otel.Context
 } = {}) => {
-  const AppSchema = LiveStore.defineComponentStateSchema('UserInfo', {
+  const AppComponentSchema = LiveStore.defineComponentStateSchema('UserInfo', {
     username: LiveStore.DbSchema.text({ default: '' }),
   })
 
@@ -83,5 +83,5 @@ export const makeTodoMvc = async ({
     <LiveStoreReact.LiveStoreContext.Provider value={storeContext}>{children}</LiveStoreReact.LiveStoreContext.Provider>
   )
 
-  return { wrapper, AppSchema, store }
+  return { wrapper, AppComponentSchema, store }
 }

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

@@ -1,22 +1,24 @@
-import { act, renderHook } from '@testing-library/react'
+import { act, render, renderHook } from '@testing-library/react'
+import React from 'react'
 import { describe, expect, it } from 'vitest'
 
-import { sql } from '../../index.js'
+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('useComponentState', () => {
   it('should update the data based on component key', async () => {
     let renderCount = 0
 
-    const { wrapper, AppSchema, store } = await makeTodoMvc()
+    const { wrapper, AppComponentSchema, store } = await makeTodoMvc()
 
     const { result, rerender } = renderHook(
       (userId: string) => {
         renderCount++
 
         return LiveStoreReact.useComponentState({
-          schema: AppSchema,
+          schema: AppComponentSchema,
           componentKey: { name: 'UserInfo', id: userId },
         })
       },
@@ -28,7 +30,7 @@ describe('useComponentState', () => {
     expect(renderCount).toBe(1)
 
     act(() => {
-      void store.execute(sql`INSERT INTO components__UserInfo (id, username) VALUES ('u2', 'username_u2');`)
+      void store.execute(LiveStore.sql`INSERT INTO components__UserInfo (id, username) VALUES ('u2', 'username_u2');`)
     })
 
     rerender('u2')
@@ -41,14 +43,14 @@ describe('useComponentState', () => {
   it('should update the data reactively - via setState', async () => {
     let renderCount = 0
 
-    const { wrapper, AppSchema } = await makeTodoMvc()
+    const { wrapper, AppComponentSchema } = await makeTodoMvc()
 
     const { result } = renderHook(
       (userId: string) => {
         renderCount++
 
         return LiveStoreReact.useComponentState({
-          schema: AppSchema,
+          schema: AppComponentSchema,
           componentKey: { name: 'UserInfo', id: userId },
         })
       },
@@ -69,14 +71,14 @@ describe('useComponentState', () => {
   it('should update the data reactively - via raw store update', async () => {
     let renderCount = 0
 
-    const { wrapper, AppSchema, store } = await makeTodoMvc()
+    const { wrapper, AppComponentSchema, store } = await makeTodoMvc()
 
     const { result } = renderHook(
       (userId: string) => {
         renderCount++
 
         return LiveStoreReact.useComponentState({
-          schema: AppSchema,
+          schema: AppComponentSchema,
           componentKey: { name: 'UserInfo', id: userId },
         })
       },
@@ -90,11 +92,115 @@ describe('useComponentState', () => {
     act(() => result.current.setState.username('username_u1_hello'))
 
     act(() => {
-      void store.execute(sql`UPDATE components__UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`)
+      void store.execute(LiveStore.sql`UPDATE components__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.defineComponentStateSchema('AppRouter', {
+      currentTaskId: LiveStore.DbSchema.text({ default: null, nullable: true }),
+    })
+
+    const componentKey = { name: 'AppRouter', id: 'static' }
+
+    let appRouterRenderCount = 0
+    let globalSetState: LiveStoreReact.Setters<LiveStoreReact.GetStateTypeEncoded<typeof AppRouterSchema>> | undefined
+    const AppRouter: React.FC = () => {
+      appRouterRenderCount++
+
+      const { state, setState } = LiveStoreReact.useComponentState({ schema: AppRouterSchema, componentKey })
+
+      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('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: 'RawSql',
+          args: {
+            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0);`,
+            writeTables: ['todos'],
+          },
+        },
+        {
+          eventType: 'updateComponentState',
+          args: {
+            componentKey: { _tag: 'custom', componentName: 'AppRouter', id: 'static' },
+            columnNames: ['currentTaskId'],
+            currentTaskId: 't2',
+          },
+        },
+        {
+          eventType: '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"')
+  })
 })

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 { querySQL } from '../../reactiveQueries/sql.js'
 import { sql } from '../../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 },
     )
@@ -33,8 +30,7 @@ describe('useQuery', () => {
 
     act(() =>
       store.applyEvent('RawSql', {
-        sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
-        bindValues: {},
+        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('RawSql', {
+      sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
+      writeTables: ['todos'],
+    })
+
+    store.applyEvent('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('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__/reactive.test.ts

@@ -159,6 +159,77 @@ describe('a trivial graph', () => {
       graph.setRef(a, 2)
       // expect(numberOfCallsToC).toBe(2) // TODO comp caching
     })
+
+    describe('skip refresh', () => {
+      it(`defers effect execution until manual run`, () => {
+        const { graph, a, c, d, numberOfRunsForC } = makeGraph()
+
+        // using here both to track number oe effect runs and to "update the effect behavior"
+        let numberOfEffectRuns = 0
+        const effect = graph.makeEffect((get) => {
+          expect(get(c)).toBe(numberOfEffectRuns === 0 ? 3 : 4)
+          numberOfEffectRuns++
+        })
+
+        effect.doEffect()
+
+        expect(numberOfEffectRuns).toBe(1)
+        expect(numberOfRunsForC.runs).toBe(1)
+
+        graph.setRef(a, 2, { skipRefresh: true })
+
+        expect(numberOfEffectRuns).toBe(1)
+        expect(numberOfRunsForC.runs).toBe(1)
+
+        // Even setting a unrelated ref should not trigger a refresh
+        graph.setRef(d, 0)
+
+        expect(numberOfEffectRuns).toBe(1)
+        expect(numberOfRunsForC.runs).toBe(1)
+
+        graph.runDeferredEffects()
+
+        expect(numberOfEffectRuns).toBe(2)
+        expect(numberOfRunsForC.runs).toBe(2)
+      })
+
+      it(`doesn't run deferred effects which have been destroyed already`, () => {
+        const { graph, a, c, numberOfRunsForC } = makeGraph()
+
+        let numberOfEffect1Runs = 0
+        const effect1 = graph.makeEffect((get) => {
+          expect(get(c)).toBe(numberOfEffect1Runs === 0 ? 3 : 4)
+          numberOfEffect1Runs++
+        })
+
+        let numberOfEffect2Runs = 0
+        const effect2 = graph.makeEffect((get) => {
+          expect(get(c)).toBe(numberOfEffect2Runs === 0 ? 3 : 4)
+          numberOfEffect2Runs++
+        })
+
+        effect1.doEffect()
+        effect2.doEffect()
+
+        expect(numberOfEffect1Runs).toBe(1)
+        expect(numberOfEffect2Runs).toBe(1)
+        expect(numberOfRunsForC.runs).toBe(1)
+
+        graph.setRef(a, 2, { skipRefresh: true })
+
+        expect(numberOfEffect1Runs).toBe(1)
+        expect(numberOfEffect2Runs).toBe(1)
+        expect(numberOfRunsForC.runs).toBe(1)
+
+        graph.destroy(effect1)
+
+        graph.runDeferredEffects()
+
+        expect(numberOfEffect1Runs).toBe(1)
+        expect(numberOfEffect2Runs).toBe(2)
+        expect(numberOfRunsForC.runs).toBe(2)
+      })
+    })
   })
 })
 

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

@@ -30,12 +30,11 @@ describe('otel', () => {
   it('otel', async () => {
     const { store, exporter, span } = await makeQuery()
 
-    const query = querySQL(`select * from todos`, { queriedTables: ['todos'] })
+    const query = querySQL(`select * from todos`, { queriedTables: new Set(['todos']) })
     expect(query.run()).toMatchInlineSnapshot('[]')
 
     store.applyEvent('RawSql', {
       sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
-      bindValues: {},
       writeTables: ['todos'],
     })
 
@@ -96,7 +95,6 @@ describe('otel', () => {
                       "livestore.actionType": "RawSql",
                       "livestore.args": "{
         \\"sql\\": \\"INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);\\",
-        \\"bindValues\\": {},
         \\"writeTables\\": [
           \\"todos\\"
         ]
@@ -165,10 +163,7 @@ describe('otel', () => {
     const defaultTodo = { id: '', text: '', completed: 0 }
 
     const filter = queryJS(() => `where completed = 0`, { label: 'where-filter' })
-    const query = querySQL((get) => `select * from todos ${get(filter)}`, {
-      // queriedTables: ['todos'],
-      label: 'all todos',
-    }).getFirstRow({
+    const query = querySQL((get) => `select * from todos ${get(filter)}`, { label: 'all todos' }).getFirstRow({
       defaultValue: defaultTodo,
     })
 
@@ -182,7 +177,6 @@ describe('otel', () => {
 
     store.applyEvent('RawSql', {
       sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
-      bindValues: {},
       writeTables: ['todos'],
     })
 
@@ -241,7 +235,6 @@ describe('otel', () => {
                       "livestore.actionType": "RawSql",
                       "livestore.args": "{
         \\"sql\\": \\"INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);\\",
-        \\"bindValues\\": {},
         \\"writeTables\\": [
           \\"todos\\"
         ]

package/src/effect/LiveStore.ts

@@ -78,7 +78,7 @@ export const makeLiveStoreContext = <GraphQLContext extends BaseGraphQLContext>(
 
       const otelRootSpanContext = otel.context.active()
 
-      const otelTracer = yield* $(OtelTracer.OtelTracer)
+      const otelTracer = yield* $(OtelTracer.Tracer)
 
       const graphQLOptions = yield* $(
         graphQLOptions_

package/src/inMemoryDatabase.ts

@@ -25,7 +25,7 @@ export type SlowQueryInfo = [
   bindValues: PreparedBindValues | undefined,
   durationMs: number,
   rowsCount: number | undefined,
-  queriedTables: ReadonlyArray<string>,
+  queriedTables: Set<string>,
   startTimePerfNow: DOMHighResTimeStamp,
 ]
 
@@ -39,7 +39,7 @@ export const emptyDebugInfo = (): DebugInfo => ({
 export class InMemoryDatabase {
   // TODO: how many unique active statements are expected?
   private cachedStmts = new BoundMap<string, Sqlite.PreparedStatement>(200)
-  private tablesUsedCache = new BoundMap<string, string[]>(200)
+  private tablesUsedCache = new BoundMap<string, Set<string>>(200)
   private resultCache = new QueryCache()
   private tablesUsedStmt
   public debugInfo: DebugInfo = emptyDebugInfo()
@@ -119,17 +119,17 @@ export class InMemoryDatabase {
       return cached
     }
     const stmt = this.tablesUsedStmt
-    const tablesUsed = []
+    const tablesUsed = new Set<string>()
     try {
       stmt.bind([query])
       while (stmt.step()) {
-        tablesUsed.push(stmt.get(0))
+        tablesUsed.add(stmt.get(0))
       }
     } finally {
       stmt.reset()
     }
-    this.tablesUsedCache.set(query, tablesUsed as string[])
-    return tablesUsed as string[]
+    this.tablesUsedCache.set(query, tablesUsed)
+    return tablesUsed
   }
 
   execute(
@@ -192,7 +192,7 @@ export class InMemoryDatabase {
             bindValues,
             durationMs,
             undefined,
-            [],
+            new Set(),
             getStartTimeHighResFromSpan(span),
           ])
         }
@@ -205,7 +205,7 @@ export class InMemoryDatabase {
   select<T = any>(
     query: string,
     options?: {
-      queriedTables?: ReadonlyArray<string>
+      queriedTables?: Set<string>
       bindValues?: PreparedBindValues
       skipCache?: boolean
       otelContext?: otel.Context

package/src/index.ts

@@ -13,18 +13,10 @@ export {
 } from './schema.js'
 export { InMemoryDatabase, type DebugInfo, emptyDebugInfo } from './inMemoryDatabase.js'
 export type { Storage, StorageType, StorageInit } from './storage/index.js'
-export type {
-  GetAtom,
-  AtomDebugInfo,
-  RefreshDebugInfo,
-  RefreshReasonWithGenericReasons,
-  SerializedAtom,
-  SerializedEffect,
-  Atom,
-} from './reactive.js'
-export { type LiveStoreJSQuery, queryJS } from './reactiveQueries/js.js'
-export { type LiveStoreSQLQuery, querySQL } from './reactiveQueries/sql.js'
-export { type LiveStoreGraphQLQuery, queryGraphQL } from './reactiveQueries/graphql.js'
+export type { GetAtom, AtomDebugInfo, RefreshDebugInfo, SerializedAtom, Atom } from './reactive.js'
+export { LiveStoreJSQuery, queryJS } from './reactiveQueries/js.js'
+export { LiveStoreSQLQuery, querySQL } from './reactiveQueries/sql.js'
+export { LiveStoreGraphQLQuery, queryGraphQL } from './reactiveQueries/graphql.js'
 export { type GetAtomResult } from './reactiveQueries/base-class.js'
 export { dbGraph } from './reactiveQueries/graph.js'
 

package/src/migrations.ts

@@ -118,8 +118,8 @@ const toSqliteColumnSpec = (column: SqliteAst.Column) => {
     column.default === undefined
       ? ''
       : columnType === 'text'
-      ? `default '${column.default}'`
-      : `default ${column.default}`
+        ? `default '${column.default}'`
+        : `default ${column.default}`
 
   return `${column.name} ${columnType} ${nullable} ${defaultValue}`
 }