@livestore/livestore 0.0.58-dev.8 → 0.1.0-dev.0

package/src/react/components/LiveList.tsx

@@ -1,84 +0,0 @@
-import React from 'react'
-
-import type { LiveQuery } from '../../reactiveQueries/base-class.js'
-import { computed } from '../../reactiveQueries/js.js'
-import { useQuery } from '../useQuery.js'
-import { useTemporaryQuery } from '../useTemporaryQuery.js'
-
-/*
-TODO:
-- [ ] Bring back incremental rendering (see https://github.com/livestorejs/livestore/pull/55)
-- [ ] Enable exit animations
-*/
-
-export type LiveListProps<TItem> = {
-  items$: LiveQuery<ReadonlyArray<TItem>>
-  // TODO refactor render-flag to allow for transition animations on add/remove
-  renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
-  /** Needs to be unique across all list items */
-  getKey: (item: TItem, index: number) => string | number
-}
-
-/**
- * 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 React 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,>({ items$, renderItem, getKey }: LiveListProps<TItem>): React.ReactNode => {
-  const [hasMounted, setHasMounted] = React.useState(false)
-
-  React.useEffect(() => setHasMounted(true), [])
-
-  const keysCb = React.useCallback(() => computed((get) => get(items$).map(getKey)), [getKey, items$])
-  const keys = useTemporaryQuery(keysCb, 'fixed')
-  const arr = React.useMemo(
-    () =>
-      keys.map(
-        (key) =>
-          // TODO figure out a way so that `item$` returns an ordered lookup map to more efficiently find the item by key
-          [key, computed((get) => get(items$).find((item) => getKey(item, 0) === key)!) as LiveQuery<TItem>] as const,
-      ),
-    [getKey, items$, keys],
-  )
-
-  return (
-    <>
-      {arr.map(([key, item$], index) => (
-        <ItemWrapperMemo
-          key={key}
-          itemKey={key}
-          item$={item$}
-          opts={{ isInitialListRender: !hasMounted, index }}
-          renderItem={renderItem}
-        />
-      ))}
-    </>
-  )
-}
-
-const ItemWrapper = <TItem,>({
-  item$,
-  opts,
-  renderItem,
-}: {
-  itemKey: string | number
-  item$: LiveQuery<TItem>
-  opts: { index: number; isInitialListRender: boolean }
-  renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
-}) => {
-  const item = useQuery(item$)
-
-  return <>{renderItem(item, opts)}</>
-}
-
-const ItemWrapperMemo = React.memo(
-  ItemWrapper,
-  (prev, next) =>
-    prev.itemKey === next.itemKey &&
-    prev.renderItem === prev.renderItem &&
-    prev.opts.index === next.opts.index &&
-    prev.opts.isInitialListRender === next.opts.isInitialListRender,
-) as typeof ItemWrapper

package/src/react/index.ts

@@ -1,19 +0,0 @@
-export { LiveStoreContext, useStore } from './LiveStoreContext.js'
-export { LiveStoreProvider } from './LiveStoreProvider.js'
-export { useQuery } from './useQuery.js'
-export { useTemporaryQuery } from './useTemporaryQuery.js'
-export { useStackInfo } from './utils/stack-info.js'
-export {
-  useRow,
-  type StateSetters,
-  type SetStateAction,
-  type Dispatch,
-  type UseRowResult as UseStateResult,
-} from './useRow.js'
-export { useAtom } from './useAtom.js'
-export { useLocalId, getLocalId } from './useLocalId.js'
-
-export { LiveList, type LiveListProps } from './components/LiveList.js'
-
-// Needed to make TS happy
-export type { TypedDocumentNode } from '@graphql-typed-document-node/core'

package/src/react/useAtom.ts

@@ -1,55 +0,0 @@
-import { type QueryInfoCol, type QueryInfoRow } from '@livestore/common'
-import type { DbSchema } from '@livestore/common/schema'
-import React from 'react'
-
-import type { LiveQuery } from '../reactiveQueries/base-class.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, QueryInfoRow<TTableDef> | QueryInfoCol<TTableDef, any>>,
-  TTableDef extends DbSchema.TableDef<
-    DbSchema.DefaultSqliteTableDefConstrained,
-    boolean,
-    DbSchema.TableOptions & { deriveMutations: { enabled: true } }
-  >,
->(
-  query$: TQuery,
-): [value: TQuery['__result!'], setValue: Dispatch<SetStateAction<Partial<TQuery['__result!']>>>] => {
-  const query$Ref = useQueryRef(query$)
-
-  const { store } = useStore()
-
-  // TODO make API equivalent to useRow
-  const setValue = React.useMemo<Dispatch<SetStateAction<TQuery['__result!']>>>(() => {
-    return (newValueOrFn: any) => {
-      const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
-
-      if (query$.queryInfo._tag === 'Row') {
-        if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
-          store.mutate(query$.queryInfo.table.update(newValue))
-        } else if (query$.queryInfo.table.options.isSingleColumn) {
-          store.mutate(
-            query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: { value: newValue } }),
-          )
-        } else {
-          store.mutate(query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: newValue }))
-        }
-      } else {
-        if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
-          store.mutate(query$.queryInfo.table.update({ [query$.queryInfo.column]: newValue }))
-        } else {
-          store.mutate(
-            query$.queryInfo.table.update({
-              where: { id: query$.queryInfo.id },
-              values: { [query$.queryInfo.column]: newValue },
-            }),
-          )
-        }
-      }
-    }
-  }, [query$.queryInfo, query$Ref, store])
-
-  return [query$Ref.current, setValue]
-}

package/src/react/useLocalId.ts

@@ -1,34 +0,0 @@
-/* eslint-disable unicorn/prefer-global-this */
-import { cuid } from '@livestore/utils/cuid'
-import React from 'react'
-
-type LocalIdOptions = {
-  key: string
-  storageType: 'session' | 'local'
-  storageKeyPrefix: string
-  makeId: () => string
-}
-
-export const useLocalId = (opts?: Partial<LocalIdOptions>) => React.useMemo(() => getLocalId(opts), [opts])
-
-export const getLocalId = (opts?: Partial<LocalIdOptions>) => {
-  // TODO find a better way to handle this
-  // Currently `getLocalId` gets imported and called in some worker-side code
-  // during development where Vite isn't tree-shaking yet.
-  if (typeof window === 'undefined' || window.localStorage === undefined || window.sessionStorage === undefined) {
-    return ''
-  }
-
-  const { key = '', storageType = 'session', storageKeyPrefix = 'livestore:localid:', makeId = cuid } = opts ?? {}
-
-  const storage = storageType === 'session' ? window.sessionStorage : window.localStorage
-  const fullKey = `${storageKeyPrefix}:${key}`
-  const storedKey = storage.getItem(fullKey)
-
-  if (storedKey) return storedKey
-
-  const newKey = makeId()
-  storage.setItem(fullKey, newKey)
-
-  return newKey
-}

