@livestore/react 0.0.0-snapshot-2411da6706c12365b5aa4533b551b9b6554d4617 → 0.0.0-snapshot-97ca7eac46b6a583b22d40189126d06a377ec1b0

package/src/LiveStoreProvider.tsx

@@ -2,25 +2,34 @@ import type { Adapter, BootStatus, IntentionalShutdownCause, MigrationsReport }
 import { provideOtel, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import type {
-  BaseGraphQLContext,
   CreateStoreOptions,
-  GraphQLOptions,
   LiveStoreContext as StoreContext_,
   OtelOptions,
   ShutdownDeferred,
   Store,
 } from '@livestore/livestore'
-import { createStore, StoreAbort, StoreInterrupted } from '@livestore/livestore'
+import { createStore, StoreInterrupted } from '@livestore/livestore'
 import { errorToString, LS_DEV } from '@livestore/utils'
 import type { OtelTracer } from '@livestore/utils/effect'
-import { Deferred, Effect, Exit, identity, Logger, LogLevel, Schema, Scope, TaskTracing } from '@livestore/utils/effect'
+import {
+  Cause,
+  Deferred,
+  Effect,
+  Exit,
+  identity,
+  Logger,
+  LogLevel,
+  Schema,
+  Scope,
+  TaskTracing,
+} from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
 
 import { LiveStoreContext } from './LiveStoreContext.js'
 
-interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
+export interface LiveStoreProviderProps {
   schema: LiveStoreSchema
   /**
    * The `storeId` can be used to isolate multiple stores from each other.
@@ -34,14 +43,13 @@ interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
    */
   storeId?: string
   boot?: (
-    store: Store<GraphQLContext, LiveStoreSchema>,
+    store: Store<LiveStoreSchema>,
     ctx: { migrationsReport: MigrationsReport; parentSpan: otel.Span },
   ) => void | Promise<void> | Effect.Effect<void, unknown, OtelTracer.OtelTracer>
-  graphQLOptions?: GraphQLOptions<GraphQLContext>
   otelOptions?: Partial<OtelOptions>
   renderLoading: (status: BootStatus) => ReactElement
   renderError?: (error: UnexpectedError | unknown) => ReactElement
-  renderShutdown?: (cause: IntentionalShutdownCause | StoreAbort) => ReactElement
+  renderShutdown?: (cause: IntentionalShutdownCause | StoreInterrupted) => ReactElement
   adapter: Adapter
   /**
    * In order for LiveStore to apply multiple mutations in a single render,
@@ -63,10 +71,10 @@ interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
 const defaultRenderError = (error: UnexpectedError | unknown) => (
   <>{Schema.is(UnexpectedError)(error) ? error.toString() : errorToString(error)}</>
 )
-const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreAbort) => {
+const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreInterrupted) => {
   const reason =
-    cause._tag === 'LiveStore.StoreAbort'
-      ? 'abort signal'
+    cause._tag === 'LiveStore.StoreInterrupted'
+      ? `interrupted due to: ${cause.reason}`
       : cause.reason === 'devtools-import'
         ? 'devtools import'
         : cause.reason === 'devtools-reset'
@@ -78,11 +86,10 @@ const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreAbort) =>
   return <>LiveStore Shutdown due to {reason}</>
 }
 
-export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
+export const LiveStoreProvider = ({
   renderLoading,
   renderError = defaultRenderError,
   renderShutdown = defaultRenderShutdown,
-  graphQLOptions,
   otelOptions,
   children,
   schema,
@@ -92,11 +99,10 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   batchUpdates,
   disableDevtools,
   signal,
-}: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): React.ReactElement => {
+}: LiveStoreProviderProps & { children?: ReactNode }): React.ReactElement => {
   const storeCtx = useCreateStore({
     storeId,
     schema,
-    graphQLOptions,
     otelOptions,
     boot,
     adapter,
@@ -138,17 +144,16 @@ const withSemaphore = (storeId: SchemaKey) => {
   return semaphore.withPermits(1)
 }
 
-const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
+const useCreateStore = ({
   schema,
   storeId,
-  graphQLOptions,
   otelOptions,
   boot,
   adapter,
   batchUpdates,
   disableDevtools,
   signal,
-}: CreateStoreOptions<GraphQLContext, LiveStoreSchema> & {
+}: CreateStoreOptions<LiveStoreSchema> & {
   signal?: AbortSignal
   otelOptions?: Partial<OtelOptions>
 }) => {
@@ -169,7 +174,6 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
 
   const inputPropsCacheRef = React.useRef({
     schema,
-    graphQLOptions,
     otelOptions,
     boot,
     adapter,
@@ -181,7 +185,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   const interrupt = (
     componentScope: Scope.CloseableScope,
     shutdownDeferred: ShutdownDeferred,
-    error: StoreAbort | StoreInterrupted,
+    error: StoreInterrupted,
   ) =>
     Effect.gen(function* () {
       // console.log('[@livestore/livestore/react] interupting', error)
@@ -194,7 +198,6 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
 
   if (
     inputPropsCacheRef.current.schema !== schema ||
-    inputPropsCacheRef.current.graphQLOptions !== graphQLOptions ||
     inputPropsCacheRef.current.otelOptions !== otelOptions ||
     inputPropsCacheRef.current.boot !== boot ||
     inputPropsCacheRef.current.adapter !== adapter ||
@@ -204,7 +207,6 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   ) {
     inputPropsCacheRef.current = {
       schema,
-      graphQLOptions,
       otelOptions,
       boot,
       adapter,
@@ -213,7 +215,11 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       signal,
     }
     if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
-      interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreInterrupted())
+      interrupt(
+        ctxValueRef.current.componentScope,
+        ctxValueRef.current.shutdownDeferred,
+        new StoreInterrupted({ reason: 're-rendering due to changed input props' }),
+      )
       ctxValueRef.current.componentScope = undefined
       ctxValueRef.current.shutdownDeferred = undefined
     }
@@ -240,7 +246,11 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         ctxValueRef.current.shutdownDeferred !== undefined &&
         ctxValueRef.current.counter === counter
       ) {
-        interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreAbort())
+        interrupt(
+          ctxValueRef.current.componentScope,
+          ctxValueRef.current.shutdownDeferred,
+          new StoreInterrupted({ reason: 'Aborted via provided AbortController' }),
+        )
         ctxValueRef.current.componentScope = undefined
         ctxValueRef.current.shutdownDeferred = undefined
       }
@@ -250,7 +260,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       const componentScope = yield* Scope.make()
       const shutdownDeferred = yield* Deferred.make<
         void,
-        UnexpectedError | IntentionalShutdownCause | StoreAbort | StoreInterrupted
+        UnexpectedError | IntentionalShutdownCause | StoreInterrupted
       >()
 
       ctxValueRef.current.componentScope = componentScope
@@ -260,7 +270,6 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         const store = yield* createStore({
           schema,
           storeId,
-          graphQLOptions,
           boot,
           adapter,
           batchUpdates,
@@ -276,13 +285,13 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         setContextValue({ stage: 'running', store })
       }).pipe(Scope.extend(componentScope), Effect.forkIn(componentScope))
 
-      const shutdownContext = (cause: IntentionalShutdownCause | StoreAbort) =>
+      const shutdownContext = (cause: IntentionalShutdownCause | StoreInterrupted) =>
         Effect.sync(() => setContextValue({ stage: 'shutdown', cause }))
 
       yield* Deferred.await(shutdownDeferred).pipe(
-        Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] shutdown', cause)),
+        Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] shutdown', Cause.pretty(cause))),
         Effect.catchTag('LiveStore.IntentionalShutdownCause', (cause) => shutdownContext(cause)),
-        Effect.catchTag('LiveStore.StoreAbort', (cause) => shutdownContext(cause)),
+        Effect.catchTag('LiveStore.StoreInterrupted', (cause) => shutdownContext(cause)),
         Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
         Effect.tapDefect((defect) => Effect.sync(() => setContextValue({ stage: 'error', error: defect }))),
         Effect.exit,
@@ -305,12 +314,16 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
 
     return () => {
       if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
-        interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreInterrupted())
+        interrupt(
+          ctxValueRef.current.componentScope,
+          ctxValueRef.current.shutdownDeferred,
+          new StoreInterrupted({ reason: 'unmounting component' }),
+        )
         ctxValueRef.current.componentScope = undefined
         ctxValueRef.current.shutdownDeferred = undefined
       }
     }
-  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal, storeId])
+  }, [schema, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal, storeId])
 
   return ctxValueRef.current.value
 }

package/src/useAtom.ts

@@ -1,6 +1,7 @@
 import type { DerivedMutationHelperFns, QueryInfo } from '@livestore/common'
 import type { DbSchema, SqliteDsl } from '@livestore/common/schema'
-import type { GetResult, LiveQueryDef, Store } from '@livestore/livestore'
+import type { Store } from '@livestore/livestore'
+import type { LiveQueries } from '@livestore/livestore/internal'
 import { shouldNeverHappen } from '@livestore/utils'
 import React from 'react'
 
@@ -10,13 +11,16 @@ import type { Dispatch, SetStateAction } from './useRow.js'
 
 export const useAtom = <
   // TODO also support colJsonValue
-  TQuery extends LiveQueryDef<any, QueryInfo.Row | QueryInfo.Col>,
+  TQuery extends LiveQueries.LiveQueryDef<any, QueryInfo.Row | QueryInfo.Col>,
 >(
   queryDef: TQuery,
   options?: {
     store?: Store
   },
-): [value: GetResult<TQuery>, setValue: Dispatch<SetStateAction<Partial<GetResult<TQuery>>>>] => {
+): [
+  value: LiveQueries.GetResult<TQuery>,
+  setValue: Dispatch<SetStateAction<Partial<LiveQueries.GetResult<TQuery>>>>,
+] => {
   const queryRef = useQueryRef(queryDef, { store: options?.store })
   const query$ = queryRef.queryRcRef.value
 
@@ -28,7 +32,7 @@ export const useAtom = <
   const { store } = useStore()
 
   // TODO make API equivalent to useRow
-  const setValue = React.useMemo<Dispatch<SetStateAction<Partial<GetResult<TQuery>>>>>(
+  const setValue = React.useMemo<Dispatch<SetStateAction<Partial<LiveQueries.GetResult<TQuery>>>>>(
     () => (newValueOrFn: any) => {
       const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(queryRef.valueRef.current) : newValueOrFn
       const table = query$.queryInfo.table as DbSchema.TableDef &

package/src/useQuery.ts

@@ -1,5 +1,6 @@
-import type { GetResult, LiveQuery, LiveQueryDef, LiveQueryDefAny, RcRef, Store } from '@livestore/livestore'
+import type { LiveQuery, LiveQueryDef, Store } from '@livestore/livestore'
 import { extractStackInfoFromStackTrace, stackInfoToString } from '@livestore/livestore'
+import type { LiveQueries } from '@livestore/livestore/internal'
 import { deepEqual, indent } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
 import React from 'react'
@@ -20,17 +21,17 @@ import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInp
  * }
  * ```
  */
-export const useQuery = <TQuery extends LiveQueryDefAny>(
+export const useQuery = <TQuery extends LiveQueryDef.Any>(
   queryDef: TQuery,
   options?: { store?: Store },
-): GetResult<TQuery> => useQueryRef(queryDef, options).valueRef.current
+): LiveQueries.GetResult<TQuery> => useQueryRef(queryDef, options).valueRef.current
 
-type GetQueryInfo<TQuery extends LiveQueryDefAny> =
+type GetQueryInfo<TQuery extends LiveQueryDef.Any> =
   TQuery extends LiveQueryDef<infer _1, infer TQueryInfo> ? TQueryInfo : never
 
 /**
  */
-export const useQueryRef = <TQuery extends LiveQueryDefAny>(
+export const useQueryRef = <TQuery extends LiveQueryDef.Any>(
   queryDef: TQuery,
   options?: {
     store?: Store
@@ -40,8 +41,8 @@ export const useQueryRef = <TQuery extends LiveQueryDefAny>(
     otelSpanName?: string
   },
 ): {
-  valueRef: React.RefObject<GetResult<TQuery>>
-  queryRcRef: RcRef<LiveQuery<GetResult<TQuery>, GetQueryInfo<TQuery>>>
+  valueRef: React.RefObject<LiveQueries.GetResult<TQuery>>
+  queryRcRef: LiveQueries.RcRef<LiveQuery<LiveQueries.GetResult<TQuery>, GetQueryInfo<TQuery>>>
 } => {
   const { store } = useStore({ store: options?.store })
 
@@ -76,7 +77,7 @@ export const useQueryRef = <TQuery extends LiveQueryDefAny>(
     // which takes care of disposing the queryRcRef
     () => {},
   )
-  const query$ = queryRcRef.value as LiveQuery<GetResult<TQuery>, GetQueryInfo<TQuery>>
+  const query$ = queryRcRef.value as LiveQuery<LiveQueries.GetResult<TQuery>, GetQueryInfo<TQuery>>
 
   React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`)
   // console.debug(`LiveStore:useQuery:${query$.id}:${query$.label}`)
@@ -111,7 +112,7 @@ Stack trace:
   }, [otelContext, query$, stackInfo])
 
   // We know the query has a result by the time we use it; so we can synchronously populate a default state
-  const [valueRef, setValue] = useStateRefWithReactiveInput<GetResult<TQuery>>(initialResult)
+  const [valueRef, setValue] = useStateRefWithReactiveInput<LiveQueries.GetResult<TQuery>>(initialResult)
 
   // TODO we probably need to change the order of `useEffect` calls, so we destroy the query at the end
   // before calling the LS `onEffect` on it