@livestore/solid 0.4.0-dev.21 → 0.4.0-dev.23

package/src/__tests__/fixture.tsx

@@ -0,0 +1,42 @@
+import type * as Solid from 'solid-js'
+
+import type { UnknownError } from '@livestore/common'
+import {
+  type AppState,
+  type CreateTodoMvcStoreOptions,
+  createTodoMvcStore,
+  events,
+  type Filter,
+  schema,
+  type Todo,
+  tables,
+} from '@livestore/framework-toolkit/testing'
+import type { Store } from '@livestore/livestore'
+import { StoreInternalsSymbol } from '@livestore/livestore'
+import { Effect, type Scope } from '@livestore/utils/effect'
+
+import * as LiveStoreSolid from '../mod.ts'
+
+// Re-export shared types, schema, and StoreInternalsSymbol for tests
+export { events, schema, StoreInternalsSymbol, tables }
+export type { AppState, Filter, Todo }
+
+export const makeTodoMvcSolid = (
+  opts: CreateTodoMvcStoreOptions = {},
+): Effect.Effect<
+  {
+    wrapper: ({ children }: any) => Solid.JSX.Element
+    store: Store<typeof schema> & LiveStoreSolid.SolidApi
+  },
+  UnknownError,
+  Scope.Scope
+> =>
+  Effect.gen(function* () {
+    const store = yield* createTodoMvcStore(opts)
+
+    const storeWithSolidApi = LiveStoreSolid.withSolidApi(store)
+
+    const wrapper = (props: Solid.ParentProps) => <>{props.children}</>
+
+    return { wrapper, store: storeWithSolidApi }
+  })

package/src/experimental/components/LiveList.tsx

@@ -0,0 +1,54 @@
+import type { Accessor, JSX } from 'solid-js'
+import * as Solid from 'solid-js'
+
+import type { LiveQueryDef, Store } from '@livestore/livestore'
+import { computed } from '@livestore/livestore'
+
+import { useQuery } from '../../useQuery.ts'
+
+/*
+TODO:
+- [ ] Bring back incremental rendering (see https://github.com/livestorejs/livestore/pull/55)
+- [ ] Enable exit animations
+*/
+
+export type LiveListProps<TItem> = {
+  items$: LiveQueryDef<ReadonlyArray<TItem>>
+  // TODO refactor render-flag to allow for transition animations on add/remove
+  renderItem: (item: Accessor<TItem>, index: Accessor<number>) => JSX.Element
+  /** Needs to be unique across all list items */
+  getKey: (item: TItem, index: number) => string | number
+  /** The store instance to use for queries */
+  store: Store<any, any>
+}
+
+/**
+ * This component is a helper component for rendering a list of items for a LiveQuery of an array of items.
+ * The idea is that instead of letting Solid handle the rendering of the items array directly,
+ * we derive a item LiveQuery for each item which moves the reactivity to the item level when a single item changes.
+ *
+ * In the future we want to make this component even more efficient by using incremental rendering (https://github.com/livestorejs/livestore/pull/55)
+ * e.g. when an item is added/removed/moved to only re-render the affected DOM nodes.
+ */
+export const LiveList = <TItem,>(props: LiveListProps<TItem>): JSX.Element => {
+  const [config] = Solid.splitProps(props, ['store'])
+  const keys = useQuery(
+    () => computed((get) => get(props.items$).map((item, index) => props.getKey(item, index))),
+    config,
+  )
+  return <Solid.For each={keys()}>{(key, index) => <ItemWrapper {...props} key={key} index={index} />}</Solid.For>
+}
+
+export const ItemWrapper = <TItem,>(
+  props: { key: string | number; index: Accessor<number> } & LiveListProps<TItem>,
+) => {
+  const [config] = Solid.splitProps(props, ['store'])
+  const item = useQuery(
+    () =>
+      computed((get) => get(props.items$).find((item, index) => props.getKey(item, index) === props.key)!, {
+        deps: [props.key],
+      }),
+    config,
+  )
+  return <>{props.renderItem(item, props.index)}</>
+}

package/src/experimental/mod.ts

@@ -0,0 +1 @@
+export { LiveList, type LiveListProps } from './components/LiveList.tsx'

