@livestore/livestore 0.0.54-dev.21 → 0.0.54-dev.24

package/src/store.ts

@@ -1,17 +1,19 @@
 import type {
   BootDb,
+  BootStatus,
   ParamsObject,
   PreparedBindValues,
   ResetMode,
   StoreAdapter,
   StoreAdapterFactory,
+  UnexpectedError,
 } from '@livestore/common'
-import { Devtools, getExecArgsFromMutation, prepareBindValues } from '@livestore/common'
-import { version as liveStoreVersion } from '@livestore/common/package.json'
+import { Devtools, getExecArgsFromMutation, liveStoreVersion, prepareBindValues } from '@livestore/common'
 import type { LiveStoreSchema, MutationEvent } from '@livestore/common/schema'
 import { makeMutationEventSchemaMemo } from '@livestore/common/schema'
-import { assertNever, isPromise, makeNoopTracer, shouldNeverHappen } from '@livestore/utils'
-import { Effect, Schema, Stream } from '@livestore/utils/effect'
+import { assertNever, isPromise, makeNoopTracer, shouldNeverHappen, throttle } from '@livestore/utils'
+import { cuid } from '@livestore/utils/cuid'
+import { Effect, Layer, Logger, LogLevel, OtelTracer, Queue, Schema, Stream } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import type { GraphQLSchema } from 'graphql'
 
@@ -19,6 +21,7 @@ import { globalReactivityGraph } from './global-state.js'
 import { MainDatabaseWrapper } from './MainDatabaseWrapper.js'
 import type { StackInfo } from './react/utils/stack-info.js'
 import type { DebugRefreshReasonBase, Ref } from './reactive.js'
+import { NOT_REFRESHED_YET } from './reactive.js'
 import type { LiveQuery, QueryContext, ReactivityGraph } from './reactiveQueries/base-class.js'
 import { downloadBlob } from './utils/dev.js'
 import { getDurationMsFromSpan } from './utils/otel.js'
@@ -50,6 +53,8 @@ export type StoreOptions<
   otelOptions: OtelOptions
   reactivityGraph: ReactivityGraph
   disableDevtools?: boolean
+  // TODO remove this temporary solution and find a better way to avoid re-processing the same mutation
+  __processedMutationIds: Set<string>
 }
 
 export type RefreshReason =
@@ -104,6 +109,7 @@ export class Store<
   TSchema extends LiveStoreSchema = LiveStoreSchema,
 > {
   id = uniqueStoreId()
+  readonly devtoolsConnectionId = cuid()
   reactivityGraph: ReactivityGraph
   mainDbWrapper: MainDatabaseWrapper
   adapter: StoreAdapter
@@ -118,8 +124,8 @@ export class Store<
   tableRefs: { [key: string]: Ref<null, QueryContext, RefreshReason> }
 
   // TODO remove this temporary solution and find a better way to avoid re-processing the same mutation
-  __processedMutationIds = new Set<string>()
-  __processedMutationWithoutRefreshIds = new Set<string>()
+  private __processedMutationIds
+  private __processedMutationWithoutRefreshIds = new Set<string>()
 
   /** RC-based set to see which queries are currently subscribed to */
   activeQueries: ReferenceCountedSet<LiveQuery<any>>
@@ -133,6 +139,7 @@ export class Store<
     reactivityGraph,
     otelOptions,
     disableDevtools,
+    __processedMutationIds,
   }: StoreOptions<TGraphQLContext, TSchema>) {
     this.mainDbWrapper = new MainDatabaseWrapper({ otel: otelOptions, db: adapter.mainDb })
     this.adapter = adapter
@@ -141,6 +148,9 @@ export class Store<
     // TODO refactor
     this.__mutationEventSchema = makeMutationEventSchemaMemo(schema)
 
+    // TODO remove this temporary solution and find a better way to avoid re-processing the same mutation
+    this.__processedMutationIds = __processedMutationIds
+
     // TODO generalize the `tableRefs` concept to allow finer-grained refs
     this.tableRefs = {}
     this.activeQueries = new ReferenceCountedSet()
@@ -153,7 +163,7 @@ export class Store<
 
     this.reactivityGraph = reactivityGraph
     this.reactivityGraph.context = {
-      store: this as any,
+      store: this as unknown as Store<BaseGraphQLContext, LiveStoreSchema>,
       otelTracer: otelOptions.tracer,
       rootOtelContext: otelQueriesSpanContext,
     }
@@ -163,8 +173,7 @@ export class Store<
         this.mutate({ wasSyncMessage: true }, mutationEventDecoded)
       }),
       Stream.runDrain,
