@livestore/livestore 0.0.55-dev.1 → 0.0.55-dev.3

package/src/react/LiveStoreProvider.tsx

@@ -1,17 +1,20 @@
 import { type BootDb, type BootStatus, type StoreAdapterFactory, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import { errorToString } from '@livestore/utils'
-import { Effect, Exit, FiberSet, Logger, LogLevel, Schema, Scope } from '@livestore/utils/effect'
+import { Effect, FiberSet, Logger, LogLevel, Schema } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
 
 // TODO refactor so the `react` module doesn't depend on `effect` module
 import type { LiveStoreContext as StoreContext_, LiveStoreCreateStoreOptions } from '../effect/LiveStore.js'
-import type { BaseGraphQLContext, GraphQLOptions, OtelOptions } from '../store.js'
+import type { BaseGraphQLContext, ForceStoreShutdown, GraphQLOptions, OtelOptions, StoreShutdown } from '../store.js'
 import { createStore } from '../store.js'
 import { LiveStoreContext } from './LiveStoreContext.js'
 
+export class StoreAbort extends Schema.TaggedError<StoreAbort>()('LiveStore.StoreAbort', {}) {}
+export class StoreInterrupted extends Schema.TaggedError<StoreInterrupted>()('LiveStore.StoreInterrupted', {}) {}
+
 interface LiveStoreProviderProps<GraphQLContext> {
   schema: LiveStoreSchema
   boot?: (db: BootDb, parentSpan: otel.Span) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
@@ -81,11 +84,11 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   const [_, rerender] = React.useState(0)
   const ctxValueRef = React.useRef<{
     value: StoreContext_ | BootStatus
-    scope: Scope.CloseableScope | undefined
+    fiberSet: FiberSet.FiberSet | undefined
     counter: number
   }>({
     value: { stage: 'loading' },
-    scope: undefined,
+    fiberSet: undefined,
     counter: 0,
   })
 
@@ -102,6 +105,12 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     signal,
   })
 
+  const interrupt = (fiberSet: FiberSet.FiberSet, error: StoreAbort | StoreInterrupted) =>
+    Effect.gen(function* () {
+      yield* FiberSet.clear(fiberSet)
+      yield* FiberSet.run(fiberSet, Effect.fail(error))
+    }).pipe(Effect.ignoreLogged, Effect.runFork)
+
   if (
     inputPropsCacheRef.current.schema !== schema ||
     inputPropsCacheRef.current.graphQLOptions !== graphQLOptions ||
@@ -122,15 +131,14 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       disableDevtools,
       signal,
     }
