@livestore/livestore 0.0.53 → 0.0.54-dev.1

package/src/effect/LiveStore.ts

@@ -25,6 +25,7 @@ export type LiveStoreCreateStoreOptions<GraphQLContext extends BaseGraphQLContex
   boot?: (db: BootDb, parentSpan: otel.Span) => unknown | Promise<unknown>
   adapter: StoreAdapterFactory
   batchUpdates?: (run: () => void) => void
+  disableDevtools?: boolean
 }
 
 export const LiveStoreContext = Context.GenericTag<LiveStoreContext>('@livestore/livestore/LiveStoreContext')
@@ -44,6 +45,7 @@ export type LiveStoreContextProps<GraphQLContext extends BaseGraphQLContext> = {
   }
   boot?: (db: BootDb) => Effect.Effect<void>
   adapter: StoreAdapterFactory
+  disableDevtools?: boolean
 }
 
 export const LiveStoreContextLayer = <GraphQLContext extends BaseGraphQLContext>(
@@ -61,6 +63,7 @@ export const makeLiveStoreContext = <GraphQLContext extends BaseGraphQLContext>(
   graphQLOptions: graphQLOptions_,
   boot: boot_,
   adapter,
+  disableDevtools,
 }: LiveStoreContextProps<GraphQLContext>): Effect.Effect<
   LiveStoreContext,
   never,
@@ -93,6 +96,7 @@ export const makeLiveStoreContext = <GraphQLContext extends BaseGraphQLContext>(
             otelRootSpanContext,
             boot,
             adapter,
+            disableDevtools,
           }),
         ),
         Effect.acquireRelease((store) => Effect.sync(() => store.destroy())),

package/src/index.ts

@@ -3,7 +3,7 @@ export type { BaseGraphQLContext, QueryDebugInfo, RefreshReason } from './store.
 
 export type { QueryDefinition, LiveStoreCreateStoreOptions, LiveStoreContext } from './effect/LiveStore.js'
 
-export { MainDatabaseWrapper, type DebugInfo, emptyDebugInfo } from './MainDatabaseWrapper.js'
+export { MainDatabaseWrapper, emptyDebugInfo } from './MainDatabaseWrapper.js'
 
 export type {
   GetAtom,
@@ -27,7 +27,7 @@ export { globalDbGraph, dynamicallyRegisteredTables } from './global-state.js'
 export { type RowResult, type RowResultEncoded, rowQuery, deriveColQuery } from './row-query.js'
 
 export * from '@livestore/common/schema'
-export { sql, type BootDb, type InMemoryDatabase } from '@livestore/common'
+export { sql, type BootDb, type InMemoryDatabase, type DebugInfo, type MutableDebugInfo } from '@livestore/common'
 
 export { SqliteAst, SqliteDsl } from 'effect-db-schema'
 

package/src/react/LiveStoreProvider.tsx

@@ -20,6 +20,7 @@ interface LiveStoreProviderProps<GraphQLContext> {
   fallback: ReactElement
   adapter: StoreAdapterFactory
   batchUpdates?: (run: () => void) => void
+  disableDevtools?: boolean
 }
 
 export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
@@ -32,6 +33,7 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   boot,
   adapter,
   batchUpdates,
+  disableDevtools,
 }: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): JSX.Element => {
   const storeCtx = useCreateStore({
     schema,
@@ -41,6 +43,7 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
     boot,
     adapter,
     batchUpdates,
+    disableDevtools,
   })
 
   if (storeCtx === undefined) {
@@ -60,6 +63,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   boot,
   adapter,
   batchUpdates,
+  disableDevtools,
 }: LiveStoreCreateStoreOptions<GraphQLContext>) => {
   const [_, rerender] = React.useState(0)
   const ctxValueRef = React.useRef<StoreContext_ | undefined>(undefined)
@@ -110,6 +114,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
           boot,
           adapter,
           batchUpdates,
+          disableDevtools,
         })
         ctxValueRef.current = { store }
         oldStoreAlreadyDestroyedRef.current = false
@@ -124,7 +129,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         store?.destroy()
       }
     }
-  }, [schema, graphQLOptions, otelTracer, otelRootSpanContext, boot, adapter, batchUpdates])
+  }, [schema, graphQLOptions, otelTracer, otelRootSpanContext, boot, adapter, batchUpdates, disableDevtools])
 
   return ctxValueRef.current
 }

