@livestore/livestore 0.0.58-dev.0 → 0.0.58-dev.10

package/src/react/useRow.ts

@@ -1,180 +0,0 @@
-import type { QueryInfo } from '@livestore/common'
-import { DbSchema } from '@livestore/common/schema'
-import { shouldNeverHappen } from '@livestore/utils'
-import { ReadonlyRecord } from '@livestore/utils/effect'
-import type { SqliteDsl } from 'effect-db-schema'
-import React from 'react'
-
-import type { LiveQuery, ReactivityGraph } from '../index.js'
-import type { RowResult } from '../row-query.js'
-import { rowQuery } from '../row-query.js'
-import { useStore } from './LiveStoreContext.js'
-import { useQueryRef } from './useQuery.js'
-import { useMakeTemporaryQuery } from './useTemporaryQuery.js'
-
-export type UseRowResult<TTableDef extends DbSchema.TableDef> = [
-  row: RowResult<TTableDef>,
-  setRow: StateSetters<TTableDef>,
-  query$: LiveQuery<RowResult<TTableDef>, QueryInfo>,
-]
-
-export type UseRowOptionsDefaulValues<TTableDef extends DbSchema.TableDef> = {
-  defaultValues?: Partial<RowResult<TTableDef>>
-}
-
-export type UseRowOptionsBase = {
-  reactivityGraph?: ReactivityGraph
-}
-
-/**
- * Similar to `React.useState` but returns a tuple of `[row, setRow, query$]` for a given table where ...
- *
- *   - `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 `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.
- */
-export const useRow: {
-  <
-    TTableDef extends DbSchema.TableDef<
-      DbSchema.DefaultSqliteTableDef,
-      boolean,
-      DbSchema.TableOptions & { isSingleton: true; deriveMutations: { enabled: true } }
-    >,
-  >(
-    table: TTableDef,
-    options?: UseRowOptionsBase,
-  ): UseRowResult<TTableDef>
-  <
-    TTableDef extends DbSchema.TableDef<
-      DbSchema.DefaultSqliteTableDef,
-      boolean,
-      DbSchema.TableOptions & { isSingleton: false; deriveMutations: { enabled: true } }
-    >,
-  >(
-    table: TTableDef,
-    // TODO adjust so it works with arbitrary primary keys or unique constraints
-    id: string,
-    options?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>,
-  ): UseRowResult<TTableDef>
-} = <
-  TTableDef extends DbSchema.TableDef<
-    DbSchema.DefaultSqliteTableDefConstrained,
-    boolean,
-    DbSchema.TableOptions & { deriveMutations: { enabled: true } }
-  >,
->(
-  table: TTableDef,
-  idOrOptions?: string | UseRowOptionsBase,
-  options_?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>,
-): UseRowResult<TTableDef> => {
-  const sqliteTableDef = table.sqliteDef
-  const id = typeof idOrOptions === 'string' ? idOrOptions : undefined
-  const options: (UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>) | undefined =
-    typeof idOrOptions === 'string' ? options_ : idOrOptions
-  const { defaultValues, reactivityGraph } = options ?? {}
-
-  type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['sqliteDef']['columns']>
-
-  const tableName = table.sqliteDef.name
-
-  if (DbSchema.tableHasDerivedMutations(table) === false) {
-    shouldNeverHappen(`useRow called on table "${tableName}" which does not have 'deriveMutations: true' set`)
-  }
-
-  const { store } = useStore()
-
-  if (
-    store.schema.tables.has(table.sqliteDef.name) === false &&
-    table.sqliteDef.name.startsWith('__livestore') === false
-  ) {
-    shouldNeverHappen(`Table "${table.sqliteDef.name}" not found in schema`)
-  }
-
-  // console.debug('useRow', tableName, id)
-
-  const { query$, otelContext } = useMakeTemporaryQuery(
-    (otelContext) =>
-      DbSchema.tableIsSingleton(table)
-        ? (rowQuery(table, { otelContext, reactivityGraph }) as LiveQuery<RowResult<TTableDef>, QueryInfo>)
-        : (rowQuery(table as TTableDef & { options: { isSingleton: false } }, id!, {
-            otelContext,
-            defaultValues: defaultValues!,
-            reactivityGraph,
-          }) as any as LiveQuery<RowResult<TTableDef>, QueryInfo>),
-    [id!, tableName],
-    {
-      otel: {
-        spanName: `LiveStore:useRow:${tableName}${id === undefined ? '' : `:${id}`}`,
-        attributes: { id },
-      },
-    },
-  )
-
-  const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowResult<TTableDef>>
-
-  const setState = React.useMemo<StateSetters<TTableDef>>(() => {
-    if (table.isSingleColumn) {
-      return (newValueOrFn: RowResult<TTableDef>) => {
-        const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
-        if (query$Ref.current === newValue) return
-
-        // NOTE we need to account for the short-hand syntax for single-column+singleton tables
-        if (table.options.isSingleton) {
-          store.mutate(table.update(newValue))
-        } else {
-          store.mutate(table.update({ where: { id }, values: { value: newValue } }))
-        }
-        // store.mutate(updateMutationForQueryInfo(query$.queryInfo!, { value: newValue }))
-      }
-    } else {
-      const setState = // TODO: do we have a better type for the values that can go in SQLite?
-        ReadonlyRecord.map(sqliteTableDef.columns, (column, columnName) => (newValueOrFn: any) => {
-          const newValue =
-            // @ts-expect-error TODO fix typing
-            typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current[columnName]) : newValueOrFn
-
-          // Don't update the state if it's the same as the value already seen in the component
-          // @ts-expect-error TODO fix typing
-          if (query$Ref.current[columnName] === newValue) return
-
-          store.mutate(table.update({ where: { id: id ?? 'singleton' }, values: { [columnName]: newValue } }))
-          // store.mutate(updateMutationForQueryInfo(query$.queryInfo!, { [columnName]: newValue }))
-        })
-
-      setState.setMany = (columnValuesOrFn: Partial<TComponentState>) => {
-        const columnValues =
-          // @ts-expect-error TODO fix typing
-          typeof columnValuesOrFn === 'function' ? columnValuesOrFn(query$Ref.current) : columnValuesOrFn
-
-        // TODO use hashing instead
-        // Don't update the state if it's the same as the value already seen in the component
-        if (
-          // @ts-expect-error TODO fix typing
-          Object.entries(columnValues).every(([columnName, value]) => query$Ref.current[columnName] === value)
-        ) {
-          return
-        }
-
-        store.mutate(table.update({ where: { id: id ?? 'singleton' }, values: columnValues }))
-        // store.mutate(updateMutationForQueryInfo(query$.queryInfo!, columnValues))
-      }
-
-      return setState as any
-    }
-  }, [id, query$Ref, sqliteTableDef.columns, store, table])
-
-  return [query$Ref.current, setState, query$]
-}
-
-export type Dispatch<A> = (action: A) => void
-export type SetStateAction<S> = S | ((previousValue: S) => S)
-
-export type StateSetters<TTableDef extends DbSchema.TableDef> = TTableDef['isSingleColumn'] extends true
-  ? Dispatch<SetStateAction<RowResult<TTableDef>>>
-  : {
-      [K in keyof RowResult<TTableDef>]: Dispatch<SetStateAction<RowResult<TTableDef>[K]>>
-    } & {
-      setMany: Dispatch<SetStateAction<Partial<RowResult<TTableDef>>>>
-    }