package/src/react/useQuery.test.tsx

@@ -1,82 +0,0 @@
-import { Effect, Schema } from '@livestore/utils/effect'
-import { renderHook } from '@testing-library/react'
-import React from 'react'
-import { describe, expect, it } from 'vitest'
-
-import { makeTodoMvc, tables, todos } from '../__tests__/react/fixture.js'
-import { querySQL } from '../reactiveQueries/sql.js'
-import * as LiveStoreReact from './index.js'
-
-describe('useQuery', () => {
-  it('simple', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
-
-      const renderCount = makeRenderCount()
-
-      const allTodos$ = querySQL(`select * from todos`, { schema: Schema.Array(tables.todos.schema) })
-
-      const { result } = renderHook(
-        () => {
-          renderCount.inc()
-
-          return LiveStoreReact.useQuery(allTodos$)
-        },
-        { wrapper },
-      )
-
-      expect(result.current.length).toBe(0)
-      expect(renderCount.val).toBe(1)
-
-      React.act(() => store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false })))
-
-      expect(result.current.length).toBe(1)
-      expect(result.current[0]!.text).toBe('buy milk')
-      expect(renderCount.val).toBe(2)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  it('same `useQuery` hook invoked with different queries', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
-
-      const renderCount = makeRenderCount()
-
-      const todo1$ = querySQL(`select * from todos where id = 't1'`, {
-        label: 'libraryTracksView1',
-        schema: Schema.Array(tables.todos.schema),
-      })
-      const todo2$ = querySQL(`select * from todos where id = 't2'`, {
-        label: 'libraryTracksView2',
-        schema: Schema.Array(tables.todos.schema),
-      })
-
-      store.mutate(
-        todos.insert({ id: 't1', text: 'buy milk', completed: false }),
-        todos.insert({ id: 't2', text: 'buy eggs', completed: false }),
-      )
-
-      const { result, rerender } = renderHook(
-        (todoId: string) => {
-          renderCount.inc()
-
-          const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId])
-
-          return LiveStoreReact.useQuery(query$)[0]!.text
-        },
-        { wrapper, initialProps: 't1' },
-      )
-
-      expect(result.current).toBe('buy milk')
-      expect(renderCount.val).toBe(1)
-
-      React.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })))
-
-      expect(result.current).toBe('buy soy milk')
-      expect(renderCount.val).toBe(2)
-
-      rerender('t2')
-
-      expect(result.current).toBe('buy eggs')
-      expect(renderCount.val).toBe(3)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-})

