@livestore/livestore 0.0.58-dev.6 → 0.0.58-dev.8

package/src/react/useRow.test.tsx

@@ -12,7 +12,7 @@ import * as LiveStoreReact from './index.js'
 import type { StackInfo } from './utils/stack-info.js'
 
 // NOTE running tests concurrently doesn't work with the default global db graph
-describe.concurrent('useRow', () => {
+describe('useRow', () => {
   it('should update the data based on component key', () =>
     Effect.gen(function* () {
       const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvc({
@@ -184,7 +184,7 @@ describe.concurrent('useRow', () => {
 
       expect(appRouterRenderCount.val).toBe(2)
       expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(
-        `"{"completed":false,"id":"t1","text":"buy milk"}"`,
+        `"{"id":"t1","text":"buy milk","completed":false}"`,
       )
 
       expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"')
@@ -334,365 +334,11 @@ describe.concurrent('useRow', () => {
         })
       }
 
+      // TODO improve testing setup so "obsolete" warning is avoided
       if (strictMode) {
-        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchInlineSnapshot(`
-          {
-            "_name": "test",
-            "children": [
-              {
-                "_name": "livestore.in-memory-db:execute",
-                "attributes": {
-                  "sql.query": "
-                PRAGMA page_size=32768;
-                PRAGMA cache_size=10000;
-                PRAGMA journal_mode='MEMORY'; -- we don't flush to disk before committing a write
-                PRAGMA synchronous='OFF';
-                PRAGMA temp_store='MEMORY';
-                PRAGMA foreign_keys='ON'; -- we want foreign key constraints to be enforced
-              ",
-                },
-              },
-              {
-                "_name": "sql-in-memory-select",
-                "attributes": {
-                  "sql.cached": false,
-                  "sql.query": "select 1 from UserInfo where id = 'u1'",
-                  "sql.rowsCount": 0,
-                },
-              },
-              {
-                "_name": "sql-in-memory-select",
-                "attributes": {
-                  "sql.cached": false,
-                  "sql.query": "select 1 from UserInfo where id = 'u2'",
-                  "sql.rowsCount": 1,
-                },
-              },
-              {
-                "_name": "LiveStore:mutations",
-                "children": [
-                  {
-                    "_name": "LiveStore:mutate",
-                    "attributes": {
-                      "livestore.mutateLabel": "mutate",
-                    },
-                    "children": [
-                      {
-                        "_name": "LiveStore:processWrites",
-                        "attributes": {
-                          "livestore.mutateLabel": "mutate",
-                        },
-                        "children": [
-                          {
-                            "_name": "LiveStore:mutateWithoutRefresh",
-                            "attributes": {
-                              "livestore.args": "{
-            "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
-          }",
-                              "livestore.mutation": "livestore.RawSql",
-                            },
-                            "children": [
-                              {
-                                "_name": "livestore.in-memory-db:execute",
-                                "attributes": {
-                                  "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
-                                },
-                              },
-                            ],
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-              {
-                "_name": "LiveStore:queries",
-                "children": [
-                  {
-                    "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
-                    "attributes": {
-                      "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                      "sql.rowsCount": 1,
-                    },
-                    "children": [
-                      {
-                        "_name": "sql-in-memory-select",
-                        "attributes": {
-                          "sql.cached": false,
-                          "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                          "sql.rowsCount": 1,
-                        },
-                      },
-                    ],
-                  },
-                  {
-                    "_name": "LiveStore:useRow:UserInfo:u1",
-                    "attributes": {
-                      "id": "u1",
-                    },
-                    "children": [
-                      {
-                        "_name": "LiveStore:mutateWithoutRefresh",
-                        "attributes": {
-                          "livestore.args": "{
-            "id": "u1"
-          }",
-                          "livestore.mutation": "_Derived_Create_UserInfo",
-                        },
-                        "children": [
-                          {
-                            "_name": "livestore.in-memory-db:execute",
-                            "attributes": {
-                              "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
-                            },
-                          },
-                        ],
-                      },
-                      {
-                        "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
-                        "attributes": {
-                          "label": "sql(rowQuery:query:UserInfo:u1)",
-                          "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
-                        },
-                        "children": [
-                          {
-                            "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
-                            "attributes": {
-                              "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                              "sql.rowsCount": 1,
-                            },
-                            "children": [
-                              {
-                                "_name": "sql-in-memory-select",
-                                "attributes": {
-                                  "sql.cached": false,
-                                  "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                                  "sql.rowsCount": 1,
-                                },
-                              },
-                            ],
-                          },
-                          {
-                            "_name": "LiveStore.subscribe",
-                            "attributes": {
-                              "label": "sql(rowQuery:query:UserInfo:u1)",
-                              "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
-                            },
-                          },
-                          {
-                            "_name": "LiveStore.subscribe",
-                            "attributes": {
-                              "label": "sql(rowQuery:query:UserInfo:u1)",
-                              "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
-                            },
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          }
-        `)
-        // Below: Strict mode disabled
+        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=true')
       } else {
-        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchInlineSnapshot(`
-          {
-            "_name": "test",
-            "children": [
-              {
-                "_name": "livestore.in-memory-db:execute",
-                "attributes": {
-                  "sql.query": "
-                PRAGMA page_size=32768;
-                PRAGMA cache_size=10000;
-                PRAGMA journal_mode='MEMORY'; -- we don't flush to disk before committing a write
-                PRAGMA synchronous='OFF';
-                PRAGMA temp_store='MEMORY';
-                PRAGMA foreign_keys='ON'; -- we want foreign key constraints to be enforced
-              ",
-                },
-              },
-              {
-                "_name": "sql-in-memory-select",
-                "attributes": {
-                  "sql.cached": false,
-                  "sql.query": "select 1 from UserInfo where id = 'u1'",
-                  "sql.rowsCount": 0,
-                },
-              },
-              {
-                "_name": "sql-in-memory-select",
-                "attributes": {
-                  "sql.cached": false,
-                  "sql.query": "select 1 from UserInfo where id = 'u2'",
-                  "sql.rowsCount": 1,
-                },
-              },
-              {
-                "_name": "LiveStore:mutations",
-                "children": [
-                  {
-                    "_name": "LiveStore:mutate",
-                    "attributes": {
-                      "livestore.mutateLabel": "mutate",
-                    },
-                    "children": [
-                      {
-                        "_name": "LiveStore:processWrites",
-                        "attributes": {
-                          "livestore.mutateLabel": "mutate",
-                        },
-                        "children": [
-                          {
-                            "_name": "LiveStore:mutateWithoutRefresh",
-                            "attributes": {
-                              "livestore.args": "{
-            "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
-          }",
-                              "livestore.mutation": "livestore.RawSql",
-                            },
-                            "children": [
-                              {
-                                "_name": "livestore.in-memory-db:execute",
-                                "attributes": {
-                                  "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
-                                },
-                              },
-                            ],
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-              {
-                "_name": "LiveStore:queries",
-                "children": [
-                  {
-                    "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
-                    "attributes": {
-                      "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                      "sql.rowsCount": 1,
-                    },
-                    "children": [
-                      {
-                        "_name": "sql-in-memory-select",
-                        "attributes": {
-                          "sql.cached": false,
-                          "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                          "sql.rowsCount": 1,
-                        },
-                      },
-                    ],
-                  },
-                  {
-                    "_name": "LiveStore:useRow:UserInfo:u1",
-                    "attributes": {
-                      "id": "u1",
-                    },
-                    "children": [
-                      {
-                        "_name": "LiveStore:mutateWithoutRefresh",
-                        "attributes": {
-                          "livestore.args": "{
-            "id": "u1"
-          }",
-                          "livestore.mutation": "_Derived_Create_UserInfo",
-                        },
-                        "children": [
-                          {
-                            "_name": "livestore.in-memory-db:execute",
-                            "attributes": {
-                              "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
-                            },
-                          },
-                        ],
-                      },
-                      {
-                        "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
-                        "attributes": {
-                          "label": "sql(rowQuery:query:UserInfo:u1)",
-                          "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
-                        },
-                        "children": [
-                          {
-                            "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
-                            "attributes": {
-                              "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                              "sql.rowsCount": 1,
-                            },
-                            "children": [
-                              {
-                                "_name": "sql-in-memory-select",
-                                "attributes": {
-                                  "sql.cached": false,
-                                  "sql.query": "select * from UserInfo where id = 'u1' limit 1",
-                                  "sql.rowsCount": 1,
-                                },
-                              },
-                            ],
-                          },
-                          {
-                            "_name": "LiveStore.subscribe",
-                            "attributes": {
-                              "label": "sql(rowQuery:query:UserInfo:u1)",
-                              "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
-                            },
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                  {
-                    "_name": "LiveStore:useRow:UserInfo:u2",
-                    "attributes": {
-                      "id": "u2",
-                    },
-                    "children": [
-                      {
-                        "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u2)",
-                        "attributes": {
-                          "label": "sql(rowQuery:query:UserInfo:u2)",
-                          "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
-                        },
-                        "children": [
-                          {
-                            "_name": "sql:select * from UserInfo where id = 'u2' limit 1",
-                            "attributes": {
-                              "sql.query": "select * from UserInfo where id = 'u2' limit 1",
-                              "sql.rowsCount": 1,
-                            },
-                            "children": [
-                              {
-                                "_name": "sql-in-memory-select",
-                                "attributes": {
-                                  "sql.cached": false,
-                                  "sql.query": "select * from UserInfo where id = 'u2' limit 1",
-                                  "sql.rowsCount": 1,
-                                },
-                              },
-                            ],
-                          },
-                          {
-                            "_name": "LiveStore.subscribe",
-                            "attributes": {
-                              "label": "sql(rowQuery:query:UserInfo:u2)",
-                              "queryLabel": "sql(rowQuery:query:UserInfo:u2)",
-                            },
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          }
-        `)
+        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=false')
       }
     })
   })

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/reactiveQueries/sql.ts

@@ -1,6 +1,6 @@
 import { type Bindable, prepareBindValues, type QueryInfo, type QueryInfoNone } from '@livestore/common'
 import { shouldNeverHappen } from '@livestore/utils'
-import { Schema, SchemaEquivalence, TreeFormatter } from '@livestore/utils/effect'
+import { Schema, TreeFormatter } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 
 import { globalReactivityGraph } from '../global-state.js'
@@ -124,7 +124,7 @@ export class LiveStoreSQLQuery<
 
     const queriedTablesRef = { current: queriedTables }
 
-    const schemaEqual = SchemaEquivalence.make(schema)
+    const schemaEqual = Schema.equivalence(schema)
     // TODO also support derived equality for `map` (probably will depend on having an easy way to transform a schema without an `encode` step)
     // This would mean dropping the `map` option
     const equal =

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': {