@livestore/livestore 0.0.56-dev.2 → 0.0.56-dev.3

package/src/effect/LiveStore.ts

@@ -5,40 +5,12 @@ import { Context, Deferred, Duration, Effect, FiberSet, Layer, OtelTracer, pipe
 import * as otel from '@opentelemetry/api'
 import type { GraphQLSchema } from 'graphql'
 
-import type { LiveQuery } from '../reactiveQueries/base-class.js'
-import type { BaseGraphQLContext, GraphQLOptions, OtelOptions, Store } from '../store.js'
+import type { BaseGraphQLContext } from '../store.js'
 import { createStore } from '../store.js'
+import type { LiveStoreContextRunning as LiveStoreContextRunning_ } from '../store-context.js'
 import type { SynchronousDatabaseWrapper } from '../SynchronousDatabaseWrapper.js'
 
-// TODO get rid of `LiveStoreContext` wrapper and only expose the `Store` directly
-export type LiveStoreContext =
-  | LiveStoreContextRunning
-  | {
-      stage: 'error'
-      error: UnexpectedError | unknown
-    }
-  | {
-      stage: 'shutdown'
-    }
-
-export type LiveStoreContextRunning = {
-  stage: 'running'
-  store: Store
-}
-
-export type QueryDefinition = <TResult>(store: Store) => LiveQuery<TResult>
-
-export type LiveStoreCreateStoreOptions<GraphQLContext extends BaseGraphQLContext> = {
-  schema: LiveStoreSchema
-  graphQLOptions?: GraphQLOptions<GraphQLContext>
-  otelOptions?: OtelOptions
-  boot?: (db: BootDb, parentSpan: otel.Span) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
-  adapter: StoreAdapterFactory
-  batchUpdates?: (run: () => void) => void
-  disableDevtools?: boolean
-  signal?: AbortSignal
-}
-
+export type LiveStoreContextRunning = LiveStoreContextRunning_
 export const LiveStoreContextRunning = Context.GenericTag<LiveStoreContextRunning>(
   '@livestore/livestore/effect/LiveStoreContextRunning',
 )
@@ -48,8 +20,6 @@ export const DeferredStoreContext = Context.GenericTag<DeferredStoreContext>(
   '@livestore/livestore/effect/DeferredStoreContext',
 )
 
-// export const DeferredStoreContext = Effect.cached(Effect.flatMap(StoreContext, (_) => Effect.succeed(_)))
-
 export type LiveStoreContextProps<GraphQLContext extends BaseGraphQLContext> = {
   schema: LiveStoreSchema
   graphQLOptions?: {
@@ -114,7 +84,8 @@ export const makeLiveStoreContext = <GraphQLContext extends BaseGraphQLContext>(
         onBootStatus,
       })
 
-      window.__debugLiveStore = store
+      window.__debugLiveStore ??= {}
+      window.__debugLiveStore[schema.key] = store
 
       return { stage: 'running', store } satisfies LiveStoreContextRunning
     }),

package/src/index.ts

@@ -1,11 +1,7 @@
 export { Store, createStorePromise, createStore } from './store.js'
 export type { BaseGraphQLContext, QueryDebugInfo, RefreshReason } from './store.js'
 
-export type {
-  QueryDefinition,
-  LiveStoreCreateStoreOptions,
-  LiveStoreContextRunning as LiveStoreContext,
-} from './effect/LiveStore.js'
+export type { LiveStoreContextRunning as LiveStoreContext } from './effect/LiveStore.js'
 
 export { SynchronousDatabaseWrapper, emptyDebugInfo } from './SynchronousDatabaseWrapper.js'
 
@@ -52,8 +48,4 @@ export { SqliteAst, SqliteDsl } from 'effect-db-schema'
 
 export { deepEqual } from '@livestore/utils'
 
-export type {
-  StoreAdapter as DatabaseImpl,
-  StoreAdapterFactory as DatabaseFactory,
-  PreparedStatement,
-} from '@livestore/common'
+export type { StoreAdapter, StoreAdapterFactory, PreparedStatement } from '@livestore/common'

