@livestore/livestore 0.0.37 → 0.0.39-dev.2

package/src/react/LiveStoreContext.ts

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react'
 
 import type { LiveStoreContext as LiveStoreContext_ } from '../effect/LiveStore.js'
-import type { LiveStoreQuery } from '../store.js'
+import type { LiveQuery } from '../reactiveQueries/base-class.js'
 
+// TODO remove this?
 declare global {
   // NOTE Can be extended
   interface LiveStoreQueryTypes {
-    [key: string]: LiveStoreQuery
+    [key: string]: LiveQuery<any>
   }
 }
 

package/src/react/index.ts

@@ -10,6 +10,7 @@ export {
   type Dispatch,
   type UseRowResult as UseStateResult,
 } from './useRow.js'
+export { useAtom } from './useAtom.js'
 
 // Needed to make TS happy
 export type { TypedDocumentNode } from '@graphql-typed-document-node/core'

package/src/react/useAtom.ts

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import type { LiveQuery } from '../reactiveQueries/base-class.js'
+import { storeEventForUpdatePath, type UpdatePathDescCol, type UpdatePathDescRow } from '../update-path.js'
+import { useStore } from './LiveStoreContext.js'
+import { useQueryRef } from './useQuery.js'
+import type { Dispatch, SetStateAction } from './useRow.js'
+
+export const useAtom = <TQuery extends LiveQuery<any, UpdatePathDescRow<any> | UpdatePathDescCol<any, any>>>(
+  query$: TQuery,
+): [value: TQuery['result!'], setValue: Dispatch<SetStateAction<TQuery['result!']>>] => {
+  const query$Ref = useQueryRef(query$)
+
+  const { store } = useStore()
+
+  const setValue = React.useMemo<Dispatch<SetStateAction<TQuery['result!']>>>(() => {
+    return (newValueOrFn: any) => {
+      const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
+
+      store.applyEvents([storeEventForUpdatePath(query$.updatePathDesc!, newValue)])
+    }
+  }, [query$.updatePathDesc, query$Ref, store])
+
+  return [query$Ref.current, setValue]
+}

package/src/react/useQuery.ts

@@ -2,7 +2,7 @@ import * as otel from '@opentelemetry/api'
 import { isEqual } from 'lodash-es'
 import React from 'react'
 
-import type { ILiveStoreQuery } from '../reactiveQueries/base-class.js'
+import type { GetResult, LiveQuery, LiveQueryAny } from '../reactiveQueries/base-class.js'
 import { useStore } from './LiveStoreContext.js'
 import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/stack-info.js'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
@@ -12,14 +12,14 @@ import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInp
  * 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<ILiveStoreQuery<any>, { span: otel.Span; otelContext: otel.Context }>()
+const spanAlreadyStartedCache = new Map<LiveQueryAny, { span: otel.Span; otelContext: otel.Context }>()
 
-export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => useQueryRef(query).current
+export const useQuery = <TQuery extends LiveQueryAny>(query: TQuery): GetResult<TQuery> => useQueryRef(query).current
 
