@sanity/client 6.24.2 → 6.24.4

package/src/data/live.ts

@@ -1,15 +1,19 @@
-import {Observable} from 'rxjs'
+import {catchError, concat, EMPTY, mergeMap, Observable, of} from 'rxjs'
+import {map} from 'rxjs/operators'
 
 import {CorsOriginError} from '../http/errors'
 import type {ObservableSanityClient, SanityClient} from '../SanityClient'
 import type {
-  Any,
   LiveEventMessage,
   LiveEventReconnect,
   LiveEventRestart,
   LiveEventWelcome,
+  SyncTag,
 } from '../types'
 import {_getDataUrl} from './dataMethods'
+import {connectEventSource} from './eventsource'
+import {eventSourcePolyfill} from './eventsourcePolyfill'
+import {reconnectOnConnectionFailure} from './reconnectOnConnectionFailure'
 
 const requiredApiVersion = '2021-03-26'
 
@@ -72,8 +76,6 @@ export class LiveClient {
     if (includeDrafts) {
       url.searchParams.set('includeDrafts', 'true')
     }
-
-    const listenFor = ['restart', 'message', 'welcome', 'reconnect'] as const
     const esOptions: EventSourceInit & {headers?: Record<string, string>} = {}
     if (includeDrafts && token) {
       esOptions.headers = {
@@ -84,124 +86,62 @@ export class LiveClient {
       esOptions.withCredentials = true
     }
 
-    return new Observable((observer) => {
-      let es: InstanceType<typeof EventSource> | undefined
-      let reconnectTimer: NodeJS.Timeout
-      let stopped = false
-      // Unsubscribe differs from stopped in that we will never reopen.
-      // Once it is`true`, it will never be `false` again.
-      let unsubscribed = false
-
-      open()
-
-      // EventSource will emit a regular event if it fails to connect, however the API will emit an `error` MessageEvent if the server goes down
-      // So we need to handle both cases
-      function onError(evt: MessageEvent | Event) {
-        if (stopped) {
-          return
-        }
-
-        // If the event has a `data` property, then it`s a MessageEvent emitted by the API and we should forward the error and close the connection
-        if ('data' in evt) {
-          const event = parseEvent(evt)
-          observer.error(new Error(event.message, {cause: event}))
-        }
-
-        // Unless we've explicitly stopped the ES (in which case `stopped` should be true),
-        // we should never be in a disconnected state. By default, EventSource will reconnect
-        // automatically, in which case it sets readyState to `CONNECTING`, but in some cases
-        // (like when a laptop lid is closed), it closes the connection. In these cases we need
-        // to explicitly reconnect.
-        if (es!.readyState === es!.CLOSED) {
-          unsubscribe()
-          clearTimeout(reconnectTimer)
-          reconnectTimer = setTimeout(open, 100)
-        }
-      }
-
-      function onMessage(evt: Any) {
-        const event = parseEvent(evt)
-        return event instanceof Error ? observer.error(event) : observer.next(event)
-      }
-
-      function unsubscribe() {
-        if (!es) return
-        es.removeEventListener('error', onError)
-        for (const type of listenFor) {
-          es.removeEventListener(type, onMessage)
-        }
-        es.close()
-      }
-
-      async function getEventSource() {
-        const EventSourceImplementation: typeof EventSource =
-          typeof EventSource === 'undefined' || esOptions.headers || esOptions.withCredentials
-            ? ((await import('@sanity/eventsource')).default as unknown as typeof EventSource)
-            : EventSource
-
-        // If the listener has been unsubscribed from before we managed to load the module,
-        // do not set up the EventSource.
-        if (unsubscribed) {
-          return
-        }
-
-        // Detect if CORS is allowed, the way the CORS is checked supports preflight caching, so when the EventSource boots up it knows it sees the preflight was already made and we're good to go
-        try {
-          await fetch(url, {
-            method: 'OPTIONS',
-            mode: 'cors',
-            credentials: esOptions.withCredentials ? 'include' : 'omit',
-            headers: esOptions.headers,
-          })
-          if (unsubscribed) {
-            return
-          }
-        } catch {
-          // If the request fails, then we assume it was due to CORS, and we rethrow a special error that allows special handling in userland
-          throw new CorsOriginError({projectId: projectId!})
+    const initEventSource = () =>
+      // use polyfill if there is no global EventSource or if we need to set headers
+      (typeof EventSource === 'undefined' || esOptions.headers
+        ? eventSourcePolyfill
+        : of(EventSource)
+      ).pipe(map((EventSource) => new EventSource(url.href, esOptions)))
+
+    const events = connectEventSource(initEventSource, [
+      'message',
+      'restart',
+      'welcome',
+      'reconnect',
+    ]).pipe(
+      reconnectOnConnectionFailure(),
+      map((event) => {
+        if (event.type === 'message') {
+          const {data, ...rest} = event
+          // Splat data properties from the eventsource message onto the returned event
+          return {...rest, tags: (data as {tags: SyncTag[]}).tags} as LiveEventMessage
         }
-
-        const evs = new EventSourceImplementation(url.toString(), esOptions)
-        evs.addEventListener('error', onError)
-        for (const type of listenFor) {
-          evs.addEventListener(type, onMessage)
-        }
-        return evs
-      }
-
-      function open() {
-        getEventSource()
-          .then((eventSource) => {
-            if (eventSource) {
-              es = eventSource
-              // Handle race condition where the observer is unsubscribed before the EventSource is set up
-              if (unsubscribed) {
-                unsubscribe()
-              }
-            }
-          })
-          .catch((reason) => {
-            observer.error(reason)
-            stop()
-          })
-      }
-
-      function stop() {
-        stopped = true
-        unsubscribe()
-        unsubscribed = true
-      }
-
-      return stop
-    })
+        return event as LiveEventRestart | LiveEventReconnect | LiveEventWelcome
+      }),
+    )
+
+    // Detect if CORS is allowed, the way the CORS is checked supports preflight caching, so when the EventSource boots up it knows it sees the preflight was already made and we're good to go
+    const checkCors = fetchObservable(url, {
+      method: 'OPTIONS',
+      mode: 'cors',
+      credentials: esOptions.withCredentials ? 'include' : 'omit',
+      headers: esOptions.headers,
+    }).pipe(
+      mergeMap(() => EMPTY),
+      catchError(() => {
+        // If the request fails, then we assume it was due to CORS, and we rethrow a special error that allows special handling in userland
+        throw new CorsOriginError({projectId: projectId!})
+      }),
+    )
+    return concat(checkCors, events)
   }
 }
 
-function parseEvent(event: MessageEvent) {
-  try {
-    const data = (event.data && JSON.parse(event.data)) || {}
-    return {type: event.type, id: event.lastEventId, ...data}
-  } catch (err) {
-    return err
-  }
+function fetchObservable(url: URL, init: RequestInit) {
+  return new Observable((observer) => {
+    const controller = new AbortController()
+    const signal = controller.signal
+    fetch(url, {...init, signal: controller.signal}).then(
+      (response) => {
+        observer.next(response)
+        observer.complete()
+      },
+      (err) => {
+        if (!signal.aborted) {
+          observer.error(err)
+        }
+      },
+    )
+    return () => controller.abort()
+  })
 }

package/src/data/reconnectOnConnectionFailure.ts

@@ -0,0 +1,30 @@
+import {
+  catchError,
+  concat,
+  mergeMap,
+  Observable,
+  of,
+  type OperatorFunction,
+  throwError,
+  timer,
+} from 'rxjs'
+
+import {ConnectionFailedError} from './eventsource'
+
+/**
+ * Note: connection failure is not the same as network disconnect which may happen more frequent.
+ * The EventSource instance will automatically reconnect in case of a network disconnect, however,
+ * in some rare cases a ConnectionFailed Error will be thrown and this operator explicitly retries these
+ */
+export function reconnectOnConnectionFailure<T>(): OperatorFunction<T, T | {type: 'reconnect'}> {
+  return function (source: Observable<T>) {
+    return source.pipe(
+      catchError((err, caught) => {
+        if (err instanceof ConnectionFailedError) {
+          return concat(of({type: 'reconnect' as const}), timer(1000).pipe(mergeMap(() => caught)))
+        }
+        return throwError(() => err)
+      }),
+    )
+  }
+}

package/src/data/transaction.ts

@@ -7,6 +7,7 @@ import type {
   IdentifiedSanityDocumentStub,
   MultipleMutationResult,
   Mutation,
+  MutationSelection,
   PatchOperations,
   SanityDocument,
   SanityDocumentStub,
@@ -213,6 +214,13 @@ export class Transaction extends BaseTransaction {
    * @param patchOps - Operations to perform, or a builder function
    */
   patch(documentId: string, patchOps?: PatchBuilder | PatchOperations): this
+  /**
+   * Performs a patch on the given selection. Can either be a builder function or an object of patch operations.
+   *
+   * @param selection - An object with `query` and optional `params`, defining which document(s) to patch
+   * @param patchOps - Operations to perform, or a builder function
+   */
+  patch(patch: MutationSelection, patchOps?: PatchBuilder | PatchOperations): this
   /**
    * Adds the given patch instance to the transaction.
    * The operation is added to the current transaction, ready to be commited by `commit()`
@@ -220,9 +228,15 @@ export class Transaction extends BaseTransaction {
    * @param patch - Patch to execute
    */
   patch(patch: Patch): this
-  patch(patchOrDocumentId: Patch | string, patchOps?: PatchBuilder | PatchOperations): this {
+  patch(
+    patchOrDocumentId: Patch | MutationSelection | string,
+    patchOps?: PatchBuilder | PatchOperations,
+  ): this {
     const isBuilder = typeof patchOps === 'function'
     const isPatch = typeof patchOrDocumentId !== 'string' && patchOrDocumentId instanceof Patch
+    const isMutationSelection =
+      typeof patchOrDocumentId === 'object' &&
+      ('query' in patchOrDocumentId || 'id' in patchOrDocumentId)
 
     // transaction.patch(client.patch('documentId').inc({visits: 1}))
     if (isPatch) {
@@ -239,6 +253,17 @@ export class Transaction extends BaseTransaction {
       return this._add({patch: patch.serialize()})
     }
 
+    /**
+     * transaction.patch(
+     *   {query: "*[_type == 'person' && points >= $threshold]", params: { threshold: 100 }},
+     *   {dec: { points: 100 }, inc: { bonuses: 1 }}
+     * )
+     */
+    if (isMutationSelection) {
+      const patch = new Patch(patchOrDocumentId, patchOps || {}, this.#client)
+      return this._add({patch: patch.serialize()})
+    }
+
     return this._add({patch: {id: patchOrDocumentId, ...patchOps}})
   }
 }

package/src/defineCreateClient.ts

@@ -4,6 +4,17 @@ import {defineHttpRequest} from './http/request'
 import type {Any, ClientConfig, HttpRequest} from './types'
 
 export {validateApiPerspective} from './config'
+export {
+  ChannelError,
+  connectEventSource,
+  ConnectionFailedError,
+  DisconnectError,
+  type EventSourceEvent,
+  type EventSourceInstance,
+  MessageError,
+  MessageParseError,
+  type ServerSentEvent,
+} from './data/eventsource'
 export * from './data/patch'
 export * from './data/transaction'
 export {ClientError, CorsOriginError, ServerError} from './http/errors'

package/src/types.ts

@@ -854,6 +854,15 @@ export type ReconnectEvent = {
   type: 'reconnect'
 }
 
+/**
+ * The listener connection has been established
+ * note: it's usually a better option to use the 'welcome' event
+ * @public
+ */
+export type OpenEvent = {
+  type: 'open'
+}
+
 /**
  * The listener has been established, and will start receiving events.
  * Note that this is also emitted upon _reconnection_.
@@ -872,6 +881,7 @@ export type ListenEvent<R extends Record<string, Any>> =
   | DisconnectEvent
   | ReconnectEvent
   | WelcomeEvent
+  | OpenEvent
 
 /** @public */
 export type ListenEventName =