@livestore/react 0.2.0 → 0.3.0-dev.11

package/dist/useTemporaryQuery.js

@@ -1,75 +0,0 @@
-import * as otel from '@opentelemetry/api';
-import React from 'react';
-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();
-/**
- * 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 useScopedQuery = (makeQuery, key) => useScopedQueryRef(makeQuery, key).current;
-export const useScopedQueryRef = (makeQuery, key) => {
-    const { query$ } = useMakeScopedQuery(makeQuery, key);
-    return useQueryRef(query$);
-};
-export const useMakeScopedQuery = (makeQuery, key, options) => {
-    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();
-    const { query$, otelContext } = React.useMemo(() => {
-        if (fullKeyRef.current !== undefined && fullKeyRef.current !== fullKey) {
-            // console.debug('fullKey changed', 'prev', fullKeyRef.current.split('-')[0]!, '-> new', fullKey.split('-')[0]!)
-            const cachedItem = cache.get(fullKeyRef.current);
-            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.set(fullKeyRef.current, { _tag: 'destroyed' });
-                }
-            }
-        }
-        const cachedItem = cache.get(fullKey);
-        if (cachedItem !== undefined && cachedItem._tag === 'active') {
-            // console.debug('rc++', cachedItem.query$.id, cachedItem.query$.label)
-            cachedItem.rc++;
-            return cachedItem;
-        }
-        const spanName = options?.otel?.spanName ?? `LiveStore:useScopedQuery:${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, { _tag: 'active', rc: 1, query$, span, otelContext });
-        return { query$, otelContext };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fullKey]);
-    fullKeyRef.current = fullKey;
-    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 || 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);
-            }
-        };
-    }, []);
-    return { query$, otelContext };
-};
-//# sourceMappingURL=useTemporaryQuery.js.map

package/dist/useTemporaryQuery.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTemporaryQuery.js","sourceRoot":"","sources":["../src/useTemporaryQuery.ts"],"names":[],"mappings":"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"}

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))
-})

package/src/useScopedQuery.ts

@@ -1,142 +0,0 @@
-import type { QueryInfo } from '@livestore/common'
-import type { LiveQuery } from '@livestore/livestore'
-import * as otel from '@opentelemetry/api'
-import React from 'react'
-
-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,
-  | {
-      _tag: 'active'
-      rc: number
-      query$: LiveQuery<any, any>
-      span: otel.Span
-      otelContext: otel.Context
-    }
-  | {
-      _tag: 'destroyed'
-    }
->()
-
-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.
- * This hook should be used instead of `useQuery` when the query should be dynamically created based on some props.
- * Otherwise when using `useQuery` the query will be leaked (i.e. never destroyed) when the component re-renders/unmounts.
- *
- * Example:
- * ```tsx
- * const issue = useScopedQuery(() => queryDb(tables.issues.query.where('id', issueId).first()), ['issue-details', issueId])
- * ```
- *
- * Important: On Expo/React Native please make sure the key contains a globally unique identifier, otherwise the query might get reused unintentionally.
- * Example: `['issue-details', issueId]`
- * See this issue to track progress: https://github.com/livestorejs/livestore/issues/231
- */
-export const useScopedQuery = <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey): TResult =>
-  useScopedQueryRef(makeQuery, key).current
-
-export const useScopedQueryRef = <TResult>(
-  makeQuery: () => LiveQuery<TResult>,
-  key: DepKey,
-): React.MutableRefObject<TResult> => {
-  const { query$ } = useMakeScopedQuery(makeQuery, key)
-
-  return useQueryRef(query$)
-}
-
-export const useMakeScopedQuery = <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', 'prev', fullKeyRef.current.split('-')[0]!, '-> new', fullKey.split('-')[0]!)
-
-      const cachedItem = cache.get(fullKeyRef.current)
-      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.set(fullKeyRef.current, { _tag: 'destroyed' })
-        }
-      }
-    }
-
-    const cachedItem = cache.get(fullKey)
-    if (cachedItem !== undefined && cachedItem._tag === 'active') {
-      // console.debug('rc++', cachedItem.query$.id, cachedItem.query$.label)
-      cachedItem.rc++
-
-      return cachedItem
-    }
-
-    const spanName = options?.otel?.spanName ?? `LiveStore:useScopedQuery:${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, { _tag: 'active', rc: 1, query$, span, otelContext })
-
-    return { query$, otelContext }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fullKey])
-
-  fullKeyRef.current = fullKey
-
-  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 || 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)
-      }
-    }
-  }, [])
-
-  return { query$, otelContext }
-}