@livestore/react 0.3.0-dev.18 → 0.3.0-dev.21

package/src/LiveStoreProvider.tsx

@@ -2,9 +2,7 @@ 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,
@@ -13,14 +11,25 @@ import type {
 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,10 +43,9 @@ 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
@@ -58,6 +66,13 @@ interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
   batchUpdates: (run: () => void) => void
   disableDevtools?: boolean
   signal?: AbortSignal
+  /**
+   * Currently only used in the web adapter:
+   * If true, registers a beforeunload event listener to confirm unsaved changes.
+   *
+   * @default true
+   */
+  confirmUnsavedChanges?: boolean
 }
 
 const defaultRenderError = (error: UnexpectedError | unknown) => (
@@ -78,11 +93,10 @@ const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreInterrupte
   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,17 +106,18 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   batchUpdates,
   disableDevtools,
   signal,
-}: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): React.ReactElement => {
+  confirmUnsavedChanges = true,
+}: LiveStoreProviderProps & { children?: ReactNode }): React.ReactElement => {
   const storeCtx = useCreateStore({
     storeId,
     schema,
-    graphQLOptions,
     otelOptions,
     boot,
     adapter,
     batchUpdates,
     disableDevtools,
     signal,
+    confirmUnsavedChanges,
   })
 
   if (storeCtx.stage === 'error') {
@@ -138,17 +153,19 @@ 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> & {
+  context,
+  params,
+  confirmUnsavedChanges,
+}: CreateStoreOptions<LiveStoreSchema> & {
   signal?: AbortSignal
   otelOptions?: Partial<OtelOptions>
 }) => {
@@ -169,13 +186,15 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
 
   const inputPropsCacheRef = React.useRef({
     schema,
-    graphQLOptions,
     otelOptions,
     boot,
     adapter,
     batchUpdates,
     disableDevtools,
     signal,
+    context,
+    params,
+    confirmUnsavedChanges,
   })
 
   const interrupt = (
@@ -194,23 +213,27 @@ 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 ||
     inputPropsCacheRef.current.batchUpdates !== batchUpdates ||
     inputPropsCacheRef.current.disableDevtools !== disableDevtools ||
-    inputPropsCacheRef.current.signal !== signal
+    inputPropsCacheRef.current.signal !== signal ||
+    inputPropsCacheRef.current.context !== context ||
+    inputPropsCacheRef.current.params !== params ||
+    inputPropsCacheRef.current.confirmUnsavedChanges !== confirmUnsavedChanges
   ) {
     inputPropsCacheRef.current = {
       schema,
-      graphQLOptions,
       otelOptions,
       boot,
       adapter,
       batchUpdates,
       disableDevtools,
       signal,
+      context,
+      params,
+      confirmUnsavedChanges,
     }
     if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
       interrupt(
@@ -268,12 +291,14 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         const store = yield* createStore({
           schema,
           storeId,
-          graphQLOptions,
           boot,
           adapter,
           batchUpdates,
           disableDevtools,
           shutdownDeferred,
+          context,
+          params,
+          confirmUnsavedChanges,
           onBootStatus: (status) => {
             if (ctxValueRef.current.value.stage === 'running' || ctxValueRef.current.value.stage === 'error') return
             // NOTE sometimes when status come in in rapid succession, only the last value will be rendered by React
@@ -288,7 +313,7 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         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.StoreInterrupted', (cause) => shutdownContext(cause)),
         Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
@@ -322,7 +347,19 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         ctxValueRef.current.shutdownDeferred = undefined
       }
     }
-  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal, storeId])
+  }, [
+    schema,
+    otelOptions,
+    boot,
+    adapter,
+    batchUpdates,
+    disableDevtools,
+    signal,
+    storeId,
+    context,
+    params,
+    confirmUnsavedChanges,
+  ])
 
   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