package/src/mod.ts

@@ -1,2 +1,6 @@
-export { query } from './query.ts'
-export { getStore } from './store.ts'
+export type { Dispatch, SetStateAction, SetStateActionPartial, StateSetters } from '@livestore/framework-toolkit'
+export { StoreRegistry, storeOptions } from '@livestore/livestore'
+export { LiveList, type LiveListProps } from './experimental/components/LiveList.tsx'
+export * from './StoreRegistryContext.tsx'
+export type { UseClientDocumentResult } from './useClientDocument.ts'
+export { type SolidApi, useStore, withSolidApi } from './useStore.ts'

package/src/useClientDocument.client.test.tsx

@@ -0,0 +1,299 @@
+/** 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 { 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'
+import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
+import * as SolidTesting from '@solidjs/testing-library'
+import * as Solid from 'solid-js'
+
+import { events, makeTodoMvcSolid, StoreInternalsSymbol, tables } from './__tests__/fixture.tsx'
+import type * as LiveStoreSolid from './mod.ts'
+
+// const strictMode = process.env.REACT_STRICT_MODE !== undefined
+
+// NOTE running tests concurrently doesn't work with the default global db graph
+Vitest.describe('useClientDocument', () => {
+  Vitest.scopedLive('should update the data based on component key', () =>
+    Effect.gen(function* () {
+      const { wrapper, store } = yield* makeTodoMvcSolid({})
+
+      const [userId, setUserId] = Solid.createSignal('u1')
+
+      const { result } = SolidTesting.renderHook(
+        () => {
+          const [state, setState, id] = store.useClientDocument(tables.userInfo, userId)
+          return { state, setState, id }
+        },
+        { wrapper },
+      )
+
+      Vitest.expect(result.id()).toBe('u1')
+      Vitest.expect(result.state().username).toBe('')
+      Vitest.expect(store[StoreInternalsSymbol].reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+      store.commit(tables.userInfo.set({ username: 'username_u2' }, 'u2'))
+
+      setUserId('u2')
+
+      Vitest.expect(store[StoreInternalsSymbol].reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+      Vitest.expect(result.id()).toBe('u2')
+      Vitest.expect(result.state().username).toBe('username_u2')
+    }),
+  )
+
+  // TODO add a test that makes sure Solid doesn't re-render when a setter is used to set the same value
+
+  Vitest.scopedLive('should update the data reactively - via setState', () =>
+    Effect.gen(function* () {
+      const { wrapper, store } = yield* makeTodoMvcSolid({})
+
+      const { result } = SolidTesting.renderHook(
+        () => {
+          const [state, setState, id] = store.useClientDocument(tables.userInfo, 'u1')
+          return { state, setState, id }
+        },
+        { wrapper },
+      )
+
+      Vitest.expect(result.id()).toBe('u1')
+      Vitest.expect(result.state().username).toBe('')
+
+      result.setState({ username: 'username_u1_hello' })
+
+      Vitest.expect(result.id()).toBe('u1')
+      Vitest.expect(result.state().username).toBe('username_u1_hello')
+    }),
+  )
+
+  Vitest.scopedLive('should update the data reactively - via raw store commit', () =>
+    Effect.gen(function* () {
+      const { wrapper, store } = yield* makeTodoMvcSolid({})
+
+      const { result } = SolidTesting.renderHook(
+        () => {
+          const [state, setState, id] = store.useClientDocument(tables.userInfo, 'u1')
+          return { state, setState, id }
+        },
+        { wrapper },
+      )
+
+      Vitest.expect(result.id()).toBe('u1')
+      Vitest.expect(result.state().username).toBe('')
+
+      store.commit(events.UserInfoSet({ username: 'username_u1_hello' }, 'u1'))
+
+      Vitest.expect(result.id()).toBe('u1')
+      Vitest.expect(result.state().username).toBe('username_u1_hello')
+    }),
+  )
+
+  Vitest.scopedLive('should work for a larger app', () =>
+    Effect.gen(function* () {
+      const { wrapper, store } = yield* makeTodoMvcSolid({})
+
+      const allTodos$ = LiveStore.queryDb(
+        { query: `select * from todos`, schema: Schema.Array(tables.todos.rowSchema) },
+        { label: 'allTodos' },
+      )
+
+      let globalSetState: LiveStoreSolid.StateSetters<typeof tables.AppRouterSchema> | undefined
+      const AppRouter = () => {
+        const [state, setState] = store.useClientDocument(
+          () => tables.AppRouterSchema,
+          () => 'singleton',
+        )
+
+        globalSetState = setState
+
+        return (
+          <div>
+            <TasksList />
+            <div role={'current-id' as any}>Current Task Id: {state().currentTaskId ?? '-'}</div>
+            <Solid.Show when={state().currentTaskId} fallback={'Click on a task to see details'}>
+              {(id: Solid.Accessor<string>) => <TaskDetails id={id()} />}
+            </Solid.Show>
+          </div>
+        )
+      }
+
+      const TasksList = () => {
+        const allTodos = store.useQuery(() => allTodos$)
+
+        return (
+          <div>
+            <Solid.For each={allTodos()}>{(todo) => <div>{todo.id}</div>}</Solid.For>
+          </div>
+        )
+      }
+
+      const TaskDetails = (props: { id: string }) => {
+        const todo = store.useQuery(() =>
+          LiveStore.queryDb(tables.todos.where({ id: props.id }).first(), { deps: props.id }),
+        )
+
+        return <div role={'content' as any}>{JSON.stringify(todo())}</div>
+      }
+
+      const { getByRole } = SolidTesting.render(() => <AppRouter />, { wrapper })
+
+      store.commit(events.todoCreated({ id: 't1', text: 'buy milk', completed: false }))
+
+      Vitest.expect(getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
+
+      globalSetState!({ currentTaskId: 't1' })
+
+      Vitest.expect(getByRole('content').innerHTML).toMatchInlineSnapshot(
+        `"{"id":"t1","text":"buy milk","completed":false}"`,
+      )
+
+      Vitest.expect(getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"')
+
+      store.commit(
+        events.todoCreated({ id: 't2', text: 'buy eggs', completed: false }),
+        events.AppRouterSet({ currentTaskId: 't2' }),
+        events.todoCreated({ id: 't3', text: 'buy bread', completed: false }),
+      )
+
+      Vitest.expect(getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
+    }),
+  )
+
+  Vitest.scopedLive('should work for a useClientDocument query chained with a useTemporary query', () =>
+    Effect.gen(function* () {
+      const { store, wrapper } = yield* makeTodoMvcSolid({})
+
+      store.commit(
+        events.todoCreated({ id: 't1', text: 'buy milk', completed: false }),
+        events.todoCreated({ id: 't2', text: 'buy bread', completed: false }),
+      )
+
+      const [userId, setUserId] = Solid.createSignal('u1')
+
+      const { result } = SolidTesting.renderHook(
+        () => {
+          const [_row, _setRow, _id, rowState$] = store.useClientDocument(tables.userInfo, userId)
+          const todos = store.useQuery(
+            () =>
+              LiveStore.queryDb(
+                (get) => tables.todos.where('text', 'LIKE', `%${get(rowState$()).text}%`),
+                // TODO find a way where explicit `userId` is not needed here
+                // possibly by automatically understanding the `get(rowState$)` dependency
+                { label: 'todosFiltered', deps: userId() },
+              ),
+            // TODO introduce a `deps` array which is only needed when a query is parametric
+          )
+
+          return { todos }
+        },
+        { wrapper },
+      )
+
+      Vitest.expect(result.todos()?.length).toBe(2)
+
+      // Set text filter for u2 and test with second user
+      store.commit(events.UserInfoSet({ username: 'username_u2', text: 'milk' }, 'u2'))
+
+      setUserId('u2')
+
+      Vitest.expect(result.todos()?.length).toBe(1)
+    }),
+  )
+
+  Vitest.scopedLive('kv client document overwrites value (Schema.Any, no partial merge)', () =>
+    Effect.gen(function* () {
+      const { wrapper, store } = yield* makeTodoMvcSolid({})
+
+      const { result } = SolidTesting.renderHook(
+        () => {
+          const [state, setState] = store.useClientDocument(tables.kv, 'k1')
+          return { state, setState }
+        },
+        { wrapper },
+      )
+
+      Vitest.expect(result.state()).toBe(null)
+
+      result.setState(1)
+      Vitest.expect(result.state()).toEqual(1)
+
+      result.setState({ b: 2 })
+      Vitest.expect(result.state()).toEqual({ b: 2 })
+    }),
+  )
+
+  Vitest.describe('otel', () => {
+    Vitest.it('should update the data based on component key', async () => {
+      const exporter = new InMemorySpanExporter()
+
+      const provider = new BasicTracerProvider({
+        spanProcessors: [new SimpleSpanProcessor(exporter)],
+      })
+
+      const otelTracer = provider.getTracer(`testing-solid`)
+
+      const span = otelTracer.startSpan('test-root')
+      const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+      await Effect.gen(function* () {
+        const { wrapper, store } = yield* makeTodoMvcSolid({
+          otelContext,
+          otelTracer,
+        })
+
+        const [userId, setUserId] = Solid.createSignal('u1')
+
+        // Test with first user
+        const { result } = SolidTesting.renderHook(
+          () => {
+            const [state, setState, id] = store.useClientDocument(tables.userInfo, userId)
+            return { state, setState, id }
+          },
+          { wrapper },
+        )
+
+        Vitest.expect(result.id()).toBe('u1')
+        Vitest.expect(result.state().username).toBe('')
+
+        // For u2 we'll make sure that the row already exists,
+        // so the lazy `insert` will be skipped
+        store.commit(events.UserInfoSet({ username: 'username_u2' }, 'u2'))
+
+        // Test with second user (new hook instance)
+        setUserId('u2')
+
+        Vitest.expect(result.id()).toBe('u2')
+        Vitest.expect(result.state().username).toBe('username_u2')
+
+        span.end()
+      }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
+
+      await provider.forceFlush()
+
+      const mapAttributes = (attributes: otel.Attributes) => {
+        return ReadonlyRecord.map(attributes, (val, key) => {
+          if (key === 'code.stacktrace') {
+            return '<STACKTRACE>'
+          } else if (key === 'firstStackInfo') {
+            const stackInfo = JSON.parse(val as string) as LiveStore.StackInfo
+            // stackInfo.frames.shift() // Removes `renderHook.wrapper` from the stack
+            stackInfo.frames.forEach((_) => {
+              if (_.name.includes('renderHook.wrapper') === true) {
+                _.name = 'renderHook.wrapper'
+              }
+              _.filePath = '__REPLACED_FOR_SNAPSHOT__'
+            })
+            return JSON.stringify(stackInfo)
+          }
+          return val
+        })
+      }
+
+      Vitest.expect(getSimplifiedRootSpan(exporter, 'createStore', mapAttributes)).toMatchSnapshot()
+      Vitest.expect(getAllSimplifiedRootSpans(exporter, 'LiveStore:commit', mapAttributes)).toMatchSnapshot()
+
+      await provider.shutdown()
+    })
+  })
+})

package/src/useClientDocument.server.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * SSR tests for useClientDocument
+ * These tests run in node environment with SSR JSX transform using renderToString.
+ */
+
+import { isServer, renderToString } from 'solid-js/web'
+import { describe, expect, it } from 'vitest'
+
+import { provideOtel } from '@livestore/common'
+import * as LiveStore from '@livestore/livestore'
+import { Effect, Schema } from '@livestore/utils/effect'
+
+import { events, makeTodoMvcSolid, tables } from './__tests__/fixture.tsx'
+
+describe('environment', () => {
+  it('runs on server', () => {
+    // Use 'window' in globalThis to avoid TypeScript error without DOM lib
+    expect('window' in globalThis).toBe(false)
+    expect(isServer).toBe(true)
+  })
+})
+
+describe('useClientDocument SSR', () => {
+  it('renders client document with default value to string', async () => {
+    await Effect.gen(function* () {
+      const { store } = yield* makeTodoMvcSolid({})
+
+      const UserDisplay = () => {
+        const [state] = store.useClientDocument(tables.userInfo, 'u1')
+        return <div>Username: {state().username || 'anonymous'}</div>
+      }
+
+      const html = renderToString(() => <UserDisplay />)
+
+      expect(html).toContain('Username:')
+    }).pipe(provideOtel({}), Effect.scoped, Effect.runPromise)
+  })
+
+  it('renders client document with committed value to string', async () => {
+    await Effect.gen(function* () {
+      const { store } = yield* makeTodoMvcSolid({})
+
+      store.commit(events.UserInfoSet({ username: 'ssr-user' }, 'u1'))
+
+      const UserDisplay = () => {
+        const [state] = store.useClientDocument(tables.userInfo, 'u1')
+        return <div>Username: {state().username}</div>
+      }
+
+      const html = renderToString(() => <UserDisplay />)
+
+      expect(html).toContain('Username:')
+      expect(html).toContain('ssr-user')
+    }).pipe(provideOtel({}), Effect.scoped, Effect.runPromise)
+  })
+
+  it('renders larger app with useClientDocument and useQuery to string', async () => {
+    await Effect.gen(function* () {
+      const { store } = yield* makeTodoMvcSolid({})
+
+      const allTodos$ = LiveStore.queryDb(
+        { query: `select * from todos`, schema: Schema.Array(tables.todos.rowSchema) },
+        { label: 'allTodos' },
+      )
+
+      store.commit(
+        events.todoCreated({ id: 't1', text: 'buy milk', completed: false }),
+        events.todoCreated({ id: 't2', text: 'buy eggs', completed: true }),
+      )
+
+      const App = () => {
+        const [routerState] = store.useClientDocument(tables.AppRouterSchema, 'singleton')
+        const allTodos = store.useQuery(allTodos$)
+
+        return (
+          <div>
+            <div>Current Task: {routerState().currentTaskId ?? 'none'}</div>
+            <div>Total Tasks: {allTodos()?.length}</div>
+          </div>
+        )
+      }
+
+      const html = renderToString(() => <App />)
+
+      expect(html).toContain('Current Task:')
+      expect(html).toContain('none')
+      expect(html).toContain('Total Tasks:')
+      expect(html).toContain('2')
+    }).pipe(provideOtel({}), Effect.scoped, Effect.runPromise)
+  })
+
+  it('renders kv client document to string', async () => {
+    await Effect.gen(function* () {
+      const { store } = yield* makeTodoMvcSolid({})
+
+      const KVDisplay = () => {
+        const [state] = store.useClientDocument(tables.kv, 'k1')
+        return <div>Value: {JSON.stringify(state())}</div>
+      }
+
+      const html = renderToString(() => <KVDisplay />)
+
+      expect(html).toContain('Value:')
+      expect(html).toContain('null')
+    }).pipe(provideOtel({}), Effect.scoped, Effect.runPromise)
+  })
+})