-      Effect.tapCauseLogPretty,
-      Effect.runFork,
+      runEffectFork,
     )
 
     if (disableDevtools !== true) {
@@ -178,11 +187,7 @@ export class Store<
     }
 
     // Need a set here since `schema.tables` might contain duplicates and some componentStateTables
-    const allTableNames = new Set(
-      this.schema.tables.keys(),
-      // TODO activate dynamic tables
-      // ...Array.from(dynamicallyRegisteredTables.values()).map((_) => _.sqliteDef.name),
-    )
+    const allTableNames = new Set(this.schema.tables.keys())
     const existingTableRefs = new Map(
       Array.from(this.reactivityGraph.atoms.values())
         .filter((_): _ is Ref<any, any, any> => _._tag === 'ref' && _.label?.startsWith('tableRef:') === true)
@@ -270,7 +275,7 @@ export class Store<
     otel.trace.getSpan(this.otel.mutationsSpanContext)!.end()
     otel.trace.getSpan(this.otel.queriesSpanContext)!.end()
 
-    await this.adapter.coordinator.shutdown()
+    await this.adapter.coordinator.shutdown.pipe(runEffectPromise)
   }
 
   mutate: {
@@ -487,10 +492,9 @@ export class Store<
 
         if (coordinatorMode !== 'skip-coordinator') {
           // Asynchronously apply mutation to a persistent storage (we're not awaiting this promise here)
-          void this.adapter.coordinator.mutate(mutationEventEncoded as MutationEvent.AnyEncoded, {
-            span,
-            persisted: coordinatorMode !== 'skip-persist',
-          })
+          this.adapter.coordinator
+            .mutate(mutationEventEncoded as MutationEvent.AnyEncoded, { persisted: coordinatorMode !== 'skip-persist' })
+            .pipe(runEffectFork)
         }
 
         // Uncomment to print a list of queries currently registered on the store
@@ -516,8 +520,7 @@ export class Store<
   ) => {
     this.mainDbWrapper.execute(query, prepareBindValues(params, query), writeTables, { otelContext })
 
-    const parentSpan = otel.trace.getSpan(otel.context.active())
-    this.adapter.coordinator.execute(query, prepareBindValues(params, query), parentSpan)
+    this.adapter.coordinator.execute(query, prepareBindValues(params, query)).pipe(runEffectFork)
   }
 
   select = (query: string, params: ParamsObject = {}) => {
@@ -531,112 +534,268 @@ export class Store<
       meta: { liveStoreRefType: 'table' },
     })
 