package/src/reactive.ts

@@ -23,12 +23,11 @@
 
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 
+import { BoundArray } from '@livestore/common'
 import type { PrettifyFlat } from '@livestore/utils'
 import { shouldNeverHappen } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
 import { isEqual } from 'lodash-es'
-
-import { BoundArray } from './utils/bounded-collections.js'
 // import { getDurationMsFromSpan } from './otel.js'
 
 export const NOT_REFRESHED_YET = Symbol.for('NOT_REFRESHED_YET')
@@ -520,7 +519,9 @@ export class ReactiveGraph<
     superComp.sub.add(subComp)
     subComp.super.add(superComp)
 
-    this.runRefreshCallbacks()
+    if (this.currentDebugRefresh === undefined) {
+      this.runRefreshCallbacks()
+    }
   }
 
   removeEdge(
@@ -537,7 +538,9 @@ export class ReactiveGraph<
 
     subComp.super.delete(superComp)
 
-    this.runRefreshCallbacks()
+    if (this.currentDebugRefresh === undefined) {
+      this.runRefreshCallbacks()
+    }
   }
 
   // NOTE This function is performance-optimized (i.e. not using `Array.from`)

package/src/store.ts

@@ -1,8 +1,8 @@
 import type { BootDb, PreparedBindValues, ResetMode, StoreAdapter, StoreAdapterFactory } from '@livestore/common'
-import { getExecArgsFromMutation } from '@livestore/common'
+import { Devtools, getExecArgsFromMutation } from '@livestore/common'
 import type { LiveStoreSchema, MutationEvent, MutationEventSchema } from '@livestore/common/schema'
 import { makeMutationEventSchema } from '@livestore/common/schema'
-import { assertNever, isPromise, makeNoopTracer, shouldNeverHappen } from '@livestore/utils'
+import { assertNever, isPromise, makeNoopTracer, ref, shouldNeverHappen } from '@livestore/utils'
 import { Effect, Schema, Stream } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import type { GraphQLSchema } from 'graphql'
@@ -39,6 +39,7 @@ export type StoreOptions<
   otelRootSpanContext: otel.Context
   dbGraph: DbGraph
   mutationEventSchema: MutationEventSchema<any>
+  disableDevtools?: boolean
 }
 
 export type RefreshReason =
@@ -116,7 +117,7 @@ export class Store<
   /** RC-based set to see which queries are currently subscribed to */
   activeQueries: ReferenceCountedSet<LiveQuery<any>>
 
-  private mutationEventSchema
+  readonly __mutationEventSchema
 
   private constructor({
     adapter,
@@ -126,13 +127,14 @@ export class Store<
     otelTracer,
     otelRootSpanContext,
     mutationEventSchema,
+    disableDevtools,
   }: StoreOptions<TGraphQLContext, TSchema>) {
     this.mainDbWrapper = new MainDatabaseWrapper({ otelTracer, otelRootSpanContext, db: adapter.mainDb })
     this.adapter = adapter
     this.schema = schema
 
     // TODO refactor
-    this.mutationEventSchema = mutationEventSchema
+    this.__mutationEventSchema = mutationEventSchema
     // this.mutationEventSchema = makeMutationEventSchema(Object.fromEntries(schema.mutations.entries()) as any)
 
     // TODO generalize the `tableRefs` concept to allow finer-grained refs
@@ -157,6 +159,10 @@ export class Store<
       Effect.runFork,
     )
 
+    if (disableDevtools !== true) {
+      this.bootDevtools()
+    }
+
     this.otel = {
       tracer: otelTracer,
       mutationsSpanContext: otelMuationsSpanContext,
@@ -469,7 +475,7 @@ export class Store<
           writeTables.forEach((table) => allWriteTables.add(table))
         }
 
-        const mutationEventEncoded = Schema.encodeUnknownSync(this.mutationEventSchema)(mutationEventDecoded)
+        const mutationEventEncoded = Schema.encodeUnknownSync(this.__mutationEventSchema)(mutationEventDecoded)
 
         if (coordinatorMode !== 'skip-coordinator') {
           // Asynchronously apply mutation to a persistent storage (we're not awaiting this promise here)
@@ -517,6 +523,103 @@ export class Store<
       meta: { liveStoreRefType: 'table' },
     })
 
