@livestore/livestore 0.3.0-dev.10 → 0.3.0-dev.11

package/src/live-queries/__snapshots__/{db.test.ts.snap → db-query.test.ts.snap}

@@ -21,9 +21,6 @@ exports[`otel > otel 3`] = `
     ",
       },
     },
-    {
-      "_name": "LiveStore:createStore",
-    },
     {
       "_name": "LiveStore:sync",
     },
@@ -33,22 +30,17 @@ exports[`otel > otel 3`] = `
         {
           "_name": "LiveStore:mutate",
           "attributes": {
-            "livestore.mutateLabel": "mutate",
+            "livestore.mutationEventTags": [
+              "livestore.RawSql",
+            ],
+            "livestore.mutationEventsCount": 1,
           },
           "children": [
             {
-              "_name": "LiveStore:mutate:applyMutations",
+              "_name": "livestore.in-memory-db:execute",
               "attributes": {
-                "livestore.mutateLabel": "mutate",
+                "sql.query": "INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)",
               },
-              "children": [
-                {
-                  "_name": "livestore.in-memory-db:execute",
-                  "attributes": {
-                    "sql.query": "INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)",
-                  },
-                },
-              ],
             },
           ],
         },
@@ -97,7 +89,179 @@ exports[`otel > otel 3`] = `
 }
 `;
 
+exports[`otel > with thunks 1`] = `
+{
+  "atoms": [
+    {
+      "_tag": "ref",
+      "id": "node-1",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:todos",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
+    {
+      "_tag": "ref",
+      "id": "node-2",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:app",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
+  ],
+  "deferredEffects": [],
+  "effects": [],
+}
+`;
+
 exports[`otel > with thunks 3`] = `
+{
+  "atoms": [
+    {
+      "_tag": "ref",
+      "id": "node-1",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:todos",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
+    {
+      "_tag": "ref",
+      "id": "node-2",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:app",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
+  ],
+  "deferredEffects": [],
+  "effects": [],
+}
+`;
+
+exports[`otel > with thunks 4`] = `
+{
+  "atoms": [
+    {
+      "_tag": "ref",
+      "id": "node-1",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:todos",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 1,
+      "sub": [],
+      "super": [],
+    },
+    {
+      "_tag": "ref",
+      "id": "node-2",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:app",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
+  ],
+  "deferredEffects": [],
+  "effects": [],
+}
+`;
+
+exports[`otel > with thunks 6`] = `
+{
+  "atoms": [
+    {
+      "_tag": "ref",
+      "id": "node-1",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:todos",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 1,
+      "sub": [],
+      "super": [],
+    },
+    {
+      "_tag": "ref",
+      "id": "node-2",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:app",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
+  ],
+  "deferredEffects": [],
+  "effects": [],
+}
+`;
+
+exports[`otel > with thunks 7`] = `
 {
   "_name": "createStore",
   "attributes": {
@@ -118,9 +282,6 @@ exports[`otel > with thunks 3`] = `
     ",
       },
     },
-    {
-      "_name": "LiveStore:createStore",
-    },
     {
       "_name": "LiveStore:sync",
     },
