@livestore/livestore 0.0.9 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestore/livestore",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -31,13 +31,13 @@
   },
   "dependencies": {
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@livestore/utils": "0.0.9",
+    "@livestore/utils": "workspace:*",
     "@opentelemetry/api": "^1.6.0",
     "comlink": "^4.4.1",
-    "graphql": "^16.8.0",
+    "graphql": "^16.8.1",
     "lodash-es": "^4.17.21",
     "sqlite-esm": "3.42.0-build6",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "@tauri-apps/api": "^1.4.0",
@@ -53,12 +53,12 @@
     "@tauri-apps/api": "^1.4.0",
     "@testing-library/react": "^14.0.0",
     "@types/lodash-es": "^4.17.9",
-    "@types/uuid": "^9.0.3",
+    "@types/uuid": "^9.0.4",
     "jsdom": "^22.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
     "vite": "4.4.9",
-    "vitest": "^0.34.3"
+    "vitest": "^0.34.6"
   }
-}
+}

package/src/__tests__/react/fixture.tsx

@@ -1,13 +1,10 @@
 import { mapObjectValues } from '@livestore/utils'
-import * as otel from '@opentelemetry/api'
 import React from 'react'
 
 import * as LiveStore from '../../index.js'
 import { sql } from '../../index.js'
 import * as LiveStoreReact from '../../react/index.js'
 
-const mockOtelCtx = otel.context.active()
-
 export type Todo = {
   id: string
   text: string | null
@@ -22,16 +19,7 @@ export type AppState = {
 }
 
 const appState: LiveStore.QueryDefinition = (store) =>
-  store
-    .querySQL<AppState>(
-      () => `select newTodoText, filter from app;`,
-      ['app'],
-      undefined,
-      undefined,
-      undefined,
-      mockOtelCtx,
-    )
-    .getFirstRow()
+  store.querySQL<AppState>(() => `select newTodoText, filter from app;`, { queriedTables: ['app'] }).getFirstRow()
 
 export const globalQueryDefs = {
   appState,

package/src/__tests__/reactive.test.ts

@@ -225,3 +225,42 @@ describe('a diamond shaped graph', () => {
     expect(dRuns.runs).toBe(2)
   })
 })
+
+// TODO handle `undefined` in the graph
+describe.todo('a trivial graph with undefined', () => {
+  const makeGraph = () => {
+    const graph = new ReactiveGraph({ otelTracer: makeNoopTracer() })
+    const a = graph.makeRef(undefined)
+    const b = graph.makeRef(2)
+    const numberOfRunsForC = { runs: 0 }
+    const c = graph.makeThunk(
+      (get) => {
+        numberOfRunsForC.runs++
+        return (get(a) ?? 0) + get(b)
+      },
+      undefined,
+      mockOtelCtx,
+    )
+    const d = graph.makeRef(3)
+    const e = graph.makeThunk((get) => get(c) + get(d), undefined, mockOtelCtx)
+
+    // a(1)   b(2)
+    //   \     /
+    //    \   /
+    //      c = a + b
+    //       \
+    //        \
+    // d(3)    \
+    //   \       \
+    //    \       \
+    //      e = c + d
+
+    return { graph, a, b, c, d, e, numberOfRunsForC }
+  }
+
+  it('has the right initial values', () => {
+    const { c, e } = makeGraph()
+    expect(c.result).toBe(3)
+    expect(e.result).toBe(6)
+  })
+})

package/src/inMemoryDatabase.ts

