@livestore/react 0.3.0-dev.46 → 0.3.0-dev.48

package/src/LiveStoreProvider.tsx

@@ -79,6 +79,9 @@ export interface LiveStoreProviderProps {
    * @default undefined
    */
   syncPayload?: Schema.JsonValue
+  debug?: {
+    instanceId?: string
+  }
 }
 
 const defaultRenderError = (error: UnexpectedError | unknown) =>
@@ -119,6 +122,7 @@ export const LiveStoreProvider = ({
   signal,
   confirmUnsavedChanges = true,
   syncPayload,
+  debug,
 }: LiveStoreProviderProps & { children?: ReactNode }): React.ReactElement => {
   const storeCtx = useCreateStore({
     storeId,
@@ -131,6 +135,7 @@ export const LiveStoreProvider = ({
     signal,
     confirmUnsavedChanges,
     syncPayload,
+    debug,
   })
 
   if (storeCtx.stage === 'error') {
@@ -149,23 +154,11 @@ export const LiveStoreProvider = ({
   if (Object.keys(globalThis.__debugLiveStore).length === 0) {
     globalThis.__debugLiveStore['_'] = storeCtx.store
   }
-  globalThis.__debugLiveStore[storeId] = storeCtx.store
+  globalThis.__debugLiveStore[debug?.instanceId ?? storeId] = storeCtx.store
 
   return <LiveStoreContext.Provider value={storeCtx as TODO}>{children}</LiveStoreContext.Provider>
 }
 
-type SchemaKey = string
-const semaphoreMap = new Map<SchemaKey, Effect.Semaphore>()
-
-const withSemaphore = (storeId: SchemaKey) => {
-  let semaphore = semaphoreMap.get(storeId)
-  if (!semaphore) {
-    semaphore = Effect.makeSemaphore(1).pipe(Effect.runSync)
-    semaphoreMap.set(storeId, semaphore)
-  }
-  return semaphore.withPermits(1)
-}
-
 const useCreateStore = ({
   schema,
   storeId,
@@ -179,6 +172,7 @@ const useCreateStore = ({
   params,
   confirmUnsavedChanges,
   syncPayload,
+  debug,
 }: CreateStoreOptions<LiveStoreSchema> & {
   signal?: AbortSignal
   otelOptions?: Partial<OtelOptions>
@@ -188,13 +182,17 @@ const useCreateStore = ({
     value: StoreContext_ | BootStatus
     componentScope: Scope.CloseableScope | undefined
     shutdownDeferred: ShutdownDeferred | undefined
+    /** Used to wait for the previous shutdown deferred to fully complete before creating a new one */
+    previousShutdownDeferred: ShutdownDeferred | undefined
     counter: number
   }>({
     value: { stage: 'loading' },
     componentScope: undefined,
     shutdownDeferred: undefined,
+    previousShutdownDeferred: undefined,
     counter: 0,
   })
+  const debugInstanceId = debug?.instanceId
 
   // console.debug(`useCreateStore (${ctxValueRef.current.counter})`, ctxValueRef.current.value.stage)
 
@@ -210,6 +208,7 @@ const useCreateStore = ({
     params,
     confirmUnsavedChanges,
     syncPayload,
+    debugInstanceId,
   })
 
   const interrupt = (
@@ -226,18 +225,33 @@ const useCreateStore = ({
       Effect.runFork,
     )
 
+  const inputPropChanges = {
+    schema: inputPropsCacheRef.current.schema !== schema,
+    otelOptions: inputPropsCacheRef.current.otelOptions !== otelOptions,
+    boot: inputPropsCacheRef.current.boot !== boot,
+    adapter: inputPropsCacheRef.current.adapter !== adapter,
+    batchUpdates: inputPropsCacheRef.current.batchUpdates !== batchUpdates,
+    disableDevtools: inputPropsCacheRef.current.disableDevtools !== disableDevtools,
+    signal: inputPropsCacheRef.current.signal !== signal,
+    context: inputPropsCacheRef.current.context !== context,
+    params: inputPropsCacheRef.current.params !== params,
+    confirmUnsavedChanges: inputPropsCacheRef.current.confirmUnsavedChanges !== confirmUnsavedChanges,
+    syncPayload: inputPropsCacheRef.current.syncPayload !== syncPayload,
+    debugInstanceId: inputPropsCacheRef.current.debugInstanceId !== debugInstanceId,
+  }
+
   if (
-    inputPropsCacheRef.current.schema !== schema ||
-    inputPropsCacheRef.current.otelOptions !== otelOptions ||
-    inputPropsCacheRef.current.boot !== boot ||
-    inputPropsCacheRef.current.adapter !== adapter ||
-    inputPropsCacheRef.current.batchUpdates !== batchUpdates ||
-    inputPropsCacheRef.current.disableDevtools !== disableDevtools ||
-    inputPropsCacheRef.current.signal !== signal ||
-    inputPropsCacheRef.current.context !== context ||
-    inputPropsCacheRef.current.params !== params ||
-    inputPropsCacheRef.current.confirmUnsavedChanges !== confirmUnsavedChanges ||
-    inputPropsCacheRef.current.syncPayload !== syncPayload
+    inputPropChanges.schema ||
+    inputPropChanges.otelOptions ||
+    inputPropChanges.boot ||
+    inputPropChanges.adapter ||
+    inputPropChanges.batchUpdates ||
+    inputPropChanges.disableDevtools ||
+    inputPropChanges.signal ||
+    inputPropChanges.context ||
+    inputPropChanges.params ||
+    inputPropChanges.confirmUnsavedChanges ||
+    inputPropChanges.syncPayload
   ) {
     inputPropsCacheRef.current = {
       schema,
@@ -251,12 +265,17 @@ const useCreateStore = ({
       params,
       confirmUnsavedChanges,
       syncPayload,
+      debugInstanceId,
     }
     if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
+      const changedInputProps = Object.keys(inputPropChanges).filter(
+        (key) => inputPropChanges[key as keyof typeof inputPropChanges],
+      )
+
       interrupt(
         ctxValueRef.current.componentScope,
         ctxValueRef.current.shutdownDeferred,
-        new StoreInterrupted({ reason: 're-rendering due to changed input props' }),
+        new StoreInterrupted({ reason: `re-rendering due to changed input props: ${changedInputProps.join(', ')}` }),
       )
       ctxValueRef.current.componentScope = undefined
       ctxValueRef.current.shutdownDeferred = undefined
@@ -265,6 +284,7 @@ const useCreateStore = ({
       value: { stage: 'loading' },
       componentScope: undefined,
       shutdownDeferred: undefined,
+      previousShutdownDeferred: ctxValueRef.current.shutdownDeferred,
       counter: ctxValueRef.current.counter + 1,
     }
   }
@@ -295,7 +315,12 @@ const useCreateStore = ({
     })
 
     const cancel = Effect.gen(function* () {
-      const componentScope = yield* Scope.make()
+      // Wait for the previous store to fully shutdown before creating a new one
+      if (ctxValueRef.current.previousShutdownDeferred) {
+        yield* Deferred.await(ctxValueRef.current.previousShutdownDeferred)
+      }
+
+      const componentScope = yield* Scope.make().pipe(Effect.acquireRelease(Scope.close))
       const shutdownDeferred = yield* makeShutdownDeferred
 
       ctxValueRef.current.componentScope = componentScope
@@ -319,6 +344,7 @@ const useCreateStore = ({
             // NOTE sometimes when status come in in rapid succession, only the last value will be rendered by React
             setContextValue(status)
           },
+          debug: { instanceId: debugInstanceId },
         }).pipe(Effect.tapErrorCause((cause) => Deferred.failCause(shutdownDeferred, cause)))
 
         setContextValue({ stage: 'running', store })
@@ -337,10 +363,6 @@ const useCreateStore = ({
       )
     }).pipe(
       Effect.scoped,
-      // NOTE we're running the code above in a semaphore to make sure a previous store is always fully
-      // shutdown before a new one is created - especially when shutdown logic is async. You can't trust `React.useEffect`.
-      // Thank you to Mattia Manzati for this idea.
-      withSemaphore(storeId),
       Effect.withSpan('@livestore/react:useCreateStore'),
       LS_DEV ? TaskTracing.withAsyncTaggingTracing((name: string) => (console as any).createTask(name)) : identity,
       provideOtel({ parentSpanContext: otelOptions?.rootSpanContext, otelTracer: otelOptions?.tracer }),
@@ -377,6 +399,7 @@ const useCreateStore = ({
     params,
     confirmUnsavedChanges,
     syncPayload,
+    debugInstanceId,
   ])
 
   return ctxValueRef.current.value

package/src/__snapshots__/useClientDocument.test.tsx.snap

@@ -20,6 +20,28 @@ exports[`useClientDocument > otel > should update the data based on component ke
     ",
       },
     },
+    {
+      "_name": "@livestore/common:LeaderSyncProcessor:push",
+      "attributes": {
+        "batch": "undefined",
+        "batchSize": 1,
+      },
+    },
+    {
+      "_name": "@livestore/common:LeaderSyncProcessor:push",
+      "attributes": {
+        "batch": "undefined",
+        "batchSize": 1,
+      },
+    },
+    {
+      "_name": "client-session-sync-processor:pull",
+      "attributes": {
+        "code.stacktrace": "at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:281:14",
+        "span.label": "⚠︎ Interrupted",
+        "status.interrupted": true,
+      },
+    },
     {
       "_name": "LiveStore:sync",
     },
@@ -224,6 +246,28 @@ exports[`useClientDocument > otel > should update the data based on component ke
     ",
       },
     },
+    {
+      "_name": "@livestore/common:LeaderSyncProcessor:push",
+      "attributes": {
+        "batch": "undefined",
+        "batchSize": 1,
+      },
+    },
+    {
+      "_name": "@livestore/common:LeaderSyncProcessor:push",
+      "attributes": {
+        "batch": "undefined",
+        "batchSize": 1,
+      },
+    },
+    {
+      "_name": "client-session-sync-processor:pull",
+      "attributes": {
+        "code.stacktrace": "at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:281:14",
+        "span.label": "⚠︎ Interrupted",
+        "status.interrupted": true,
+      },
+    },
     {
       "_name": "LiveStore:sync",
     },

package/src/useQuery.ts

@@ -47,7 +47,8 @@ export const useQueryRef = <TQuery extends LiveQueryDef.Any>(
     React.useContext(LiveStoreContext)?.store ??
     shouldNeverHappen(`No store provided to useQuery`)
 
-  const rcRefKey = `${store.storeId}_${queryDef.hash}`
+  // It's important to use all "aspects" of a store instance here, otherwise we get unexpected cache mappings
+  const rcRefKey = `${store.storeId}_${store.clientId}_${store.sessionId}_${queryDef.hash}`
 
   const stackInfo = React.useMemo(() => {
     Error.stackTraceLimit = 10