@@ -130,22 +291,17 @@ exports[`otel > with thunks 3`] = `
         {
           "_name": "LiveStore:mutate",
           "attributes": {
-            "livestore.mutateLabel": "mutate",
+            "livestore.mutationEventTags": [
+              "livestore.RawSql",
+            ],
+            "livestore.mutationEventsCount": 1,
           },
           "children": [
             {
-              "_name": "LiveStore:mutate:applyMutations",
+              "_name": "livestore.in-memory-db:execute",
               "attributes": {
-                "livestore.mutateLabel": "mutate",
+                "sql.query": "INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)",
               },
-              "children": [
-                {
-                  "_name": "livestore.in-memory-db:execute",
-                  "attributes": {
-                    "sql.query": "INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)",
-                  },
-                },
-              ],
             },
           ],
         },
@@ -181,6 +337,9 @@ exports[`otel > with thunks 3`] = `
             "sql.rowsCount": 1,
           },
           "children": [
+            {
+              "_name": "js:where-filter",
+            },
             {
               "_name": "sql-in-memory-select",
               "attributes": {
@@ -218,9 +377,6 @@ exports[`otel > with thunks with query builder and without labels 3`] = `
     ",
       },
     },
-    {
-      "_name": "LiveStore:createStore",
-    },
     {
       "_name": "LiveStore:sync",
     },
@@ -230,22 +386,17 @@ exports[`otel > with thunks with query builder and without labels 3`] = `
         {
           "_name": "LiveStore:mutate",
           "attributes": {
-            "livestore.mutateLabel": "mutate",
+            "livestore.mutationEventTags": [
+              "livestore.RawSql",
+            ],
+            "livestore.mutationEventsCount": 1,
           },
           "children": [
             {
-              "_name": "LiveStore:mutate:applyMutations",
+              "_name": "livestore.in-memory-db:execute",
               "attributes": {
-                "livestore.mutateLabel": "mutate",
+                "sql.query": "INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)",
               },
-              "children": [
-                {
-                  "_name": "livestore.in-memory-db:execute",
-                  "attributes": {
-                    "sql.query": "INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)",
-                  },
-                },
-              ],
             },
           ],
         },
@@ -281,6 +432,9 @@ exports[`otel > with thunks with query builder and without labels 3`] = `
             "sql.rowsCount": 1,
           },
           "children": [
+            {
+              "_name": "js:() => ({ completed: false })",
+            },
             {
               "_name": "sql-in-memory-select",
               "attributes": {

package/src/live-queries/base-class.ts

@@ -1,59 +1,119 @@
 import type { QueryInfo } from '@livestore/common'
+import { isNotNil } from '@livestore/utils'
+import { GlobalValue } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 
-import { type Atom, type GetAtom, ReactiveGraph, throwContextNotSetError, type Thunk } from '../reactive.js'
+import * as RG from '../reactive.js'
 import type { Store } from '../store/store.js'
 import type { QueryDebugInfo, RefreshReason } from '../store/store-types.js'
 import type { StackInfo } from '../utils/stack-info.js'
 
-export type ReactivityGraph = ReactiveGraph<RefreshReason, QueryDebugInfo, QueryContext>
+export type ReactivityGraph = RG.ReactiveGraph<RefreshReason, QueryDebugInfo, ReactivityGraphContext>
 
 export const makeReactivityGraph = (): ReactivityGraph =>
-  new ReactiveGraph<RefreshReason, QueryDebugInfo, QueryContext>()
+  new RG.ReactiveGraph<RefreshReason, QueryDebugInfo, ReactivityGraphContext>()
 
-export type QueryContext = {
+export const defCounterRef = GlobalValue.globalValue('livestore-def-counter', () => ({ current: 0 }))
+
+type LiveQueryDefHash = string
+
+export type LiveQueryRCMap = Map<LiveQueryDefHash, RcRef<LiveQueryAny | ILiveQueryRef<any>>>
+
+export type ReactivityGraphContext = {
   store: Store
+  liveQueryRCMap: LiveQueryRCMap
+  /** Back-reference to the reactivity graph for convenience */
+  reactivityGraph: WeakRef<ReactivityGraph>
   otelTracer: otel.Tracer
   rootOtelContext: otel.Context
   effectsWrapper: (run: () => void) => void
 }
 
-export type UnsubscribeQuery = () => void
-
-export type GetResult<TQuery extends LiveQueryAny> =
-  TQuery extends LiveQuery<infer TResult, infer _1> ? TResult : unknown
+export type GetResult<TQuery extends LiveQueryDefAny | LiveQueryAny> =
+  TQuery extends LiveQuery<infer TResult, infer _1>
+    ? TResult
+    : TQuery extends LiveQueryDef<infer TResult, infer _1>
+      ? TResult
+      : unknown
 
 let queryIdCounter = 0
 
 export type LiveQueryAny = LiveQuery<any, QueryInfo>
+export type LiveQueryDefAny = LiveQueryDef<any, any>
+
+export interface ILiveQueryRefDef<T> {
+  _tag: 'live-ref-def'
+  defaultValue: T
+  make: (ctx: ReactivityGraphContext) => RcRef<ILiveQueryRef<T>>
+}
+
+export interface ILiveQueryRef<T> {
+  _tag: 'live-ref'
+  reactivityGraph: ReactivityGraph
+  ref: RG.Ref<T, ReactivityGraphContext, RefreshReason>
+  set: (value: T) => void
+  get: () => T
+  destroy: () => void
+}
 
 export const TypeId = Symbol.for('LiveQuery')
 export type TypeId = typeof TypeId
 
+export interface RcRef<T> {
+  rc: number
+  value: T
+  deref: () => void
+}
+
+export type DepKey = string | number | ReadonlyArray<string | number | undefined | null>
+
+export const depsToString = (deps: DepKey): string => {
+  if (typeof deps === 'string' || typeof deps === 'number') {
+    return deps.toString()
+  }
+  return deps.filter(isNotNil).join(',')
+}
+
+export interface LiveQueryDef<TResult, TQueryInfo extends QueryInfo = QueryInfo.None> {
+  _tag: 'def'
+  // TODO do we need both id and hash?
+  /** A unique identifier for the query definition */
+  id: number
+  /** Creates a new LiveQuery instance bound to a specific store/reactivityGraph */
+  make: (ctx: ReactivityGraphContext, otelContext?: otel.Context) => RcRef<LiveQuery<TResult, TQueryInfo>>
+  label: string
+  hash: string
+  queryInfo: TQueryInfo
+}
+
+/**
+ * A LiveQuery is stateful
+ */
 export interface LiveQuery<TResult, TQueryInfo extends QueryInfo = QueryInfo.None> {
   id: number
   _tag: 'computed' | 'db' | 'graphql'
   [TypeId]: TypeId
 
+  // reactivityGraph: ReactivityGraph
+
   /** This should only be used on a type-level and doesn't hold any value during runtime */
   '__result!': TResult
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, QueryContext, RefreshReason>
+  results$: RG.Thunk<TResult, ReactivityGraphContext, RefreshReason>
 
   label: string
 
-  run: (otelContext?: otel.Context, debugRefreshReason?: RefreshReason) => TResult
-
-  runAndDestroy: (otelContext?: otel.Context, debugRefreshReason?: RefreshReason) => TResult
+  run: (args: { otelContext?: otel.Context; debugRefreshReason?: RefreshReason }) => TResult
 
-  destroy(): void
+  destroy: () => void
+  isDestroyed: boolean
 
-  subscribe(
-    onNewValue: (value: TResult) => void,
-    onUnsubsubscribe?: () => void,
-    options?: { label?: string; otelContext?: otel.Context },
-  ): () => void
+  // subscribe(
+  //   onNewValue: (value: TResult) => void,
+  //   onUnsubsubscribe?: () => void,
+  //   options?: { label?: string; otelContext?: otel.Context },
+  // ): () => void
 
   activeSubscriptions: Set<StackInfo>
 
@@ -75,11 +135,11 @@ export abstract class LiveStoreQueryBase<TResult, TQueryInfo extends QueryInfo>
   /** Human-readable label for the query for debugging */
   abstract label: string
 
-  abstract results$: Thunk<TResult, QueryContext, RefreshReason>
+  abstract results$: RG.Thunk<TResult, ReactivityGraphContext, RefreshReason>
 
   activeSubscriptions: Set<StackInfo> = new Set()
 
-  protected abstract reactivityGraph: ReactivityGraph
+  abstract readonly reactivityGraph: ReactivityGraph
 
   abstract queryInfo: TQueryInfo
 
@@ -89,33 +149,93 @@ export abstract class LiveStoreQueryBase<TResult, TQueryInfo extends QueryInfo>
 
   executionTimes: number[] = []
 
+  // TODO double check if this is needed
+  isDestroyed = false
   abstract destroy: () => void
 
-  run = (otelContext?: otel.Context, debugRefreshReason?: RefreshReason): TResult =>
-    this.results$.computeResult(otelContext, debugRefreshReason)
-
-  runAndDestroy = (otelContext?: otel.Context, debugRefreshReason?: RefreshReason): TResult => {
-    const result = this.run(otelContext, debugRefreshReason)
-    this.destroy()
-    return result
+  run = (args: { otelContext?: otel.Context; debugRefreshReason?: RefreshReason }): TResult => {
+    return this.results$.computeResult(args.otelContext, args.debugRefreshReason)
   }
 
-  subscribe = (
-    onNewValue: (value: TResult) => void,
-    onUnsubsubscribe?: () => void,
-    options?: { label?: string; otelContext?: otel.Context } | undefined,
-  ): (() => void) =>
-    this.reactivityGraph.context?.store.subscribe(this, onNewValue, onUnsubsubscribe, options) ??
-    throwContextNotSetError(this.reactivityGraph)
-}
+  protected dependencyQueriesRef: DependencyQueriesRef = new Set()
 
-export type GetAtomResult = <T>(atom: Atom<T, any, RefreshReason> | LiveQuery<T, any>) => T
+  // subscribe = (
+  //   onNewValue: (value: TResult) => void,
+  //   onUnsubsubscribe?: () => void,
+  //   options?: { label?: string; otelContext?: otel.Context } | undefined,
+  // ): (() => void) =>
+  //   this.reactivityGraph.context?.store.subscribe(this, onNewValue, onUnsubsubscribe, options) ??
+  //   RG.throwContextNotSetError(this.reactivityGraph)
+}
 
-export const makeGetAtomResult = (get: GetAtom, otelContext: otel.Context) => {
-  const getAtom: GetAtomResult = (atom) => {
-    if (atom._tag === 'thunk' || atom._tag === 'ref') return get(atom, otelContext)
-    return get(atom.results$, otelContext)
+export type GetAtomResult = <T>(
+  atom:
+    | RG.Atom<T, any, RefreshReason>
+    | LiveQueryDef<T, any>
+    | LiveQuery<T, any>
+    | ILiveQueryRef<T>
+    | ILiveQueryRefDef<T>,
+  otelContext?: otel.Context | undefined,
+  debugRefreshReason?: RefreshReason | undefined,
+) => T
+
+export type DependencyQueriesRef = Set<RcRef<LiveQueryAny | ILiveQueryRef<any>>>
+
+export const makeGetAtomResult = (
+  get: RG.GetAtom,
+  ctx: ReactivityGraphContext,
+  otelContext: otel.Context,
+  dependencyQueriesRef: DependencyQueriesRef,
+) => {
+  // NOTE we're using the `otelContext` from `makeGetAtomResult` here, not the `otelContext` from `getAtom`
+  const getAtom: GetAtomResult = (atom, _otelContext, debugRefreshReason) => {
+    // ReactivityGraph atoms case
+    if (atom._tag === 'thunk' || atom._tag === 'ref') return get(atom, otelContext, debugRefreshReason)
+
+    // LiveQueryDef case
+    if (atom._tag === 'def' || atom._tag === 'live-ref-def') {
+      const query = atom.make(ctx)
+      dependencyQueriesRef.add(query)
+      // TODO deref the query on destroy
+      return getAtom(query.value, _otelContext, debugRefreshReason)
+    }
+
+    // LiveQueryRef case
+    if (atom._tag === 'live-ref') return get(atom.ref, otelContext, debugRefreshReason)
+
+    // LiveQuery case
+    return get(atom.results$, otelContext, debugRefreshReason)
   }
 
   return getAtom
 }
+
+export const withRCMap = <T extends LiveQueryAny | ILiveQueryRef<any>>(
+  id: string,
+  make: (ctx: ReactivityGraphContext, otelContext?: otel.Context) => T,
+): ((ctx: ReactivityGraphContext, otelContext?: otel.Context) => RcRef<T>) => {
+  return (ctx, otelContext) => {
+    let item = ctx.liveQueryRCMap.get(id)
+    if (item) {
+      item.rc++
+      return item as RcRef<T>
+    }
+
+    const query$ = make(ctx, otelContext)
+
+    item = {
+      rc: 1,
+      value: query$,
+      deref: () => {
+        item!.rc--
+        if (item!.rc === 0) {
+          item!.value.destroy()
+        }
+        ctx.liveQueryRCMap.delete(id)
+      },
+    }
+    ctx.liveQueryRCMap.set(id, item)
+
+    return item as RcRef<T>
+  }
+}

package/src/live-queries/computed.ts

@@ -1,27 +1,48 @@
 import type { QueryInfo } from '@livestore/common'
 import * as otel from '@opentelemetry/api'
 
-import { globalReactivityGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { RefreshReason } from '../store/store-types.js'
+import { isValidFunctionString } from '../utils/function-string.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import type { GetAtomResult, LiveQuery, QueryContext, ReactivityGraph } from './base-class.js'
-import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import type { DepKey, GetAtomResult, LiveQueryDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { defCounterRef, depsToString, LiveStoreQueryBase, makeGetAtomResult, withRCMap } from './base-class.js'
 
 export const computed = <TResult, TQueryInfo extends QueryInfo = QueryInfo.None>(
   fn: (get: GetAtomResult) => TResult,
   options?: {
-    label: string
-    reactivityGraph?: ReactivityGraph
+    label?: string
     queryInfo?: TQueryInfo
+    deps?: DepKey
   },
-): LiveQuery<TResult, TQueryInfo> =>
-  new LiveStoreComputedQuery<TResult, TQueryInfo>({
-    fn,
+): LiveQueryDef<TResult, TQueryInfo> => {
+  const hash = options?.deps ? depsToString(options.deps) : fn.toString()
+  if (isValidFunctionString(hash)._tag === 'invalid') {
+    throw new Error(`On Expo/React Native, computed queries must provide a \`deps\` option`)
+  }
+
+  const queryInfo = options?.queryInfo ?? ({ _tag: 'None' } as TQueryInfo)
+
+  return {
+    _tag: 'def',
+    id: ++defCounterRef.current,
+    make: withRCMap(hash, (ctx, _otelContext) => {
+      // TODO onDestroy
+      return new LiveStoreComputedQuery<TResult, TQueryInfo>({
+        fn,
+        label: options?.label ?? fn.toString(),
+        queryInfo: options?.queryInfo,
+        reactivityGraph: ctx.reactivityGraph.deref()!,
+      })
+    }),
     label: options?.label ?? fn.toString(),
-    reactivityGraph: options?.reactivityGraph,
-    queryInfo: options?.queryInfo,
-  })
+    // NOTE We're using the `makeQuery` function body string to make sure the key is unique across the app
+    // TODO we should figure out whether this could cause some problems and/or if there's a better way to do this
+    // NOTE `fn.toString()` doesn't work in Expo as it always produces `[native code]`
+    hash,
+    queryInfo,
+  }
+}
 
 export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = QueryInfo.None> extends LiveStoreQueryBase<
   TResult,