+  private bootDevtools = () => {
+    const devtoolsChannel = Devtools.makeBroadcastChannels()
+
+    const signalsSubcriptionRef = ref<undefined | (() => void)>(undefined)
+    // let alreadySubscribedToLiveQueries = false
+    const liveQueriesSubscriptionRef = ref<undefined | (() => void)>(undefined)
+    devtoolsChannel.toAppHost.addEventListener('message', async (event) => {
+      const decoded = Schema.decodeUnknownOption(Devtools.MessageToAppHost)(event.data)
+      if (
+        decoded._tag === 'None' ||
+        decoded.value._tag === 'LSD.DevtoolsReadyBroadcast' ||
+        decoded.value._tag === 'LSD.DevtoolsConnected' ||
+        decoded.value.channelId !== this.adapter.coordinator.devtools.channelId
+      ) {
+        // console.log(`Unknown message`, event)
+        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.SignalsSubscribe': {
+          const includeResults = decoded.value.includeResults
+          const send = () =>
+            sendToDevtools(Devtools.SignalsRes.make({ signals: this.graph.getSnapshot({ includeResults }), requestId }))
+
+          send()
+
+          if (signalsSubcriptionRef.current === undefined) {
+            signalsSubcriptionRef.current = this.graph.subscribeToRefresh(() => send())
+          }
+
+          break
+        }
+        case 'LSD.DebugInfoReq': {
+          sendToDevtools(Devtools.DebugInfoRes.make({ debugInfo: this.mainDbWrapper.debugInfo, requestId }))
+          break
+        }
+        case 'LSD.DebugInfoResetReq': {
+          this.mainDbWrapper.debugInfo.slowQueries.clear()
+          sendToDevtools(Devtools.DebugInfoResetRes.make({ requestId }))
+          break
+        }
+        case 'LSD.DebugInfoRerunQueryReq': {
+          const { queryStr, bindValues, queriedTables } = decoded.value
+          this.mainDbWrapper.select(queryStr, { bindValues, queriedTables, skipCache: true })
+          sendToDevtools(Devtools.DebugInfoRerunQueryRes.make({ requestId }))
+          break
+        }
+        case 'LSD.SignalsUnsubscribe': {
+          signalsSubcriptionRef.current!()
+          signalsSubcriptionRef.current = undefined
+          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,
+              }),
+            )
+
+          send()
+
+          if (liveQueriesSubscriptionRef.current === undefined) {
+            liveQueriesSubscriptionRef.current = this.graph.subscribeToRefresh(() => send())
+          }
+
+          break
+        }
+        case 'LSD.LiveQueriesUnsubscribe': {
+          liveQueriesSubscriptionRef.current!()
+          liveQueriesSubscriptionRef.current = undefined
+          break
+        }
+        case 'LSD.ResetAllDataReq': {
+          await this.adapter.coordinator.dangerouslyReset(decoded.value.mode)
+          sendToDevtools(Devtools.ResetAllDataRes.make({ requestId }))
+
+          break
+        }
+        // No default
+      }
+    })
+  }
+
   __devDownloadDb = () => {
     const data = this.mainDbWrapper.export()
     downloadBlob(data, `livestore-${Date.now()}.db`)
@@ -544,6 +647,7 @@ export const createStore = async <
   boot,
   dbGraph = globalDbGraph,
   batchUpdates,
+  disableDevtools,
 }: {
   schema: TSchema
   graphQLOptions?: GraphQLOptions<TGraphQLContext>
@@ -553,6 +657,7 @@ export const createStore = async <
   boot?: (db: BootDb, parentSpan: otel.Span) => unknown | Promise<unknown>
   dbGraph?: DbGraph
   batchUpdates?: (run: () => void) => void
+  disableDevtools?: boolean
 }): Promise<Store<TGraphQLContext, TSchema>> => {
   return otelTracer.startActiveSpan('createStore', {}, otelRootSpanContext, async (span) => {
     try {
@@ -643,7 +748,16 @@ export const createStore = async <
       // Think about what to do about this case.
       // await applySchema(db, schema)
       return Store.createStore<TGraphQLContext, TSchema>(
-        { adapter: adapter, schema, graphQLOptions, otelTracer, otelRootSpanContext, dbGraph, mutationEventSchema },
+        {
+          adapter: adapter,
+          schema,
+          graphQLOptions,
+          otelTracer,
+          otelRootSpanContext,
+          dbGraph,
+          mutationEventSchema,
+          disableDevtools,
+        },
         span,
       )
     } finally {

package/src/utils/util.ts

@@ -5,7 +5,9 @@ import type { Brand } from '@livestore/utils/effect'
 export type ParamsObject = Record<string, SqlValue>
 export type SqlValue = string | number | Uint8Array | null
 
-export type Bindable = SqlValue[] | ParamsObject
+export type Bindable = ReadonlyArray<SqlValue> | ParamsObject
+
+type XXX_TODO_REMOVE_REDUDANCY = 1
 
 export type PreparedBindValues = Brand.Branded<Bindable, 'PreparedBindValues'>
 
@@ -16,7 +18,7 @@ export type PreparedBindValues = Brand.Branded<Bindable, 'PreparedBindValues'>
 /*  TODO: Search for unused params via proper parsing, not string search
 **/
 export const prepareBindValues = (values: Bindable, statement: string): PreparedBindValues => {
-  if (Array.isArray(values)) return values as PreparedBindValues
+  if (Array.isArray(values)) return values as any as PreparedBindValues
 
   const result: ParamsObject = {}
   for (const [key, value] of Object.entries(values)) {

package/src/utils/bounded-collections.ts

@@ -1,113 +0,0 @@
-/**
- * Creates a map that has a fixed number of entries.
- * Once hitting the bound, earliest insertions are removed
- */
-export default class BoundMap<K, V> {
-  #map = new Map<K, V>()
-  #sizeLimit: number
-
-  constructor(sizeLimit: number) {
-    this.#sizeLimit = sizeLimit
-  }
-
-  onEvict: ((key: K, value: V) => void) | undefined
-
-  set = (key: K, value: V) => {
-    this.#map.set(key, value)
-    // console.log(this.#map.size, this.#sizeLimit);
-    if (this.#map.size > this.#sizeLimit) {
-      const firstKey = this.#map.keys().next().value
-      const deletedValue = this.#map.get(firstKey)!
-      this.#map.delete(firstKey)
-      if (this.onEvict) {
-        this.onEvict(firstKey, deletedValue)
-      }
-    }
-  }
-
-  get = (key: K): V | undefined => {
-    return this.#map.get(key)
-  }
-
-  delete = (key: K) => {
-    this.#map.delete(key)
-  }
-
-  keys = () => {
-    return this.#map.keys()
-  }
-}
-
-export class BoundSet<V> {
-  #map: BoundMap<V, V>
-
-  constructor(sizeLimit: number) {
-    this.#map = new BoundMap(sizeLimit)
-    this.#map.onEvict = this.#onEvict
-  }
-
-  #onEvict = (v: V) => {
-    if (this.onEvict) {
-      this.onEvict(v)
-    }
-  }
-
-  onEvict: ((key: V) => void) | undefined
-
-  add = (v: V) => {
-    this.#map.set(v, v)
-  };
-
-  [Symbol.iterator] = () => {
-    return this.#map.keys()
-  }
-}
-
-export class BoundArray<V> {
-  #array: V[] = []
-  #sizeLimit: number
-
-  constructor(sizeLimit: number) {
-    this.#sizeLimit = sizeLimit
-  }
-
-  onEvict: ((key: V) => void) | undefined
-
-  push = (v: V) => {
-    this.#array.push(v)
-    if (this.#array.length > this.#sizeLimit) {
-      const first = this.#array.shift()
-      if (first && this.onEvict) {
-        this.onEvict(first)
-      }
-    }
-  }
-
-  get = (index: number): V | undefined => {
-    return this.#array[index]
-  }
-
-  delete = (index: number) => {
-    this.#array.splice(index, 1)
-  }
-
-  get length() {
-    return this.#array.length
-  }
-
-  [Symbol.iterator] = () => {
-    return this.#array[Symbol.iterator]()
-  }
-
-  map = <T>(fn: (v: V) => T): T[] => {
-    return this.#array.map(fn)
-  }
-
-  clear = () => {
-    this.#array = []
-  }
-
-  sort = (fn?: (a: V, b: V) => number) => {
-    return this.#array.sort(fn)
-  }
-}