@livestore/livestore 0.0.8 → 0.0.10

package/src/react/useLiveStoreComponent.ts

@@ -81,7 +81,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 +118,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 +128,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 +146,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),
+          store.querySQL<T>(genQuery, { queriedTables, 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 +193,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 +202,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 +237,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 +283,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 +333,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 +372,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 {
@@ -367,7 +367,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 +380,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 },
     )
 }

package/src/store.ts

@@ -4,7 +4,7 @@ import * as otel from '@opentelemetry/api'
 import type { GraphQLSchema } from 'graphql'
 import * as graphql from 'graphql'
 import { uniqueId } from 'lodash-es'
-import ReactDOM from 'react-dom'
+import * as ReactDOM from 'react-dom'
 import { v4 as uuid } from 'uuid'
 
 import type { Backend, BackendOptions } from './backends/index.js'
@@ -32,7 +32,7 @@ export type LiveStoreQuery<TResult extends Record<string, any> = any> =
 export type BaseGraphQLContext = {
   queriedTables: Set<string>
   /** Needed by Pothos Otel plugin for resolver tracing to work */
-  parentSpanContext?: otel.Context
+  otelContext?: otel.Context
 }
 
 export const RESET_DB_LOCAL_STORAGE_KEY = 'livestore-reset'
@@ -124,6 +124,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
   }: StoreOptions<TGraphQLContext>) {
     this.inMemoryDB = db
     this.graph = new ReactiveGraph({
+      // TODO move this into React module
       // Do all our updates inside a single React setState batch to avoid multiple UI re-renders
       effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
       otelTracer,
@@ -186,21 +187,30 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
    */
   querySQL = <TResult>(
     genQueryString: (get: GetAtom) => string,
-    /**
-     * List of tables that are queried in this query;
-     * used to determine reactive dependencies.
-     * In the future we want to auto-generate this via parsing the query
-     */
-    queriedTables: string[],
-    bindValues: Bindable | undefined,
-    componentKey: ComponentKey | undefined,
-    label: string | undefined,
-    parentSpanContext: otel.Context,
+    {
+      queriedTables,
+      bindValues,
+      componentKey,
+      label,
+      otelContext = otel.context.active(),
+    }: {
+      /**
+       * List of tables that are queried in this query;
+       * used to determine reactive dependencies.
+       *
+       * NOTE In the future we want to auto-generate this via parsing the query
+       */
+      queriedTables: string[]
+      bindValues?: Bindable | undefined
+      componentKey?: ComponentKey | undefined
+      label?: string | undefined
+      otelContext?: otel.Context
+    },
   ): LiveStoreSQLQuery<TResult> =>
     this.otel.tracer.startActiveSpan(
       'querySQL', // NOTE span name will be overridden further down
       { attributes: { label } },
-      parentSpanContext,
+      otelContext,
       (span) => {
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
@@ -240,11 +250,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
                   span.setAttribute('sql.query', sqlString)
                   span.updateName(`sql:${sqlString.slice(0, 50)}`)
 
-                  const results = this.inMemoryDB.select(sqlString, {
-                    queriedTables,
-                    bindValues,
-                    parentSpanContext: otelContext,
-                  })
+                  const results = this.inMemoryDB.select(sqlString, { queriedTables, bindValues, otelContext })
 
                   span.setAttribute('sql.rowsCount', results.length)
                   addDebugInfo({ _tag: 'sql', label: label ?? '', query: sqlString })
@@ -282,11 +288,13 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
 
   queryJS = <TResult>(
     genResults: (get: GetAtom) => TResult,
-    componentKey: ComponentKey,
-    label = `js${uniqueId()}`,
-    parentSpanContext: otel.Context,
+    {
+      componentKey = globalComponentKey,
+      label = `js${uniqueId()}`,
+      otelContext = otel.context.active(),
+    }: { componentKey?: ComponentKey; label?: string; otelContext?: otel.Context },
   ): LiveStoreJSQuery<TResult> =>
-    this.otel.tracer.startActiveSpan(`queryJS:${label}`, { attributes: { label } }, parentSpanContext, (span) => {
+    this.otel.tracer.startActiveSpan(`queryJS:${label}`, { attributes: { label } }, otelContext, (span) => {
       const otelContext = otel.trace.setSpan(otel.context.active(), span)
       const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '')
       const results$ = this.graph.makeThunk(
@@ -320,13 +328,20 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
   queryGraphQL = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
     document: DocumentNode<TResult, TVariableValues>,
     genVariableValues: (get: GetAtom) => TVariableValues,
-    { componentKey, label }: { componentKey: ComponentKey; label?: string },
-    parentSpanContext: otel.Context,
+    {
+      componentKey,
+      label,
+      otelContext = otel.context.active(),
+    }: {
+      componentKey: ComponentKey
+      label?: string
+      otelContext?: otel.Context
+    },
   ): LiveStoreGraphQLQuery<TResult, TVariableValues, TGraphQLContext> =>
     this.otel.tracer.startActiveSpan(
-      `queryGraphQL`, // NOTE span name will be overridden further down
+      `queryGraphQL:`, // NOTE span name will be overridden further down
       {},
-      parentSpanContext,
+      otelContext,
       (span) => {
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
@@ -390,25 +405,24 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
   queryGraphQLOnce = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
     document: DocumentNode<TResult, TVariableValues>,
     variableValues: TVariableValues,
-    parentSpanContext?: otel.Context,
+    otelContext: otel.Context = this.otel.queriesSpanContext,
   ): { result: TResult; queriedTables: string[] } => {
     const schema =
       this.graphQLSchema ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL schema")
     const context =
       this.graphQLContext ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL context")
     const tracer = this.otel.tracer
-    const spanContext = parentSpanContext ?? this.otel.queriesSpanContext
 
     const operationName = graphql.getOperationAST(document)?.name?.value
 
-    return tracer.startActiveSpan(`executeGraphQLQuery: ${operationName}`, {}, spanContext, (span) => {
+    return tracer.startActiveSpan(`executeGraphQLQuery: ${operationName}`, {}, otelContext, (span) => {
       try {
         span.setAttribute('graphql.variables', JSON.stringify(variableValues))
         span.setAttribute('graphql.query', graphql.print(document))
 
         context.queriedTables.clear()
 
-        context.parentSpanContext = otel.trace.setSpan(otel.context.active(), span)
+        context.otelContext = otel.trace.setSpan(otel.context.active(), span)
 
         const res = graphql.executeSync({
           document,
@@ -713,7 +727,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
   private applyEventWithoutRefresh = (
     eventType: string,
     args: any = {},
-    parentSpanContext: otel.Context,
+    otelContext: otel.Context,
   ): { writeTables: string[]; durationMs: number } => {
     return this.otel.tracer.startActiveSpan(
       'LiveStore:applyEventWithoutRefresh',
@@ -723,7 +737,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
           'livestore.args': JSON.stringify(args, null, 2),
         },
       },
-      parentSpanContext,
+      otelContext,
       (span) => {
         const otelContext = otel.trace.setSpan(otel.context.active(), span)