@livestore/react 0.4.0-dev.1 → 0.4.0-dev.11

package/src/__tests__/fixture.tsx

@@ -3,6 +3,7 @@ import { provideOtel, type UnexpectedError } from '@livestore/common'
 import { Events, makeSchema, State } from '@livestore/common/schema'
 import type { LiveStoreSchema, SqliteDsl, Store } from '@livestore/livestore'
 import { createStore } from '@livestore/livestore'
+import { omitUndefineds } from '@livestore/utils'
 import { Effect, Schema, type Scope } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import React from 'react'
@@ -60,6 +61,12 @@ const AppRouterSchema = State.SQLite.clientDocument({
   },
 })
 
+const kv = State.SQLite.clientDocument({
+  name: 'Kv',
+  schema: Schema.Any,
+  default: { value: null },
+})
+
 export const events = {
   todoCreated: Events.synced({
     name: 'todoCreated',
@@ -75,14 +82,15 @@ export const events = {
   }),
   AppRouterSet: AppRouterSchema.set,
   UserInfoSet: userInfo.set,
+  KvSet: kv.set,
 }
 
 const materializers = State.SQLite.materializers(events, {
   todoCreated: ({ id, text, completed }) => todos.insert({ id, text, completed }),
-  todoUpdated: ({ id, text, completed }) => todos.update({ completed, text }).where({ id }),
+  todoUpdated: ({ id, text, completed }) => todos.update({ ...omitUndefineds({ completed, text }) }).where({ id }),
 })
 
-export const tables = { todos, app, userInfo, AppRouterSchema }
+export const tables = { todos, app, userInfo, AppRouterSchema, kv }
 
 const state = State.SQLite.makeState({ tables, materializers })
 export const schema = makeSchema({ state, events })
@@ -92,9 +100,9 @@ export const makeTodoMvcReact: ({
   otelContext,
   strictMode,
 }?: {
-  otelTracer?: otel.Tracer
-  otelContext?: otel.Context
-  strictMode?: boolean
+  otelTracer?: otel.Tracer | undefined
+  otelContext?: otel.Context | undefined
+  strictMode?: boolean | undefined
 }) => Effect.Effect<
   {
     wrapper: ({ children }: any) => React.JSX.Element
@@ -108,9 +116,9 @@ export const makeTodoMvcReact: ({
   otelContext,
   strictMode,
 }: {
-  otelTracer?: otel.Tracer
-  otelContext?: otel.Context
-  strictMode?: boolean
+  otelTracer?: otel.Tracer | undefined
+  otelContext?: otel.Context | undefined
+  strictMode?: boolean | undefined
 } = {}) =>
   Effect.gen(function* () {
     const makeRenderCount = () => {
@@ -156,4 +164,4 @@ export const makeTodoMvcReact: ({
     const renderCount = makeRenderCount()
 
     return { wrapper, store: storeWithReactApi, renderCount }
-  }).pipe(provideOtel({ parentSpanContext: otelContext, otelTracer }))
+  }).pipe(provideOtel(omitUndefineds({ parentSpanContext: otelContext, otelTracer })))

package/src/mod.ts

@@ -3,8 +3,9 @@ export { LiveStoreProvider } from './LiveStoreProvider.tsx'
 export {
   type Dispatch,
   type SetStateAction,
+  type SetStateActionPartial,
   type StateSetters,
-  type UseRowResult as UseStateResult,
+  type UseClientDocumentResult,
   useClientDocument,
 } from './useClientDocument.ts'
 export { useQuery, useQueryRef } from './useQuery.ts'

package/src/useClientDocument.test.tsx

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/a11y/useValidAriaRole: not needed for testing */
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: not needed for testing */
 import * as LiveStore from '@livestore/livestore'
-import { getSimplifiedRootSpan } from '@livestore/livestore/internal/testing-utils'
+import { getAllSimplifiedRootSpans, getSimplifiedRootSpan } from '@livestore/livestore/internal/testing-utils'
 import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect'
 import { Vitest } from '@livestore/utils-dev/node-vitest'
 import * as otel from '@opentelemetry/api'
@@ -224,6 +224,34 @@ Vitest.describe('useClientDocument', () => {
     }),
   )
 
+  Vitest.scopedLive('kv client document overwrites value (Schema.Any, no partial merge)', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, renderCount } = yield* makeTodoMvcReact({})
+
+      const { result } = ReactTesting.renderHook(
+        (id: string) => {
+          renderCount.inc()
+
+          const [state, setState] = store.useClientDocument(tables.kv, id)
+          return { state, setState, id }
+        },
+        { wrapper, initialProps: 'k1' },
+      )
+
+      expect(result.current.id).toBe('k1')
+      expect(result.current.state).toBe(null)
+      expect(renderCount.val).toBe(1)
+
+      ReactTesting.act(() => result.current.setState(1))
+      expect(result.current.state).toEqual(1)
+      expect(renderCount.val).toBe(2)
+
+      ReactTesting.act(() => result.current.setState({ b: 2 }))
+      expect(result.current.state).toEqual({ b: 2 })
+      expect(renderCount.val).toBe(3)
+    }),
+  )
+
   Vitest.describe('otel', () => {
     it.each([{ strictMode: true }, { strictMode: false }])(
       'should update the data based on component key strictMode=%s',
@@ -295,7 +323,8 @@ Vitest.describe('useClientDocument', () => {
           })
         }
 
-        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot()
+        expect(getSimplifiedRootSpan(exporter, 'createStore', mapAttributes)).toMatchSnapshot()
+        expect(getAllSimplifiedRootSpans(exporter, 'LiveStore:commit', mapAttributes)).toMatchSnapshot()
 
         await provider.shutdown()
       },

package/src/useClientDocument.ts

@@ -3,13 +3,13 @@ import { SessionIdSymbol } from '@livestore/common'
 import { State } from '@livestore/common/schema'
 import type { LiveQuery, LiveQueryDef, Store } from '@livestore/livestore'
 import { queryDb } from '@livestore/livestore'
-import { shouldNeverHappen } from '@livestore/utils'
+import { omitUndefineds, shouldNeverHappen } from '@livestore/utils'
 import React from 'react'
 
 import { LiveStoreContext } from './LiveStoreContext.ts'
 import { useQueryRef } from './useQuery.ts'
 
-export type UseRowResult<TTableDef extends State.SQLite.ClientDocumentTableDef.TraitAny> = [
+export type UseClientDocumentResult<TTableDef extends State.SQLite.ClientDocumentTableDef.TraitAny> = [
   row: TTableDef['Value'],
   setRow: StateSetters<TTableDef>,
   id: string,
@@ -54,13 +54,17 @@ export const useClientDocument: {
       any,
       any,
       any,
-      { partialSet: boolean; default: { id: string | SessionIdSymbol; value: any } }
+      {
+        partialSet: boolean
+        /** Default value to use instead of the default value from the table definition */
+        default: any
+      }
     >,
   >(
     table: TTableDef,
     id?: State.SQLite.ClientDocumentTableDef.DefaultIdType<TTableDef> | SessionIdSymbol,
     options?: Partial<RowQuery.GetOrCreateOptions<TTableDef>>,
-  ): UseRowResult<TTableDef>
+  ): UseClientDocumentResult<TTableDef>
 
   // case: no default id → id arg is required
   <
@@ -68,20 +72,24 @@ export const useClientDocument: {
       any,
       any,
       any,
-      { partialSet: boolean; default: { id: string | SessionIdSymbol | undefined; value: any } }
+      {
+        partialSet: boolean
+        /** Default value to use instead of the default value from the table definition */
+        default: any
+      }
     >,
   >(
     table: TTableDef,
     // TODO adjust so it works with arbitrary primary keys or unique constraints
     id: State.SQLite.ClientDocumentTableDef.DefaultIdType<TTableDef> | string | SessionIdSymbol,
     options?: Partial<RowQuery.GetOrCreateOptions<TTableDef>>,
-  ): UseRowResult<TTableDef>
+  ): UseClientDocumentResult<TTableDef>
 } = <TTableDef extends State.SQLite.ClientDocumentTableDef.Any>(
   table: TTableDef,
   idOrOptions?: string | SessionIdSymbol,
   options_?: Partial<RowQuery.GetOrCreateOptions<TTableDef>>,
   storeArg?: { store?: Store },
-): UseRowResult<TTableDef> => {
+): UseClientDocumentResult<TTableDef> => {
   const id =
     typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol
       ? idOrOptions
@@ -97,8 +105,7 @@ export const useClientDocument: {
   const tableName = table.sqliteDef.name
 
   const store =
-    storeArg?.store ??
-    // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
+    storeArg?.store ?? // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
     React.useContext(LiveStoreContext)?.store ??
     shouldNeverHappen(`No store provided to useClientDocument`)
 
@@ -117,7 +124,7 @@ export const useClientDocument: {
 
   const queryRef = useQueryRef(queryDef, {
     otelSpanName: `LiveStore:useClientDocument:${tableName}:${idStr}`,
-    store: storeArg?.store,
+    ...omitUndefineds({ store: storeArg?.store }),
   })
 
   const setState = React.useMemo<StateSetters<TTableDef>>(
@@ -134,10 +141,13 @@ export const useClientDocument: {
 }
 
 export type Dispatch<A> = (action: A) => void
-export type SetStateAction<S> = Partial<S> | ((previousValue: S) => Partial<S>)
+export type SetStateActionPartial<S> = Partial<S> | ((previousValue: S) => Partial<S>)
+export type SetStateAction<S> = S | ((previousValue: S) => S)
 
 export type StateSetters<TTableDef extends State.SQLite.ClientDocumentTableDef.TraitAny> = Dispatch<
-  SetStateAction<TTableDef['Value']>
+  TTableDef[State.SQLite.ClientDocumentTableDefSymbol]['options']['partialSet'] extends false
+    ? SetStateAction<TTableDef['Value']>
+    : SetStateActionPartial<TTableDef['Value']>
 >
 
 const validateTableOptions = (table: State.SQLite.TableDef<any, any>) => {

package/src/useQuery.ts

@@ -42,8 +42,7 @@ export const useQueryRef = <TQuery extends LiveQueryDef.Any>(
   queryRcRef: LiveQueries.RcRef<LiveQuery<LiveQueries.GetResult<TQuery>>>
 } => {
   const store =
-    options?.store ??
-    // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
+    options?.store ?? // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
     React.useContext(LiveStoreContext)?.store ??
     shouldNeverHappen(`No store provided to useQuery`)
 
@@ -133,8 +132,9 @@ Stack trace:
     // so we're also updating the span name here.
     span.updateName(options?.otelSpanName ?? `LiveStore:useQuery:${query$.label}`)
 
-    return store.subscribe(query$, {
-      onUpdate: (newValue) => {
+    return store.subscribe(
+      query$,
+      (newValue) => {
         // NOTE: we return a reference to the result object within LiveStore;
         // this implies that app code must not mutate the results, or else
         // there may be weird reactivity bugs.
@@ -142,12 +142,14 @@ Stack trace:
           setValue(newValue)
         }
       },
-      onUnsubsubscribe: () => {
-        query$.activeSubscriptions.delete(stackInfo)
+      {
+        onUnsubsubscribe: () => {
+          query$.activeSubscriptions.delete(stackInfo)
+        },
+        label: query$.label,
+        otelContext,
       },
-      label: query$.label,
-      otelContext,
-    })
+    )
   }, [stackInfo, query$, setValue, store, valueRef, otelContext, span, options?.otelSpanName])
 
   useRcResource(