package/src/react/useQuery.ts

@@ -1,106 +0,0 @@
-import { deepEqual } from '@livestore/utils'
-import * as otel from '@opentelemetry/api'
-import React from 'react'
-
-import type { GetResult, 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'
-
-/**
- * NOTE Some folks have suggested to use `React.useSyncExternalStore`, however, it's not doing anything special
- * for what's needed here, so we handle everything manually.
- */
-
-/**
- * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷,
- * 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<LiveQueryAny, { span: otel.Span; otelContext: otel.Context }>()
-
-export const useQuery = <TQuery extends LiveQueryAny>(query: TQuery): GetResult<TQuery> => useQueryRef(query).current
-
-/**
- *
- */
-export const useQueryRef = <TQuery extends LiveQueryAny>(
-  query$: TQuery,
-  parentOtelContext?: otel.Context,
-): React.MutableRefObject<GetResult<TQuery>> => {
-  const { store } = useStore()
-
-  React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`)
-  // console.debug(`LiveStore:useQuery:${query$.id}:${query$.label}`)
-
-  const stackInfo = React.useMemo(() => {
-    Error.stackTraceLimit = 10
-    // eslint-disable-next-line unicorn/error-message
-    const stack = new Error().stack!
-    Error.stackTraceLimit = originalStackLimit
-    return extractStackInfoFromStackTrace(stack)
-  }, [])
-
-  // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
-  const { span, otelContext } = React.useMemo(() => {
-    const existingSpan = spanAlreadyStartedCache.get(query$)
-    if (existingSpan !== undefined) return existingSpan
-
-    const span = store.otel.tracer.startSpan(
-      `LiveStore:useQuery:${query$.label}`,
-      { attributes: { label: query$.label, stackInfo: JSON.stringify(stackInfo) } },
-      parentOtelContext ?? store.otel.queriesSpanContext,
-    )
-
-    const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-    spanAlreadyStartedCache.set(query$, { span, otelContext })
-
-    return { span, otelContext }
-  }, [parentOtelContext, query$, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
-
-  const initialResult = React.useMemo(
-    () =>
-      query$.run(otelContext, {
-        _tag: 'react',
-        api: 'useQuery',
-        label: query$.label,
-        stackInfo,
-      }),
-    [otelContext, query$, stackInfo],
-  )
-
-  // 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<GetResult<TQuery>>(initialResult)
-
-  React.useEffect(
-    () => () => {
-      spanAlreadyStartedCache.delete(query$)
-      span.end()
-    },
-    [query$, span],
-  )
-
-  // Subscribe to future updates for this query
-  React.useEffect(() => {
-    query$.activeSubscriptions.add(stackInfo)
-
-    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.
-        if (deepEqual(newValue, valueRef.current) === false) {
-          setValue(newValue)
-        }
-      },
-      () => {
-        query$.activeSubscriptions.delete(stackInfo)
-      },
-      { label: query$.label, otelContext },
-    )
-  }, [stackInfo, query$, setValue, store, valueRef, otelContext, span])
-
-  return valueRef
-}