@livestore/react 0.2.0 → 0.3.0-dev.11

package/src/LiveStoreProvider.tsx

@@ -1,5 +1,5 @@
 import type { Adapter, BootStatus, IntentionalShutdownCause } from '@livestore/common'
-import { UnexpectedError } from '@livestore/common'
+import { provideOtel, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import type {
   BaseGraphQLContext,
@@ -7,11 +7,13 @@ import type {
   GraphQLOptions,
   LiveStoreContext as StoreContext_,
   OtelOptions,
+  ShutdownDeferred,
   Store,
 } from '@livestore/livestore'
 import { createStore, StoreAbort, StoreInterrupted } from '@livestore/livestore'
-import { errorToString } from '@livestore/utils'
-import { Effect, FiberSet, Logger, LogLevel, Schema } from '@livestore/utils/effect'
+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 type * as otel from '@opentelemetry/api'
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
@@ -26,7 +28,7 @@ interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
    *
    * The `storeId` is also used for persistence.
    *
-   * Make sure to also provide `storeId` to `mountDevtools` in `_devtools.html`.
+   * Make sure to also configure `storeId` in LiveStore Devtools (e.g. in Vite plugin).
    *
    * @default 'default'
    */
@@ -34,9 +36,9 @@ interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
   boot?: (
     store: Store<GraphQLContext, LiveStoreSchema>,
     parentSpan: otel.Span,
-  ) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
+  ) => void | Promise<void> | Effect.Effect<void, unknown, OtelTracer.OtelTracer>
   graphQLOptions?: GraphQLOptions<GraphQLContext>
-  otelOptions?: OtelOptions
+  otelOptions?: Partial<OtelOptions>
   renderLoading: (status: BootStatus) => ReactElement
   renderError?: (error: UnexpectedError | unknown) => ReactElement
   renderShutdown?: (cause: IntentionalShutdownCause | StoreAbort) => ReactElement
@@ -69,7 +71,9 @@ const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreAbort) =>
         ? 'devtools import'
         : cause.reason === 'devtools-reset'
           ? 'devtools reset'
-          : 'unknown reason'
+          : cause.reason === 'manual'
+            ? 'manual shutdown'
+            : 'unknown reason'
 
   return <>LiveStore Shutdown due to {reason}</>
 }
@@ -88,7 +92,7 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   batchUpdates,
   disableDevtools,
   signal,
-}: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): JSX.Element => {
+}: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): React.ReactElement => {
   const storeCtx = useCreateStore({
     storeId,
     schema,
@@ -114,6 +118,9 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
   }
 
   globalThis.__debugLiveStore ??= {}
+  if (Object.keys(globalThis.__debugLiveStore).length === 0) {
+    globalThis.__debugLiveStore['_'] = storeCtx.store
+  }
   globalThis.__debugLiveStore[storeId] = storeCtx.store
 
   return <LiveStoreContext.Provider value={storeCtx}>{children}</LiveStoreContext.Provider>
@@ -140,17 +147,21 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   adapter,
   batchUpdates,
   disableDevtools,
-  reactivityGraph,
   signal,
-}: CreateStoreOptions<GraphQLContext, LiveStoreSchema> & { signal?: AbortSignal }) => {
+}: CreateStoreOptions<GraphQLContext, LiveStoreSchema> & {
+  signal?: AbortSignal
+  otelOptions?: Partial<OtelOptions>
+}) => {
   const [_, rerender] = React.useState(0)
   const ctxValueRef = React.useRef<{
     value: StoreContext_ | BootStatus
-    fiberSet: FiberSet.FiberSet | undefined
+    componentScope: Scope.CloseableScope | undefined
+    shutdownDeferred: ShutdownDeferred | undefined
     counter: number
   }>({
     value: { stage: 'loading' },
-    fiberSet: undefined,
+    componentScope: undefined,
+    shutdownDeferred: undefined,
     counter: 0,
   })
 
@@ -164,16 +175,20 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     adapter,
     batchUpdates,
     disableDevtools,
-    reactivityGraph,
     signal,
   })
 
-  const interrupt = (fiberSet: FiberSet.FiberSet, error: StoreAbort | StoreInterrupted) =>
+  const interrupt = (
+    componentScope: Scope.CloseableScope,
+    shutdownDeferred: ShutdownDeferred,
+    error: StoreAbort | StoreInterrupted,
+  ) =>
     Effect.gen(function* () {
-      yield* FiberSet.clear(fiberSet)
-      yield* FiberSet.run(fiberSet, Effect.fail(error))
+      // console.log('[@livestore/livestore/react] interupting', error)
+      yield* Scope.close(componentScope, Exit.fail(error))
+      yield* Deferred.fail(shutdownDeferred, error)
     }).pipe(
-      Effect.tapErrorCause((cause) => Effect.logDebug(`[@livestore/livestore/react] interupting`, cause)),
+      Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] interupting', cause)),
       Effect.runFork,
     )
 
@@ -185,7 +200,6 @@ 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 = {
@@ -196,14 +210,19 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       adapter,
       batchUpdates,
       disableDevtools,
-      reactivityGraph,
       signal,
     }