+  // TODO shutdown behaviour
   private bootDevtools = () => {
-    const devtoolsChannel = Devtools.makeBroadcastChannels()
+    const sendToDevtoolsContentscript = (
+      message: typeof Devtools.DevtoolsWindowMessage.MessageForContentscript.Type,
+    ) => {
+      window.postMessage(Schema.encodeSync(Devtools.DevtoolsWindowMessage.MessageForContentscript)(message), '*')
+    }
 
-    type Unsub = () => void
-    type RequestId = string
+    const channelId = this.adapter.coordinator.devtools.channelId
 
-    const reactivityGraphSubcriptions = new Map<RequestId, Unsub>()
-    const liveQueriesSubscriptions = new Map<RequestId, Unsub>()
-    devtoolsChannel.toAppHost.addEventListener('message', async (event) => {
-      const decoded = Schema.decodeUnknownOption(Devtools.MessageToAppHost)(event.data)
-      if (
-        decoded._tag === 'None' ||
-        decoded.value._tag === 'LSD.DevtoolsReady' ||
-        decoded.value._tag === 'LSD.DevtoolsConnected' ||
-        decoded.value.channelId !== this.adapter.coordinator.devtools.channelId
-      ) {
-        // console.log(`Unknown message`, event)
+    window.addEventListener('message', (event) => {
+      const decodedMessageRes = Schema.decodeOption(Devtools.DevtoolsWindowMessage.MessageForStore)(event.data)
+      if (decodedMessageRes._tag === 'None') return
+
+      const message = decodedMessageRes.value
+
+      if (message._tag === 'LSD.WindowMessage.ContentscriptListening') {
+        sendToDevtoolsContentscript(Devtools.DevtoolsWindowMessage.StoreReady.make({ channelId }))
         return
       }
 
-      const requestId = decoded.value.requestId
-      const sendToDevtools = (message: Devtools.MessageFromAppHost) =>
-        devtoolsChannel.fromAppHost.postMessage(Schema.encodeSync(Devtools.MessageFromAppHost)(message))
-
-      switch (decoded.value._tag) {
-        case 'LSD.ReactivityGraphSubscribe': {
-          const includeResults = decoded.value.includeResults
-          const send = () =>
-            sendToDevtools(
-              Devtools.ReactivityGraphRes.make({
-                reactivityGraph: this.reactivityGraph.getSnapshot({ includeResults }),
-                requestId,
-                liveStoreVersion,
-              }),
-            )
-
-          send()
-
-          reactivityGraphSubcriptions.set(
-            requestId,
-            this.reactivityGraph.subscribeToRefresh(() => send()),
-          )
+      if (message.channelId !== channelId) return
 
-          break
-        }
-        case 'LSD.DebugInfoReq': {
-          sendToDevtools(
-            Devtools.DebugInfoRes.make({ debugInfo: this.mainDbWrapper.debugInfo, requestId, liveStoreVersion }),
-          )
-          break
-        }
-        case 'LSD.DebugInfoResetReq': {
-          this.mainDbWrapper.debugInfo.slowQueries.clear()
-          sendToDevtools(Devtools.DebugInfoResetRes.make({ requestId, liveStoreVersion }))
-          break
-        }
-        case 'LSD.DebugInfoRerunQueryReq': {
-          const { queryStr, bindValues, queriedTables } = decoded.value
-          this.mainDbWrapper.select(queryStr, { bindValues, queriedTables, skipCache: true })
-          sendToDevtools(Devtools.DebugInfoRerunQueryRes.make({ requestId, liveStoreVersion }))
-          break
-        }
-        case 'LSD.ReactivityGraphUnsubscribe': {
-          reactivityGraphSubcriptions.get(requestId)!()
-          break
-        }
-        case 'LSD.LiveQueriesSubscribe': {
-          const send = () =>
-            sendToDevtools(
-              Devtools.LiveQueriesRes.make({
-                liveQueries: [...this.activeQueries].map((q) => ({
-                  _tag: q._tag,
-                  id: q.id,
-                  label: q.label,
-                  runs: q.runs,
-                  executionTimes: q.executionTimes.map((_) => Number(_.toString().slice(0, 5))),
-                  lastestResult: q.results$.previousResult,
-                  activeSubscriptions: Array.from(q.activeSubscriptions),
-                })),
-                requestId,
-                liveStoreVersion,
-              }),
-            )
-
-          send()
-
-          liveQueriesSubscriptions.set(
-            requestId,
-            this.reactivityGraph.subscribeToRefresh(() => send()),
-          )
+      if (message._tag === 'LSD.WindowMessage.MessagePortForStore') {
+        this.adapter.coordinator.devtools.connect({ port: message.port, connectionId: this.devtoolsConnectionId }).pipe(
+          Effect.tapSync(({ storeMessagePort }) => {
+            // console.log('storeMessagePort', storeMessagePort)
+            storeMessagePort.addEventListener('message', (event) => {
+              const decodedMessage = Schema.decodeUnknownSync(Devtools.MessageToAppHostStore)(event.data)
+              // console.log('storeMessagePort message', decodedMessage)
 
-          break
-        }
-        case 'LSD.LiveQueriesUnsubscribe': {
-          liveQueriesSubscriptions.get(requestId)!()
-          break
-        }
-        case 'LSD.ResetAllDataReq': {
-          await this.adapter.coordinator.dangerouslyReset(decoded.value.mode)
-          sendToDevtools(Devtools.ResetAllDataRes.make({ requestId, liveStoreVersion }))
+              if (decodedMessage.channelId !== this.adapter.coordinator.devtools.channelId) {
+                // console.log(`Unknown message`, event)
+                return
+              }
 
-          break
-        }
-        // No default
+              const requestId = decodedMessage.requestId
+              const sendToDevtools = (message: Devtools.MessageFromAppHostStore) =>
+                storeMessagePort.postMessage(Schema.encodeSync(Devtools.MessageFromAppHostStore)(message))
+
+              const requestIdleCallback = window.requestIdleCallback ?? ((cb: Function) => cb())
+
+              switch (decodedMessage._tag) {
+                case 'LSD.ReactivityGraphSubscribe': {
+                  const includeResults = decodedMessage.includeResults
+
+                  const send = () =>
+                    // In order to not add more work to the current tick, we use requestIdleCallback
+                    // to send the reactivity graph updates to the devtools
+                    requestIdleCallback(
+                      () =>
+                        sendToDevtools(
+                          Devtools.ReactivityGraphRes.make({
+                            reactivityGraph: this.reactivityGraph.getSnapshot({ includeResults }),
+                            requestId,
+                            liveStoreVersion,
+                          }),
+                        ),
+                      { timeout: 500 },
+                    )
+
+                  send()
+
+                  // In some cases, there can be A LOT of reactivity graph updates in a short period of time
+                  // so we throttle the updates to avoid sending too much data
+                  // This might need to be tweaked further and possibly be exposed to the user in some way.
+                  const throttledSend = throttle(send, 20)
+
+                  reactivityGraphSubcriptions.set(requestId, this.reactivityGraph.subscribeToRefresh(throttledSend))
+
+                  break
+                }
+                case 'LSD.DebugInfoReq': {
+                  sendToDevtools(
+                    Devtools.DebugInfoRes.make({
+                      debugInfo: this.mainDbWrapper.debugInfo,
+                      requestId,
+                      liveStoreVersion,
+                    }),
+                  )
+                  break
+                }
+                case 'LSD.DebugInfoResetReq': {
+                  this.mainDbWrapper.debugInfo.slowQueries.clear()
+                  sendToDevtools(Devtools.DebugInfoResetRes.make({ requestId, liveStoreVersion }))
+                  break
+                }
+                case 'LSD.DebugInfoRerunQueryReq': {
+                  const { queryStr, bindValues, queriedTables } = decodedMessage
+                  this.mainDbWrapper.select(queryStr, { bindValues, queriedTables, skipCache: true })
+                  sendToDevtools(Devtools.DebugInfoRerunQueryRes.make({ requestId, liveStoreVersion }))
+                  break
+                }
+                case 'LSD.ReactivityGraphUnsubscribe': {
+                  reactivityGraphSubcriptions.get(requestId)!()
+                  break
+                }
+                case 'LSD.LiveQueriesSubscribe': {
+                  const send = () =>
+                    requestIdleCallback(
+                      () =>
+                        sendToDevtools(
+                          Devtools.LiveQueriesRes.make({
+                            liveQueries: [...this.activeQueries].map((q) => ({
+                              _tag: q._tag,
+                              id: q.id,
+                              label: q.label,
+                              runs: q.runs,
+                              executionTimes: q.executionTimes.map((_) => Number(_.toString().slice(0, 5))),
+                              lastestResult:
+                                q.results$.previousResult === NOT_REFRESHED_YET
+                                  ? 'SYMBOL_NOT_REFRESHED_YET'
+                                  : q.results$.previousResult,
+                              activeSubscriptions: Array.from(q.activeSubscriptions),
+                            })),
+                            requestId,
+                            liveStoreVersion,
+                          }),
+                        ),
+                      { timeout: 500 },
+                    )
+
+                  send()
+
+                  // Same as in the reactivity graph subscription case above, we need to throttle the updates
+                  const throttledSend = throttle(send, 20)
+
+                  liveQueriesSubscriptions.set(requestId, this.reactivityGraph.subscribeToRefresh(throttledSend))
+
+                  break
+                }
+                case 'LSD.LiveQueriesUnsubscribe': {
+                  liveQueriesSubscriptions.get(requestId)!()
+                  break
+                }
+                // No default
+              }
+            })
+
+            storeMessagePort.start()
+          }),
+          runEffectFork,
+        )
+
+        return
       }
     })
+
+    sendToDevtoolsContentscript(Devtools.DevtoolsWindowMessage.StoreReady.make({ channelId }))
+
+    // const devtoolsChannel = Devtools.makeBroadcastChannels()
+
+    type Unsub = () => void
+    type RequestId = string
+
+    const reactivityGraphSubcriptions = new Map<RequestId, Unsub>()
+    const liveQueriesSubscriptions = new Map<RequestId, Unsub>()
+    // devtoolsChannel.toAppHost.addEventListener('message', async (event) => {
+    //   const decoded = Schema.decodeUnknownOption(Devtools.MessageToAppHostStore)(event.data)
+    //   if (decoded._tag === 'None' || decoded.value.channelId !== this.adapter.coordinator.devtools.channelId) {
+    //     // console.log(`Unknown message`, event)
+    //     return
+    //   }
+
+    //   const requestId = decoded.value.requestId
+    //   const sendToDevtools = (message: Devtools.MessageFromAppHostStore) =>
+    //     devtoolsChannel.fromAppHost.postMessage(Schema.encodeSync(Devtools.MessageFromAppHostStore)(message))
+
+    //   const requestIdleCallback = window.requestIdleCallback ?? ((cb: Function) => cb())
+
+    //   switch (decoded.value._tag) {
+    //     case 'LSD.ReactivityGraphSubscribe': {
+    //       const includeResults = decoded.value.includeResults
+
+    //       const send = () =>
+    //         // In order to not add more work to the current tick, we use requestIdleCallback
+    //         // to send the reactivity graph updates to the devtools
+    //         requestIdleCallback(
+    //           () =>
+    //             sendToDevtools(
+    //               Devtools.ReactivityGraphRes.make({
+    //                 reactivityGraph: this.reactivityGraph.getSnapshot({ includeResults }),
+    //                 requestId,
+    //                 liveStoreVersion,
+    //               }),
+    //             ),
+    //           { timeout: 500 },
+    //         )
+
+    //       send()
+
+    //       // In some cases, there can be A LOT of reactivity graph updates in a short period of time
+    //       // so we throttle the updates to avoid sending too much data
+    //       // This might need to be tweaked further and possibly be exposed to the user in some way.
+    //       const throttledSend = throttle(send, 20)
+
+    //       reactivityGraphSubcriptions.set(requestId, this.reactivityGraph.subscribeToRefresh(throttledSend))
+
+    //       break
+    //     }
+    //     case 'LSD.DebugInfoReq': {
+    //       sendToDevtools(
+    //         Devtools.DebugInfoRes.make({ debugInfo: this.mainDbWrapper.debugInfo, requestId, liveStoreVersion }),
+    //       )
+    //       break
+    //     }
+    //     case 'LSD.DebugInfoResetReq': {
+    //       this.mainDbWrapper.debugInfo.slowQueries.clear()
+    //       sendToDevtools(Devtools.DebugInfoResetRes.make({ requestId, liveStoreVersion }))
+    //       break
+    //     }
+    //     case 'LSD.DebugInfoRerunQueryReq': {
+    //       const { queryStr, bindValues, queriedTables } = decoded.value
+    //       this.mainDbWrapper.select(queryStr, { bindValues, queriedTables, skipCache: true })
+    //       sendToDevtools(Devtools.DebugInfoRerunQueryRes.make({ requestId, liveStoreVersion }))
+    //       break
+    //     }
+    //     case 'LSD.ReactivityGraphUnsubscribe': {
+    //       reactivityGraphSubcriptions.get(requestId)!()
+    //       break
+    //     }
+    //     case 'LSD.LiveQueriesSubscribe': {
+    //       const send = () =>
+    //         requestIdleCallback(
+    //           () =>
+    //             sendToDevtools(
+    //               Devtools.LiveQueriesRes.make({
+    //                 liveQueries: [...this.activeQueries].map((q) => ({
+    //                   _tag: q._tag,
+    //                   id: q.id,
+    //                   label: q.label,
+    //                   runs: q.runs,
+    //                   executionTimes: q.executionTimes.map((_) => Number(_.toString().slice(0, 5))),
+    //                   lastestResult:
+    //                     q.results$.previousResult === NOT_REFRESHED_YET
+    //                       ? 'SYMBOL_NOT_REFRESHED_YET'
+    //                       : q.results$.previousResult,
+    //                   activeSubscriptions: Array.from(q.activeSubscriptions),
+    //                 })),
+    //                 requestId,
+    //                 liveStoreVersion,
+    //               }),
+    //             ),
+    //           { timeout: 500 },
+    //         )
+
+    //       send()
+
+    //       // Same as in the reactivity graph subscription case above, we need to throttle the updates
+    //       const throttledSend = throttle(send, 20)
+
+    //       liveQueriesSubscriptions.set(requestId, this.reactivityGraph.subscribeToRefresh(throttledSend))
+
+    //       break
+    //     }
+    //     case 'LSD.LiveQueriesUnsubscribe': {
+    //       liveQueriesSubscriptions.get(requestId)!()
+    //       break
+    //     }
+    //     // No default
+    //   }
+    // })
   }
 
   __devDownloadDb = () => {
@@ -645,18 +804,37 @@ export class Store<
   }
 
   __devDownloadMutationLogDb = async () => {
-    const data = await this.adapter.coordinator.getMutationLogData()
+    const data = await this.adapter.coordinator.getMutationLogData.pipe(runEffectPromise)
     downloadBlob(data, `livestore-mutationlog-${Date.now()}.db`)
   }
 
   // TODO allow for graceful store reset without requiring a full page reload (which should also call .boot)
-  dangerouslyResetStorage = (mode: ResetMode) => this.adapter.coordinator.dangerouslyReset(mode)
+  dangerouslyResetStorage = (mode: ResetMode) => this.adapter.coordinator.dangerouslyReset(mode).pipe(runEffectPromise)
+}
+
+export type CreateStoreOptions<TGraphQLContext extends BaseGraphQLContext, TSchema extends LiveStoreSchema> = {
+  schema: TSchema
+  adapter: StoreAdapterFactory
+  reactivityGraph?: ReactivityGraph
+  graphQLOptions?: GraphQLOptions<TGraphQLContext>
+  otelOptions?: Partial<OtelOptions>
+  boot?: (db: BootDb, parentSpan: otel.Span) => unknown | Promise<unknown>
+  batchUpdates?: (run: () => void) => void
+  disableDevtools?: boolean
+  onBootStatus?: (status: BootStatus) => void
 }
 
 /** Create a new LiveStore Store */
 export const createStore = async <
   TGraphQLContext extends BaseGraphQLContext,
   TSchema extends LiveStoreSchema = LiveStoreSchema,
+>(
+  options: CreateStoreOptions<TGraphQLContext, TSchema>,
+): Promise<Store<TGraphQLContext, TSchema>> => createStoreEff(options).pipe(runEffectPromise)
+
+export const createStoreEff = <
+  TGraphQLContext extends BaseGraphQLContext,
+  TSchema extends LiveStoreSchema = LiveStoreSchema,
 >({
   schema,
   graphQLOptions,
@@ -666,127 +844,142 @@ export const createStore = async <
   reactivityGraph = globalReactivityGraph,
   batchUpdates,
   disableDevtools,
-}: {
-  schema: TSchema
-  adapter: StoreAdapterFactory
-  reactivityGraph?: ReactivityGraph
-  graphQLOptions?: GraphQLOptions<TGraphQLContext>
-  otelOptions?: Partial<OtelOptions>
-  boot?: (db: BootDb, parentSpan: otel.Span) => unknown | Promise<unknown>
-  batchUpdates?: (run: () => void) => void
-  disableDevtools?: boolean
-}): Promise<Store<TGraphQLContext, TSchema>> => {
+  onBootStatus,
+}: CreateStoreOptions<TGraphQLContext, TSchema>): Effect.Effect<Store<TGraphQLContext, TSchema>, UnexpectedError> => {
   const otelTracer = otelOptions?.tracer ?? makeNoopTracer()
   const otelRootSpanContext = otelOptions?.rootSpanContext ?? otel.context.active()
-  return otelTracer.startActiveSpan('createStore', {}, otelRootSpanContext, async (span) => {
-    try {
-      performance.mark('livestore:db-creating')
-      const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-      const adapterPromise = adapterFactory({ otelTracer, otelContext, schema })
-      const adapter = adapterPromise instanceof Promise ? await adapterPromise : adapterPromise
-      performance.mark('livestore:db-created')
-      performance.measure('livestore:db-create', 'livestore:db-creating', 'livestore:db-created')
-
-      if (batchUpdates !== undefined) {
-        reactivityGraph.effectsWrapper = batchUpdates
-      }
 
-      const mutationEventSchema = makeMutationEventSchemaMemo(schema)
+  const TracingLive = Layer.unwrapEffect(Effect.map(OtelTracer.make, Layer.setTracer)).pipe(
+    Layer.provide(Layer.sync(OtelTracer.Tracer, () => otelTracer)),
+  )
 
-      // TODO consider moving booting into the storage backend
-      if (boot !== undefined) {
-        let isInTxn = false
-        let txnExecuteStmnts: [string, PreparedBindValues | undefined][] = []
+  return Effect.gen(function* () {
+    const span = yield* OtelTracer.currentOtelSpan.pipe(Effect.orDie)
 
-        const bootDbImpl: BootDb = {
-          _tag: 'BootDb',
-          execute: (queryStr, bindValues) => {
-            const stmt = adapter.mainDb.prepare(queryStr)
-            stmt.execute(bindValues)
+    const bootStatusQueue = yield* Queue.unbounded<BootStatus>()
 
-            if (isInTxn === true) {
-              txnExecuteStmnts.push([queryStr, bindValues])
-            } else {
-              void adapter.coordinator.execute(queryStr, bindValues, undefined)
-            }
-          },
-          mutate: (...list) => {
-            for (const mutationEventDecoded of list) {
-              const mutationDef =
-                schema.mutations.get(mutationEventDecoded.mutation) ??
-                shouldNeverHappen(`Unknown mutation type: ${mutationEventDecoded.mutation}`)
-
-              const execArgsArr = getExecArgsFromMutation({ mutationDef, mutationEventDecoded })
-              // const { bindValues, statementSql } = getExecArgsFromMutation({ mutationDef, mutationEventDecoded })
-
-              for (const { statementSql, bindValues } of execArgsArr) {
-                adapter.mainDb.execute(statementSql, bindValues)
-              }
+    yield* Queue.take(bootStatusQueue).pipe(
+      Effect.tapSync((status) => onBootStatus?.(status)),
+      Effect.forever,
+      Effect.tapCauseLogPretty,
+      Effect.forkScoped,
+    )
 
-              const mutationEventEncoded = Schema.encodeUnknownSync(mutationEventSchema)(mutationEventDecoded)
+    const adapter: StoreAdapter = yield* adapterFactory({
+      schema,
+      devtoolsEnabled: disableDevtools !== true,
+      bootStatusQueue,
+    }).pipe(Effect.withPerformanceMeasure('livestore:makeAdapter'), Effect.withSpan('createStore:makeAdapter'))
 
-              void adapter.coordinator.mutate(mutationEventEncoded as MutationEvent.AnyEncoded, {
-                span,
-                persisted: true,
-              })
-            }
-          },
-          select: (queryStr, bindValues) => {
-            const stmt = adapter.mainDb.prepare(queryStr)
-            return stmt.select(bindValues)
-          },
-          txn: (callback) => {
-            try {
-              isInTxn = true
-              adapter.mainDb.execute('BEGIN', undefined)
-
-              callback()
-
-              adapter.mainDb.execute('COMMIT', undefined)
-
-              // adapter.coordinator.execute('BEGIN', undefined, undefined)
-              for (const [queryStr, bindValues] of txnExecuteStmnts) {
-                adapter.coordinator.execute(queryStr, bindValues, undefined)
-              }
-              // adapter.coordinator.execute('COMMIT', undefined, undefined)
-            } catch (e: any) {
-              adapter.mainDb.execute('ROLLBACK', undefined)
-              throw e
-            } finally {
-              isInTxn = false
-              txnExecuteStmnts = []
+    if (batchUpdates !== undefined) {
+      reactivityGraph.effectsWrapper = batchUpdates
+    }
+
+    const mutationEventSchema = makeMutationEventSchemaMemo(schema)
+
+    const __processedMutationIds = new Set<string>()
+
+    // TODO consider moving booting into the storage backend
+    if (boot !== undefined) {
+      let isInTxn = false
+      let txnExecuteStmnts: [string, PreparedBindValues | undefined][] = []
+
+      const bootDbImpl: BootDb = {
+        _tag: 'BootDb',
+        execute: (queryStr, bindValues) => {
+          const stmt = adapter.mainDb.prepare(queryStr)
+          stmt.execute(bindValues)
+
+          if (isInTxn === true) {
+            txnExecuteStmnts.push([queryStr, bindValues])
+          } else {
+            adapter.coordinator.execute(queryStr, bindValues).pipe(runEffectFork)
+          }
+        },
+        mutate: (...list) => {
+          for (const mutationEventDecoded of list) {
+            const mutationDef =
+              schema.mutations.get(mutationEventDecoded.mutation) ??
+              shouldNeverHappen(`Unknown mutation type: ${mutationEventDecoded.mutation}`)
+
+            __processedMutationIds.add(mutationEventDecoded.id)
+
+            const execArgsArr = getExecArgsFromMutation({ mutationDef, mutationEventDecoded })
+            // const { bindValues, statementSql } = getExecArgsFromMutation({ mutationDef, mutationEventDecoded })
+
+            for (const { statementSql, bindValues } of execArgsArr) {
+              adapter.mainDb.execute(statementSql, bindValues)
             }
-          },
-        }
 
-        const booting = boot(bootDbImpl, span)
-        // NOTE only awaiting if it's actually a promise to avoid unnecessary async/await
-        if (isPromise(booting)) {
-          await booting
-        }
-      }
+            const mutationEventEncoded = Schema.encodeUnknownSync(mutationEventSchema)(mutationEventDecoded)
 
-      // TODO: we can't apply the schema at this point, we've already loaded persisted data!
-      // Think about what to do about this case.
-      // await applySchema(db, schema)
-      return Store.createStore<TGraphQLContext, TSchema>(
-        {
-          adapter,
-          schema,
-          graphQLOptions,
-          otelOptions: { tracer: otelTracer, rootSpanContext: otelRootSpanContext },
-          reactivityGraph,
-          disableDevtools,
+            adapter.coordinator
+              .mutate(mutationEventEncoded as MutationEvent.AnyEncoded, { persisted: true })
+              .pipe(runEffectFork)
+          }
+        },
+        select: (queryStr, bindValues) => {
+          const stmt = adapter.mainDb.prepare(queryStr)
+          return stmt.select(bindValues)
         },
-        span,
-      )
-    } finally {
-      span.end()
+        txn: (callback) => {
+          try {
+            isInTxn = true
+            adapter.mainDb.execute('BEGIN', undefined)
+
+            callback()
+
+            adapter.mainDb.execute('COMMIT', undefined)
+
+            // adapter.coordinator.execute('BEGIN', undefined, undefined)
+            for (const [queryStr, bindValues] of txnExecuteStmnts) {
+              adapter.coordinator.execute(queryStr, bindValues).pipe(runEffectFork)
+            }
+            // adapter.coordinator.execute('COMMIT', undefined, undefined)
+          } catch (e: any) {
+            adapter.mainDb.execute('ROLLBACK', undefined)
+            throw e
+          } finally {
+            isInTxn = false
+            txnExecuteStmnts = []
+          }
+        },
+      }
+
+      const booting = boot(bootDbImpl, span)
+      // NOTE only awaiting if it's actually a promise to avoid unnecessary async/await
+      if (isPromise(booting)) {
+        yield* Effect.promise(() => booting)
+      }
     }
-  })
+
+    // TODO: we can't apply the schema at this point, we've already loaded persisted data!
+    // Think about what to do about this case.
+    // await applySchema(db, schema)
+    return Store.createStore<TGraphQLContext, TSchema>(
+      {
+        adapter,
+        schema,
+        graphQLOptions,
+        otelOptions: { tracer: otelTracer, rootSpanContext: otelRootSpanContext },
+        reactivityGraph,
+        disableDevtools,
+        __processedMutationIds,
+      },
+      span,
+    )
+  }).pipe(
+    Effect.scoped,
+    Effect.withSpan('createStore', {
+      parent: otelOptions?.rootSpanContext
+        ? OtelTracer.makeExternalSpan(otel.trace.getSpanContext(otelOptions.rootSpanContext)!)
+        : undefined,
+    }),
+    Effect.provide(TracingLive),
+  )
 }
 
+// TODO consider replacing with Effect's RC data structures
 class ReferenceCountedSet<T> {
   private map: Map<T, number>
 
@@ -822,3 +1015,21 @@ class ReferenceCountedSet<T> {
     }
   }
 }
+
+const runEffectFork = <A, E>(effect: Effect.Effect<A, E, never>) =>
+  effect.pipe(
+    Effect.tapCauseLogPretty,
+    Effect.annotateLogs({ thread: 'window' }),
+    Effect.provide(Logger.pretty),
+    Logger.withMinimumLogLevel(LogLevel.Debug),
+    Effect.runFork,
+  )
+
+const runEffectPromise = <A, E>(effect: Effect.Effect<A, E, never>) =>
+  effect.pipe(
+    Effect.tapCauseLogPretty,
+    Effect.annotateLogs({ thread: 'window' }),
+    Effect.provide(Logger.pretty),
+    Logger.withMinimumLogLevel(LogLevel.Debug),
+    Effect.runPromise,
+  )