@livestore/react 0.3.0-dev.5 → 0.3.0-dev.51

package/src/useRow.test.tsx

@@ -1,343 +0,0 @@
-import * as LiveStore from '@livestore/livestore'
-import { getSimplifiedRootSpan } from '@livestore/livestore/internal/testing-utils'
-import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect'
-import * as otel from '@opentelemetry/api'
-import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
-import { render, renderHook } from '@testing-library/react'
-import React from 'react'
-import { describe, expect, it } from 'vitest'
-
-import { AppComponentSchema, AppRouterSchema, makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
-import * as LiveStoreReact from './mod.js'
-
-// NOTE running tests concurrently doesn't work with the default global db graph
-describe('useRow', () => {
-  it('should update the data based on component key', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
-
-      const renderCount = makeRenderCount()
-
-      const { result, rerender } = renderHook(
-        (userId: string) => {
-          renderCount.inc()
-
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-          return { state, setState }
-        },
-        { wrapper, initialProps: 'u1' },
-      )
-
-      expect(result.current.state.id).toBe('u1')
-      expect(result.current.state.username).toBe('')
-      expect(renderCount.val).toBe(1)
-
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
-          }),
-        ),
-      )
-
-      rerender('u2')
-
-      expect(result.current.state.id).toBe('u2')
-      expect(result.current.state.username).toBe('username_u2')
-      expect(renderCount.val).toBe(2)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  // TODO add a test that makes sure React doesn't re-render when a setter is used to set the same value
-
-  it('should update the data reactively - via setState', () =>
-    Effect.gen(function* () {
-      const { wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
-
-      const renderCount = makeRenderCount()
-
-      const { result } = renderHook(
-        (userId: string) => {
-          renderCount.inc()
-
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-          return { state, setState }
-        },
-        { wrapper, initialProps: 'u1' },
-      )
-
-      expect(result.current.state.id).toBe('u1')
-      expect(result.current.state.username).toBe('')
-      expect(renderCount.val).toBe(1)
-
-      React.act(() => result.current.setState.username('username_u1_hello'))
-
-      expect(result.current.state.id).toBe('u1')
-      expect(result.current.state.username).toBe('username_u1_hello')
-      expect(renderCount.val).toBe(2)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  it('should update the data reactively - via raw store mutation', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
-
-      const renderCount = makeRenderCount()
-
-      const { result } = renderHook(
-        (userId: string) => {
-          renderCount.inc()
-
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-          return { state, setState }
-        },
-        { wrapper, initialProps: 'u1' },
-      )
-
-      expect(result.current.state.id).toBe('u1')
-      expect(result.current.state.username).toBe('')
-      expect(renderCount.val).toBe(1)
-
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`,
-          }),
-        ),
-      )
-
-      expect(result.current.state.id).toBe('u1')
-      expect(result.current.state.username).toBe('username_u1_hello')
-      expect(renderCount.val).toBe(2)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  it('should work for a larger app', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
-
-      const allTodos$ = LiveStore.queryDb(
-        { query: `select * from todos`, schema: Schema.Array(tables.todos.schema) },
-        { label: 'allTodos', reactivityGraph },
-      )
-
-      const appRouterRenderCount = makeRenderCount()
-      let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
-      const AppRouter: React.FC = () => {
-        appRouterRenderCount.inc()
-
-        const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { reactivityGraph })
-
-        globalSetState = setState
-
-        return (
-          <div>
-            <TasksList setTaskId={setState.currentTaskId} />
-            <div role="current-id">Current Task Id: {state.currentTaskId ?? '-'}</div>
-            {state.currentTaskId ? <TaskDetails id={state.currentTaskId} /> : <div>Click on a task to see details</div>}
-          </div>
-        )
-      }
-
-      const TasksList: React.FC<{ setTaskId: (_: string) => void }> = ({ setTaskId }) => {
-        const allTodos = LiveStoreReact.useQuery(allTodos$)
-
-        return (
-          <div>
-            {allTodos.map((_) => (
-              <div key={_.id} onClick={() => setTaskId(_.id)}>
-                {_.id}
-              </div>
-            ))}
-          </div>
-        )
-      }
-
-      const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
-        const [todo] = LiveStoreReact.useRow(todos, id, { reactivityGraph })
-        return <div role="content">{JSON.stringify(todo)}</div>
-      }
-
-      const renderResult = render(<AppRouter />, { wrapper })
-
-      expect(appRouterRenderCount.val).toBe(1)
-
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
-          }),
-        ),
-      )
-
-      expect(appRouterRenderCount.val).toBe(1)
-      expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
-
-      React.act(() => globalSetState!.currentTaskId('t1'))
-
-      expect(appRouterRenderCount.val).toBe(2)
-      expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(
-        `"{"id":"t1","text":"buy milk","completed":false}"`,
-      )
-
-      expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"')
-
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
-          }),
-          AppRouterSchema.update({ where: { id: 'singleton' }, values: { currentTaskId: 't2' } }),
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t3', 'buy bread', 0)`,
-          }),
-        ),
-      )
-
-      expect(appRouterRenderCount.val).toBe(3)
-      expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  it('should work for a useRow query chained with a useTemporary query', () =>
-    Effect.gen(function* () {
-      const { store, wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
-      const renderCount = makeRenderCount()
-
-      store.mutate(
-        todos.insert({ id: 't1', text: 'buy milk', completed: false }),
-        todos.insert({ id: 't2', text: 'buy bread', completed: false }),
-      )
-
-      const { result, unmount, rerender } = renderHook(
-        (userId: string) => {
-          renderCount.inc()
-
-          const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-          const todos = LiveStoreReact.useScopedQuery(
-            () =>
-              LiveStore.queryDb(
-                (get) => ({
-                  query: LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`,
-                  schema: Schema.Array(tables.todos.schema),
-                }),
-                { reactivityGraph, label: 'todosFiltered' },
-              ),
-            userId,
-          )
-
-          return { todos }
-        },
-        { wrapper, initialProps: 'u1' },
-      )
-
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO UserInfo (id, username, text) VALUES ('u2', 'username_u2', 'milk')`,
-          }),
-        ),
-      )
-
-      expect(result.current.todos.length).toBe(2)
-      // expect(result.current.state.username).toBe('')
-      expect(renderCount.val).toBe(1)
-
-      rerender('u2')
-
-      expect(result.current.todos.length).toBe(1)
-      expect(renderCount.val).toBe(2)
-
-      unmount()
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  let cachedProvider: BasicTracerProvider | undefined
-
-  describe('otel', () => {
-    const exporter = new InMemorySpanExporter()
-
-    const provider = cachedProvider ?? new BasicTracerProvider({ spanProcessors: [new SimpleSpanProcessor(exporter)] })
-    cachedProvider = provider
-    provider.register()
-
-    const otelTracer = otel.trace.getTracer('test')
-
-    const span = otelTracer.startSpan('test-root')
-    const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-    it('should update the data based on component key', async () => {
-      const { strictMode } = await Effect.gen(function* () {
-        const { wrapper, store, reactivityGraph, makeRenderCount, strictMode } = yield* makeTodoMvcReact({
-          useGlobalReactivityGraph: false,
-          otelContext,
-          otelTracer,
-        })
-
-        const renderCount = makeRenderCount()
-
-        const { result, rerender, unmount } = renderHook(
-          (userId: string) => {
-            renderCount.inc()
-
-            const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-            return { state, setState }
-          },
-          { wrapper, initialProps: 'u1' },
-        )
-
-        expect(result.current.state.id).toBe('u1')
-        expect(result.current.state.username).toBe('')
-        expect(renderCount.val).toBe(1)
-
-        React.act(() =>
-          store.mutate(
-            LiveStore.rawSqlMutation({
-              sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
-            }),
-          ),
-        )
-
-        rerender('u2')
-
-        expect(result.current.state.id).toBe('u2')
-        expect(result.current.state.username).toBe('username_u2')
-        expect(renderCount.val).toBe(2)
-
-        unmount()
-        span.end()
-
-        return { strictMode }
-      }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
-
-      const mapAttributes = (attributes: otel.Attributes) => {
-        return ReadonlyRecord.map(attributes, (val, key) => {
-          if (key === 'stackInfo') {
-            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')) {
-                _.name = 'renderHook.wrapper'
-              }
-              _.filePath = '__REPLACED_FOR_SNAPSHOT__'
-            })
-            return JSON.stringify(stackInfo)
-          }
-          return val
-        })
-      }
-
-      // TODO improve testing setup so "obsolete" warning is avoided
-      if (strictMode) {
-        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=true')
-      } else {
-        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=false')
-      }
-    })
-  })
-})

package/src/useRow.ts

@@ -1,188 +0,0 @@
-import type { QueryInfo, RowQuery } from '@livestore/common'
-import { SessionIdSymbol } from '@livestore/common'
-import { DbSchema } from '@livestore/common/schema'
-import type { SqliteDsl } from '@livestore/db-schema'
-import type { LiveQuery, ReactivityGraph } from '@livestore/livestore'
-import { queryDb } from '@livestore/livestore'
-import { shouldNeverHappen } from '@livestore/utils'
-import { ReadonlyRecord } from '@livestore/utils/effect'
-import React from 'react'
-
-import { useStore } from './LiveStoreContext.js'
-import { useQueryRef } from './useQuery.js'
-import { useMakeScopedQuery } from './useScopedQuery.js'
-
-export type UseRowResult<TTableDef extends DbSchema.TableDefBase> = [
-  row: RowQuery.Result<TTableDef>,
-  setRow: StateSetters<TTableDef>,
-  query$: LiveQuery<RowQuery.Result<TTableDef>, QueryInfo>,
-]
-
-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,
-      DbSchema.TableOptions & { isSingleton: true; deriveMutations: { enabled: true } }
-    >,
-  >(
-    table: TTableDef,
-    options?: UseRowOptionsBase,
-  ): UseRowResult<TTableDef>
-  <
-    TTableDef extends DbSchema.TableDef<
-      DbSchema.DefaultSqliteTableDef,
-      DbSchema.TableOptions & {
-        isSingleton: false
-        requiredInsertColumnNames: 'id'
-        deriveMutations: { enabled: true }
-      }
-    >,
-  >(
-    table: TTableDef,
-    // TODO adjust so it works with arbitrary primary keys or unique constraints
-    id: string | SessionIdSymbol,
-    options?: UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>,
-  ): UseRowResult<TTableDef>
-  <
-    TTableDef extends DbSchema.TableDef<
-      DbSchema.DefaultSqliteTableDef,
-      DbSchema.TableOptions & { isSingleton: false; deriveMutations: { enabled: true } }
-    >,
-  >(
-    table: TTableDef,
-    // TODO adjust so it works with arbitrary primary keys or unique constraints
-    id: string | SessionIdSymbol,
-    options: UseRowOptionsBase & RowQuery.RequiredColumnsOptions<TTableDef>,
-  ): UseRowResult<TTableDef>
-} = <
-  TTableDef extends DbSchema.TableDef<
-    DbSchema.DefaultSqliteTableDefConstrained,
-    DbSchema.TableOptions & { deriveMutations: { enabled: true } }
-  >,
->(
-  table: TTableDef,
-  idOrOptions?: string | SessionIdSymbol | UseRowOptionsBase,
-  options_?: UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>,
-): UseRowResult<TTableDef> => {
-  const sqliteTableDef = table.sqliteDef
-  const id = typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? idOrOptions : undefined
-  const options: (UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>) | undefined =
-    typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? options_ : idOrOptions
-  const { insertValues, 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 idStr = id === SessionIdSymbol ? 'session' : id
-  const rowQuery = table.query.row as any
-
-  type Query$ = LiveQuery<RowQuery.Result<TTableDef>, QueryInfo.Row>
-  const { query$, otelContext } = useMakeScopedQuery(
-    (otelContext) =>
-      DbSchema.tableIsSingleton(table)
-        ? (queryDb(rowQuery(), { reactivityGraph, otelContext }) as any as Query$)
-        : (queryDb(rowQuery(id!, { insertValues: insertValues! }), { reactivityGraph, otelContext }) as any as Query$),
-    [idStr!, tableName],
-    {
-      otel: {
-        spanName: `LiveStore:useRow:${tableName}${idStr === undefined ? '' : `:${idStr}`}`,
-        attributes: { id: idStr },
-      },
-    },
-  )
-
-  const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowQuery.Result<TTableDef>>
-
-  const setState = React.useMemo<StateSetters<TTableDef>>(() => {
-    if (table.options.isSingleColumn) {
-      return (newValueOrFn: RowQuery.Result<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.TableDefBase> = TTableDef['options']['isSingleColumn'] extends true
-  ? Dispatch<SetStateAction<RowQuery.Result<TTableDef>>>
-  : {
-      [K in keyof RowQuery.Result<TTableDef>]: Dispatch<SetStateAction<RowQuery.Result<TTableDef>[K]>>
-    } & {
-      setMany: Dispatch<SetStateAction<Partial<RowQuery.Result<TTableDef>>>>
-    }

package/src/useScopedQuery.test.tsx

@@ -1,96 +0,0 @@
-import * as LiveStore from '@livestore/livestore'
-import { queryDb } from '@livestore/livestore'
-import { Effect, Schema } from '@livestore/utils/effect'
-import { render, renderHook } from '@testing-library/react'
-import React from 'react'
-// @ts-expect-error no types
-import * as ReactWindow from 'react-window'
-import { describe, expect, it } from 'vitest'
-
-import { makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
-import * as LiveStoreReact from './mod.js'
-
-describe('useScopedQuery', () => {
-  it('simple', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact()
-
-      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.useScopedQuery(() => {
-            const query$ = queryDb({
-              query: `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))
-
-  // NOTE this test covers some special react lifecyle paths which I couldn't easily reproduce without react-window
-  // it basically causes a "query swap" in the `useMemo` and both a `useEffect` cleanup call.
-  // To handle this properly we introduced the `_tag: 'destroyed'` state in the `spanAlreadyStartedCache`.
-  it('should work for a list with react-window', () =>
-    Effect.gen(function* () {
-      const { wrapper } = yield* makeTodoMvcReact()
-
-      const ListWrapper: React.FC<{ numItems: number }> = ({ numItems }) => {
-        return (
-          <ReactWindow.FixedSizeList
-            height={100}
-            width={100}
-            itemSize={10}
-            itemCount={numItems}
-            itemData={Array.from({ length: numItems }, (_, i) => i).reverse()}
-          >
-            {ListItem}
-          </ReactWindow.FixedSizeList>
-        )
-      }
-
-      const ListItem: React.FC<{ data: ReadonlyArray<number>; index: number }> = ({ data: ids, index }) => {
-        const id = ids[index]!
-        const res = LiveStoreReact.useScopedQuery(() => LiveStore.computed(() => id, { label: `ListItem.${id}` }), id)
-        return <div role="listitem">{res}</div>
-      }
-
-      const renderResult = render(<ListWrapper numItems={1} />, { wrapper })
-
-      expect(renderResult.container.textContent).toBe('0')
-
-      renderResult.rerender(<ListWrapper numItems={2} />)
-
-      expect(renderResult.container.textContent).toBe('10')
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-})