@@ -192,14 +192,14 @@ export class InMemoryDatabase {
       queriedTables?: string[]
       bindValues?: Bindable
       skipCache?: boolean
-      parentSpanContext?: otel.Context
+      otelContext?: otel.Context
     },
   ): ReadonlyArray<T> {
-    const { queriedTables, bindValues, skipCache = false, parentSpanContext } = options ?? {}
+    const { queriedTables, bindValues, skipCache = false, otelContext } = options ?? {}
     return this.otelTracer.startActiveSpan(
       'sql-in-memory-select',
       {},
-      parentSpanContext ?? this.otelRootSpanContext,
+      otelContext ?? this.otelRootSpanContext,
       (span) => {
         try {
           span.setAttribute('sql.query', query)
@@ -279,9 +279,9 @@ export class InMemoryDatabase {
   applyEvent(
     event: LiveStoreEvent,
     eventDefinition: ActionDefinition,
-    parentSpanContext: otel.Context,
+    otelContext: otel.Context,
   ): { durationMs: number } {
-    return this.otelTracer.startActiveSpan('livestore.in-memory-db:applyEvent', {}, parentSpanContext, (span) => {
+    return this.otelTracer.startActiveSpan('livestore.in-memory-db:applyEvent', {}, otelContext, (span) => {
       // TODO: in the future, we'll do more CRDT-style stuff here to decide whether to run effects of the event
 
       // NOTE: These two updates should happen transactionally;

package/src/react/useGraphQL.ts

@@ -20,7 +20,7 @@ export type UseLiveStoreComponentProps<TResult extends Record<string, any>, TVar
  * so we need to "cache" the fact that we've already started a span for this component.
  * The map entry is being removed again in the `React.useEffect` call below.
  */
-const spanAlreadyStartedCache = new Map<string, { span: otel.Span; otelCtx: otel.Context }>()
+const spanAlreadyStartedCache = new Map<string, { span: otel.Span; otelContext: otel.Context }>()
 
 // TODO 1) figure out a way to make `variables` optional if the query doesn't have any variables (probably requires positional args)
 // TODO 2) allow `.pipe` on the resulting query (possibly as a separate optional prop)
@@ -36,7 +36,7 @@ export const useGraphQL = <TResult extends Record<string, any>, TVariables exten
   const componentKeyLabel = React.useMemo(() => labelForKey(componentKey), [componentKey])
 
   // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
-  const { span, otelCtx } = React.useMemo(() => {
+  const { span, otelContext } = React.useMemo(() => {
     const existingSpan = spanAlreadyStartedCache.get(componentKeyLabel)
     if (existingSpan !== undefined) return existingSpan
 
@@ -46,11 +46,11 @@ export const useGraphQL = <TResult extends Record<string, any>, TVariables exten
       store.otel.queriesSpanContext,
     )
 
-    const otelCtx = otel.trace.setSpan(otel.context.active(), span)
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-    spanAlreadyStartedCache.set(componentKeyLabel, { span, otelCtx })
+    spanAlreadyStartedCache.set(componentKeyLabel, { span, otelContext })
 
-    return { span, otelCtx }
+    return { span, otelContext }
   }, [componentKeyLabel, store.otel.queriesSpanContext, store.otel.tracer])
 
   React.useEffect(
@@ -62,7 +62,7 @@ export const useGraphQL = <TResult extends Record<string, any>, TVariables exten
   )
 
   const makeLiveStoreQuery = React.useCallback(
-    () => store.queryGraphQL(query, () => variables ?? ({} as TVariables), { componentKey }, otelCtx),
+    () => store.queryGraphQL(query, () => variables ?? ({} as TVariables), { componentKey, otelContext }),
     // NOTE: we don't include the queries function passed in by the user here;
     // the reason is that we don't want to force them to memoize that function.
     // Instead, we just assume that the function always has the same contents.
@@ -100,7 +100,6 @@ export const useGraphQL = <TResult extends Record<string, any>, TVariables exten
     // This should probably be improved
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    otelCtx,
     makeLiveStoreQuery,
     // setQueryResults_,
     store,

package/src/react/useLiveStoreComponent.ts

@@ -14,6 +14,7 @@ import type { LiveStoreJSQuery } from '../reactiveQueries/js.js'
 import type { LiveStoreSQLQuery } from '../reactiveQueries/sql.js'
 import type { ComponentStateSchema } from '../schema.js'
 import type { BaseGraphQLContext, LiveStoreQuery, QueryResult, Store } from '../store.js'
+import type { Bindable } from '../util.js'
 import { sql } from '../util.js'
 import { useStore } from './LiveStoreContext.js'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
@@ -26,6 +27,7 @@ export type QueryResults<TQuery> = { [queryName in keyof TQuery]: QueryResult<TQ
 export type ReactiveSQL = <TResult>(
   genQuery: (get: GetAtom) => string,
   queriedTables: string[],
+  bindValues?: Bindable | undefined,
 ) => LiveStoreSQLQuery<TResult>
 export type ReactiveGraphQL = <
   TResult extends Record<string, any>,
@@ -81,7 +83,7 @@ type ComponentState = {
  * so we need to "cache" the fact that we've already started a span for this component.
  * The map entry is being removed again in the `React.useEffect` call below.
  */
-const spanAlreadyStartedCache = new Map<string, { span: otel.Span; otelCtx: otel.Context }>()
+const spanAlreadyStartedCache = new Map<string, { span: otel.Span; otelContext: otel.Context }>()
 
 type UseLiveStoreJsonState<TState> = <TResult>(
   jsonStringKey: keyof TState,
@@ -118,7 +120,7 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
   const componentKeyLabel = React.useMemo(() => labelForKey(componentKey), [componentKey])
 
   // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
-  const { span, otelCtx } = React.useMemo(() => {
+  const { span, otelContext } = React.useMemo(() => {
     const existingSpan = spanAlreadyStartedCache.get(componentKeyLabel)
     if (existingSpan !== undefined) return existingSpan
 
@@ -128,11 +130,11 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
       store.otel.queriesSpanContext,
     )
 
-    const otelCtx = otel.trace.setSpan(otel.context.active(), span)
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-    spanAlreadyStartedCache.set(componentKeyLabel, { span, otelCtx })
+    spanAlreadyStartedCache.set(componentKeyLabel, { span, otelContext })
 
-    return { span, otelCtx }
+    return { span, otelContext }
   }, [componentKeyLabel, store.otel.queriesSpanContext, store.otel.tracer])
 
   React.useEffect(
@@ -146,23 +148,23 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
   const generateQueries = React.useCallback(
     ({
       state$,
-      otelCtx,
+      otelContext,
       registerSubscription,
       isTemporaryQuery,
     }: {
       state$: LiveStoreJSQuery<TComponentState>
-      otelCtx: otel.Context
+      otelContext: otel.Context
       registerSubscription: RegisterSubscription
       isTemporaryQuery: boolean
     }) =>
       queries({
-        rxSQL: <T>(genQuery: (get: GetAtom) => string, queriedTables: string[]) =>
-          store.querySQL<T>(genQuery, queriedTables, undefined, componentKey, undefined, otelCtx),
+        rxSQL: <T>(genQuery: (get: GetAtom) => string, queriedTables: string[], bindValues?: Bindable) =>
+          store.querySQL<T>(genQuery, { queriedTables, bindValues, otelContext }),
         rxGraphQL: <Result extends Record<string, any>, Variables extends Record<string, any>>(
           query: DocumentNode<Result, Variables>,
           genVariableValues: (get: GetAtom) => Variables,
           label?: string,
-        ) => store.queryGraphQL(query, genVariableValues, { componentKey, label }, otelCtx),
+        ) => store.queryGraphQL(query, genVariableValues, { componentKey, label, otelContext }),
         globalQueries,
         state$,
         subscribe: registerSubscription,
@@ -193,8 +195,8 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
   // We do this in a temporary query context which cleans up after itself, making it idempotent
   // TODO get rid of the temporary query workaround
   const { initialComponentState, initialQueryResults } = React.useMemo(() => {
-    return store.otel.tracer.startActiveSpan('LiveStore:useLiveStoreComponent:initial', {}, otelCtx, (span) => {
-      const otelCtx = otel.trace.setSpan(otel.context.active(), span)
+    return store.otel.tracer.startActiveSpan('LiveStore:useLiveStoreComponent:initial', {}, otelContext, (span) => {
+      const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
       return store.inTempQueryContext(() => {
         try {
@@ -202,31 +204,27 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
           let stateQuery: LiveStoreJSQuery<TComponentState>
           if (stateSchema === undefined) {
             // TODO don't set up a query if there's no state schema (keeps the graph more clean)
-            stateQuery = store.queryJS(
-              () => ({}),
+            stateQuery = store.queryJS(() => ({}), {
               componentKey,
-              undefined,
-              otelCtx,
-            ) as unknown as LiveStoreJSQuery<TComponentState>
+              otelContext,
+            }) as unknown as LiveStoreJSQuery<TComponentState>
           } else {
             const componentTableName = tableNameForComponentKey(componentKey)
             const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`
             stateQuery = store
-              .querySQL<TComponentState>(
-                () => sql`select * from ${componentTableName} ${whereClause} limit 1`,
-                [componentTableName],
-                undefined,
+              .querySQL<TComponentState>(() => sql`select * from ${componentTableName} ${whereClause} limit 1`, {
+                queriedTables: [componentTableName],
                 componentKey,
-                `localState:query:${componentKeyLabel}`,
-                otelCtx,
-              )
+                label: `localState:query:${componentKeyLabel}`,
+                otelContext,
+              })
               .getFirstRow({ defaultValue: defaultComponentState })
           }
           const initialComponentState = stateQuery.results$.result
 
           const queries = generateQueries({
             state$: stateQuery,
-            otelCtx,
+            otelContext,
             registerSubscription: () => {},
             isTemporaryQuery: true,
           })
@@ -241,7 +239,7 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
         }
       })
     })
-  }, [store, otelCtx, stateSchema, generateQueries, componentKey, componentKeyLabel, defaultComponentState])
+  }, [store, otelContext, stateSchema, generateQueries, componentKey, componentKeyLabel, defaultComponentState])
 
   // Now that we've computed the initial state synchronously,
   // we can set up our useState calls w/ a default value populated...
@@ -287,48 +285,40 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
     return store.otel.tracer.startActiveSpan(
       'LiveStore:useLiveStoreComponent:long-running',
       { attributes: {} },
-      otelCtx,
+      otelContext,
       (span) => {
-        const otelCtx = otel.trace.setSpan(otel.context.active(), span)
+        const otelContext = otel.trace.setSpan(otel.context.active(), span)
         const unsubs: (() => void)[] = []
 
         // create state query
-        let stateQuery: LiveStoreJSQuery<TComponentState>
+        let state$: LiveStoreJSQuery<TComponentState>
         if (stateSchema === undefined) {
-          stateQuery = store.queryJS(
-            () => ({}),
-            componentKey,
-            undefined,
-            otelCtx,
-          ) as unknown as LiveStoreJSQuery<TComponentState>
+          state$ = store.queryJS(() => ({}) as TComponentState, { componentKey, otelContext })
         } else {
           const componentTableName = tableNameForComponentKey(componentKey)
           insertRowForComponentInstance({ store, componentKey, stateSchema })
 
           const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`
-          stateQuery = store
-            .querySQL<TComponentState>(
-              () => sql`select * from ${componentTableName} ${whereClause} limit 1`,
-              [componentTableName],
-              undefined,
+          state$ = store
+            .querySQL<TComponentState>(() => sql`select * from ${componentTableName} ${whereClause} limit 1`, {
+              queriedTables: [componentTableName],
               componentKey,
-              // TODO introduce a refresh "grouping" concept to associate related refreshes in the debugger UI
-              `localState:query:${componentKeyLabel}`,
-              otelCtx,
-            )
+              label: `localState:query:${componentKeyLabel}`,
+              otelContext,
+            })
             .getFirstRow({ defaultValue: defaultComponentState })
         }
 
         unsubs.push(
           store.subscribe(
-            stateQuery,
+            state$,
             (results) => {
               if (isEqual(results, componentStateRef.current) === false) {
                 setComponentState_(results as TComponentState)
               }
             },
             undefined,
-            { label: `useLiveStoreComponent:localState:subscribe:${stateQuery.label}` },
+            { label: `useLiveStoreComponent:localState:subscribe:${state$.label}` },
           ),
         )
 
@@ -345,7 +335,7 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
           )
         }
 
-        const queries = generateQueries({ state$: stateQuery, otelCtx, registerSubscription, isTemporaryQuery: false })
+        const queries = generateQueries({ state$, otelContext, registerSubscription, isTemporaryQuery: false })
         // Use the name given to this query in the useQueries hook as its label
         for (const [name, query] of Object.entries(queries)) {
           query.label = name
@@ -384,7 +374,7 @@ export const useLiveStoreComponent = <TComponentState extends ComponentState, TQ
     stateSchema,
     defaultComponentState,
     generateQueries,
-    otelCtx,
+    otelContext,
     componentStateRef,
     // setComponentState_,
     // setQueryResults_,

package/src/reactive.ts

@@ -196,7 +196,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
           debugRefreshReason?: RefreshReasonWithGenericReasons<TDebugRefreshReason>
         }
       | undefined,
-    parentSpanContext: otel.Context,
+    otelContext: otel.Context,
   ): Thunk<T> {
     const thunk: UnevaluatedThunk<T> = {
       _tag: 'thunk',
@@ -218,7 +218,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
         otelHint: options?.label ?? 'makeThunk',
         debugRefreshReason: options?.debugRefreshReason ?? { _tag: 'makeThunk', label: options?.label },
       },
-      parentSpanContext,
+      otelContext,
     )
 
     // Manually tell the typesystem this thunk is guaranteed to have a result at this point
@@ -248,7 +248,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
   makeEffect(
     doEffect: (get: GetAtom) => void,
     options: { label?: string } | undefined,
-    parentSpanContext: otel.Context,
+    otelContext: otel.Context,
   ): Effect {
     const effect: Effect = {
       _tag: 'effect',
@@ -261,7 +261,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
     this.dirtyNodes.add(effect)
     this.refresh(
       { otelHint: 'makeEffect', debugRefreshReason: { _tag: 'makeEffect', label: options?.label } },
-      parentSpanContext,
+      otelContext,
     )
 
     return effect
@@ -277,7 +277,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
           debugRefreshReason?: TDebugRefreshReason
         }
       | undefined,
-    parentSpanContext: otel.Context,
+    otelContext: otel.Context,
   ) {
     const { otelHint, skipRefresh, debugRefreshReason } = options ?? {}
     ref.result = val
@@ -297,7 +297,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
       return
     }
 
-    this.refresh({ otelHint, debugRefreshReason }, parentSpanContext)
+    this.refresh({ otelHint, debugRefreshReason }, otelContext)
   }
 
   setRefs<T>(
@@ -309,7 +309,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
           debugRefreshReason?: TDebugRefreshReason
         }
       | undefined,
-    parentSpanContext: otel.Context,
+    otelContext: otel.Context,
   ) {
     const otelHint = options?.otelHint ?? ''
     const skipRefresh = options?.skipRefresh ?? false
@@ -333,7 +333,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
       return
     }
 
-    this.refresh({ otelHint, debugRefreshReason }, parentSpanContext)
+    this.refresh({ otelHint, debugRefreshReason }, otelContext)
   }
 
   get<T>(atom: Atom<T>, context: Atom<any> | Effect): T {
@@ -350,7 +350,8 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
       )
     }
 
-    return atom.result!
+    // TODO handle case when `atom.result` is undefined
+    return atom.result
   }
 
   /**
@@ -367,7 +368,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
           debugRefreshReason?: RefreshReasonWithGenericReasons<TDebugRefreshReason>
         }
       | undefined,
-    parentSpanContext: otel.Context,
+    otelContext: otel.Context,
   ): void {
     const otelHint = options?.otelHint ?? ''
     const debugRefreshReason = options?.debugRefreshReason
@@ -380,7 +381,7 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
     //   console.log('refresh', otelHint, { shouldTrace })
     // }
 
-    this.otelTracer.startActiveSpan(`LiveStore.refresh:${otelHint}`, {}, parentSpanContext, (span) => {
+    this.otelTracer.startActiveSpan(`LiveStore.refresh:${otelHint}`, {}, otelContext, (span) => {
       const atomsToRefresh = roots.filter(isAtom)
       const effectsToRun = new Set(roots.filter(isEffect))
 

package/src/reactiveQueries/graphql.ts

@@ -45,8 +45,10 @@ export class LiveStoreGraphQLQuery<
         const results = get(this.results$)
         return f(results, get)
       },
-      this.componentKey,
-      `${this.label}:js`,
-      this.otelContext,
+      {
+        componentKey: this.componentKey,
+        label: `${this.label}:js`,
+        otelContext: this.otelContext,
+      },
     )
 }

package/src/reactiveQueries/js.ts

@@ -31,8 +31,6 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase {
         const results = get(this.results$)
         return f(results, get)
       },
-      this.componentKey,
-      `${this.label}:js`,
-      this.otelContext,
+      { componentKey: this.componentKey, label: `${this.label}:js`, otelContext: this.otelContext },
     )
 }

package/src/reactiveQueries/sql.ts

@@ -42,9 +42,11 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase {
         const results = get(this.results$)
         return f(results, get)
       },
-      this.componentKey,
-      `${this.label}:js`,
-      this.otelContext,
+      {
+        componentKey: this.componentKey,
+        label: `${this.label}:js`,
+        otelContext: this.otelContext,
+      },
     )
 
   /** Returns a reactive query  */
@@ -58,8 +60,6 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase {
         }
         return (results[0] ?? args?.defaultValue) as Row
       },
-      this.componentKey,
-      `${this.label}:first`,
-      this.otelContext,
+      { componentKey: this.componentKey, label: `${this.label}:first`, otelContext: this.otelContext },
     )
 }