-    if (ctxValueRef.current.scope !== undefined) {
-      Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
+    if (ctxValueRef.current.fiberSet !== undefined) {
+      interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
+      ctxValueRef.current.fiberSet = undefined
     }
-    ctxValueRef.current = { value: { stage: 'loading' }, scope: undefined, counter: ctxValueRef.current.counter + 1 }
+    ctxValueRef.current = { value: { stage: 'loading' }, fiberSet: undefined, counter: ctxValueRef.current.counter + 1 }
   }
 
   React.useEffect(() => {
-    const storeScope = Scope.make().pipe(Effect.runSync)
-
     const counter = ctxValueRef.current.counter
 
     const setContextValue = (value: StoreContext_ | BootStatus) => {
@@ -139,23 +147,23 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       rerender((c) => c + 1)
     }
 
-    Scope.addFinalizer(
-      storeScope,
-      Effect.sync(() => setContextValue({ stage: 'shutdown' })),
-    ).pipe(Effect.runSync)
-
-    ctxValueRef.current.scope = storeScope
-
     signal?.addEventListener('abort', () => {
-      if (ctxValueRef.current.scope !== undefined && ctxValueRef.current.counter === counter) {
-        Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
-        ctxValueRef.current.scope = undefined
+      if (ctxValueRef.current.fiberSet !== undefined && ctxValueRef.current.counter === counter) {
+        interrupt(ctxValueRef.current.fiberSet, new StoreAbort())
+        ctxValueRef.current.fiberSet = undefined
       }
     })
 
-    FiberSet.make().pipe(
-      Effect.andThen((fiberSet) =>
-        createStore({
+    Effect.gen(function* () {
+      const fiberSet = yield* FiberSet.make<
+        unknown,
+        UnexpectedError | ForceStoreShutdown | StoreAbort | StoreInterrupted | StoreShutdown
+      >()
+
+      ctxValueRef.current.fiberSet = fiberSet
+
+      yield* Effect.gen(function* () {
+        const store = yield* createStore({
           fiberSet,
           schema,
           graphQLOptions,
@@ -168,13 +176,25 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
             if (ctxValueRef.current.value.stage === 'running' || ctxValueRef.current.value.stage === 'error') return
             setContextValue(status)
           },
-        }),
-      ),
-      Effect.tapSync((store) => setContextValue({ stage: 'running', store })),
-      Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
-      Effect.tapDefect((defect) => Effect.sync(() => setContextValue({ stage: 'error', error: defect }))),
-      Scope.extend(storeScope),
-      Effect.forkIn(storeScope),
+        })
+
+        setContextValue({ stage: 'running', store })
+
+        yield* Effect.never
+      }).pipe(Effect.scoped, FiberSet.run(fiberSet))
+
+      const shutdownContext = Effect.sync(() => setContextValue({ stage: 'shutdown' }))
+
+      yield* FiberSet.join(fiberSet).pipe(
+        Effect.catchTag('LiveStore.StoreShutdown', () => shutdownContext),
+        Effect.catchTag('LiveStore.ForceStoreShutdown', () => shutdownContext),
+        Effect.catchTag('LiveStore.StoreAbort', () => shutdownContext),
+        Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
+        Effect.tapDefect((defect) => Effect.sync(() => setContextValue({ stage: 'error', error: defect }))),
+        Effect.exit,
+      )
+    }).pipe(
+      Effect.scoped,
       Effect.tapCauseLogPretty,
       Effect.annotateLogs({ thread: 'window' }),
       Effect.provide(Logger.pretty),
@@ -183,9 +203,9 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     )
 
     return () => {
-      if (ctxValueRef.current.scope !== undefined) {
-        Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
-        ctxValueRef.current.scope = undefined
+      if (ctxValueRef.current.fiberSet !== undefined) {
+        interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
+        ctxValueRef.current.fiberSet = undefined
       }
     }
   }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal])

package/src/reactiveQueries/sql.ts

@@ -14,6 +14,9 @@ export type MapRows<TResult, TRaw = any> =
   | ((rows: ReadonlyArray<TRaw>) => TResult)
   | Schema.Schema<TResult, ReadonlyArray<TRaw>, unknown>
 
+/**
+ * NOTE `querySQL` is only supposed to read data. Don't use it to insert/update/delete data but use mutations instead.
+ */
 export const querySQL = <TResult, TRaw = any>(
   query: string | ((get: GetAtomResult) => string),
   options?: {

package/src/store-devtools.ts

@@ -0,0 +1,208 @@
+import type { DebugInfo, StoreAdapter } from '@livestore/common'
+import { Devtools, liveStoreVersion, UnexpectedError } from '@livestore/common'
+import { throttle } from '@livestore/utils'
+import { BrowserChannel, Effect, Stream } from '@livestore/utils/effect'
+
+import type { MainDatabaseWrapper } from './MainDatabaseWrapper.js'
+import { emptyDebugInfo as makeEmptyDebugInfo } from './MainDatabaseWrapper.js'
+import { NOT_REFRESHED_YET } from './reactive.js'
+import type { LiveQuery, ReactivityGraph } from './reactiveQueries/base-class.js'
+import type { ReferenceCountedSet } from './utils/data-structures.js'
+
+type IStore = {
+  adapter: StoreAdapter
+  reactivityGraph: ReactivityGraph
+  mainDbWrapper: MainDatabaseWrapper
+  activeQueries: ReferenceCountedSet<LiveQuery<any>>
+}
+
+type Unsub = () => void
+type RequestId = string
+type SubMap = Map<RequestId, Unsub>
+
+export const connectDevtoolsToStore = ({ storeMessagePort, store }: { storeMessagePort: MessagePort; store: IStore }) =>
+  Effect.gen(function* () {
+    const channelId = store.adapter.coordinator.devtools.channelId
+
+    const reactivityGraphSubcriptions: SubMap = new Map()
+    const liveQueriesSubscriptions: SubMap = new Map()
+    const debugInfoHistorySubscriptions: SubMap = new Map()
+
+    const storePortChannel = yield* BrowserChannel.messagePortChannel({
+      port: storeMessagePort,
+      listenSchema: Devtools.MessageToAppHostStore,
+      sendSchema: Devtools.MessageFromAppHostStore,
+    })
+
+    const sendToDevtools = (message: Devtools.MessageFromAppHostStore) =>
+      storePortChannel.send(message).pipe(Effect.tapCauseLogPretty, Effect.runSync)
+
+    const onMessage = (decodedMessage: typeof Devtools.MessageToAppHostStore.Type) => {
+      // console.log('storeMessagePort message', decodedMessage)
+
+      if (decodedMessage.channelId !== store.adapter.coordinator.devtools.channelId) {
+        // console.log(`Unknown message`, event)
+        return
+      }
+
+      const requestId = decodedMessage.requestId
+
+      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: store.reactivityGraph.getSnapshot({ includeResults }),
+                    requestId,
+                    channelId,
+                    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, store.reactivityGraph.subscribeToRefresh(throttledSend))
+
+          break
+        }
+        case 'LSD.DebugInfoReq': {
+          sendToDevtools(
+            Devtools.DebugInfoRes.make({
+              debugInfo: store.mainDbWrapper.debugInfo,
+              requestId,
+              channelId,
+              liveStoreVersion,
+            }),
+          )
+          break
+        }
+        case 'LSD.DebugInfoHistorySubscribe': {
+          const buffer: DebugInfo[] = []
+          let hasStopped = false
+          let rafHandle: number | undefined
+
+          const tick = () => {
+            buffer.push(store.mainDbWrapper.debugInfo)
+
+            // NOTE this resets the debug info, so all other "readers" e.g. in other `requestAnimationFrame` loops,
+            // will get the empty debug info
+            // TODO We need to come up with a more graceful way to do store. Probably via a single global
+            // `requestAnimationFrame` loop that is passed in somehow.
+            store.mainDbWrapper.debugInfo = makeEmptyDebugInfo()
+
+            if (buffer.length > 10) {
+              sendToDevtools(
+                Devtools.DebugInfoHistoryRes.make({
+                  debugInfoHistory: buffer,
+                  requestId,
+                  channelId,
+                  liveStoreVersion,
+                }),
+              )
+              buffer.length = 0
+            }
+
+            if (hasStopped === false) {
+              rafHandle = requestAnimationFrame(tick)
+            }
+          }
+
+          rafHandle = requestAnimationFrame(tick)
+
+          const unsub = () => {
+            hasStopped = true
+            if (rafHandle !== undefined) {
+              cancelAnimationFrame(rafHandle)
+            }
+          }
+
+          debugInfoHistorySubscriptions.set(requestId, unsub)
+
+          break
+        }
+        case 'LSD.DebugInfoHistoryUnsubscribe': {
+          debugInfoHistorySubscriptions.get(requestId)!()
+          debugInfoHistorySubscriptions.delete(requestId)
+          break
+        }
+        case 'LSD.DebugInfoResetReq': {
+          store.mainDbWrapper.debugInfo.slowQueries.clear()
+          sendToDevtools(Devtools.DebugInfoResetRes.make({ requestId, channelId, liveStoreVersion }))
+          break
+        }
+        case 'LSD.DebugInfoRerunQueryReq': {
+          const { queryStr, bindValues, queriedTables } = decodedMessage
+          store.mainDbWrapper.select(queryStr, { bindValues, queriedTables, skipCache: true })
+          sendToDevtools(Devtools.DebugInfoRerunQueryRes.make({ requestId, channelId, liveStoreVersion }))
+          break
+        }
+        case 'LSD.ReactivityGraphUnsubscribe': {
+          reactivityGraphSubcriptions.get(requestId)!()
+          break
+        }
+        case 'LSD.LiveQueriesSubscribe': {
+          const send = () =>
+            requestIdleCallback(
+              () =>
+                sendToDevtools(
+                  Devtools.LiveQueriesRes.make({
+                    liveQueries: [...store.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,
+                    channelId,
+                  }),
+                ),
+              { 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, store.reactivityGraph.subscribeToRefresh(throttledSend))
+
+          break
+        }
+        case 'LSD.LiveQueriesUnsubscribe': {
+          liveQueriesSubscriptions.get(requestId)!()
+          liveQueriesSubscriptions.delete(requestId)
+          break
+        }
+        // No default
+      }
+    }
+
+    yield* storePortChannel.listen.pipe(
+      Stream.flatten(),
+      Stream.tapSync((message) => onMessage(message)),
+      Stream.runDrain,
+      Effect.withSpan('LSD.devtools.onMessage'),
+    )
+  }).pipe(UnexpectedError.mapToUnexpectedError, Effect.withSpan('LSD.devtools.connectStoreToDevtools'))