@@ -30,11 +51,11 @@ export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = Quer
   _tag: 'computed' = 'computed'
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, QueryContext, RefreshReason>
+  results$: Thunk<TResult, ReactivityGraphContext, RefreshReason>
 
   label: string
 
-  protected reactivityGraph: ReactivityGraph
+  reactivityGraph: ReactivityGraph
 
   queryInfo: TQueryInfo
 
@@ -46,23 +67,22 @@ export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = Quer
   }: {
     label: string
     fn: (get: GetAtomResult) => TResult
-    reactivityGraph?: ReactivityGraph
+    reactivityGraph: ReactivityGraph
     queryInfo?: TQueryInfo
   }) {
     super()
 
     this.label = label
-
-    this.reactivityGraph = reactivityGraph ?? globalReactivityGraph
+    this.reactivityGraph = reactivityGraph
     this.queryInfo = queryInfo ?? ({ _tag: 'None' } as TQueryInfo)
 
     const queryLabel = `${label}:results`
 
     this.results$ = this.reactivityGraph.makeThunk(
-      (get, setDebugInfo, { otelTracer, rootOtelContext }, otelContext) =>
-        otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? rootOtelContext, (span) => {
+      (get, setDebugInfo, ctx, otelContext) =>
+        ctx.otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? ctx.rootOtelContext, (span) => {
           const otelContext = otel.trace.setSpan(otel.context.active(), span)
-          const res = fn(makeGetAtomResult(get, otelContext))
+          const res = fn(makeGetAtomResult(get, ctx, otelContext, this.dependencyQueriesRef))
 
           span.end()
 
@@ -79,6 +99,12 @@ export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = Quer
   }
 
   destroy = () => {
+    this.isDestroyed = true
+
     this.reactivityGraph.destroyNode(this.results$)
+
+    for (const query of this.dependencyQueriesRef) {
+      query.deref()
+    }
   }
 }