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

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'
 
@@ -46,7 +50,7 @@ export {
 
 export { SqliteAst, SqliteDsl } from 'effect-db-schema'
 
-export { isEqual } from 'lodash-es'
+export { deepEqual } from '@livestore/utils'
 
 export type {
   StoreAdapter as DatabaseImpl,

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/useQuery.ts

@@ -1,5 +1,5 @@
+import { deepEqual } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
-import { isEqual } from 'lodash-es'
 import React from 'react'
 
 import type { GetResult, LiveQueryAny } from '../reactiveQueries/base-class.js'
@@ -90,7 +90,7 @@ export const useQueryRef = <TQuery extends LiveQueryAny>(
         // NOTE: we return a reference to the result object within LiveStore;
         // this implies that app code must not mutate the results, or else
         // there may be weird reactivity bugs.
-        if (isEqual(newValue, valueRef.current) === false) {
+        if (deepEqual(newValue, valueRef.current) === false) {
           setValue(newValue)
         }
       },

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/react/useRow.ts

@@ -1,11 +1,8 @@
 import type { QueryInfo } from '@livestore/common'
-import {} from // deriveCreateMutationDef as deriveCreateMutationDef_,
-// updateMutationForQueryInfo as updateMutationForQueryInfo_,
-'@livestore/common'
 import { DbSchema } from '@livestore/common/schema'
 import { shouldNeverHappen } from '@livestore/utils'
+import { ReadonlyRecord } from '@livestore/utils/effect'
 import type { SqliteDsl } from 'effect-db-schema'
-import { mapValues } from 'lodash-es'
 import React from 'react'
 
 import type { LiveQuery, ReactivityGraph } from '../index.js'
@@ -133,7 +130,7 @@ export const useRow: {
       }
     } else {
       const setState = // TODO: do we have a better type for the values that can go in SQLite?
-        mapValues(sqliteTableDef.columns, (column, columnName) => (newValueOrFn: any) => {
+        ReadonlyRecord.map(sqliteTableDef.columns, (column, columnName) => (newValueOrFn: any) => {
           const newValue =
             // @ts-expect-error TODO fix typing
             typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current[columnName]) : newValueOrFn

package/src/reactive.ts

@@ -25,9 +25,8 @@
 
 import { BoundArray } from '@livestore/common'
 import type { PrettifyFlat } from '@livestore/utils'
-import { shouldNeverHappen } from '@livestore/utils'
+import { deepEqual, shouldNeverHappen } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
-import { isEqual } from 'lodash-es'
 // import { getDurationMsFromSpan } from './otel.js'
 
 export const NOT_REFRESHED_YET = Symbol.for('NOT_REFRESHED_YET')
@@ -234,7 +233,7 @@ export class ReactiveGraph<
       super: new Set(),
       label: options?.label,
       meta: options?.meta,
-      equal: options?.equal ?? isEqual,
+      equal: options?.equal ?? deepEqual,
       refreshes: 0,
     }
 
@@ -331,7 +330,7 @@ export class ReactiveGraph<
       recomputations: 0,
       label: options?.label,
       meta: options?.meta,
-      equal: options?.equal ?? isEqual,
+      equal: options?.equal ?? deepEqual,
       __getResult: getResult,
     }
 

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