package/src/react/useTemporaryQuery.test.tsx

@@ -1,56 +0,0 @@
-import { Effect, Schema } from '@livestore/utils/effect'
-import { renderHook } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { makeTodoMvc, tables, todos } from '../__tests__/react/fixture.js'
-import type * as LiveStore from '../index.js'
-import { querySQL } from '../reactiveQueries/sql.js'
-import * as LiveStoreReact from './index.js'
-
-describe('useTemporaryQuery', () => {
-  it('simple', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
-
-      const renderCount = makeRenderCount()
-
-      store.mutate(
-        todos.insert({ id: 't1', text: 'buy milk', completed: false }),
-        todos.insert({ id: 't2', text: 'buy bread', completed: false }),
-      )
-
-      const queryMap = new Map<string, LiveStore.LiveQuery<any>>()
-
-      const { rerender, result, unmount } = renderHook(
-        (id: string) => {
-          renderCount.inc()
-
-          return LiveStoreReact.useTemporaryQuery(() => {
-            const query$ = querySQL(`select * from todos where id = '${id}'`, {
-              schema: Schema.Array(tables.todos.schema),
-            })
-            queryMap.set(id, query$)
-            return query$
-          }, id)
-        },
-        { wrapper, initialProps: 't1' },
-      )
-
-      expect(result.current.length).toBe(1)
-      expect(result.current[0]!.text).toBe('buy milk')
-      expect(renderCount.val).toBe(1)
-      expect(queryMap.get('t1')!.runs).toBe(1)
-
-      rerender('t2')
-
-      expect(result.current.length).toBe(1)
-      expect(result.current[0]!.text).toBe('buy bread')
-      expect(renderCount.val).toBe(2)
-      expect(queryMap.get('t1')!.runs).toBe(1)
-      expect(queryMap.get('t2')!.runs).toBe(1)
-
-      unmount()
-
-      expect(queryMap.get('t2')!.runs).toBe(1)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-})

package/src/react/useTemporaryQuery.ts

@@ -1,121 +0,0 @@
-import type { QueryInfo } from '@livestore/common'
-import * as otel from '@opentelemetry/api'
-import React from 'react'
-
-import type { LiveQuery } from '../reactiveQueries/base-class.js'
-import { useStore } from './LiveStoreContext.js'
-import { useQueryRef } from './useQuery.js'
-
-// NOTE Given `useMemo` will be called multiple times (e.g. when using React Strict mode or Fast Refresh),
-// we are using this cache to avoid starting multiple queries/spans for the same component.
-// This is somewhat against some recommended React best practices, but it should be fine in our case below.
-// Please definitely open an issue if you see or run into any problems with this approach!
-const cache = new Map<
-  string,
-  {
-    rc: number
-    query$: LiveQuery<any, any>
-    span: otel.Span
-    otelContext: otel.Context
-  }
->()
-
-export type DepKey = string | number | ReadonlyArray<string | number>
-
-/**
- * Creates a query, subscribes and destroys it when the component unmounts.
- *
- * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
- */
-export const useTemporaryQuery = <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey): TResult =>
-  useTemporaryQueryRef(makeQuery, key).current
-
-export const useTemporaryQueryRef = <TResult>(
-  makeQuery: () => LiveQuery<TResult>,
-  key: DepKey,
-): React.MutableRefObject<TResult> => {
-  const { query$ } = useMakeTemporaryQuery(makeQuery, key)
-
-  return useQueryRef(query$)
-}
-
-export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
-  makeQuery: (otelContext: otel.Context) => LiveQuery<TResult, TQueryInfo>,
-  key: DepKey,
-  options?: {
-    otel?: {
-      spanName?: string
-      attributes?: otel.Attributes
-    }
-  },
-): { query$: LiveQuery<TResult, TQueryInfo>; otelContext: otel.Context } => {
-  const { store } = useStore()
-  const fullKey = React.useMemo(
-    // 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
-    () => (Array.isArray(key) ? key.join('-') : key) + '-' + store.reactivityGraph.id + '-' + makeQuery.toString(),
-    [key, makeQuery, store.reactivityGraph.id],
-  )
-  const fullKeyRef = React.useRef<string>()
-
-  const { query$, otelContext } = React.useMemo(() => {
-    if (fullKeyRef.current !== undefined && fullKeyRef.current !== fullKey) {
-      // console.debug('fullKey changed, destroying previous', fullKeyRef.current.split('-')[0]!, fullKey.split('-')[0]!)
-
-      const cachedItem = cache.get(fullKeyRef.current)
-      if (cachedItem !== undefined) {
-        cachedItem.rc--
-
-        if (cachedItem.rc === 0) {
-          cachedItem.query$.destroy()
-          cachedItem.span.end()
-          cache.delete(fullKeyRef.current)
-        }
-      }
-    }
-
-    const cachedItem = cache.get(fullKey)
-    if (cachedItem !== undefined) {
-      cachedItem.rc++
-
-      return cachedItem
-    }
-
-    const spanName = options?.otel?.spanName ?? `LiveStore:useTemporaryQuery:${key}`
-
-    const span = store.otel.tracer.startSpan(
-      spanName,
-      { attributes: options?.otel?.attributes },
-      store.otel.queriesSpanContext,
-    )
-
-    const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-    const query$ = makeQuery(otelContext)
-
-    cache.set(fullKey, { rc: 1, query$, span, otelContext })
-
-    return { query$, otelContext }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fullKey])
-
-  fullKeyRef.current = fullKey
-
-  React.useEffect(() => {
-    return () => {
-      const cachedItem = cache.get(fullKey)
-      // NOTE in case the fullKey changed then the query was already destroyed in the useMemo above
-      if (cachedItem === undefined) return
-
-      cachedItem.rc--
-
-      if (cachedItem.rc === 0) {
-        cachedItem.query$.destroy()
-        cachedItem.span.end()
-        cache.delete(fullKey)
-      }
-    }
-  }, [fullKey])
-
-  return { query$, otelContext }
-}