package/src/react/LiveStoreProvider.test.tsx

@@ -65,7 +65,7 @@ describe('LiveStoreProvider', () => {
 
     abortController.abort()
 
-    await waitFor(() => screen.getByText('LiveStore Shutdown'))
+    await waitFor(() => screen.getByText('LiveStore Shutdown due to abort signal'))
   })
 
   it('error during boot', async () => {

package/src/react/LiveStoreProvider.tsx

@@ -1,4 +1,5 @@
-import { type BootDb, type BootStatus, type StoreAdapterFactory, UnexpectedError } from '@livestore/common'
+import type { BootDb, BootStatus, IntentionalShutdownCause, StoreAdapterFactory } from '@livestore/common'
+import { UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import { errorToString } from '@livestore/utils'
 import { Effect, FiberSet, Logger, LogLevel, Schema } from '@livestore/utils/effect'
@@ -6,15 +7,12 @@ 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, ForceStoreShutdown, GraphQLOptions, OtelOptions, StoreShutdown } from '../store.js'
+import type { BaseGraphQLContext, CreateStoreOptions, GraphQLOptions, OtelOptions } from '../store.js'
 import { createStore } from '../store.js'
+import type { LiveStoreContext as StoreContext_ } from '../store-context.js'
+import { StoreAbort, StoreInterrupted } from '../store-context.js'
 import { LiveStoreContext } from './LiveStoreContext.js'
 
-export class StoreAbort extends Schema.TaggedError<StoreAbort>()('LiveStore.StoreAbort', {}) {}
-export class StoreInterrupted extends Schema.TaggedError<StoreInterrupted>()('LiveStore.StoreInterrupted', {}) {}
-
 interface LiveStoreProviderProps<GraphQLContext> {
   schema: LiveStoreSchema
   boot?: (db: BootDb, parentSpan: otel.Span) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
@@ -22,7 +20,7 @@ interface LiveStoreProviderProps<GraphQLContext> {
   otelOptions?: OtelOptions
   renderLoading: (status: BootStatus) => ReactElement
   renderError?: (error: UnexpectedError | unknown) => ReactElement
-  renderShutdown?: () => ReactElement
+  renderShutdown?: (cause: IntentionalShutdownCause | StoreAbort) => ReactElement
   adapter: StoreAdapterFactory
   batchUpdates?: (run: () => void) => void
   disableDevtools?: boolean
@@ -32,7 +30,18 @@ interface LiveStoreProviderProps<GraphQLContext> {
 const defaultRenderError = (error: UnexpectedError | unknown) => (
   <>{Schema.is(UnexpectedError)(error) ? error.toString() : errorToString(error)}</>
 )
-const defaultRenderShutdown = () => <>LiveStore Shutdown</>
+const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreAbort) => {
+  const reason =
+    cause._tag === 'LiveStore.StoreAbort'
+      ? 'abort signal'
+      : cause.reason === 'devtools-import'
+        ? 'devtools import'
+        : cause.reason === 'devtools-reset'
+          ? 'devtools reset'
+          : 'unknown reason'
+
+  return <>LiveStore Shutdown due to {reason}</>
+}
 
 export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   renderLoading,
@@ -64,14 +73,15 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   }
 
   if (storeCtx.stage === 'shutdown') {
-    return renderShutdown()
+    return renderShutdown(storeCtx.cause)
   }
 
   if (storeCtx.stage !== 'running') {
     return renderLoading(storeCtx)
   }
 
-  window.__debugLiveStore = storeCtx.store
+  window.__debugLiveStore ??= {}
+  window.__debugLiveStore[schema.key] = storeCtx.store
 
   return <LiveStoreContext.Provider value={storeCtx}>{children}</LiveStoreContext.Provider>
 }
@@ -96,8 +106,9 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   adapter,
   batchUpdates,
   disableDevtools,
+  reactivityGraph,
   signal,
-}: LiveStoreCreateStoreOptions<GraphQLContext>) => {
+}: CreateStoreOptions<GraphQLContext, LiveStoreSchema> & { signal?: AbortSignal }) => {
   const [_, rerender] = React.useState(0)
   const ctxValueRef = React.useRef<{
     value: StoreContext_ | BootStatus
@@ -119,6 +130,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     adapter,
     batchUpdates,
     disableDevtools,
+    reactivityGraph,
     signal,
   })
 
