@livestore/react 0.4.0-dev.2 → 0.4.0-dev.21

package/src/LiveStoreProvider.tsx

@@ -1,5 +1,5 @@
 import type { Adapter, BootStatus, IntentionalShutdownCause, MigrationsReport, SyncError } from '@livestore/common'
-import { provideOtel, UnexpectedError } from '@livestore/common'
+import { LogConfig, provideOtel, UnknownError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import type {
   CreateStoreOptions,
@@ -9,26 +9,16 @@ import type {
   LiveStoreContext as StoreContext_,
 } from '@livestore/livestore'
 import { createStore, makeShutdownDeferred, StoreInterrupted } from '@livestore/livestore'
-import { errorToString, IS_REACT_NATIVE, LS_DEV } from '@livestore/utils'
+import { errorToString, IS_REACT_NATIVE, LS_DEV, omitUndefineds } from '@livestore/utils'
 import type { OtelTracer } from '@livestore/utils/effect'
-import {
-  Cause,
-  Deferred,
-  Effect,
-  Exit,
-  identity,
-  Logger,
-  LogLevel,
-  Schema,
-  Scope,
-  TaskTracing,
-} from '@livestore/utils/effect'
+import { Cause, Deferred, Effect, Exit, identity, Schema, Scope, TaskTracing } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import React from 'react'
 
 import { LiveStoreContext } from './LiveStoreContext.ts'
 
-export interface LiveStoreProviderProps {
+export interface LiveStoreProviderProps<TSyncPayloadSchema extends Schema.Schema<any> = typeof Schema.JsonValue>
+  extends LogConfig.WithLoggerOptions {
   schema: LiveStoreSchema
   /**
    * The `storeId` can be used to isolate multiple stores from each other.
@@ -47,7 +37,7 @@ export interface LiveStoreProviderProps {
   ) => void | Promise<void> | Effect.Effect<void, unknown, OtelTracer.OtelTracer>
   otelOptions?: Partial<OtelOptions>
   renderLoading?: (status: BootStatus) => React.ReactNode
-  renderError?: (error: UnexpectedError | unknown) => React.ReactNode
+  renderError?: (error: UnknownError | unknown) => React.ReactNode
   renderShutdown?: (cause: IntentionalShutdownCause | StoreInterrupted | SyncError) => React.ReactNode
   adapter: Adapter
   /**
@@ -72,25 +62,33 @@ export interface LiveStoreProviderProps {
    * @default true
    */
   confirmUnsavedChanges?: boolean
+  /**
+   * Advanced store parameters forwarded to `createStore`.
+   * Currently supports:
+   * - `leaderPushBatchSize`: max events pushed to the leader per write batch.
+   * - `eventQueryBatchSize`: chunk size used when the stream replays confirmed events.
+   */
+  params?: CreateStoreOptions<LiveStoreSchema>['params']
   /**
    * Payload that will be passed to the sync backend when connecting
    *
    * @default undefined
    */
-  syncPayload?: Schema.JsonValue
+  syncPayloadSchema?: TSyncPayloadSchema
+  syncPayload?: Schema.Schema.Type<TSyncPayloadSchema>
   debug?: {
     instanceId?: string
   }
 }
 
-const defaultRenderError = (error: UnexpectedError | unknown) =>
-  IS_REACT_NATIVE ? null : Schema.is(UnexpectedError)(error) ? error.toString() : errorToString(error)
+const defaultRenderError = (error: UnknownError | unknown) =>
+  IS_REACT_NATIVE ? null : Schema.is(UnknownError)(error) ? error.toString() : errorToString(error)
 
 const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreInterrupted | SyncError) => {
   const reason =
     cause._tag === 'LiveStore.StoreInterrupted'
       ? `interrupted due to: ${cause.reason}`
-      : cause._tag === 'LiveStore.SyncError'
+      : cause._tag === 'InvalidPushError' || cause._tag === 'InvalidPullError'
         ? `sync error: ${cause.cause}`
         : cause.reason === 'devtools-import'
           ? 'devtools import'
@@ -108,7 +106,7 @@ const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreInterrupte
 const defaultRenderLoading = (status: BootStatus) =>
   IS_REACT_NATIVE ? null : <>LiveStore is loading ({status.stage})...</>
 
-export const LiveStoreProvider = ({
+export const LiveStoreProvider = <TSyncPayloadSchema extends Schema.Schema<any> = typeof Schema.JsonValue>({
   renderLoading = defaultRenderLoading,
   renderError = defaultRenderError,
   renderShutdown = defaultRenderShutdown,
@@ -122,21 +120,31 @@ export const LiveStoreProvider = ({
   disableDevtools,
   signal,
   confirmUnsavedChanges = true,
+  params,
   syncPayload,
+  syncPayloadSchema,
   debug,
-}: LiveStoreProviderProps & { children?: React.ReactNode }): React.ReactNode => {
+  logger,
+  logLevel,
+}: LiveStoreProviderProps<TSyncPayloadSchema> & React.PropsWithChildren): React.ReactNode => {
   const storeCtx = useCreateStore({
     storeId,
     schema,
-    otelOptions,
-    boot,
     adapter,
     batchUpdates,
-    disableDevtools,
-    signal,
     confirmUnsavedChanges,
-    syncPayload,
-    debug,
+    ...omitUndefineds({
+      otelOptions,
+      boot,
+      disableDevtools,
+      params,
+      signal,
+      syncPayload,
+      syncPayloadSchema,
+      debug,
+    }),
+    logger,
+    logLevel,
   })
 
   if (storeCtx.stage === 'error') {
@@ -173,11 +181,15 @@ const useCreateStore = ({
   params,
   confirmUnsavedChanges,
   syncPayload,
+  syncPayloadSchema,
   debug,
-}: CreateStoreOptions<LiveStoreSchema> & {
-  signal?: AbortSignal
-  otelOptions?: Partial<OtelOptions>
-}) => {
+  logger,
+  logLevel,
+}: CreateStoreOptions<LiveStoreSchema> &
+  LogConfig.WithLoggerOptions & {
+    signal?: AbortSignal
+    otelOptions?: Partial<OtelOptions>
+  }) => {
   const [_, rerender] = React.useState(0)
   const ctxValueRef = React.useRef<{
     value: StoreContext_ | BootStatus
@@ -209,6 +221,7 @@ const useCreateStore = ({
     params,
     confirmUnsavedChanges,
     syncPayload,
+    syncPayloadSchema,
     debugInstanceId,
   })
 
@@ -237,6 +250,7 @@ const useCreateStore = ({
     params: inputPropsCacheRef.current.params !== params,
     confirmUnsavedChanges: inputPropsCacheRef.current.confirmUnsavedChanges !== confirmUnsavedChanges,
     syncPayload: inputPropsCacheRef.current.syncPayload !== syncPayload,
+    syncPayloadSchema: inputPropsCacheRef.current.syncPayloadSchema !== syncPayloadSchema,
     debugInstanceId: inputPropsCacheRef.current.debugInstanceId !== debugInstanceId,
   }
 
@@ -251,7 +265,8 @@ const useCreateStore = ({
     inputPropChanges.context ||
     inputPropChanges.params ||
     inputPropChanges.confirmUnsavedChanges ||
-    inputPropChanges.syncPayload
+    inputPropChanges.syncPayload ||
+    inputPropChanges.syncPayloadSchema
   ) {
     inputPropsCacheRef.current = {
       schema,
@@ -265,6 +280,7 @@ const useCreateStore = ({
       params,
       confirmUnsavedChanges,
       syncPayload,
+      syncPayloadSchema,
       debugInstanceId,
     }
     if (ctxValueRef.current.componentScope !== undefined && ctxValueRef.current.shutdownDeferred !== undefined) {
@@ -330,21 +346,24 @@ const useCreateStore = ({
         const store = yield* createStore({
           schema,
           storeId,
-          boot,
           adapter,
-          batchUpdates,
-          disableDevtools,
           shutdownDeferred,
-          context,
-          params,
-          confirmUnsavedChanges,
-          syncPayload,
+          ...omitUndefineds({
+            boot,
+            batchUpdates,
+            disableDevtools,
+            context,
+            params,
+            confirmUnsavedChanges,
+            syncPayload,
+            syncPayloadSchema,
+          }),
           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
             setContextValue(status)
           },
-          debug: { instanceId: debugInstanceId },
+          debug: { ...omitUndefineds({ instanceId: debugInstanceId }) },
         }).pipe(Effect.tapErrorCause((cause) => Deferred.failCause(shutdownDeferred, cause)))
 
         setContextValue({ stage: 'running', store })
@@ -356,7 +375,8 @@ const useCreateStore = ({
       yield* Deferred.await(shutdownDeferred).pipe(
         Effect.tapErrorCause((cause) => Effect.logDebug('[@livestore/livestore/react] shutdown', Cause.pretty(cause))),
         Effect.tap((intentionalShutdown) => shutdownContext(intentionalShutdown)),
-        Effect.catchTag('LiveStore.SyncError', (cause) => shutdownContext(cause)),
+        Effect.catchTag('InvalidPushError', (cause) => shutdownContext(cause)),
+        Effect.catchTag('InvalidPullError', (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 }))),
@@ -366,11 +386,10 @@ const useCreateStore = ({
       Effect.scoped,
       Effect.withSpan('@livestore/react:useCreateStore'),
       LS_DEV ? TaskTracing.withAsyncTaggingTracing((name: string) => (console as any).createTask(name)) : identity,
-      provideOtel({ parentSpanContext: otelOptions?.rootSpanContext, otelTracer: otelOptions?.tracer }),
+      provideOtel(omitUndefineds({ parentSpanContext: otelOptions?.rootSpanContext, otelTracer: otelOptions?.tracer })),
       Effect.tapCauseLogPretty,
       Effect.annotateLogs({ thread: 'window' }),
-      Effect.provide(Logger.prettyWithThread('window')),
-      Logger.withMinimumLogLevel(LogLevel.Debug),
+      LogConfig.withLoggerConfig({ logger, logLevel }, { threadName: 'window' }),
       Effect.runCallback,
     )
 
@@ -400,8 +419,11 @@ const useCreateStore = ({
     params,
     confirmUnsavedChanges,
     syncPayload,
+    syncPayloadSchema,
     debugInstanceId,
     interrupt,
+    logger,
+    logLevel,
   ])
 
   return ctxValueRef.current.value

package/src/__snapshots__/useClientDocument.test.tsx.snap

@@ -47,29 +47,6 @@ exports[`useClientDocument > otel > should update the data based on component ke
     },
     {
       "_name": "LiveStore:commits",
-      "children": [
-        {
-          "_name": "LiveStore:commit",
-          "attributes": {
-            "livestore.eventTags": [
-              "UserInfoSet",
-            ],
-            "livestore.eventsCount": 1,
-          },
-          "children": [
-            {
-              "_name": "livestore.in-memory-db:execute",
-              "attributes": {
-                "sql.query": "
-      INSERT INTO 'UserInfo' (id, value)
-      VALUES (?, ?)
-      ON CONFLICT (id) DO UPDATE SET value = json_set(value, ?, json(?))
-    ",
-              },
-            },
-          ],
-        },
-      ],
     },
     {
       "_name": "LiveStore:queries",
@@ -89,28 +66,6 @@ exports[`useClientDocument > otel > should update the data based on component ke
                 "sql.rowsCount": 0,
               },
             },
-            {
-              "_name": "LiveStore:commit",
-              "attributes": {
-                "livestore.commitLabel": "UserInfo.set:u1",
-                "livestore.eventTags": [
-                  "UserInfoSet",
-                ],
-                "livestore.eventsCount": 1,
-              },
-              "children": [
-                {
-                  "_name": "livestore.in-memory-db:execute",
-                  "attributes": {
-                    "sql.query": "
-      INSERT INTO 'UserInfo' (id, value)
-      VALUES (?, ?)
-      ON CONFLICT (id) DO UPDATE SET value = json_set(json_set(value, ?, json(?)), ?, json(?))
-    ",
-                  },
-                },
-              ],
-            },
             {
               "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
               "attributes": {
@@ -226,6 +181,88 @@ exports[`useClientDocument > otel > should update the data based on component ke
 }
 `;
 
+exports[`useClientDocument > otel > should update the data based on component key strictMode={ strictMode: false } 2`] = `
+[
+  {
+    "_name": "LiveStore:commit",
+    "attributes": {
+      "livestore.commitLabel": "UserInfo.set:u1",
+      "livestore.eventTags": "[
+  "UserInfoSet"
+]",
+      "livestore.eventsCount": 1,
+    },
+    "children": [
+      {
+        "_name": "client-session-sync-processor:push",
+        "attributes": {
+          "batchSize": 1,
+          "eventCounts": "{
+  "UserInfoSet": 1
+}",
+          "mergeResultTag": "advance",
+        },
+        "children": [
+          {
+            "_name": "client-session-sync-processor:materialize-event",
+            "children": [
+              {
+                "_name": "livestore.in-memory-db:execute",
+                "attributes": {
+                  "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(json_set(value, ?, json(?)), ?, json(?))
+    ",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    "_name": "LiveStore:commit",
+    "attributes": {
+      "livestore.eventTags": "[
+  "UserInfoSet"
+]",
+      "livestore.eventsCount": 1,
+    },
+    "children": [
+      {
+        "_name": "client-session-sync-processor:push",
+        "attributes": {
+          "batchSize": 1,
+          "eventCounts": "{
+  "UserInfoSet": 1
+}",
+          "mergeResultTag": "advance",
+        },
+        "children": [
+          {
+            "_name": "client-session-sync-processor:materialize-event",
+            "children": [
+              {
+                "_name": "livestore.in-memory-db:execute",
+                "attributes": {
+                  "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(value, ?, json(?))
+    ",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]
+`;
+
 exports[`useClientDocument > otel > should update the data based on component key strictMode={ strictMode: true } 1`] = `
 {
   "_name": "createStore",
@@ -273,29 +310,6 @@ exports[`useClientDocument > otel > should update the data based on component ke
     },
     {
       "_name": "LiveStore:commits",
-      "children": [
-        {
-          "_name": "LiveStore:commit",
-          "attributes": {
-            "livestore.eventTags": [
-              "UserInfoSet",
-            ],
-            "livestore.eventsCount": 1,
-          },
-          "children": [
-            {
-              "_name": "livestore.in-memory-db:execute",
-              "attributes": {
-                "sql.query": "
-      INSERT INTO 'UserInfo' (id, value)
-      VALUES (?, ?)
-      ON CONFLICT (id) DO UPDATE SET value = json_set(value, ?, json(?))
-    ",
-              },
-            },
-          ],
-        },
-      ],
     },
     {
       "_name": "LiveStore:queries",
@@ -315,28 +329,6 @@ exports[`useClientDocument > otel > should update the data based on component ke
                 "sql.rowsCount": 0,
               },
             },
-            {
-              "_name": "LiveStore:commit",
-              "attributes": {
-                "livestore.commitLabel": "UserInfo.set:u1",
-                "livestore.eventTags": [
-                  "UserInfoSet",
-                ],
-                "livestore.eventsCount": 1,
-              },
-              "children": [
-                {
-                  "_name": "livestore.in-memory-db:execute",
-                  "attributes": {
-                    "sql.query": "
-      INSERT INTO 'UserInfo' (id, value)
-      VALUES (?, ?)
-      ON CONFLICT (id) DO UPDATE SET value = json_set(json_set(value, ?, json(?)), ?, json(?))
-    ",
-                  },
-                },
-              ],
-            },
             {
               "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
               "attributes": {
@@ -390,6 +382,88 @@ exports[`useClientDocument > otel > should update the data based on component ke
 }
 `;
 
+exports[`useClientDocument > otel > should update the data based on component key strictMode={ strictMode: true } 2`] = `
+[
+  {
+    "_name": "LiveStore:commit",
+    "attributes": {
+      "livestore.commitLabel": "UserInfo.set:u1",
+      "livestore.eventTags": "[
+  "UserInfoSet"
+]",
+      "livestore.eventsCount": 1,
+    },
+    "children": [
+      {
+        "_name": "client-session-sync-processor:push",
+        "attributes": {
+          "batchSize": 1,
+          "eventCounts": "{
+  "UserInfoSet": 1
+}",
+          "mergeResultTag": "advance",
+        },
+        "children": [
+          {
+            "_name": "client-session-sync-processor:materialize-event",
+            "children": [
+              {
+                "_name": "livestore.in-memory-db:execute",
+                "attributes": {
+                  "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(json_set(value, ?, json(?)), ?, json(?))
+    ",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    "_name": "LiveStore:commit",
+    "attributes": {
+      "livestore.eventTags": "[
+  "UserInfoSet"
+]",
+      "livestore.eventsCount": 1,
+    },
+    "children": [
+      {
+        "_name": "client-session-sync-processor:push",
+        "attributes": {
+          "batchSize": 1,
+          "eventCounts": "{
+  "UserInfoSet": 1
+}",
+          "mergeResultTag": "advance",
+        },
+        "children": [
+          {
+            "_name": "client-session-sync-processor:materialize-event",
+            "children": [
+              {
+                "_name": "livestore.in-memory-db:execute",
+                "attributes": {
+                  "sql.query": "
+      INSERT INTO 'UserInfo' (id, value)
+      VALUES (?, ?)
+      ON CONFLICT (id) DO UPDATE SET value = json_set(value, ?, json(?))
+    ",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]
+`;
+
 exports[`useClientDocument > should update the data based on component key 1`] = `
 {
   "atoms": [
@@ -443,7 +517,7 @@ exports[`useClientDocument > should update the data based on component key 1`] =
       "refreshes": 1,
       "sub": [],
       "super": [
-        "node-5",
+        "node-6",
       ],
     },
     {
@@ -464,10 +538,27 @@ exports[`useClientDocument > should update the data based on component key 1`] =
       "super": [],
     },
     {
-      "_tag": "thunk",
+      "_tag": "ref",
       "id": "node-5",
       "isDestroyed": false,
       "isDirty": false,
+      "label": "tableRef:Kv",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
+    {
+      "_tag": "thunk",
+      "id": "node-6",
+      "isDestroyed": false,
+      "isDirty": false,
       "label": "UserInfo.get:u1:results",
       "meta": {
         "liveStoreThunkType": "db.result",
@@ -481,7 +572,7 @@ exports[`useClientDocument > should update the data based on component key 1`] =
         "node-3",
       ],
       "super": [
-        "node-6",
+        "node-7",
       ],
     },
   ],
@@ -489,12 +580,12 @@ exports[`useClientDocument > should update the data based on component key 1`] =
   "effects": [
     {
       "_tag": "effect",
-      "id": "node-6",
+      "id": "node-7",
       "invocations": 1,
       "isDestroyed": false,
       "label": "subscribe:UserInfo.get:u1",
       "sub": [
-        "node-5",
+        "node-6",
       ],
     },
   ],
@@ -554,7 +645,7 @@ exports[`useClientDocument > should update the data based on component key 2`] =
       "refreshes": 2,
       "sub": [],
       "super": [
-        "node-7",
+        "node-8",
       ],
     },
     {
@@ -574,9 +665,26 @@ exports[`useClientDocument > should update the data based on component key 2`] =
       "sub": [],
       "super": [],
     },
+    {
+      "_tag": "ref",
+      "id": "node-5",
+      "isDestroyed": false,
+      "isDirty": false,
+      "label": "tableRef:Kv",
+      "meta": {
+        "liveStoreRefType": "table",
+      },
+      "previousResult": {
+        "_tag": "Some",
+        "value": "null",
+      },
+      "refreshes": 0,
+      "sub": [],
+      "super": [],
+    },
     {
       "_tag": "thunk",
-      "id": "node-7",
+      "id": "node-8",
       "isDestroyed": false,
       "isDirty": false,
       "label": "UserInfo.get:u2:results",
@@ -592,7 +700,7 @@ exports[`useClientDocument > should update the data based on component key 2`] =
         "node-3",
       ],
       "super": [
-        "node-8",
+        "node-9",
       ],
     },
   ],
@@ -600,12 +708,12 @@ exports[`useClientDocument > should update the data based on component key 2`] =
   "effects": [
     {
       "_tag": "effect",
-      "id": "node-8",
+      "id": "node-9",
       "invocations": 1,
       "isDestroyed": false,
       "label": "subscribe:UserInfo.get:u2",
       "sub": [
-        "node-7",
+        "node-8",
       ],
     },
   ],