@livestore/react 0.2.0 → 0.3.0-dev.10

package/dist/utils/useStateRefWithReactiveInput.d.ts

@@ -9,5 +9,5 @@ import React from 'react';
  * - Also see this Tweet for more potential problems: https://twitter.com/schickling/status/1677317711104278528
  *
  */
-export declare const useStateRefWithReactiveInput: <T>(inputState: T) => [React.MutableRefObject<T>, (newState: T | ((prev: T) => T)) => void];
+export declare const useStateRefWithReactiveInput: <T>(inputState: T) => [React.RefObject<T>, (newState: T | ((prev: T) => T)) => void];
 //# sourceMappingURL=useStateRefWithReactiveInput.d.ts.map

package/dist/utils/useStateRefWithReactiveInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStateRefWithReactiveInput.d.ts","sourceRoot":"","sources":["../../src/utils/useStateRefWithReactiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AACH,eAAO,MAAM,4BAA4B,GAAI,CAAC,cAChC,CAAC,KACZ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAwBtE,CAAA"}
+{"version":3,"file":"useStateRefWithReactiveInput.d.ts","sourceRoot":"","sources":["../../src/utils/useStateRefWithReactiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AACH,eAAO,MAAM,4BAA4B,GAAI,CAAC,cAChC,CAAC,KACZ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAwB/D,CAAA"}

package/dist/utils/useStateRefWithReactiveInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStateRefWithReactiveInput.js","sourceRoot":"","sources":["../../src/utils/useStateRefWithReactiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,UAAa,EAC0D,EAAE;IACzE,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvC,MAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAI,UAAU,CAAC,CAAA;IAC1D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAI,UAAU,CAAC,CAAA;IAE5C,IAAI,sBAAsB,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;QAClD,sBAAsB,CAAC,OAAO,GAAG,UAAU,CAAA;QAE3C,qHAAqH;QACrH,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAA;IAC/B,CAAC;IAED,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,QAA8B,EAAE,EAAE;QACjC,wEAAwE;QACxE,MAAM,GAAG,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;QAClF,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAA;QACtB,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;IACxB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAO,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAA;AACxC,CAAC,CAAA;AAED,yGAAyG;AACzG,iFAAiF;AACjF,4GAA4G;AAC5G,yEAAyE;AAEzE,wCAAwC;AACxC,mCAAmC;AACnC,MAAM;AAEN,6CAA6C;AAC7C,IAAI"}
+{"version":3,"file":"useStateRefWithReactiveInput.js","sourceRoot":"","sources":["../../src/utils/useStateRefWithReactiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,UAAa,EACmD,EAAE;IAClE,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvC,MAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAI,UAAU,CAAC,CAAA;IAC1D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAI,UAAU,CAAC,CAAA;IAE5C,IAAI,sBAAsB,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;QAClD,sBAAsB,CAAC,OAAO,GAAG,UAAU,CAAA;QAE3C,qHAAqH;QACrH,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAA;IAC/B,CAAC;IAED,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,QAA8B,EAAE,EAAE;QACjC,wEAAwE;QACxE,MAAM,GAAG,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;QAClF,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAA;QACtB,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;IACxB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAO,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAA;AACxC,CAAC,CAAA;AAED,yGAAyG;AACzG,iFAAiF;AACjF,4GAA4G;AAC5G,yEAAyE;AAEzE,wCAAwC;AACxC,mCAAmC;AACnC,MAAM;AAEN,6CAA6C;AAC7C,IAAI"}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@livestore/react",
-  "version": "0.2.0",
+  "version": "0.3.0-dev.10",
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/mod.d.ts",
@@ -21,28 +22,28 @@
     }
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.9.0",
-    "@livestore/utils": "0.2.0",
-    "@livestore/db-schema": "0.2.0",
-    "@livestore/livestore": "0.2.0",
-    "@livestore/common": "0.2.0"
+    "@opentelemetry/api": "1.9.0",
+    "@livestore/common": "0.3.0-dev.10",
+    "@livestore/livestore": "0.3.0-dev.10",
+    "@livestore/utils": "0.3.0-dev.10",
+    "@livestore/db-schema": "0.3.0-dev.10"
   },
   "devDependencies": {
-    "@opentelemetry/sdk-trace-base": "1.27.0",
+    "@opentelemetry/sdk-trace-base": "^1.30.1",
     "@testing-library/react": "^16.0.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "jsdom": "^25.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-window": "^1.8.10",
-    "typescript": "5.5.4",
-    "vite": "5.4.10",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-window": "^1.8.11",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.11",
     "vitest": "^2.1.4",
-    "@livestore/web": "0.2.0"
+    "@livestore/web": "0.3.0-dev.10"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "~19.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/LiveStoreProvider.test.tsx

@@ -1,4 +1,5 @@
 import { sql } from '@livestore/common'
+import { rawSqlMutation } from '@livestore/common/schema'
 import { queryDb, type Store } from '@livestore/livestore'
 import { Schema } from '@livestore/utils/effect'
 import { makeInMemoryAdapter } from '@livestore/web'
@@ -30,7 +31,11 @@ describe('LiveStoreProvider', () => {
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
         (store: Store) =>
-          store.__execute(sql`INSERT OR IGNORE INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`),
+          store.mutate(
+            rawSqlMutation({
+              sql: sql`INSERT OR IGNORE INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
+            }),
+          ),
         [],
       )
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -69,6 +74,8 @@ describe('LiveStoreProvider', () => {
     await waitFor(() => screen.getByText('LiveStore Shutdown due to abort signal'))
   })
 
+  // TODO test aborting during boot
+
   it('error during boot', async () => {
     let appRenderCount = 0
 
@@ -81,7 +88,11 @@ describe('LiveStoreProvider', () => {
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
         (store: Store) =>
-          store.__execute(sql`INSERT INTO todos_mising_table (id, text, completed) VALUES ('t1', 'buy milk', 0);`),
+          store.mutate(
+            rawSqlMutation({
+              sql: sql`INSERT OR IGNORE INTO todos_missing_table (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
+            }),
+          ),
         [],
       )
       // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/LiveStoreProvider.tsx

@@ -1,5 +1,5 @@
 import type { Adapter, BootStatus, IntentionalShutdownCause } from '@livestore/common'
-import { UnexpectedError } from '@livestore/common'
+import { provideOtel, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import type {
   BaseGraphQLContext,
@@ -7,11 +7,13 @@ import type {
   GraphQLOptions,
   LiveStoreContext as StoreContext_,
   OtelOptions,
+  ShutdownDeferred,
   Store,
 } from '@livestore/livestore'
 import { createStore, StoreAbort, StoreInterrupted } from '@livestore/livestore'
-import { errorToString } from '@livestore/utils'
-import { Effect, FiberSet, Logger, LogLevel, Schema } from '@livestore/utils/effect'
+import { errorToString, LS_DEV } from '@livestore/utils'
+import type { OtelTracer } from '@livestore/utils/effect'
+import { Deferred, Effect, Exit, identity, Logger, LogLevel, Schema, Scope, TaskTracing } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
@@ -26,7 +28,7 @@ interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
    *
    * The `storeId` is also used for persistence.
    *
-   * Make sure to also provide `storeId` to `mountDevtools` in `_devtools.html`.
+   * Make sure to also configure `storeId` in LiveStore Devtools (e.g. in Vite plugin).
    *
    * @default 'default'
    */
@@ -34,9 +36,9 @@ interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
   boot?: (
     store: Store<GraphQLContext, LiveStoreSchema>,
     parentSpan: otel.Span,
-  ) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
+  ) => void | Promise<void> | Effect.Effect<void, unknown, OtelTracer.OtelTracer>
   graphQLOptions?: GraphQLOptions<GraphQLContext>
-  otelOptions?: OtelOptions
+  otelOptions?: Partial<OtelOptions>
   renderLoading: (status: BootStatus) => ReactElement
   renderError?: (error: UnexpectedError | unknown) => ReactElement
   renderShutdown?: (cause: IntentionalShutdownCause | StoreAbort) => ReactElement
@@ -69,7 +71,9 @@ const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreAbort) =>
         ? 'devtools import'
         : cause.reason === 'devtools-reset'
           ? 'devtools reset'
-          : 'unknown reason'
+          : cause.reason === 'manual'
+            ? 'manual shutdown'
+            : 'unknown reason'
 
   return <>LiveStore Shutdown due to {reason}</>
 }
@@ -88,7 +92,7 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   batchUpdates,
   disableDevtools,
   signal,
-}: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): JSX.Element => {
+}: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): React.ReactElement => {
   const storeCtx = useCreateStore({
     storeId,
     schema,
@@ -114,6 +118,9 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   }
 
   globalThis.__debugLiveStore ??= {}
+  if (Object.keys(globalThis.__debugLiveStore).length === 0) {
+    globalThis.__debugLiveStore['_'] = storeCtx.store
+  }
   globalThis.__debugLiveStore[storeId] = storeCtx.store
 
   return <LiveStoreContext.Provider value={storeCtx}>{children}</LiveStoreContext.Provider>
@@ -142,15 +149,20 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   disableDevtools,
   reactivityGraph,
   signal,
-}: CreateStoreOptions<GraphQLContext, LiveStoreSchema> & { signal?: AbortSignal }) => {
+}: CreateStoreOptions<GraphQLContext, LiveStoreSchema> & {
+  signal?: AbortSignal
+  otelOptions?: Partial<OtelOptions>
+}) => {
   const [_, rerender] = React.useState(0)
   const ctxValueRef = React.useRef<{
     value: StoreContext_ | BootStatus
-    fiberSet: FiberSet.FiberSet | undefined
+    componentScope: Scope.CloseableScope | undefined
+    shutdownDeferred: ShutdownDeferred | undefined
     counter: number
   }>({
     value: { stage: 'loading' },
-    fiberSet: undefined,
+    componentScope: undefined,
+    shutdownDeferred: undefined,
     counter: 0,
   })
 
@@ -168,12 +180,17 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     signal,
   })
 