-export const useQueryRef = <TResult>(
-  query: ILiveStoreQuery<TResult>,
+export const useQueryRef = <TQuery extends LiveQueryAny>(
+  query: TQuery,
   parentOtelContext?: otel.Context,
-): React.MutableRefObject<TResult> => {
+): React.MutableRefObject<GetResult<TQuery>> => {
   const { store } = useStore()
 
   React.useDebugValue(`LiveStore:useQuery:${query.id}:${query.label}`)
@@ -62,7 +62,7 @@ export const useQueryRef = <TResult>(
   )
 
   // We know the query has a result by the time we use it; so we can synchronously populate a default state
-  const [valueRef, setValue] = useStateRefWithReactiveInput<TResult>(initialResult)
+  const [valueRef, setValue] = useStateRefWithReactiveInput<GetResult<TQuery>>(initialResult)
 
   React.useEffect(
     () => () => {

package/src/react/useRow.ts

@@ -1,21 +1,21 @@
-import { Schema } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import type { SqliteDsl } from 'effect-db-schema'
 import { mapValues } from 'lodash-es'
 import React from 'react'
 
-import type { DbGraph } from '../index.js'
-import type { LiveStoreJSQuery } from '../reactiveQueries/js.js'
-import type { RowQueryArgs, RowResult } from '../row-query.js'
+import type { DbGraph, LiveQuery } from '../index.js'
+import type { RowResult } from '../row-query.js'
 import { rowQuery } from '../row-query.js'
-import type { DefaultSqliteTableDef, TableDef, TableOptions } from '../schema/table-def.js'
+import { type DefaultSqliteTableDef, type TableDef, tableIsSingleton, type TableOptions } from '../schema/table-def.js'
+import type { UpdatePathDesc } from '../update-path.js'
+import { storeEventForUpdatePath } from '../update-path.js'
 import { useStore } from './LiveStoreContext.js'
 import { useQueryRef } from './useQuery.js'
 
 export type UseRowResult<TTableDef extends TableDef> = [
   row: RowResult<TTableDef>,
   setRow: StateSetters<TTableDef>,
-  query$: LiveStoreJSQuery<RowResult<TTableDef>>,
+  query$: LiveQuery<RowResult<TTableDef>, UpdatePathDesc>,
 ]
 
 export type UseRowOptionsDefaulValues<TTableDef extends TableDef> = {
@@ -31,7 +31,7 @@ export type UseRowOptionsBase = {
  *
  *   - `row` is the current value of the row (fully decoded according to the table schema)
  *   - `setRow` is a function that can be used to update the row (values will be encoded according to the table schema)
- *   - `query$` is a `LiveStoreJSQuery` that e.g. can be used to subscribe to changes to the row
+ *   - `query$` is a `LiveQuery` that e.g. can be used to subscribe to changes to the row
  *
  * If the table is a singleton table, `useRow` can be called without an `id` argument. Otherwise, the `id` argument is required.
  */
@@ -51,12 +51,12 @@ export const useRow: {
   idOrOptions?: string | UseRowOptionsBase,
   options_?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>,
 ): UseRowResult<TTableDef> => {
-  const sqliteTableDef = table.schema
+  const sqliteTableDef = table.sqliteDef
   const id = typeof idOrOptions === 'string' ? idOrOptions : undefined
   const options: (UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>) | undefined =
     typeof idOrOptions === 'string' ? options_ : idOrOptions
   const { defaultValues, dbGraph } = options ?? {}
-  type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['schema']['columns']>
+  type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['sqliteDef']['columns']>
 
   const { store } = useStore()
 
@@ -69,22 +69,26 @@ export const useRow: {
       cachedItem.span.addEvent('new-subscriber', { reactId })
 
       return {
-        query$: cachedItem.query$ as LiveStoreJSQuery<RowResult<TTableDef>>,
+        query$: cachedItem.query$ as LiveQuery<RowResult<TTableDef>, UpdatePathDesc>,
         otelContext: cachedItem.otelContext,
       }
     }
 
     const span = store.otel.tracer.startSpan(
-      `LiveStore:useState:${table.schema.name}${id === undefined ? '' : `:${id}`}`,
+      `LiveStore:useState:${table.sqliteDef.name}${id === undefined ? '' : `:${id}`}`,
       { attributes: { id } },
       store.otel.queriesSpanContext,
     )
 
     const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-    const query$ = table.options.isSingleton
-      ? rowQuery({ table, store, otelContext, defaultValues, dbGraph } as RowQueryArgs<TTableDef>)
-      : rowQuery({ table, store, id, otelContext, defaultValues, dbGraph } as RowQueryArgs<TTableDef>)
+    const query$ = tableIsSingleton(table)
+      ? (rowQuery(table, { otelContext, dbGraph }) as LiveQuery<RowResult<TTableDef>, UpdatePathDesc>)
+      : (rowQuery(table as TTableDef & { options: { isSingleton: false } }, id!, {
+          otelContext,
+          defaultValues: defaultValues!,
+          dbGraph,
+        }) as any as LiveQuery<RowResult<TTableDef>, UpdatePathDesc>)
 
     rcCache.set(table, id ?? 'singleton', query$, reactId, otelContext, span)
 
@@ -105,7 +109,7 @@ export const useRow: {
     [table, id, reactId],
   )
 
-  const query$Ref = useQueryRef(query$, otelContext)
+  const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowResult<TTableDef>>
 
   const setState = React.useMemo<StateSetters<TTableDef>>(() => {
     if (table.isSingleColumn) {
@@ -113,14 +117,7 @@ export const useRow: {
         const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
         if (query$Ref.current === newValue) return
 
-        const encodedValue = Schema.encodeSync(sqliteTableDef.columns['value']!.schema)(newValue)
-
-        store.applyEvent('livestore.UpdateComponentState', {
-          tableName: sqliteTableDef.name,
-          columnNames: ['value'],
-          id,
-          bindValues: { ['value']: encodedValue },
-        })
+        store.applyEvents([storeEventForUpdatePath(query$.updatePathDesc!, { value: newValue })])
       }
     } else {
       const setState = // TODO: do we have a better type for the values that can go in SQLite?
@@ -133,14 +130,7 @@ export const useRow: {
           // @ts-expect-error TODO fix typing
           if (query$Ref.current[columnName] === newValue) return
 
-          const encodedValue = Schema.encodeSync(column.schema)(newValue)
-
-          store.applyEvent('livestore.UpdateComponentState', {
-            tableName: sqliteTableDef.name,
-            columnNames: [columnName],
-            id,
-            bindValues: { [columnName]: encodedValue },
-          })
+          store.applyEvents([storeEventForUpdatePath(query$.updatePathDesc!, { [columnName]: newValue })])
         })
 
       setState.setMany = (columnValuesOrFn: Partial<TComponentState>) => {
@@ -157,22 +147,12 @@ export const useRow: {
           return
         }
 
-        const columnNames = Object.keys(columnValues)
-        const bindValues = mapValues(columnValues, (value, columnName) =>
-          Schema.encodeSync(sqliteTableDef.columns[columnName]!.schema)(value),
-        )
-
-        store.applyEvent('livestore.UpdateComponentState', {
-          tableName: sqliteTableDef.name,
-          columnNames,
-          id,
-          bindValues,
-        })
+        store.applyEvents([storeEventForUpdatePath(query$.updatePathDesc!, { columnValues })])
       }
 
       return setState as any
     }
-  }, [table.isSingleColumn, id, sqliteTableDef.columns, sqliteTableDef.name, store, query$Ref])
+  }, [query$.updatePathDesc, query$Ref, sqliteTableDef.columns, store, table.isSingleColumn])
 
   return [query$Ref.current, setState, query$]
 }
@@ -198,11 +178,11 @@ class RCCache {
         reactIds: Set<string>
         span: otel.Span
         otelContext: otel.Context
-        query$: LiveStoreJSQuery<any>
+        query$: LiveQuery<any, any>
       }
     >
   >()
-  private reverseCache = new Map<LiveStoreJSQuery<any>, [TableDef, string]>()
+  private reverseCache = new Map<LiveQuery<any, any>, [TableDef, string]>()
 
   get = (table: TableDef, id: string) => {
     const queries = this.cache.get(table)
@@ -213,7 +193,7 @@ class RCCache {
   set = (
     table: TableDef,
     id: string,
-    query$: LiveStoreJSQuery<any>,
+    query$: LiveQuery<any, any>,
     reactId: string,
     otelContext: otel.Context,
     span: otel.Span,
@@ -227,7 +207,7 @@ class RCCache {
     this.reverseCache.set(query$, [table, id])
   }
 
-  delete = (query$: LiveStoreJSQuery<any>) => {
+  delete = (query$: LiveQuery<any, any>) => {
     const item = this.reverseCache.get(query$)
     if (item === undefined) return
 

package/src/react/useTemporaryQuery.ts

@@ -1,25 +1,23 @@
 import React from 'react'
 
-import type { ILiveStoreQuery } from '../reactiveQueries/base-class.js'
+import type { LiveQuery } from '../reactiveQueries/base-class.js'
 import { useQueryRef } from './useQuery.js'
 
 /**
  * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷.
  * The map entry is being removed again in the `React.useEffect` call below.
  */
-const queryCache = new Map<() => ILiveStoreQuery<any>, { reactIds: Set<string>; query$: ILiveStoreQuery<any> }>()
+const queryCache = new Map<() => LiveQuery<any>, { reactIds: Set<string>; query$: LiveQuery<any> }>()
 
 /**
  * Creates a query, subscribes and destroys it when the component unmounts.
  *
  * Make sure `makeQuery` is a memoized function.
  */
-export const useTemporaryQuery = <TResult>(makeQuery: () => ILiveStoreQuery<TResult>): TResult =>
+export const useTemporaryQuery = <TResult>(makeQuery: () => LiveQuery<TResult>): TResult =>
   useTemporaryQueryRef(makeQuery).current
 
-export const useTemporaryQueryRef = <TResult>(
-  makeQuery: () => ILiveStoreQuery<TResult>,
-): React.MutableRefObject<TResult> => {
+export const useTemporaryQueryRef = <TResult>(makeQuery: () => LiveQuery<TResult>): React.MutableRefObject<TResult> => {
   const reactId = React.useId()
 
   const query$ = React.useMemo(() => {

package/src/reactiveQueries/base-class.ts

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
 import type { StackInfo } from '../react/utils/stack-info.js'
 import { type Atom, type GetAtom, ReactiveGraph, throwContextNotSetError, type Thunk } from '../reactive.js'
 import type { QueryDebugInfo, RefreshReason, Store } from '../store.js'
-import type { LiveStoreJSQuery } from './js.js'
+import type { UpdatePathDesc, UpdatePathDescNone } from '../update-path.js'
 
 export type DbGraph = ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>
 
@@ -22,10 +22,16 @@ export type DbContext = {
 
 export type UnsubscribeQuery = () => void
 
+export type GetResult<TQuery extends LiveQueryAny> = TQuery extends LiveQuery<infer TResult> ? TResult : unknown
+
 let queryIdCounter = 0
 
-export interface ILiveStoreQuery<TResult> {
+export type LiveQueryAny = LiveQuery<any, UpdatePathDesc>
+
+export interface LiveQuery<TResult, TUpdatePath extends UpdatePathDesc = UpdatePathDescNone> {
   id: number
+  _tag: 'js' | 'sql' | 'graphql'
+  'result!': TResult
 
   /** A reactive thunk representing the query results */
   results$: Thunk<TResult, DbContext, RefreshReason>
@@ -37,10 +43,16 @@ export interface ILiveStoreQuery<TResult> {
   destroy(): void
 
   activeSubscriptions: Set<StackInfo>
+
+  updatePathDesc: TUpdatePath
 }
 
-export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TResult> {
+export abstract class LiveStoreQueryBase<TResult, TUpdatePath extends UpdatePathDesc>
+  implements LiveQuery<TResult, TUpdatePath>
+{
+  'result!'!: TResult
   id = queryIdCounter++
+  abstract _tag: 'js' | 'sql' | 'graphql'
 
   /** Human-readable label for the query for debugging */
   abstract label: string
@@ -51,6 +63,8 @@ export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TRe
 
   protected abstract dbGraph: DbGraph
 
+  abstract updatePathDesc: TUpdatePath
+
   get runs() {
     return this.results$.recomputations
   }
@@ -75,7 +89,7 @@ export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TRe
     throwContextNotSetError(this.dbGraph)
 }
 
-export type GetAtomResult = <T>(atom: Atom<T, any, RefreshReason> | LiveStoreJSQuery<T>) => T
+export type GetAtomResult = <T>(atom: Atom<T, any, RefreshReason> | LiveQuery<T, any>) => T
 
 export const makeGetAtomResult = (get: GetAtom, otelContext: otel.Context) => {
   const getAtom: GetAtomResult = (atom) => {

package/src/reactiveQueries/graphql.ts

@@ -6,22 +6,22 @@ import * as graphql from 'graphql'
 import { globalDbGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { BaseGraphQLContext, RefreshReason, Store } from '../store.js'
+import type { UpdatePathDescNone } from '../update-path.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import type { DbContext, DbGraph, GetAtomResult } from './base-class.js'
+import type { DbContext, DbGraph, GetAtomResult, LiveQuery } from './base-class.js'
 import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
-import { LiveStoreJSQuery } from './js.js'
 
 export const queryGraphQL = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
   document: DocumentNode<TResult, TVariableValues>,
   genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues),
   { label, dbGraph }: { label?: string; dbGraph?: DbGraph } = {},
-) => new LiveStoreGraphQLQuery({ document, genVariableValues, label, dbGraph })
+): LiveQuery<TResult, UpdatePathDescNone> => new LiveStoreGraphQLQuery({ document, genVariableValues, label, dbGraph })
 
 export class LiveStoreGraphQLQuery<
   TResult extends Record<string, any>,
   TVariableValues extends Record<string, any>,
   TContext extends BaseGraphQLContext,
-> extends LiveStoreQueryBase<TResult> {
+> extends LiveStoreQueryBase<TResult, UpdatePathDescNone> {
   _tag: 'graphql' = 'graphql'
 
   /** The abstract GraphQL query */
@@ -36,6 +36,8 @@ export class LiveStoreGraphQLQuery<
 
   protected dbGraph: DbGraph
 
+  updatePathDesc: UpdatePathDescNone = { _tag: 'None' }
+
   constructor({
     document,
     label,
@@ -102,16 +104,16 @@ export class LiveStoreGraphQLQuery<
    * Returns a new reactive query that contains the result of
    * running an arbitrary JS computation on the results of this SQL query.
    */
-  pipe = <U>(fn: (result: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
-    new LiveStoreJSQuery({
-      fn: (get) => {
-        const results = get(this.results$)
-        return fn(results, get)
-      },
-      label: `${this.label}:js`,
-      onDestroy: () => this.destroy(),
-      dbGraph: this.dbGraph,
-    })
+  // pipe = <U>(fn: (result: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
+  //   new LiveStoreJSQuery({
+  //     fn: (get) => {
+  //       const results = get(this.results$)
+  //       return fn(results, get)
+  //     },
+  //     label: `${this.label}:js`,
+  //     onDestroy: () => this.destroy(),
+  //     dbGraph: this.dbGraph,
+  //   })
 
   queryOnce = ({
     document,

package/src/reactiveQueries/js.ts

@@ -3,14 +3,30 @@ import * as otel from '@opentelemetry/api'
 import { globalDbGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { RefreshReason } from '../store.js'
+import type { UpdatePathDesc, UpdatePathDescNone } from '../update-path.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import type { DbContext, DbGraph, GetAtomResult } from './base-class.js'
+import type { DbContext, DbGraph, GetAtomResult, LiveQuery } from './base-class.js'
 import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
 
-export const queryJS = <TResult>(fn: (get: GetAtomResult) => TResult, options: { label: string; dbGraph?: DbGraph }) =>
-  new LiveStoreJSQuery<TResult>({ fn, label: options.label, dbGraph: options.dbGraph })
-
-export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
+export const computed = <TResult, TUpdatePath extends UpdatePathDesc = UpdatePathDescNone>(
+  fn: (get: GetAtomResult) => TResult,
+  options?: {
+    label: string
+    dbGraph?: DbGraph
+    updatePathDesc?: TUpdatePath
+  },
+): LiveQuery<TResult, TUpdatePath> =>
+  new LiveStoreJSQuery<TResult, TUpdatePath>({
+    fn,
+    label: options?.label ?? fn.toString(),
+    dbGraph: options?.dbGraph,
+    updatePathDesc: options?.updatePathDesc,
+  })
+
+export class LiveStoreJSQuery<
+  TResult,
+  TUpdatePath extends UpdatePathDesc = UpdatePathDescNone,
+> extends LiveStoreQueryBase<TResult, TUpdatePath> {
   _tag: 'js' = 'js'
 
   /** A reactive thunk representing the query results */
@@ -20,6 +36,8 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
 
   protected dbGraph: DbGraph
 
+  updatePathDesc: TUpdatePath
+
   /**
    * Currently only used for "nested destruction" of piped queries
    *
@@ -33,12 +51,14 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
     label,
     onDestroy,
     dbGraph,
+    updatePathDesc,
   }: {
     label: string
     fn: (get: GetAtomResult) => TResult
     /** Currently only used for "nested destruction" of piped queries */
     onDestroy?: () => void
     dbGraph?: DbGraph
+    updatePathDesc?: TUpdatePath
   }) {
     super()
 
@@ -46,6 +66,7 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
     this.label = label
 
     this.dbGraph = dbGraph ?? globalDbGraph
+    this.updatePathDesc = updatePathDesc ?? ({ _tag: 'None' } as TUpdatePath)
 
     const queryLabel = `${label}:results`
 
@@ -67,16 +88,16 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
     )
   }
 
-  pipe = <U>(fn: (result: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
-    new LiveStoreJSQuery({
-      fn: (get) => {
-        const results = get(this.results$)
-        return fn(results, get)
-      },
-      label: `${this.label}:js`,
-      onDestroy: () => this.destroy(),
-      dbGraph: this.dbGraph,
-    })
+  // pipe = <U>(fn: (result: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
+  //   new LiveStoreJSQuery({
+  //     fn: (get) => {
+  //       const results = get(this.results$)
+  //       return fn(results, get)
+  //     },
+  //     label: `${this.label}:js`,
+  //     onDestroy: () => this.destroy(),
+  //     dbGraph: this.dbGraph,
+  //   })
 
   destroy = () => {
     this.dbGraph.destroyNode(this.results$)