package/src/react/utils/useStateRefWithReactiveInput.ts

@@ -1,51 +0,0 @@
-import React from 'react'
-
-/**
- * A variant of `React.useState` which allows the `inputState` to change over time as well.
- * Important: This hook is synchronous / single-render-pass (i.e. doesn't use `useEffect` or `setState` directly).
- *
- * Notes:
- * - The output state is always reset to the input state in case the input state changes (i.e. the previous "external" `setStateAndRerender` call is forgotten)
- * - This hook might not work properly with React Suspense
- * - Also see this Tweet for more potential problems: https://twitter.com/schickling/status/1677317711104278528
- *
- */
-export const useStateRefWithReactiveInput = <T>(
-  inputState: T,
-): [React.MutableRefObject<T>, (newState: T | ((prev: T) => T)) => void] => {
-  const [_, rerender] = React.useState(0)
-
-  const lastKnownInputStateRef = React.useRef<T>(inputState)
-  const stateRef = React.useRef<T>(inputState)
-
-  if (lastKnownInputStateRef.current !== inputState) {
-    lastKnownInputStateRef.current = inputState
-
-    // NOTE we don't need to re-render here, because the component is already re-rendering due to the `inputState` change
-    stateRef.current = inputState
-  }
-
-  const setStateAndRerender = React.useCallback(
-    (newState: ((prev: T) => T) | T) => {
-      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/37663
-      const val = typeof newState === 'function' ? newState(stateRef.current) : newState
-      stateRef.current = val
-      rerender((c) => c + 1)
-    },
-    [rerender],
-  )
-
-  return [stateRef, setStateAndRerender]
-}
-
-// Down-side of this implementation: Double render pass due to `setState` call (which forces a re-render)
-// Keeping around for now in case `useStateRefWithReactiveInput` doesn't work out
-// const _useStateWithReactiveInput = <T>(inputState: T): [T, (newState: T | ((prev: T) => T)) => void] => {
-//   const [externalState, setExternalState] = React.useState(inputState)
-
-//   if (externalState !== inputState) {
-//     setExternalState(inputState)
-//   }
-
-//   return [externalState, setExternalState]
-// }