@livestore/react 0.3.1 → 0.3.2-dev.0

package/src/LiveStoreProvider.tsx

@@ -3,10 +3,10 @@ import { provideOtel, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import type {
   CreateStoreOptions,
-  LiveStoreContext as StoreContext_,
   OtelOptions,
   ShutdownDeferred,
   Store,
+  LiveStoreContext as StoreContext_,
 } from '@livestore/livestore'
 import { createStore, makeShutdownDeferred, StoreInterrupted } from '@livestore/livestore'
 import { errorToString, IS_REACT_NATIVE, LS_DEV } from '@livestore/utils'
@@ -24,7 +24,6 @@ import {
   TaskTracing,
 } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
-import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
 
 import { LiveStoreContext } from './LiveStoreContext.js'
@@ -47,9 +46,9 @@ export interface LiveStoreProviderProps {
     ctx: { migrationsReport: MigrationsReport; parentSpan: otel.Span },
   ) => void | Promise<void> | Effect.Effect<void, unknown, OtelTracer.OtelTracer>
   otelOptions?: Partial<OtelOptions>
-  renderLoading?: (status: BootStatus) => ReactElement
-  renderError?: (error: UnexpectedError | unknown) => ReactElement
-  renderShutdown?: (cause: IntentionalShutdownCause | StoreInterrupted) => ReactElement
+  renderLoading?: (status: BootStatus) => React.ReactNode
+  renderError?: (error: UnexpectedError | unknown) => React.ReactNode
+  renderShutdown?: (cause: IntentionalShutdownCause | StoreInterrupted) => React.ReactNode
   adapter: Adapter
   /**
    * In order for LiveStore to apply multiple events in a single render,
@@ -85,7 +84,7 @@ export interface LiveStoreProviderProps {
 }
 
 const defaultRenderError = (error: UnexpectedError | unknown) =>
-  IS_REACT_NATIVE ? <></> : <>{Schema.is(UnexpectedError)(error) ? error.toString() : errorToString(error)}</>
+  IS_REACT_NATIVE ? null : Schema.is(UnexpectedError)(error) ? error.toString() : errorToString(error)
 
 const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreInterrupted) => {
   const reason =
@@ -101,11 +100,11 @@ const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreInterrupte
               ? 'manual shutdown'
               : 'unknown reason'
 
-  return IS_REACT_NATIVE ? <></> : <>LiveStore Shutdown due to {reason}</>
+  return IS_REACT_NATIVE ? null : <>LiveStore Shutdown due to {reason}</>
 }
 
 const defaultRenderLoading = (status: BootStatus) =>
-  IS_REACT_NATIVE ? <></> : <>LiveStore is loading ({status.stage})...</>
+  IS_REACT_NATIVE ? null : <>LiveStore is loading ({status.stage})...</>
 
 export const LiveStoreProvider = ({
   renderLoading = defaultRenderLoading,
@@ -123,7 +122,7 @@ export const LiveStoreProvider = ({
   confirmUnsavedChanges = true,
   syncPayload,
   debug,
-}: LiveStoreProviderProps & { children?: ReactNode }): React.ReactElement => {
+}: LiveStoreProviderProps & { children?: React.ReactNode }): React.ReactNode => {
   const storeCtx = useCreateStore({
     storeId,
     schema,
@@ -152,7 +151,7 @@ export const LiveStoreProvider = ({
 
   globalThis.__debugLiveStore ??= {}
   if (Object.keys(globalThis.__debugLiveStore).length === 0) {
-    globalThis.__debugLiveStore['_'] = storeCtx.store
+    globalThis.__debugLiveStore._ = storeCtx.store
   }
   globalThis.__debugLiveStore[debug?.instanceId ?? storeId] = storeCtx.store
 
@@ -211,19 +210,18 @@ const useCreateStore = ({
     debugInstanceId,
   })
 
-  const interrupt = (
-    componentScope: Scope.CloseableScope,
-    shutdownDeferred: ShutdownDeferred,
-    error: StoreInterrupted,
-  ) =>
-    Effect.gen(function* () {
-      // console.log('[@livestore/livestore/react] interupting', error)
-      yield* Scope.close(componentScope, Exit.fail(error))
-      yield* Deferred.fail(shutdownDeferred, error)
-    }).pipe(
-      Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] interupting', cause)),
-      Effect.runFork,
-    )
+  const interrupt = React.useCallback(
+    (componentScope: Scope.CloseableScope, shutdownDeferred: ShutdownDeferred, error: StoreInterrupted) =>
+      Effect.gen(function* () {
+        // console.log('[@livestore/livestore/react] interupting', error)
+        yield* Scope.close(componentScope, Exit.fail(error))
+        yield* Deferred.fail(shutdownDeferred, error)
+      }).pipe(
+        Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] interupting', cause)),
+        Effect.runFork,
+      ),
+    [],
+  )
 
   const inputPropChanges = {
     schema: inputPropsCacheRef.current.schema !== schema,
@@ -400,6 +398,7 @@ const useCreateStore = ({
     confirmUnsavedChanges,
     syncPayload,
     debugInstanceId,
+    interrupt,
   ])
 
   return ctxValueRef.current.value

package/src/__snapshots__/useClientDocument.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`useClientDocument > otel > should update the data based on component ke
     {
       "_name": "client-session-sync-processor:pull",
       "attributes": {
-        "code.stacktrace": "at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:297:14",
+        "code.stacktrace": "<STACKTRACE>",
         "span.label": "⚠︎ Interrupted",
         "status.interrupted": true,
       },
@@ -263,7 +263,7 @@ exports[`useClientDocument > otel > should update the data based on component ke
     {
       "_name": "client-session-sync-processor:pull",
       "attributes": {
-        "code.stacktrace": "at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:297:14",
+        "code.stacktrace": "<STACKTRACE>",
         "span.label": "⚠︎ Interrupted",
         "status.interrupted": true,
       },

package/src/experimental/components/LiveList.tsx

@@ -81,7 +81,7 @@ const ItemWrapperMemo = React.memo(
   ItemWrapper,
   (prev, next) =>
     prev.itemKey === next.itemKey &&
-    prev.renderItem === prev.renderItem &&
+    prev.renderItem === next.renderItem &&
     prev.opts.index === next.opts.index &&
     prev.opts.isInitialListRender === next.opts.isInitialListRender,
 ) as typeof ItemWrapper

package/src/useClientDocument.test.tsx

@@ -1,3 +1,5 @@
+/** biome-ignore-all lint/a11y/useValidAriaRole: not needed for testing */
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: not needed for testing */
 import * as LiveStore from '@livestore/livestore'
 import { getSimplifiedRootSpan } from '@livestore/livestore/internal/testing-utils'
 import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect'
@@ -5,7 +7,7 @@ import { Vitest } from '@livestore/utils-dev/node-vitest'
 import * as otel from '@opentelemetry/api'
 import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
 import * as ReactTesting from '@testing-library/react'
-import React from 'react'
+import type React from 'react'
 import { beforeEach, expect, it } from 'vitest'
 
 import { events, makeTodoMvcReact, tables } from './__tests__/fixture.js'
@@ -282,7 +284,9 @@ Vitest.describe('useClientDocument', () => {
 
         const mapAttributes = (attributes: otel.Attributes) => {
           return ReadonlyRecord.map(attributes, (val, key) => {
-            if (key === 'firstStackInfo') {
+            if (key === 'code.stacktrace') {
+              return '<STACKTRACE>'
+            } else if (key === 'firstStackInfo') {
               const stackInfo = JSON.parse(val as string) as LiveStore.StackInfo
               // stackInfo.frames.shift() // Removes `renderHook.wrapper` from the stack
               stackInfo.frames.forEach((_) => {

package/src/useClientDocument.ts

@@ -98,7 +98,7 @@ export const useClientDocument: {
 
   const store =
     storeArg?.store ??
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
     React.useContext(LiveStoreContext)?.store ??
     shouldNeverHappen(`No store provided to useClientDocument`)
 

package/src/useQuery.test.tsx

@@ -1,7 +1,8 @@
+/** biome-ignore-all lint/a11y: test */
 import '@livestore/utils-dev/node-vitest-polyfill'
 
-import { queryDb, signal } from '@livestore/livestore'
 import * as LiveStore from '@livestore/livestore'
+import { queryDb, signal } from '@livestore/livestore'
 import { RG } from '@livestore/livestore/internal/testing-utils'
 import { Effect, Schema } from '@livestore/utils/effect'
 import { Vitest } from '@livestore/utils-dev/node-vitest'
@@ -161,7 +162,6 @@ Vitest.describe.each([{ strictMode: true }, { strictMode: false }] as const)(
         const ListItem: React.FC<{ data: ReadonlyArray<number>; index: number }> = ({ data: ids, index }) => {
           const id = ids[index]!
           const res = store.useQuery(LiveStore.computed(() => id, { label: `ListItem.${id}`, deps: id }))
-          // biome-ignore lint/a11y/useSemanticElements: <explanation>
           return <div role="listitem">{res}</div>
         }
 

package/src/useQuery.ts

@@ -43,7 +43,10 @@ export const useQueryRef = <TQuery extends LiveQueryDef.Any>(
   queryRcRef: LiveQueries.RcRef<LiveQuery<LiveQueries.GetResult<TQuery>>>
 } => {
   const store =
-    options?.store ?? React.useContext(LiveStoreContext)?.store ?? shouldNeverHappen(`No store provided to useQuery`)
+    options?.store ??
+    // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
+    React.useContext(LiveStoreContext)?.store ??
+    shouldNeverHappen(`No store provided to useQuery`)
 
   // It's important to use all "aspects" of a store instance here, otherwise we get unexpected cache mappings
   const rcRefKey = `${store.storeId}_${store.clientId}_${store.sessionId}_${queryDef.hash}`

package/src/useRcResource.ts

@@ -80,7 +80,7 @@ export const useRcResource = <T>(
   const keyRef = React.useRef<string | undefined>(undefined)
   const didDisposeInMemo = React.useRef(false)
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Dependency is deliberately limited to `key` to avoid unintended re-creations.
   const resource = React.useMemo(() => {
     // console.debug('useMemo', key)
     if (didDisposeInMemo.current) {
@@ -125,11 +125,9 @@ export const useRcResource = <T>(
     const resource = create()
     cache.set(key, { _tag: 'active', rc: 1, resource })
     return resource
-    // Dependency is deliberately limited to `key` to avoid unintended re-creations.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We assume the `dispose` function is stable and won't change across renders
   React.useEffect(() => {
     return () => {
       if (didDisposeInMemo.current) {
@@ -152,8 +150,6 @@ export const useRcResource = <T>(
         cache.delete(key)
       }
     }
-    // We assume the `dispose` function is stable and won't change across renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key])
 
   keyRef.current = key

package/src/useStore.ts

@@ -21,7 +21,7 @@ export const useStore = (options?: { store?: Store }): { store: Store & ReactApi
     return { store: withReactApi(options.store) }
   }
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
   const storeContext = React.useContext(LiveStoreContext)
 
   if (storeContext === undefined) {

package/src/utils/useStateRefWithReactiveInput.ts

@@ -25,15 +25,12 @@ export const useStateRefWithReactiveInput = <T>(
     stateRef.current = inputState
   }
 
-  const setStateAndRerender = React.useCallback(
-    (newState: ((prev: T) => T) | T) => {
-      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/37663
-      const val = typeof newState === 'function' ? newState(stateRef.current) : newState
-      stateRef.current = val
-      rerender((c) => c + 1)
-    },
-    [rerender],
-  )
+  const setStateAndRerender = React.useCallback((newState: ((prev: T) => T) | T) => {
+    // @ts-expect-error https://github.com/microsoft/TypeScript/issues/37663
+    const val = typeof newState === 'function' ? newState(stateRef.current) : newState
+    stateRef.current = val
+    rerender((c) => c + 1)
+  }, [])
 
   return [stateRef, setStateAndRerender]
 }