@livestore/livestore 0.3.0-dev.11 → 0.3.0-dev.13

package/src/reactive.ts

@@ -24,8 +24,8 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 
 import { BoundArray } from '@livestore/common'
-import type { PrettifyFlat } from '@livestore/utils'
 import { deepEqual, shouldNeverHappen } from '@livestore/utils'
+import type { Types } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 // import { getDurationMsFromSpan } from './otel.js'
 
@@ -144,7 +144,7 @@ const encodedOptionNone = <A>(): EncodedOption<A> => ({ _tag: 'None' })
 export type SerializedAtom = SerializedRef | SerializedThunk
 
 export type SerializedRef = Readonly<
-  PrettifyFlat<
+  Types.Simplify<
     Pick<Ref<unknown, unknown, any>, '_tag' | 'id' | 'label' | 'meta' | 'isDirty' | 'isDestroyed' | 'refreshes'> & {
       /** Is `None` if `getSnapshot` was called with `includeResults: false` which is the default */
       previousResult: EncodedOption<string>
@@ -155,7 +155,7 @@ export type SerializedRef = Readonly<
 >
 
 export type SerializedThunk = Readonly<
-  PrettifyFlat<
+  Types.Simplify<
     Pick<
       Thunk<unknown, unknown, any>,
       '_tag' | 'id' | 'label' | 'meta' | 'isDirty' | 'isDestroyed' | 'recomputations'
@@ -169,7 +169,7 @@ export type SerializedThunk = Readonly<
 >
 
 export type SerializedEffect = Readonly<
-  PrettifyFlat<
+  Types.Simplify<
     Pick<Effect<any>, '_tag' | 'id' | 'label' | 'invocations' | 'isDestroyed'> & {
       sub: ReadonlyArray<string>
     }
@@ -183,18 +183,11 @@ export type ReactiveGraphSnapshot = {
   readonly deferredEffects: ReadonlyArray<string>
 }
 
-let nodeIdCounter = 0
-const uniqueNodeId = () => `node-${++nodeIdCounter}`
-let refreshInfoIdCounter = 0
-const uniqueRefreshInfoId = () => `refresh-info-${++refreshInfoIdCounter}`
-
 let globalGraphIdCounter = 0
 const uniqueGraphId = () => `graph-${++globalGraphIdCounter}`
 
 /** Used for testing */
 export const __resetIds = () => {
-  nodeIdCounter = 0
-  refreshInfoIdCounter = 0
   globalGraphIdCounter = 0
 }
 
@@ -220,13 +213,18 @@ export class ReactiveGraph<
 
   private refreshCallbacks: Set<() => void> = new Set()
 
+  private nodeIdCounter = 0
+  private uniqueNodeId = () => `node-${++this.nodeIdCounter}`
+  private refreshInfoIdCounter = 0
+  private uniqueRefreshInfoId = () => `refresh-info-${++this.refreshInfoIdCounter}`
+
   makeRef<T>(
     val: T,
     options?: { label?: string; meta?: unknown; equal?: (a: T, b: T) => boolean },
   ): Ref<T, TContext, TDebugRefreshReason> {
     const ref: Ref<T, TContext, TDebugRefreshReason> = {
       _tag: 'ref',
-      id: uniqueNodeId(),
+      id: this.uniqueNodeId(),
       isDirty: false,
       isDestroyed: false,
       previousResult: val,
@@ -262,7 +260,7 @@ export class ReactiveGraph<
   ): Thunk<T, TContext, TDebugRefreshReason> {
     const thunk: Thunk<T, TContext, TDebugRefreshReason> = {
       _tag: 'thunk',
-      id: uniqueNodeId(),
+      id: this.uniqueNodeId(),
       previousResult: NOT_REFRESHED_YET,
       isDirty: true,
       isDestroyed: false,
@@ -314,7 +312,7 @@ export class ReactiveGraph<
             this.currentDebugRefresh = undefined
 
             this.debugRefreshInfos.push({
-              id: uniqueRefreshInfoId(),
+              id: this.uniqueRefreshInfoId(),
               reason: debugRefreshReason ?? ({ _tag: 'makeThunk', label: options?.label } as TDebugRefreshReason),
               skippedRefresh: false,
               refreshedAtoms,
@@ -387,7 +385,7 @@ export class ReactiveGraph<
   ): Effect<TDebugRefreshReason> {
     const effect: Effect<TDebugRefreshReason> = {
       _tag: 'effect',
-      id: uniqueNodeId(),
+      id: this.uniqueNodeId(),
       isDestroyed: false,
       doEffect: (otelContext, debugRefreshReason) => {
         effect.invocations++
@@ -488,7 +486,7 @@ export class ReactiveGraph<
       this.currentDebugRefresh = undefined
 
       const refreshDebugInfo: RefreshDebugInfo<TDebugRefreshReason, TDebugThunkInfo> = {
-        id: uniqueRefreshInfoId(),
+        id: this.uniqueRefreshInfoId(),
         reason: options.debugRefreshReason,
         skippedRefresh: false,
         refreshedAtoms,

package/src/row-query-utils.ts

@@ -7,7 +7,7 @@ import type * as otel from '@opentelemetry/api'
 import type { GetResult, LiveQueryDef, ReactivityGraphContext } from './live-queries/base-class.js'
 import { computed } from './live-queries/computed.js'
 
-export const rowQueryLabel = (table: DbSchema.TableDefBase, id: string | SessionIdSymbol | undefined) =>
+export const rowQueryLabel = (table: DbSchema.TableDefBase, id: string | SessionIdSymbol | number | undefined) =>
   `row:${table.sqliteDef.name}${id === undefined ? '' : id === SessionIdSymbol ? `:sessionId` : `:${id}`}`
 
 export const deriveColQuery: {
@@ -41,7 +41,7 @@ export const makeExecBeforeFirstRun =
     table,
     otelContext: otelContext_,
   }: {
-    id?: string | SessionIdSymbol
+    id?: string | SessionIdSymbol | number
     insertValues?: any
     table: DbSchema.TableDefBase
     otelContext: otel.Context | undefined
@@ -50,11 +50,11 @@ export const makeExecBeforeFirstRun =
     const otelContext = otelContext_ ?? store.otel.queriesSpanContext
 
     if (table.options.isSingleton === false) {
-      const idStr = id === SessionIdSymbol ? store.sessionId : id!
+      const idVal = id === SessionIdSymbol ? store.sessionId : id!
       const rowExists =
         store.sqliteDbWrapper.select(
           `SELECT 1 FROM '${table.sqliteDef.name}' WHERE id = ?`,
-          [idStr] as any as PreparedBindValues,
+          [idVal] as any as PreparedBindValues,
           { otelContext },
         ).length === 1
 
@@ -69,7 +69,7 @@ export const makeExecBeforeFirstRun =
       // It's important that we only mutate and don't refresh here, as this function might be called during a render
       // and otherwise we might end up in a "reactive loop"
       store.mutate(
-        { otelContext, skipRefresh: true, label: `rowQuery:${table.sqliteDef.name}:${idStr}` },
+        { otelContext, skipRefresh: true, label: `rowQuery:${table.sqliteDef.name}:${idVal}` },
         table.insert({ id, ...insertValues }),
       )
     }

package/src/store/create-store.ts

@@ -2,8 +2,9 @@ import type {
   Adapter,
   BootStatus,
   ClientSession,
+  ClientSessionDevtoolsChannel,
   IntentionalShutdownCause,
-  StoreDevtoolsChannel,
+  MigrationsReport,
 } from '@livestore/common'
 import { provideOtel, UnexpectedError } from '@livestore/common'
 import type { EventId, LiveStoreSchema, MutationEvent } from '@livestore/common/schema'
@@ -39,7 +40,10 @@ export interface CreateStoreOptions<TGraphQLContext extends BaseGraphQLContext,
   graphQLOptions?: GraphQLOptions<TGraphQLContext>
   boot?: (
     store: Store<TGraphQLContext, TSchema>,
-    parentSpan: otel.Span,
+    ctx: {
+      migrationsReport: MigrationsReport
+      parentSpan: otel.Span
+    },
   ) => void | Promise<void> | Effect.Effect<void, unknown, OtelTracer.OtelTracer | LiveStoreContextRunning>
   batchUpdates?: (run: () => void) => void
   disableDevtools?: boolean
@@ -107,6 +111,8 @@ export const createStore = <
   Effect.gen(function* () {
     const lifetimeScope = yield* Scope.make()
 
+    yield* validateStoreId(storeId)
+
     yield* Effect.addFinalizer((_) => Scope.close(lifetimeScope, _))
 
     const debugInstanceId = debug?.instanceId ?? nanoid(10)
@@ -128,7 +134,7 @@ export const createStore = <
 
       const storeDeferred = yield* Deferred.make<Store>()
 
-      const connectDevtoolsToStore_ = (storeDevtoolsChannel: StoreDevtoolsChannel) =>
+      const connectDevtoolsToStore_ = (storeDevtoolsChannel: ClientSessionDevtoolsChannel) =>
         Effect.gen(function* () {
           const store = yield* storeDeferred
           yield* connectDevtoolsToStore({ storeDevtoolsChannel, store })
@@ -158,6 +164,16 @@ export const createStore = <
         debugInstanceId,
       }).pipe(Effect.withPerformanceMeasure('livestore:makeAdapter'), Effect.withSpan('createStore:makeAdapter'))
 
+      if (LS_DEV && clientSession.leaderThread.initialState.migrationsReport.migrations.length > 0) {
+        yield* Effect.logDebug(
+          '[@livestore/livestore:createStore] migrationsReport',
+          ...clientSession.leaderThread.initialState.migrationsReport.migrations.map(
+            (m) =>
+              `Schema hash mismatch for table '${m.tableName}' (DB: ${m.hashes.actual}, expected: ${m.hashes.expected}), migrating table...`,
+          ),
+        )
+      }
+
       // TODO fill up with unsynced mutation events from the client session
       const unsyncedMutationEvents = MutableHashMap.empty<EventId.EventId, MutationEvent.ForSchema<TSchema>>()
 
@@ -176,11 +192,14 @@ export const createStore = <
         storeId,
       })
 
+      // Starts background fibers (syncing, mutation processing, etc) for store
       yield* store.boot
 
       if (boot !== undefined) {
         // TODO also incorporate `boot` function progress into `bootStatusQueue`
-        yield* Effect.tryAll(() => boot(store, span)).pipe(
+        yield* Effect.tryAll(() =>
+          boot(store, { migrationsReport: clientSession.leaderThread.initialState.migrationsReport, parentSpan: span }),
+        ).pipe(
           UnexpectedError.mapToUnexpectedError,
           Effect.provide(Layer.succeed(LiveStoreContextRunning, { stage: 'running', store: store as any as Store })),
           Effect.withSpan('createStore:boot'),
@@ -205,3 +224,15 @@ export const createStore = <
       Scope.extend(lifetimeScope),
     )
   })
+
+const validateStoreId = (storeId: string) =>
+  Effect.gen(function* () {
+    const validChars = /^[a-zA-Z0-9_-]+$/
+
+    if (!validChars.test(storeId)) {
+      return yield* UnexpectedError.make({
+        cause: `Invalid storeId: ${storeId}. Only alphanumeric characters, underscores, and hyphens are allowed.`,
+        payload: { storeId },
+      })
+    }
+  })

package/src/store/devtools.ts

@@ -1,4 +1,4 @@
-import type { ClientSession, DebugInfo } from '@livestore/common'
+import type { ClientSession, ClientSessionSyncProcessor, DebugInfo, SyncState } from '@livestore/common'
 import { Devtools, liveStoreVersion, UnexpectedError } from '@livestore/common'
 import { throttle } from '@livestore/utils'
 import type { WebChannel } from '@livestore/utils/effect'
@@ -15,6 +15,7 @@ type IStore = {
   reactivityGraph: ReactivityGraph
   sqliteDbWrapper: SqliteDbWrapper
   activeQueries: ReferenceCountedSet<LiveQuery<any>>
+  syncProcessor: ClientSessionSyncProcessor
 }
 
 type Unsub = () => void
@@ -34,13 +35,17 @@ export const connectDevtoolsToStore = ({
   storeDevtoolsChannel,
   store,
 }: {
-  storeDevtoolsChannel: WebChannel.WebChannel<Devtools.MessageToAppClientSession, Devtools.MessageFromAppClientSession>
+  storeDevtoolsChannel: WebChannel.WebChannel<
+    Devtools.ClientSession.MessageToApp,
+    Devtools.ClientSession.MessageFromApp
+  >
   store: IStore
 }) =>
   Effect.gen(function* () {
     const reactivityGraphSubcriptions: SubMap = new Map()
     const liveQueriesSubscriptions: SubMap = new Map()
     const debugInfoHistorySubscriptions: SubMap = new Map()
+    const syncHeadClientSessionSubscriptions: SubMap = new Map()
 
     const { clientId, sessionId } = store.clientSession
 
@@ -49,13 +54,14 @@ export const connectDevtoolsToStore = ({
         reactivityGraphSubcriptions.forEach((unsub) => unsub())
         liveQueriesSubscriptions.forEach((unsub) => unsub())
         debugInfoHistorySubscriptions.forEach((unsub) => unsub())
+        syncHeadClientSessionSubscriptions.forEach((unsub) => unsub())
       }),
     )
 
-    const sendToDevtools = (message: Devtools.MessageFromAppClientSession) =>
+    const sendToDevtools = (message: Devtools.ClientSession.MessageFromApp) =>
       storeDevtoolsChannel.send(message).pipe(Effect.tapCauseLogPretty, Effect.runFork)
 
-    const onMessage = (decodedMessage: typeof Devtools.MessageToAppClientSession.Type) => {
+    const onMessage = (decodedMessage: typeof Devtools.ClientSession.MessageToApp.Type) => {
       // console.debug('@livestore/livestore:store:devtools:onMessage', decodedMessage)
 
       if (decodedMessage.clientId !== clientId || decodedMessage.sessionId !== sessionId) {
@@ -63,7 +69,7 @@ export const connectDevtoolsToStore = ({
         return
       }
 
-      if (decodedMessage._tag === 'LSD.Disconnect') {
+      if (decodedMessage._tag === 'LSD.ClientSession.Disconnect') {
         // console.error('TODO handle disconnect properly in store')
         return
       }
@@ -82,7 +88,7 @@ export const connectDevtoolsToStore = ({
             requestIdleCallback(
               () =>
                 sendToDevtools(
-                  Devtools.ReactivityGraphRes.make({
+                  Devtools.ClientSession.ReactivityGraphRes.make({
                     reactivityGraph: store.reactivityGraph.getSnapshot({ includeResults }),
                     requestId,
                     clientId,
@@ -106,7 +112,7 @@ export const connectDevtoolsToStore = ({
         }
         case 'LSD.ClientSession.DebugInfoReq': {
           sendToDevtools(
-            Devtools.DebugInfoRes.make({
+            Devtools.ClientSession.DebugInfoRes.make({
               debugInfo: store.sqliteDbWrapper.debugInfo,
               requestId,
               clientId,
@@ -132,7 +138,7 @@ export const connectDevtoolsToStore = ({
 
             if (buffer.length > 10) {
               sendToDevtools(
-                Devtools.DebugInfoHistoryRes.make({
+                Devtools.ClientSession.DebugInfoHistoryRes.make({
                   debugInfoHistory: buffer,
                   requestId,
                   clientId,
@@ -171,13 +177,17 @@ export const connectDevtoolsToStore = ({
         }
         case 'LSD.ClientSession.DebugInfoResetReq': {
           store.sqliteDbWrapper.debugInfo.slowQueries.clear()
-          sendToDevtools(Devtools.DebugInfoResetRes.make({ requestId, clientId, sessionId, liveStoreVersion }))
+          sendToDevtools(
+            Devtools.ClientSession.DebugInfoResetRes.make({ requestId, clientId, sessionId, liveStoreVersion }),
+          )
           break
         }
         case 'LSD.ClientSession.DebugInfoRerunQueryReq': {
           const { queryStr, bindValues, queriedTables } = decodedMessage
           store.sqliteDbWrapper.select(queryStr, bindValues, { queriedTables, skipCache: true })
-          sendToDevtools(Devtools.DebugInfoRerunQueryRes.make({ requestId, clientId, sessionId, liveStoreVersion }))
+          sendToDevtools(
+            Devtools.ClientSession.DebugInfoRerunQueryRes.make({ requestId, clientId, sessionId, liveStoreVersion }),
+          )
           break
         }
         case 'LSD.ClientSession.ReactivityGraphUnsubscribe': {
@@ -191,7 +201,7 @@ export const connectDevtoolsToStore = ({
             requestIdleCallback(
               () =>
                 sendToDevtools(
-                  Devtools.LiveQueriesRes.make({
+                  Devtools.ClientSession.LiveQueriesRes.make({
                     liveQueries: [...store.activeQueries].map((q) => ({
                       _tag: q._tag,
                       id: q.id,
@@ -229,7 +239,42 @@ export const connectDevtoolsToStore = ({
           liveQueriesSubscriptions.delete(requestId)
           break
         }
-        // No default
+        case 'LSD.ClientSession.SyncHeadSubscribe': {
+          const send = (syncState: SyncState.SyncState) =>
+            sendToDevtools(
+              Devtools.ClientSession.SyncHeadRes.make({
+                local: syncState.localHead,
+                upstream: syncState.upstreamHead,
+                requestId,
+                clientId,
+                sessionId,
+                liveStoreVersion,
+              }),
+            )
+
+          send(store.syncProcessor.syncState.pipe(Effect.runSync))
+
+          syncHeadClientSessionSubscriptions.set(
+            requestId,
+            store.syncProcessor.syncState.changes.pipe(
+              Stream.tap((syncState) => send(syncState)),
+              Stream.runDrain,
+              Effect.interruptible,
+              Effect.tapCauseLogPretty,
+              Effect.runCallback,
+            ),
+          )
+
+          break
+        }
+        case 'LSD.ClientSession.SyncHeadUnsubscribe': {
+          syncHeadClientSessionSubscriptions.get(requestId)?.()
+          syncHeadClientSessionSubscriptions.delete(requestId)
+          break
+        }
+        default: {
+          console.warn(`[LSD.ClientSession] Unknown message`, decodedMessage)
+        }
       }
     }
 

package/src/store/store.ts

@@ -96,7 +96,7 @@ export class Store<
   // NOTE this is currently exposed for the Devtools databrowser to emit mutation events
   readonly __mutationEventSchema
   private unsyncedMutationEvents
-  private syncProcessor: ClientSessionSyncProcessor
+  readonly syncProcessor: ClientSessionSyncProcessor
   readonly lifetimeScope: Scope.Scope
 
   readonly boot: Effect.Effect<void, UnexpectedError, Scope.Scope>
@@ -195,7 +195,7 @@ export class Store<
     this.reactivityGraph = reactivityGraph
     this.reactivityGraph.context = {
       store: this as unknown as Store<BaseGraphQLContext, LiveStoreSchema>,
-      liveQueryRCMap: new Map(),
+      defRcMap: new Map(),
       reactivityGraph: new WeakRef(reactivityGraph),
       otelTracer: otelOptions.tracer,
       rootOtelContext: otelQueriesSpanContext,
@@ -262,6 +262,10 @@ export class Store<
     return this.clientSession.sessionId
   }
 
+  get clientId(): string {
+    return this.clientSession.clientId
+  }
+
   /**
    * Subscribe to the results of a query
    * Returns a function to cancel the subscription.
@@ -594,15 +598,16 @@ export class Store<
 
     hardReset: (mode: 'all-data' | 'only-app-db' = 'all-data') => {
       Effect.gen(this, function* () {
+        const clientId = this.clientSession.clientId
         yield* this.clientSession.leaderThread.sendDevtoolsMessage(
-          Devtools.ResetAllDataReq.make({ liveStoreVersion, mode, requestId: nanoid() }),
+          Devtools.Leader.ResetAllData.Request.make({ liveStoreVersion, mode, requestId: nanoid(), clientId }),
         )
       }).pipe(this.runEffectFork)
     },
 
     syncStates: () => {
       Effect.gen(this, function* () {
-        const session = this.syncProcessor.syncStateRef.current
+        const session = yield* this.syncProcessor.syncState
         console.log('Session sync state:', session.toJSON())
         const leader = yield* this.clientSession.leaderThread.getSyncState
         console.log('Leader sync state:', leader.toJSON())
@@ -614,6 +619,8 @@ export class Store<
         .shutdown(cause ?? Cause.fail(IntentionalShutdownCause.make({ reason: 'manual' })))
         .pipe(Effect.tapCauseLogPretty, Effect.provide(this.runtime), Effect.runFork)
     },
+
+    version: liveStoreVersion,
   }
 
   // NOTE This is needed because when booting a Store via Effect it seems to call `toJSON` in the error path

package/src/utils/tests/fixture.ts

@@ -1,9 +1,9 @@
+import { makeInMemoryAdapter } from '@livestore/adapter-web'
 import { provideOtel } from '@livestore/common'
 import type { FromInputSchema } from '@livestore/common/schema'
 import type { Store } from '@livestore/livestore'
 import { createStore, DbSchema, makeSchema } from '@livestore/livestore'
 import { Effect } from '@livestore/utils/effect'
-import { makeInMemoryAdapter } from '@livestore/web'
 import type * as otel from '@opentelemetry/api'
 
 export type Todo = {

package/tsconfig.json

@@ -10,9 +10,8 @@
   },
   "include": ["./src"],
   "references": [
-    { "path": "../db-schema" },
     { "path": "../common" },
-    { "path": "../web" },
+    { "path": "../adapter-web" },
     { "path": "../utils" }
   ]
 }