-    if (ctxValueRef.current.fiberSet !== undefined) {
-      interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
-      ctxValueRef.current.fiberSet = undefined
+    if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
+      interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreInterrupted())
+      ctxValueRef.current.componentScope = undefined
+      ctxValueRef.current.shutdownDeferred = undefined
+    }
+    ctxValueRef.current = {
+      value: { stage: 'loading' },
+      componentScope: undefined,
+      shutdownDeferred: undefined,
+      counter: ctxValueRef.current.counter + 1,
     }
-    ctxValueRef.current = { value: { stage: 'loading' }, fiberSet: undefined, counter: ctxValueRef.current.counter + 1 }
   }
 
   React.useEffect(() => {
@@ -216,47 +235,51 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
     }
 
     signal?.addEventListener('abort', () => {
-      if (ctxValueRef.current.fiberSet !== undefined && ctxValueRef.current.counter === counter) {
-        interrupt(ctxValueRef.current.fiberSet, new StoreAbort())
-        ctxValueRef.current.fiberSet = undefined
+      if (
+        ctxValueRef.current.componentScope !== undefined &&
+        ctxValueRef.current.shutdownDeferred !== undefined &&
+        ctxValueRef.current.counter === counter
+      ) {
+        interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreAbort())
+        ctxValueRef.current.componentScope = undefined
+        ctxValueRef.current.shutdownDeferred = undefined
       }
     })
 
     Effect.gen(function* () {
-      const fiberSet = yield* FiberSet.make<
-        unknown,
+      const componentScope = yield* Scope.make()
+      const shutdownDeferred = yield* Deferred.make<
+        void,
         UnexpectedError | IntentionalShutdownCause | StoreAbort | StoreInterrupted
       >()
 
-      ctxValueRef.current.fiberSet = fiberSet
+      ctxValueRef.current.componentScope = componentScope
+      ctxValueRef.current.shutdownDeferred = shutdownDeferred
 
       yield* Effect.gen(function* () {
         const store = yield* createStore({
-          fiberSet,
           schema,
           storeId,
           graphQLOptions,
-          otelOptions,
           boot,
           adapter,
-          reactivityGraph,
           batchUpdates,
           disableDevtools,
+          shutdownDeferred,
           onBootStatus: (status) => {
             if (ctxValueRef.current.value.stage === 'running' || ctxValueRef.current.value.stage === 'error') return
             setContextValue(status)
           },
-        })
+        }).pipe(Effect.tapErrorCause((cause) => Deferred.failCause(shutdownDeferred, cause)))
 
         setContextValue({ stage: 'running', store })
-
-        yield* Effect.never
-      }).pipe(Effect.scoped, FiberSet.run(fiberSet))
+      }).pipe(Scope.extend(componentScope), Effect.forkIn(componentScope))
 
       const shutdownContext = (cause: IntentionalShutdownCause | StoreAbort) =>
         Effect.sync(() => setContextValue({ stage: 'shutdown', cause }))
 
-      yield* FiberSet.join(fiberSet).pipe(
+      yield* Deferred.await(shutdownDeferred).pipe(
+        Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] shutdown', cause)),
         Effect.catchTag('LiveStore.IntentionalShutdownCause', (cause) => shutdownContext(cause)),
         Effect.catchTag('LiveStore.StoreAbort', (cause) => shutdownContext(cause)),
         Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
@@ -269,31 +292,24 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
       // shutdown before a new one is created - especially when shutdown logic is async. You can't trust `React.useEffect`.
       // Thank you to Mattia Manzati for this idea.
       withSemaphore(storeId),
+      Effect.withSpan('@livestore/react:useCreateStore'),
+      LS_DEV ? TaskTracing.withAsyncTaggingTracing((name: string) => (console as any).createTask(name)) : identity,
+      provideOtel({ parentSpanContext: otelOptions?.rootSpanContext, otelTracer: otelOptions?.tracer }),
       Effect.tapCauseLogPretty,
       Effect.annotateLogs({ thread: 'window' }),
-      Effect.provide(Logger.pretty),
+      Effect.provide(Logger.prettyWithThread('window')),
       Logger.withMinimumLogLevel(LogLevel.Debug),
       Effect.runFork,
     )
 
     return () => {
-      if (ctxValueRef.current.fiberSet !== undefined) {
-        interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
-        ctxValueRef.current.fiberSet = undefined
+      if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
+        interrupt(ctxValueRef.current.componentScope, ctxValueRef.current.shutdownDeferred, new StoreInterrupted())
+        ctxValueRef.current.componentScope = undefined
+        ctxValueRef.current.shutdownDeferred = undefined
       }
     }
-  }, [
-    schema,
-    graphQLOptions,
-    otelOptions,
-    boot,
-    adapter,
-    batchUpdates,
-    disableDevtools,
-    signal,
-    reactivityGraph,
-    storeId,
-  ])
+  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal, storeId])
 
   return ctxValueRef.current.value
 }