refactor(presentation): use typed connection status

packages/presentation/src/PresentationTool.tsx

@@ -274,6 +274,7 @@ export default function PresentationTool(props: {
       )
     })
 
+    // @todo This won't work for multiple window contexts?
     comlink.on('visual-editing/refreshing', (data) => {
       if (data.source === 'manual') {
         clearTimeout(refreshRef.current)

packages/presentation/src/editor/PostMessageRefreshMutations.tsx

@@ -1,15 +1,14 @@
-import type {Status} from '@sanity/comlink'
 import {memo, startTransition, useEffect, useMemo, useState} from 'react'
 import {type SanityDocument} from 'sanity'
 import {getPublishedId, useEditState} from '../internals'
-import type {VisualEditingConnection} from '../types'
+import type {ConnectionStatus, VisualEditingConnection} from '../types'
 
 export interface PostMessageRefreshMutationsProps {
   id: string
   type: string
   comlink: VisualEditingConnection
-  previewKitConnection: Status
-  loadersConnection: Status
+  previewKitConnection: ConnectionStatus
+  loadersConnection: ConnectionStatus
 }
 
 function PostMessageRefreshMutations(props: PostMessageRefreshMutationsProps): React.ReactNode {

packages/presentation/src/index.ts

@@ -1,6 +1,7 @@
 export * from './plugin'
 export type {
   CombinedSearchParams,
+  ConnectionStatus,
   ContextFn,
   DocumentLocation,
   DocumentLocationResolver,

packages/presentation/src/preview/Preview.tsx

@@ -1,4 +1,3 @@
-import type {Status} from '@sanity/comlink'
 import {
   Button,
   Card,
@@ -34,7 +33,12 @@ import {
   type DispatchPresentationAction,
   type PresentationState,
 } from '../reducers/presentationReducer'
-import type {HeaderOptions, PresentationPerspective, PresentationViewport} from '../types'
+import type {
+  ConnectionStatus,
+  HeaderOptions,
+  PresentationPerspective,
+  PresentationViewport,
+} from '../types'
 import {usePresentationTool} from '../usePresentationTool'
 import {IFrame} from './IFrame'
 import {usePresentationPreviewHeader} from './PreviewHeader'
@@ -48,12 +52,12 @@ export interface PreviewProps extends Pick<PresentationState, 'iframe' | 'visual
   dispatch: DispatchPresentationAction
   header?: HeaderOptions
   initialUrl: URL
-  loadersConnection: Status
+  loadersConnection: ConnectionStatus
   navigatorEnabled: boolean
   onPathChange: (nextPath: string) => void
   onRefresh: (fallback: () => void) => void
   openPopup: (url: string) => void
-  overlaysConnection: Status
+  overlaysConnection: ConnectionStatus
   perspective: PresentationPerspective
   previewUrl?: string
   setPerspective: (perspective: 'previewDrafts' | 'published') => void
@@ -148,9 +152,6 @@ export const Preview = memo(
         }, MAX_TIME_TO_OVERLAYS_CONNECTION)
         return () => clearTimeout(timeout)
       }
-      if (overlaysConnection === 'disconnected') {
-        setSomethingIsWrong(true)
-      }
       return
     }, [loading, overlaysConnection, refreshing, showOverlaysConnectionStatus])
 

packages/presentation/src/types.ts

@@ -301,3 +301,5 @@ export type VisualEditingConnection = ChannelInstance<
  * @internal
  */
 export type LoaderConnection = ChannelInstance<LoaderControllerMsg, LoaderNodeMsg>
+
+export type ConnectionStatus = 'connected' | 'connecting' | 'reconnecting' | 'idle'

packages/presentation/src/useStatus.ts

@@ -1,5 +1,6 @@
-import type {Status, StatusEvent} from '@sanity/comlink'
+import type {StatusEvent} from '@sanity/comlink'
 import {useCallback, useMemo, useState} from 'react'
+import type {ConnectionStatus} from './types'
 
 /**
  * A hook that manages and returns the connection status of multiple channels
@@ -16,10 +17,10 @@ import {useCallback, useMemo, useState} from 'react'
  * The function to update the status takes a `StatusEvent` object which includes
  * the channel and the status
  */
-export function useStatus(): [string, (event: StatusEvent) => void] {
+export function useStatus(): [ConnectionStatus, (event: StatusEvent) => void] {
   // State to keep track of the status of each channel
   const [statusMap, setStatusMap] = useState(
-    new Map<string, {status: Status; hasConnected: boolean}>(),
+    new Map<string, {status: ConnectionStatus; hasConnected: boolean}>(),
   )
 
   // Memoized computation of the overall status based on the status of individual channels
@@ -30,7 +31,7 @@ export function useStatus(): [string, (event: StatusEvent) => void] {
       return 'connected'
     }
     // If the initial connection is being established, return `connecting` status
-    const handshaking = values.filter(({status}) => status === 'handshaking')
+    const handshaking = values.filter(({status}) => status === 'connecting')
     if (handshaking.length) {
       return handshaking.some(({hasConnected}) => !hasConnected) ? 'connecting' : 'reconnecting'
     }
@@ -49,7 +50,8 @@ export function useStatus(): [string, (event: StatusEvent) => void] {
         // Update the status and connection flag for the channel
         const hasConnected =
           next.get(event.connection)?.hasConnected || event.status === 'connected'
-        next.set(event.connection, {status: event.status, hasConnected})
+        const status = event.status === 'handshaking' ? 'connecting' : event.status
+        next.set(event.connection, {status, hasConnected})
       }
       return next
     })