-  const interrupt = (fiberSet: FiberSet.FiberSet, error: StoreAbort | StoreInterrupted) =>
+  const interrupt = (
+    componentScope: Scope.CloseableScope,
+    shutdownDeferred: ShutdownDeferred,
+    error: StoreAbort | StoreInterrupted,
+  ) =>
     Effect.gen(function* () {
-      yield* FiberSet.clear(fiberSet)
-      yield* FiberSet.run(fiberSet, Effect.fail(error))
+      // 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.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] interupting', cause)),
       Effect.runFork,
     )
 
@@ -199,11 +216,17 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       reactivityGraph,
       signal,
     }
-    if (ctxValueRef.current.fiberSet !== undefined) {
-      interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
-      ctxValueRef.current.fiberSet = undefined
+    if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
+      interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreInterrupted())
+      ctxValueRef.current.componentScope = undefined
+      ctxValueRef.current.shutdownDeferred = undefined
+    }
+    ctxValueRef.current = {
+      value: { stage: 'loading' },
+      componentScope: undefined,
+      shutdownDeferred: undefined,
+      counter: ctxValueRef.current.counter + 1,
     }
-    ctxValueRef.current = { value: { stage: 'loading' }, fiberSet: undefined, counter: ctxValueRef.current.counter + 1 }
   }
 
   React.useEffect(() => {
@@ -216,47 +239,52 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     }
 
     signal?.addEventListener('abort', () => {
-      if (ctxValueRef.current.fiberSet !== undefined && ctxValueRef.current.counter === counter) {
-        interrupt(ctxValueRef.current.fiberSet, new StoreAbort())
-        ctxValueRef.current.fiberSet = undefined
+      if (
+        ctxValueRef.current.componentScope !== undefined &&
+        ctxValueRef.current.shutdownDeferred !== undefined &&
+        ctxValueRef.current.counter === counter
+      ) {
+        interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreAbort())
+        ctxValueRef.current.componentScope = undefined
+        ctxValueRef.current.shutdownDeferred = undefined
       }
     })
 
     Effect.gen(function* () {
-      const fiberSet = yield* FiberSet.make<
-        unknown,
+      const componentScope = yield* Scope.make()
+      const shutdownDeferred = yield* Deferred.make<
+        void,
         UnexpectedError | IntentionalShutdownCause | StoreAbort | StoreInterrupted
       >()
 
-      ctxValueRef.current.fiberSet = fiberSet
+      ctxValueRef.current.componentScope = componentScope
+      ctxValueRef.current.shutdownDeferred = shutdownDeferred
 
       yield* Effect.gen(function* () {
         const store = yield* createStore({
-          fiberSet,
           schema,
           storeId,
           graphQLOptions,
-          otelOptions,
           boot,
           adapter,
           reactivityGraph,
           batchUpdates,
           disableDevtools,
+          shutdownDeferred,
           onBootStatus: (status) => {
             if (ctxValueRef.current.value.stage === 'running' || ctxValueRef.current.value.stage === 'error') return
             setContextValue(status)
           },
-        })
+        }).pipe(Effect.tapErrorCause((cause) => Deferred.failCause(shutdownDeferred, cause)))
 
         setContextValue({ stage: 'running', store })
-
-        yield* Effect.never
-      }).pipe(Effect.scoped, FiberSet.run(fiberSet))
+      }).pipe(Scope.extend(componentScope), Effect.forkIn(componentScope))
 
       const shutdownContext = (cause: IntentionalShutdownCause | StoreAbort) =>
         Effect.sync(() => setContextValue({ stage: 'shutdown', cause }))
 
