@livestore/livestore 0.0.54-dev.26 → 0.0.54-dev.27

package/src/effect/LiveStore.ts

@@ -1,7 +1,6 @@
-import type { BootDb, StoreAdapterFactory } from '@livestore/common'
+import type { BootDb, StoreAdapterFactory, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
-import type { Scope } from '@livestore/utils/effect'
-import { Context, Deferred, Duration, Effect, Layer, OtelTracer, pipe, Runtime } from '@livestore/utils/effect'
+import { Context, Deferred, Duration, Effect, Layer, OtelTracer, pipe, Runtime, Scope } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import type { GraphQLSchema } from 'graphql'
 
@@ -11,7 +10,17 @@ import type { BaseGraphQLContext, GraphQLOptions, OtelOptions, Store } from '../
 import { createStore } from '../store.js'
 
 // TODO get rid of `LiveStoreContext` wrapper and only expose the `Store` directly
-export type LiveStoreContext = {
+export type LiveStoreContext =
+  | LiveStoreContextRunning
+  | {
+      stage: 'error'
+      error: UnexpectedError | unknown
+    }
+  | {
+      stage: 'shutdown'
+    }
+
+export type LiveStoreContextRunning = {
   stage: 'running'
   store: Store
 }
@@ -26,13 +35,16 @@ export type LiveStoreCreateStoreOptions<GraphQLContext extends BaseGraphQLContex
   adapter: StoreAdapterFactory
   batchUpdates?: (run: () => void) => void
   disableDevtools?: boolean
+  signal?: AbortSignal
 }
 
-export const LiveStoreContext = Context.GenericTag<LiveStoreContext>('@livestore/livestore/LiveStoreContext')
+export const LiveStoreContextRunning = Context.GenericTag<LiveStoreContextRunning>(
+  '@livestore/livestore/effect/LiveStoreContextRunning',
+)
 
-export type DeferredStoreContext = Deferred.Deferred<LiveStoreContext>
+export type DeferredStoreContext = Deferred.Deferred<LiveStoreContextRunning>
 export const DeferredStoreContext = Context.GenericTag<DeferredStoreContext>(
-  '@livestore/livestore/DeferredStoreContext',
+  '@livestore/livestore/effect/DeferredStoreContext',
 )
 
 // export const DeferredStoreContext = Effect.cached(Effect.flatMap(StoreContext, (_) => Effect.succeed(_)))
@@ -50,13 +62,13 @@ export type LiveStoreContextProps<GraphQLContext extends BaseGraphQLContext> = {
 
 export const LiveStoreContextLayer = <GraphQLContext extends BaseGraphQLContext>(
   props: LiveStoreContextProps<GraphQLContext>,
-): Layer.Layer<LiveStoreContext, never, otel.Tracer> =>
-  Layer.scoped(LiveStoreContext, makeLiveStoreContext(props)).pipe(
+): Layer.Layer<LiveStoreContextRunning, never, otel.Tracer> =>
+  Layer.scoped(LiveStoreContextRunning, makeLiveStoreContext(props)).pipe(
     Layer.withSpan('LiveStore'),
     Layer.provide(LiveStoreContextDeferred),
   )
 
-export const LiveStoreContextDeferred = Layer.effect(DeferredStoreContext, Deferred.make<LiveStoreContext>())
+export const LiveStoreContextDeferred = Layer.effect(DeferredStoreContext, Deferred.make<LiveStoreContextRunning>())
 
 export const makeLiveStoreContext = <GraphQLContext extends BaseGraphQLContext>({
   schema,
@@ -65,54 +77,49 @@ export const makeLiveStoreContext = <GraphQLContext extends BaseGraphQLContext>(
   adapter,
   disableDevtools,
 }: LiveStoreContextProps<GraphQLContext>): Effect.Effect<
-  LiveStoreContext,
+  LiveStoreContextRunning,
   never,
   DeferredStoreContext | Scope.Scope | otel.Tracer
 > =>
   pipe(
-    Effect.gen(function* ($) {
-      const runtime = yield* $(Effect.runtime<never>())
+    Effect.gen(function* () {
+      const runtime = yield* Effect.runtime<never>()
 
       const otelRootSpanContext = otel.context.active()
 
-      const otelTracer = yield* $(OtelTracer.Tracer)
+      const storeScope = yield* Scope.make()
+
+      yield* Effect.addFinalizer((ex) => Scope.close(storeScope, ex))
 
-      const graphQLOptions = yield* $(
-        graphQLOptions_
-          ? Effect.all({ schema: graphQLOptions_.schema, makeContext: Effect.succeed(graphQLOptions_.makeContext) })
-          : Effect.succeed(undefined),
-      )
+      const otelTracer = yield* OtelTracer.Tracer
+
+      const graphQLOptions = yield* graphQLOptions_
+        ? Effect.all({ schema: graphQLOptions_.schema, makeContext: Effect.succeed(graphQLOptions_.makeContext) })
+        : Effect.succeed(undefined)
 
       const boot = boot_
         ? (db: BootDb) => boot_(db).pipe(Effect.withSpan('boot'), Effect.tapCauseLogPretty, Runtime.runPromise(runtime))
         : undefined
 
-      const store = yield* $(
-        Effect.tryPromise(() =>
-          createStore({
-            schema,
-            graphQLOptions,
-            otelOptions: {
-              tracer: otelTracer,
-              rootSpanContext: otelRootSpanContext,
-            },
-            boot,
-            adapter,
-            disableDevtools,
-          }),
-        ),
-        Effect.acquireRelease((store) => Effect.sync(() => store.destroy())),
-      )
+      const store = yield* createStore({
+        schema,
+        graphQLOptions,
+        otelOptions: {
+          tracer: otelTracer,
+          rootSpanContext: otelRootSpanContext,
+        },
+        boot,
+        adapter,
+        disableDevtools,
+        storeScope,
+      })
 
       window.__debugLiveStore = store
 
-      return { stage: 'running', store } satisfies LiveStoreContext
+      return { stage: 'running', store } satisfies LiveStoreContextRunning
     }),
     Effect.tap((storeCtx) => Effect.flatMap(DeferredStoreContext, (def) => Deferred.succeed(def, storeCtx))),
-    Effect.timeoutFail({
-      // NOTE migrating from the mutation log can take a long time (so might need to increase this even further)
-      onTimeout: () => new Error('Timed out while creating LiveStore store after 60sec'),
-      duration: Duration.seconds(60),
-    }),
+    Effect.timeout(Duration.seconds(60)),
+    Effect.withSpan('@livestore/livestore/effect:makeLiveStoreContext'),
     Effect.orDie,
   )

package/src/effect/index.ts

@@ -1,6 +1,7 @@
 export {
   LiveStoreContextLayer,
-  LiveStoreContext,
+  LiveStoreContextRunning as LiveStoreContext,
+  LiveStoreContextRunning,
   LiveStoreContextDeferred,
   DeferredStoreContext,
   type LiveStoreContextProps,

package/src/index.ts

@@ -1,7 +1,11 @@
-export { Store, createStore } from './store.js'
+export { Store, createStorePromise, createStore } from './store.js'
 export type { BaseGraphQLContext, QueryDebugInfo, RefreshReason } from './store.js'
 
-export type { QueryDefinition, LiveStoreCreateStoreOptions, LiveStoreContext } from './effect/LiveStore.js'
+export type {
+  QueryDefinition,
+  LiveStoreCreateStoreOptions,
+  LiveStoreContextRunning as LiveStoreContext,
+} from './effect/LiveStore.js'
 
 export { MainDatabaseWrapper, emptyDebugInfo } from './MainDatabaseWrapper.js'
 

package/src/react/LiveStoreContext.ts

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react'
 
-import type { LiveStoreContext as LiveStoreContext_ } from '../effect/LiveStore.js'
+import type { LiveStoreContextRunning as LiveStoreContext_ } from '../effect/LiveStore.js'
+import type { Store } from '../store.js'
 
 export const LiveStoreContext = React.createContext<LiveStoreContext_ | undefined>(undefined)
 
-export const useStore = (): LiveStoreContext_ => {
+export const useStore = (): { store: Store } => {
   const storeContext = useContext(LiveStoreContext)
 
   if (storeContext === undefined) {

package/src/react/LiveStoreProvider.test.tsx

@@ -7,27 +7,25 @@ import { describe, expect, it } from 'vitest'
 
 import { parseTodos, schema } from '../__tests__/react/fixture.js'
 import { querySQL } from '../reactiveQueries/sql.js'
-import type { Store } from '../store.js'
 import * as LiveStoreReact from './index.js'
 import { LiveStoreProvider } from './LiveStoreProvider.js'
 
 describe('LiveStoreProvider', () => {
   it('simple', async () => {
-    let renderCount = 0
+    let appRenderCount = 0
 
     const allTodos$ = querySQL(`select * from todos`, { map: parseTodos })
-    let latestStoreCtx: { store: Store } | undefined = undefined
 
     const App = () => {
-      renderCount++
-
-      latestStoreCtx = LiveStoreReact.useStore()
+      appRenderCount++
 
       const todos = LiveStoreReact.useQuery(allTodos$)
 
       return <div>{JSON.stringify(todos)}</div>
     }
 
+    const abortController = new AbortController()
+
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
         (db: BootDb) =>
@@ -42,6 +40,7 @@ describe('LiveStoreProvider', () => {
           renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
           adapter={adapterMemo}
           boot={bootCb}
+          signal={abortController.signal}
         >
           <App />
         </LiveStoreProvider>
@@ -50,19 +49,57 @@ describe('LiveStoreProvider', () => {
 
     const { rerender } = render(<Root forceUpdate={1} />)
 
-    expect(renderCount).toBe(0)
+    expect(appRenderCount).toBe(0)
 
     await waitForElementToBeRemoved(() => screen.getByText((_) => _.startsWith('Loading LiveStore')))
 
-    expect(renderCount).toBe(1)
+    expect(appRenderCount).toBe(1)
 
     rerender(<Root forceUpdate={2} />)
 
     await waitFor(() => screen.getByText('Loading LiveStore: loading'))
     await waitForElementToBeRemoved(() => screen.getByText((_) => _.startsWith('Loading LiveStore')))
 
-    expect(renderCount).toBe(2)
+    expect(appRenderCount).toBe(2)
+
+    abortController.abort()
+
+    await waitFor(() => screen.getByText('LiveStore Shutdown'))
+  })
+
+  it('error during boot', async () => {
+    let appRenderCount = 0
+
+    const App = () => {
+      appRenderCount++
+
+      return <div>hello world</div>
+    }
+
+    const Root = ({ forceUpdate }: { forceUpdate: number }) => {
+      const bootCb = React.useCallback(
+        (db: BootDb) =>
+          db.execute(sql`INSERT INTO todos_mising_table (id, text, completed) VALUES ('t1', 'buy milk', 0);`),
+        [],
+      )
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const adapterMemo = React.useMemo(() => makeInMemoryAdapter(), [forceUpdate])
+      return (
+        <LiveStoreProvider
+          schema={schema}
+          renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
+          adapter={adapterMemo}
+          boot={bootCb}
+        >
+          <App />
+        </LiveStoreProvider>
+      )
+    }
+
+    render(<Root forceUpdate={1} />)
+
+    expect(appRenderCount).toBe(0)
 
-    await latestStoreCtx!.store.destroy()
+    await waitFor(() => screen.getByText((_) => _.startsWith('LiveStore.UnexpectedError')))
   })
 })

package/src/react/LiveStoreProvider.tsx

@@ -1,13 +1,14 @@
-import type { BootDb, BootStatus, StoreAdapterFactory } from '@livestore/common'
+import { type BootDb, type BootStatus, type StoreAdapterFactory, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
-import { shouldNeverHappen } from '@livestore/utils'
+import { errorToString } from '@livestore/utils'
+import { Effect, Exit, Logger, LogLevel, Schema, Scope } 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, Store } from '../store.js'
+import type { BaseGraphQLContext, GraphQLOptions, OtelOptions } from '../store.js'
 import { createStore } from '../store.js'
 import { LiveStoreContext } from './LiveStoreContext.js'
 
@@ -20,6 +21,7 @@ interface LiveStoreProviderProps<GraphQLContext> {
   adapter: StoreAdapterFactory
   batchUpdates?: (run: () => void) => void
   disableDevtools?: boolean
+  signal?: AbortSignal
 }
 
 export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
@@ -32,6 +34,7 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   adapter,
   batchUpdates,
   disableDevtools,
+  signal,
 }: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): JSX.Element => {
   const storeCtx = useCreateStore({
     schema,
@@ -41,8 +44,21 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
     adapter,
     batchUpdates,
     disableDevtools,
+    signal,
   })
 
+  if (storeCtx.stage === 'error') {
+    return (
+      <div>
+        {Schema.is(UnexpectedError)(storeCtx.error) ? storeCtx.error.toString() : errorToString(storeCtx.error)}
+      </div>
+    )
+  }
+
+  if (storeCtx.stage === 'shutdown') {
+    return <div>LiveStore Shutdown</div>
+  }
+
   if (storeCtx.stage !== 'running') {
     return <div>{renderLoading(storeCtx)}</div>
   }
@@ -60,9 +76,21 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   adapter,
   batchUpdates,
   disableDevtools,
+  signal,
 }: LiveStoreCreateStoreOptions<GraphQLContext>) => {
   const [_, rerender] = React.useState(0)
-  const ctxValueRef = React.useRef<StoreContext_ | BootStatus>({ stage: 'loading' })
+  const ctxValueRef = React.useRef<{
+    value: StoreContext_ | BootStatus
+    scope: Scope.CloseableScope | undefined
+    counter: number
+  }>({
+    value: { stage: 'loading' },
+    scope: undefined,
+    counter: 0,
+  })
+
+  // console.debug(`useCreateStore (${ctxValueRef.current.counter})`, ctxValueRef.current.value.stage)
+
   const inputPropsCacheRef = React.useRef({
     schema,
     graphQLOptions,
@@ -70,8 +98,9 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     boot,
     adapter,
     batchUpdates,
+    disableDevtools,
+    signal,
   })
-  const oldStoreAlreadyDestroyedRef = React.useRef(false)
 
   if (
     inputPropsCacheRef.current.schema !== schema ||
@@ -79,7 +108,9 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     inputPropsCacheRef.current.otelOptions !== otelOptions ||
     inputPropsCacheRef.current.boot !== boot ||
     inputPropsCacheRef.current.adapter !== adapter ||
-    inputPropsCacheRef.current.batchUpdates !== batchUpdates
+    inputPropsCacheRef.current.batchUpdates !== batchUpdates ||
+    inputPropsCacheRef.current.disableDevtools !== disableDevtools ||
+    inputPropsCacheRef.current.signal !== signal
   ) {
     inputPropsCacheRef.current = {
       schema,
@@ -88,47 +119,73 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       boot,
       adapter,
       batchUpdates,
+      disableDevtools,
+      signal,
     }
-    if (ctxValueRef.current.stage === 'running') {
-      ctxValueRef.current.store.destroy()
-      oldStoreAlreadyDestroyedRef.current = true
-      ctxValueRef.current = { stage: 'loading' }
+    if (ctxValueRef.current.scope !== undefined) {
+      Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
     }
+    ctxValueRef.current = { value: { stage: 'loading' }, scope: undefined, counter: ctxValueRef.current.counter + 1 }
   }
 
   React.useEffect(() => {
-    let store: Store | undefined
-
-    void (async () => {
-      try {
-        store = await createStore({
-          schema,
-          graphQLOptions,
-          otelOptions,
-          boot,
-          adapter,
-          batchUpdates,
-          disableDevtools,
-          onBootStatus: (status) => {
-            if (ctxValueRef.current.stage === 'running') return
-            ctxValueRef.current = status
-            rerender((c) => c + 1)
-          },
-        })
-        ctxValueRef.current = { stage: 'running', store }
-        oldStoreAlreadyDestroyedRef.current = false
-        rerender((c) => c + 1)
-      } catch (e) {
-        shouldNeverHappen(`Error creating LiveStore store: ${e}`)
+    const storeScope = Scope.make().pipe(Effect.runSync)
+
+    const counter = ctxValueRef.current.counter
+
+    const setContextValue = (value: StoreContext_ | BootStatus) => {
+      if (ctxValueRef.current.counter !== counter) return
+      ctxValueRef.current.value = value
+      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
       }
-    })()
+    })
+
+    createStore({
+      storeScope,
+      schema,
+      graphQLOptions,
+      otelOptions,
+      boot,
+      adapter,
+      batchUpdates,
+      disableDevtools,
+      onBootStatus: (status) => {
+        if (ctxValueRef.current.value.stage === 'running' || ctxValueRef.current.value.stage === 'error') return
+        setContextValue(status)
+      },
+    }).pipe(
+      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),
+      Effect.tapCauseLogPretty,
+      Effect.annotateLogs({ thread: 'window' }),
+      Effect.provide(Logger.pretty),
+      Logger.withMinimumLogLevel(LogLevel.Debug),
+      Effect.runFork,
+    )
 
     return () => {
-      if (oldStoreAlreadyDestroyedRef.current === false) {
-        store?.destroy()
+      if (ctxValueRef.current.scope !== undefined) {
+        Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
+        ctxValueRef.current.scope = undefined
       }
     }
-  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools])
+  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal])
 
-  return ctxValueRef.current
+  return ctxValueRef.current.value
 }

package/src/react/useRow.test.tsx

@@ -297,7 +297,7 @@ describe.concurrent('useRow', () => {
       expect(renderCount.val).toBe(2)
 
       unmount()
-      store.destroy()
+      await store.destroy()
       span.end()
 
       const mapAttributes = (attributes: otel.Attributes) => {

package/src/reactiveQueries/sql.test.ts

@@ -24,17 +24,17 @@ describe('otel', () => {
     provider.addSpanProcessor(new SimpleSpanProcessor(exporter))
     provider.register()
 
-    const tracer = otel.trace.getTracer('test')
+    const otelTracer = otel.trace.getTracer('test')
 
-    const span = tracer.startSpan('test')
+    const span = otelTracer.startSpan('test')
     const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-    const { store } = await makeTodoMvc({ otelTracer: tracer, otelContext })
+    const { store } = await makeTodoMvc({ otelTracer, otelContext })
 
     return {
       [Symbol.dispose]: () => store.destroy(),
       store,
-      tracer,
+      otelTracer,
       exporter,
       span,
       provider,
@@ -60,7 +60,7 @@ describe('otel', () => {
       ]
     `)
 
-    store.destroy()
+    await store.destroy()
     query.destroy()
     span.end()
 
@@ -193,7 +193,7 @@ describe('otel', () => {
       }
     `)
 
-    store.destroy()
+    await store.destroy()
     query.destroy()
     span.end()