package/src/useClientDocument.ts

@@ -0,0 +1,146 @@
+import * as Solid from 'solid-js'
+
+import type { RowQuery } from '@livestore/common'
+import { SessionIdSymbol } from '@livestore/common'
+import { State } from '@livestore/common/schema'
+import { removeUndefinedValues, type StateSetters, validateTableOptions } from '@livestore/framework-toolkit'
+import type { LiveQuery, LiveQueryDef, Store } from '@livestore/livestore'
+import { queryDb } from '@livestore/livestore'
+
+import { useQueryRef } from './useQuery.ts'
+import { type AccessorMaybe, resolve } from './utils.ts'
+
+export type UseClientDocumentResult<TTableDef extends State.SQLite.ClientDocumentTableDef.TraitAny> = [
+  row: Solid.Accessor<TTableDef['Value']>,
+  setRow: StateSetters<TTableDef>,
+  id: Solid.Accessor<string>,
+  query$: Solid.Accessor<LiveQuery<TTableDef['Value']>>,
+]
+
+/**
+ * Type for useClientDocument that enforces id requirement based on table definition.
+ * If table has a default id → id parameter is optional.
+ * If table has no default id → id parameter is required.
+ */
+export interface UseClientDocument {
+  // case: table has default id → id is optional
+  <
+    TTableDef extends State.SQLite.ClientDocumentTableDef.Trait<
+      any,
+      any,
+      any,
+      {
+        partialSet: boolean
+        default: { id: string | SessionIdSymbol; value: any }
+      }
+    >,
+  >(
+    table: AccessorMaybe<TTableDef>,
+    id: AccessorMaybe<State.SQLite.ClientDocumentTableDef.DefaultIdType<TTableDef> | SessionIdSymbol> | undefined,
+    options: Partial<RowQuery.GetOrCreateOptions<TTableDef>> | undefined,
+    config: { store: Store<any, any> },
+  ): UseClientDocumentResult<TTableDef>
+
+  // case: table has no default id → id is required
+  <
+    TTableDef extends State.SQLite.ClientDocumentTableDef.Trait<
+      any,
+      any,
+      any,
+      { partialSet: boolean; default: { id: undefined; value: any } }
+    >,
+  >(
+    table: AccessorMaybe<TTableDef>,
+    id: AccessorMaybe<string | SessionIdSymbol>,
+    options: Partial<RowQuery.GetOrCreateOptions<TTableDef>> | undefined,
+    config: { store: Store<any, any> },
+  ): UseClientDocumentResult<TTableDef>
+}
+
+/**
+ * Similar to `Solid.createSignal` but returns a tuple of `[state, setState, id, query$]` for a given table where ...
+ *
+ *   - `state` is the current value of the row (fully decoded according to the table schema)
+ *   - `setState` is a function that can be used to update the document
+ *   - `id` is the id of the document
+ *   - `query$` is a `LiveQuery` that e.g. can be used to subscribe to changes to the document
+ *
+ * `useClientDocument` only works for client-document tables:
+ *
+ * ```tsx
+ * const MyState = State.SQLite.clientDocument({
+ *   name: 'MyState',
+ *   schema: Schema.Struct({
+ *     showSidebar: Schema.Boolean,
+ *   }),
+ *   default: { id: SessionIdSymbol, value: { showSidebar: true } },
+ * })
+ *
+ * const MyComponent = () => {
+ *   const [{ showSidebar }, setState] = useClientDocument(MyState)
+ *   return (
+ *     <div onClick={() => setState({ showSidebar: !showSidebar })}>
+ *       {showSidebar ? 'Sidebar is open' : 'Sidebar is closed'}
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * If the table has a default id, `useClientDocument` can be called without an `id` argument. Otherwise, the `id` argument is required.
+ */
+export const useClientDocument: UseClientDocument = <TTableDef extends State.SQLite.ClientDocumentTableDef.Any>(
+  table: AccessorMaybe<TTableDef>,
+  _id: AccessorMaybe<string | SessionIdSymbol> | undefined,
+  options: Partial<RowQuery.GetOrCreateOptions<TTableDef>> | undefined,
+  config: { store: Store<any, any> },
+): UseClientDocumentResult<TTableDef> => {
+  const id = (): string | SessionIdSymbol => {
+    const id = resolve(_id)
+    return typeof id === 'string' || id === SessionIdSymbol
+      ? id
+      : resolve(table)[State.SQLite.ClientDocumentTableDefSymbol].options.default.id
+  }
+
+  const serializedId = () => {
+    const _id = id()
+    return typeof _id === 'string' ? _id : config.store.sessionId
+  }
+
+  Solid.createComputed(() => validateTableOptions(resolve(table)))
+
+  type QueryDef = LiveQueryDef<TTableDef['Value']>
+  const queryDef = Solid.createMemo<QueryDef>(() =>
+    queryDb(
+      resolve(table).get(
+        id(),
+        options?.default !== undefined
+          ? {
+              default: options.default,
+            }
+          : undefined,
+      ),
+      {
+        deps: [serializedId(), resolve(table).sqliteDef.name, JSON.stringify(options?.default)],
+      },
+    ),
+  )
+
+  const queryRef = useQueryRef(queryDef, {
+    get otelSpanName() {
+      return `LiveStore:useClientDocument:${resolve(table).sqliteDef.name}:${serializedId()}`
+    },
+    get store() {
+      return config.store
+    },
+  })
+
+  const setState = (newValueOrFn: TTableDef['Value']) => {
+    const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(queryRef.valueRef()) : newValueOrFn
+
+    if (queryRef.valueRef() === newValue) return
+
+    config.store.commit(resolve(table).set(removeUndefinedValues(newValue), id()))
+  }
+
+  return [queryRef.valueRef, setState, serializedId, () => queryRef.queryRcRef().value]
+}