-      yield* FiberSet.join(fiberSet).pipe(
+      yield* Deferred.await(shutdownDeferred).pipe(
+        Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] shutdown', cause)),
         Effect.catchTag('LiveStore.IntentionalShutdownCause', (cause) => shutdownContext(cause)),
         Effect.catchTag('LiveStore.StoreAbort', (cause) => shutdownContext(cause)),
         Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
@@ -269,17 +297,21 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       // shutdown before a new one is created - especially when shutdown logic is async. You can't trust `React.useEffect`.
       // Thank you to Mattia Manzati for this idea.
       withSemaphore(storeId),
+      Effect.withSpan('@livestore/react:useCreateStore'),
+      LS_DEV ? TaskTracing.withAsyncTaggingTracing((name: string) => (console as any).createTask(name)) : identity,
+      provideOtel({ parentSpanContext: otelOptions?.rootSpanContext, otelTracer: otelOptions?.tracer }),
       Effect.tapCauseLogPretty,
       Effect.annotateLogs({ thread: 'window' }),
-      Effect.provide(Logger.pretty),
+      Effect.provide(Logger.prettyWithThread('window')),
       Logger.withMinimumLogLevel(LogLevel.Debug),
       Effect.runFork,
     )
 
     return () => {
-      if (ctxValueRef.current.fiberSet !== undefined) {
-        interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
-        ctxValueRef.current.fiberSet = undefined
+      if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
+        interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreInterrupted())
+        ctxValueRef.current.componentScope = undefined
+        ctxValueRef.current.shutdownDeferred = undefined
       }
     }
   }, [

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

@@ -1,8 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`useRow > otel > should update the data based on component key > strictMode=false 1`] = `
+exports[`useRow > otel > should update the data based on component key strictMode={ strictMode: false } 1`] = `
 {
-  "_name": "test",
+  "_name": "createStore",
+  "attributes": {
+    "debugInstanceId": "test",
+    "storeId": "default",
+  },
   "children": [
     {
       "_name": "livestore.in-memory-db:execute",
@@ -17,6 +21,9 @@ exports[`useRow > otel > should update the data based on component key > strictM
     ",
       },
     },
+    {
+      "_name": "LiveStore:createStore",
+    },
     {
       "_name": "sql-in-memory-select",
       "attributes": {
@@ -33,6 +40,9 @@ exports[`useRow > otel > should update the data based on component key > strictM
         "sql.rowsCount": 1,
       },
     },
+    {
+      "_name": "LiveStore:sync",
+    },
     {
       "_name": "LiveStore:mutations",
       "children": [
@@ -43,27 +53,16 @@ exports[`useRow > otel > should update the data based on component key > strictM
           },
           "children": [
             {
-              "_name": "LiveStore:processWrites",
+              "_name": "LiveStore:mutate:applyMutations",
               "attributes": {
                 "livestore.mutateLabel": "mutate",
               },
               "children": [
                 {
-                  "_name": "LiveStore:mutateWithoutRefresh",
+                  "_name": "livestore.in-memory-db:execute",
                   "attributes": {
-                    "livestore.args": "{
-  "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
-}",
-                    "livestore.mutation": "livestore.RawSql",
+                    "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
                   },
-                  "children": [
-                    {
-                      "_name": "livestore.in-memory-db:execute",
-                      "attributes": {
-                        "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
-                      },
-                    },
-                  ],
                 },
               ],
             },
@@ -98,19 +97,24 @@ exports[`useRow > otel > should update the data based on component key > strictM
           },
           "children": [
             {
-              "_name": "LiveStore:mutateWithoutRefresh",
+              "_name": "LiveStore:mutate",
               "attributes": {
-                "livestore.args": "{
-  "id": "u1"
-}",
-                "livestore.mutation": "_Derived_Create_UserInfo",
+                "livestore.mutateLabel": "mutate",
               },
               "children": [
                 {
-                  "_name": "livestore.in-memory-db:execute",
+                  "_name": "LiveStore:mutate:applyMutations",
                   "attributes": {
-                    "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                    "livestore.mutateLabel": "mutate",
                   },
+                  "children": [
+                    {
+                      "_name": "livestore.in-memory-db:execute",
+                      "attributes": {
+                        "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                      },
+                    },
+                  ],
                 },
               ],
             },
@@ -196,9 +200,13 @@ exports[`useRow > otel > should update the data based on component key > strictM
 }
 `;
 
-exports[`useRow > otel > should update the data based on component key > strictMode=true 1`] = `
+exports[`useRow > otel > should update the data based on component key strictMode={ strictMode: true } 1`] = `
 {
-  "_name": "test",
+  "_name": "createStore",
+  "attributes": {
+    "debugInstanceId": "test",
+    "storeId": "default",
+  },
   "children": [
     {
       "_name": "livestore.in-memory-db:execute",
@@ -213,6 +221,9 @@ exports[`useRow > otel > should update the data based on component key > strictM
     ",
       },
     },
+    {
+      "_name": "LiveStore:createStore",
+    },
     {
       "_name": "sql-in-memory-select",
       "attributes": {
@@ -229,6 +240,9 @@ exports[`useRow > otel > should update the data based on component key > strictM
         "sql.rowsCount": 1,
       },
     },
+    {
+      "_name": "LiveStore:sync",
+    },
     {
       "_name": "LiveStore:mutations",
       "children": [
@@ -239,27 +253,16 @@ exports[`useRow > otel > should update the data based on component key > strictM
           },
           "children": [
             {
-              "_name": "LiveStore:processWrites",
+              "_name": "LiveStore:mutate:applyMutations",
               "attributes": {
                 "livestore.mutateLabel": "mutate",
               },
               "children": [
                 {
-                  "_name": "LiveStore:mutateWithoutRefresh",
+                  "_name": "livestore.in-memory-db:execute",
                   "attributes": {
-                    "livestore.args": "{
-  "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
-}",
-                    "livestore.mutation": "livestore.RawSql",
+                    "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
                   },
-                  "children": [
-                    {
-                      "_name": "livestore.in-memory-db:execute",
-                      "attributes": {
-                        "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
-                      },
-                    },
-                  ],
                 },
               ],
             },
@@ -294,19 +297,24 @@ exports[`useRow > otel > should update the data based on component key > strictM
           },
           "children": [
             {
-              "_name": "LiveStore:mutateWithoutRefresh",
+              "_name": "LiveStore:mutate",
               "attributes": {
-                "livestore.args": "{
-  "id": "u1"
-}",
-                "livestore.mutation": "_Derived_Create_UserInfo",
+                "livestore.mutateLabel": "mutate",
               },
               "children": [
                 {
-                  "_name": "livestore.in-memory-db:execute",
+                  "_name": "LiveStore:mutate:applyMutations",
                   "attributes": {
-                    "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                    "livestore.mutateLabel": "mutate",
                   },
+                  "children": [
+                    {
+                      "_name": "livestore.in-memory-db:execute",
+                      "attributes": {
+                        "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                      },
+                    },
+                  ],
                 },
               ],
             },
@@ -341,13 +349,6 @@ exports[`useRow > otel > should update the data based on component key > strictM
                     "queryLabel": "db(row:UserInfo:u1)",
                   },
                 },
-                {
-                  "_name": "LiveStore.subscribe",
-                  "attributes": {
-                    "label": "db(row:UserInfo:u1)",
-                    "queryLabel": "db(row:UserInfo:u1)",
-                  },
-                },
               ],
             },
           ],

package/src/__tests__/fixture.tsx

@@ -1,7 +1,8 @@
+import { provideOtel } from '@livestore/common'
 import { DbSchema, makeSchema } from '@livestore/common/schema'
 import type { LiveStoreContextRunning } from '@livestore/livestore'
 import { createStore, globalReactivityGraph, makeReactivityGraph } from '@livestore/livestore'
-import { Effect, FiberSet } from '@livestore/utils/effect'
+import { Effect } from '@livestore/utils/effect'
 import { makeInMemoryAdapter } from '@livestore/web'
 import type * as otel from '@opentelemetry/api'
 import React from 'react'
@@ -65,7 +66,7 @@ export const makeTodoMvcReact = ({
   otelTracer,
   otelContext,
   useGlobalReactivityGraph = true,
-  strictMode = process.env.REACT_STRICT_MODE !== undefined,
+  strictMode,
 }: {
   otelTracer?: otel.Tracer
   otelContext?: otel.Context
@@ -90,18 +91,12 @@ export const makeTodoMvcReact = ({
 
     const reactivityGraph = useGlobalReactivityGraph ? globalReactivityGraph : makeReactivityGraph()
 
-    const fiberSet = yield* FiberSet.make()
-
     const store = yield* createStore({
       schema,
       storeId: 'default',
       adapter: makeInMemoryAdapter(),
       reactivityGraph,
-      otelOptions: {
-        tracer: otelTracer,
-        rootSpanContext: otelContext,
-      },
-      fiberSet,
+      debug: { instanceId: 'test' },
     })
 
     // TODO improve typing of `LiveStoreContext`
@@ -117,5 +112,5 @@ export const makeTodoMvcReact = ({
       </MaybeStrictMode>
     )
 
-    return { wrapper, store, reactivityGraph, makeRenderCount, strictMode }
-  })
+    return { wrapper, store, reactivityGraph, makeRenderCount }
+  }).pipe(provideOtel({ parentSpanContext: otelContext, otelTracer }))

package/src/useQuery.ts

@@ -28,7 +28,7 @@ export const useQuery = <TQuery extends LiveQueryAny>(query: TQuery): GetResult<
 export const useQueryRef = <TQuery extends LiveQueryAny>(
   query$: TQuery,
   parentOtelContext?: otel.Context,
-): React.MutableRefObject<GetResult<TQuery>> => {
+): React.RefObject<GetResult<TQuery>> => {
   const { store } = useStore()
 
   React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`)