@livestore/livestore 0.0.58-dev.7 → 0.0.58-dev.9

package/src/react/useTemporaryQuery.test.tsx

@@ -1,9 +1,12 @@
 import { Effect, Schema } from '@livestore/utils/effect'
-import { renderHook } from '@testing-library/react'
+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 { makeTodoMvc, tables, todos } from '../__tests__/react/fixture.js'
-import type * as LiveStore from '../index.js'
+import * as LiveStore from '../index.js'
 import { querySQL } from '../reactiveQueries/sql.js'
 import * as LiveStoreReact from './index.js'
 
@@ -53,4 +56,43 @@ describe('useTemporaryQuery', () => {
 
       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* makeTodoMvc()
+
+      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.useTemporaryQuery(
+          () => 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))
 })

package/src/react/useTemporaryQuery.ts

@@ -12,12 +12,16 @@ import { useQueryRef } from './useQuery.js'
 // 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
-  }
+  | {
+      _tag: 'active'
+      rc: number
+      query$: LiveQuery<any, any>
+      span: otel.Span
+      otelContext: otel.Context
+    }
+  | {
+      _tag: 'destroyed'
+    }
 >()
 
 export type DepKey = string | number | ReadonlyArray<string | number>
@@ -60,22 +64,24 @@ export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
 
   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]!)
+      // console.debug('fullKey changed', 'prev', fullKeyRef.current.split('-')[0]!, '-> new', fullKey.split('-')[0]!)
 
       const cachedItem = cache.get(fullKeyRef.current)
-      if (cachedItem !== undefined) {
+      if (cachedItem !== undefined && cachedItem._tag === 'active') {
         cachedItem.rc--
 
         if (cachedItem.rc === 0) {
+          // console.debug('rc=0-changed', cachedItem.query$.id, cachedItem.query$.label)
           cachedItem.query$.destroy()
           cachedItem.span.end()
-          cache.delete(fullKeyRef.current)
+          cache.set(fullKeyRef.current, { _tag: 'destroyed' })
         }
       }
     }
 
     const cachedItem = cache.get(fullKey)
-    if (cachedItem !== undefined) {
+    if (cachedItem !== undefined && cachedItem._tag === 'active') {
+      // console.debug('rc++', cachedItem.query$.id, cachedItem.query$.label)
       cachedItem.rc++
 
       return cachedItem
@@ -93,7 +99,7 @@ export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
 
     const query$ = makeQuery(otelContext)
 
-    cache.set(fullKey, { rc: 1, query$, span, otelContext })
+    cache.set(fullKey, { _tag: 'active', rc: 1, query$, span, otelContext })
 
     return { query$, otelContext }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -103,19 +109,23 @@ export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
 
   React.useEffect(() => {
     return () => {
+      const fullKey = fullKeyRef.current!
       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
+      if (cachedItem === undefined || cachedItem._tag === 'destroyed') return
+
+      // console.debug('rc--', cachedItem.query$.id, cachedItem.query$.label)
 
       cachedItem.rc--
 
       if (cachedItem.rc === 0) {
+        // console.debug('rc=0', cachedItem.query$.id, cachedItem.query$.label)
         cachedItem.query$.destroy()
         cachedItem.span.end()
         cache.delete(fullKey)
       }
     }
-  }, [fullKey])
+  }, [])
 
   return { query$, otelContext }
 }

package/src/store-devtools.ts

@@ -56,7 +56,7 @@ export const connectDevtoolsToStore = ({
 
       const requestId = decodedMessage.requestId
 
-      const requestIdleCallback = window.requestIdleCallback ?? ((cb: Function) => cb())
+      const requestIdleCallback = globalThis.requestIdleCallback ?? ((cb: () => void) => cb())
 
       switch (decodedMessage._tag) {
         case 'LSD.ReactivityGraphSubscribe': {

package/src/store.ts

@@ -130,7 +130,9 @@ export type StoreMutateOptions = {
   persisted?: boolean
 }
 
-if (typeof window !== 'undefined') {
+// eslint-disable-next-line unicorn/prefer-global-this
+if (import.meta.env.DEV && typeof window !== 'undefined') {
+  // eslint-disable-next-line unicorn/prefer-global-this
   window.__debugDownloadBlob = downloadBlob
 }
 
@@ -308,7 +310,7 @@ export class Store<
       { attributes: { label: options?.label, queryLabel: query$.label } },
       options?.otelContext ?? this.otel.queriesSpanContext,
       (span) => {
-        // console.log('store sub', query$.label)
+        // console.debug('store sub', query$.id, query$.label)
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
         const label = `subscribe:${options?.label}`
@@ -322,7 +324,7 @@ export class Store<
         }
 
         const unsubscribe = () => {
-          // console.log('store unsub', query$.label)
+          // console.debug('store unsub', query$.id, query$.label)
           try {
             this.reactivityGraph.destroyNode(effect)
             this.activeQueries.remove(query$ as LiveQuery<TResult>)
@@ -393,7 +395,7 @@ export class Store<
     mutationsSpan.addEvent('mutate')
 
     // console.group('LiveStore.mutate', { skipRefresh, wasSyncMessage, label })
-    // mutationsEvents.forEach((_) => console.log(_.mutation, _.id, _.args))
+    // mutationsEvents.forEach((_) => console.debug(_.mutation, _.id, _.args))
     // console.groupEnd()
 
     let durationMs: number

package/src/utils/dev.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/prefer-global-this */
 export const downloadBlob = (
   data: Uint8Array | Blob | string,
   fileName: string,