@livestore/livestore 0.0.54-dev.0 → 0.0.54-dev.13

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,9 @@
 import type { BootDb, PreparedBindValues, ResetMode, StoreAdapter, StoreAdapterFactory } from '@livestore/common'
 import { Devtools, getExecArgsFromMutation } from '@livestore/common'
+import { version as liveStoreVersion } from '@livestore/common/package.json'
 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 +40,7 @@ export type StoreOptions<
   otelRootSpanContext: otel.Context
   dbGraph: DbGraph
   mutationEventSchema: MutationEventSchema<any>
+  disableDevtools?: boolean
 }
 
 export type RefreshReason =
@@ -126,6 +128,7 @@ export class Store<
     otelTracer,
     otelRootSpanContext,
     mutationEventSchema,
+    disableDevtools,
   }: StoreOptions<TGraphQLContext, TSchema>) {
     this.mainDbWrapper = new MainDatabaseWrapper({ otelTracer, otelRootSpanContext, db: adapter.mainDb })
     this.adapter = adapter
@@ -157,73 +160,9 @@ export class Store<
       Effect.runFork,
     )
 
-    const devtoolsChannel = Devtools.makeBc()
-
-    let alreadySubscribedToSignals = false
-    let alreadySubscribedToLiveQueries = false
-    devtoolsChannel.addEventListener('message', async (event) => {
-      const decoded = Schema.decodeUnknownOption(Devtools.MessageToAppHost)(event.data)
-      if (decoded._tag === 'None') {
-        console.log(`Unknown message`, event)
-        return
-      }
-
-      const requestId = decoded.value.requestId
-      const sendToDevtools = (message: Devtools.MessageFromAppHost) =>
-        devtoolsChannel.postMessage(Schema.encodeSync(Devtools.MessageFromAppHost)(message))
-
-      switch (decoded.value._tag) {
-        case 'LSD.SubscribeSignalsReq': {
-          const includeResults = decoded.value.includeResults
-          const send = () =>
-            sendToDevtools(
-              Devtools.SubscribeSignalsRes.make({ signals: this.graph.getSnapshot({ includeResults }), requestId }),
-            )
-
-          send()
-
-          if (!alreadySubscribedToSignals) {
-            this.graph.subscribeToRefresh(() => send())
-            alreadySubscribedToSignals = true
-          }
-
-          break
-        }
-        case 'LSD.SubscribeLiveQueriesReq': {
-          const send = () =>
-            sendToDevtools(
-              Devtools.SubscribeLiveQueriesRes.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 (!alreadySubscribedToLiveQueries) {
-            this.graph.subscribeToRefresh(() => send())
-            alreadySubscribedToLiveQueries = true
-          }
-
-          break
-        }
-        case 'LSD.ResetAllDataReq': {
-          await this.adapter.coordinator.dangerouslyReset(decoded.value.mode)
-          sendToDevtools(Devtools.ResetAllDataRes.make({ requestId }))
-
-          break
-        }
-        // No default
-      }
-    })
+    if (disableDevtools !== true) {
+      this.bootDevtools()
+    }
 
     this.otel = {
       tracer: otelTracer,
@@ -585,6 +524,112 @@ 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,
+                liveStoreVersion,
+              }),
+            )
+
+          send()
+
+          if (signalsSubcriptionRef.current === undefined) {
+            signalsSubcriptionRef.current = this.graph.subscribeToRefresh(() => send())
+          }
+
+          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.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,
+                liveStoreVersion,
+              }),
+            )
+
+          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, liveStoreVersion }))
+
+          break
+        }
+        // No default
+      }
+    })
+  }
+
   __devDownloadDb = () => {
     const data = this.mainDbWrapper.export()
     downloadBlob(data, `livestore-${Date.now()}.db`)
@@ -612,6 +657,7 @@ export const createStore = async <
   boot,
   dbGraph = globalDbGraph,
   batchUpdates,
+  disableDevtools,
 }: {
   schema: TSchema
   graphQLOptions?: GraphQLOptions<TGraphQLContext>
@@ -621,6 +667,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 {
@@ -711,7 +758,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/tsconfig.json

@@ -5,6 +5,7 @@
     "rootDir": "./src",
     "jsx": "react",
     "skipLibCheck": true,
+    "resolveJsonModule": true,
     // "jsx": "preserve",
     "tsBuildInfoFile": "./dist/.tsbuildinfo"
   },

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)
-  }
-}