@@ -126,7 +138,10 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     Effect.gen(function* () {
       yield* FiberSet.clear(fiberSet)
       yield* FiberSet.run(fiberSet, Effect.fail(error))
-    }).pipe(Effect.ignoreLogged, Effect.runFork)
+    }).pipe(
+      Effect.tapErrorCause((cause) => Effect.logDebug(`[@livestore/livestore/react] interupting`, cause)),
+      Effect.runFork,
+    )
 
   if (
     inputPropsCacheRef.current.schema !== schema ||
@@ -136,6 +151,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     inputPropsCacheRef.current.adapter !== adapter ||
     inputPropsCacheRef.current.batchUpdates !== batchUpdates ||
     inputPropsCacheRef.current.disableDevtools !== disableDevtools ||
+    inputPropsCacheRef.current.reactivityGraph !== reactivityGraph ||
     inputPropsCacheRef.current.signal !== signal
   ) {
     inputPropsCacheRef.current = {
@@ -146,6 +162,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       adapter,
       batchUpdates,
       disableDevtools,
+      reactivityGraph,
       signal,
     }
     if (ctxValueRef.current.fiberSet !== undefined) {
@@ -174,7 +191,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     Effect.gen(function* () {
       const fiberSet = yield* FiberSet.make<
         unknown,
-        UnexpectedError | ForceStoreShutdown | StoreAbort | StoreInterrupted | StoreShutdown
+        UnexpectedError | IntentionalShutdownCause | StoreAbort | StoreInterrupted
       >()
 
       ctxValueRef.current.fiberSet = fiberSet
@@ -187,6 +204,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
           otelOptions,
           boot,
           adapter,
+          reactivityGraph,
           batchUpdates,
           disableDevtools,
           onBootStatus: (status) => {
@@ -200,12 +218,12 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         yield* Effect.never
       }).pipe(Effect.scoped, FiberSet.run(fiberSet))
 
-      const shutdownContext = Effect.sync(() => setContextValue({ stage: 'shutdown' }))
+      const shutdownContext = (cause: IntentionalShutdownCause | StoreAbort) =>
+        Effect.sync(() => setContextValue({ stage: 'shutdown', cause }))
 
       yield* FiberSet.join(fiberSet).pipe(
-        Effect.catchTag('LiveStore.StoreShutdown', () => shutdownContext),
-        Effect.catchTag('LiveStore.ForceStoreShutdown', () => shutdownContext),
-        Effect.catchTag('LiveStore.StoreAbort', () => shutdownContext),
+        Effect.catchTag('LiveStore.IntentionalShutdownCause', (cause) => shutdownContext(cause)),
+        Effect.catchTag('LiveStore.StoreAbort', (cause) => shutdownContext(cause)),
         Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
         Effect.tapDefect((defect) => Effect.sync(() => setContextValue({ stage: 'error', error: defect }))),
         Effect.exit,
@@ -229,7 +247,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         ctxValueRef.current.fiberSet = undefined
       }
     }
-  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal])
+  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal, reactivityGraph])
 
   return ctxValueRef.current.value
 }

package/src/react/useQuery.test.tsx

@@ -1,4 +1,4 @@
-import { Schema } from '@livestore/utils/effect'
+import { Effect, Schema } from '@livestore/utils/effect'
 import { renderHook } from '@testing-library/react'
 import React from 'react'
 import { describe, expect, it } from 'vitest'
@@ -8,73 +8,75 @@ import { querySQL } from '../reactiveQueries/sql.js'
 import * as LiveStoreReact from './index.js'
 
 describe('useQuery', () => {
-  it('simple', async () => {
-    const { wrapper, store, makeRenderCount } = await makeTodoMvc()
+  it('simple', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
 
-    const renderCount = makeRenderCount()
+      const renderCount = makeRenderCount()
 
-    const allTodos$ = querySQL(`select * from todos`, { schema: Schema.Array(tables.todos.schema) })
+      const allTodos$ = querySQL(`select * from todos`, { schema: Schema.Array(tables.todos.schema) })
 
-    const { result } = renderHook(
-      () => {
-        renderCount.inc()
+      const { result } = renderHook(
+        () => {
+          renderCount.inc()
 
-        return LiveStoreReact.useQuery(allTodos$)
-      },
-      { wrapper },
-    )
+          return LiveStoreReact.useQuery(allTodos$)
+        },
+        { wrapper },
+      )
 
-    expect(result.current.length).toBe(0)
-    expect(renderCount.val).toBe(1)
+      expect(result.current.length).toBe(0)
+      expect(renderCount.val).toBe(1)
 
-    React.act(() => store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false })))
+      React.act(() => store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false })))
 
-    expect(result.current.length).toBe(1)
-    expect(result.current[0]!.text).toBe('buy milk')
-    expect(renderCount.val).toBe(2)
-  })
+      expect(result.current.length).toBe(1)
+      expect(result.current[0]!.text).toBe('buy milk')
+      expect(renderCount.val).toBe(2)
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
-  it('same `useQuery` hook invoked with different queries', async () => {
-    const { wrapper, store, makeRenderCount } = await makeTodoMvc()
+  it('same `useQuery` hook invoked with different queries', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
 
-    const renderCount = makeRenderCount()
+      const renderCount = makeRenderCount()
 
-    const todo1$ = querySQL(`select * from todos where id = 't1'`, {
-      label: 'libraryTracksView1',
-      schema: Schema.Array(tables.todos.schema),
-    })
-    const todo2$ = querySQL(`select * from todos where id = 't2'`, {
-      label: 'libraryTracksView2',
-      schema: Schema.Array(tables.todos.schema),
-    })
+      const todo1$ = querySQL(`select * from todos where id = 't1'`, {
+        label: 'libraryTracksView1',
+        schema: Schema.Array(tables.todos.schema),
+      })
+      const todo2$ = querySQL(`select * from todos where id = 't2'`, {
+        label: 'libraryTracksView2',
+        schema: Schema.Array(tables.todos.schema),
+      })
 
-    store.mutate(
-      todos.insert({ id: 't1', text: 'buy milk', completed: false }),
-      todos.insert({ id: 't2', text: 'buy eggs', completed: false }),
-    )
+      store.mutate(
+        todos.insert({ id: 't1', text: 'buy milk', completed: false }),
+        todos.insert({ id: 't2', text: 'buy eggs', completed: false }),
+      )
 
-    const { result, rerender } = renderHook(
-      (todoId: string) => {
-        renderCount.inc()
+      const { result, rerender } = renderHook(
+        (todoId: string) => {
+          renderCount.inc()
 
-        const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId])
+          const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId])
 
-        return LiveStoreReact.useQuery(query$)[0]!.text
-      },
-      { wrapper, initialProps: 't1' },
-    )
+          return LiveStoreReact.useQuery(query$)[0]!.text
+        },
+        { wrapper, initialProps: 't1' },
+      )
 
-    expect(result.current).toBe('buy milk')
-    expect(renderCount.val).toBe(1)
+      expect(result.current).toBe('buy milk')
+      expect(renderCount.val).toBe(1)
 
-    React.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })))
+      React.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })))
 
-    expect(result.current).toBe('buy soy milk')
-    expect(renderCount.val).toBe(2)
+      expect(result.current).toBe('buy soy milk')
+      expect(renderCount.val).toBe(2)
 
-    rerender('t2')
+      rerender('t2')
 
-    expect(result.current).toBe('buy eggs')
-    expect(renderCount.val).toBe(3)
-  })
+      expect(result.current).toBe('buy eggs')
+      expect(renderCount.val).toBe(3)
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 })