fix(comlink): emit correct connection status when a controller has ex…

…isting targets before connection is created

packages/comlink/src/controller.ts

@@ -16,8 +16,6 @@ export type ConnectionInput = Omit<ChannelInput, 'target' | 'targetOrigin'>
  * @public
  */
 export interface ConnectionInstance<R extends Message, S extends Message> {
-  connect: () => () => void
-  disconnect: () => void
   on: <T extends R['type'], U extends Extract<R, {type: T}>>(
     type: T,
     handler: (event: U['data']) => Promise<U['response']> | U['response'],
@@ -199,8 +197,6 @@ export const createController = (input: {targetOrigin: string}): Controller => {
           machine,
         )
         channels.add(channel)
-        channel.start()
-        channel.connect()
       })
     } else {
       // If targets have not been added yet, create a channel without a target
@@ -264,38 +260,24 @@ export const createController = (input: {targetOrigin: string}): Controller => {
 
     const stop = () => {
       channels.forEach((channel) => {
+        channel.disconnect()
         channel.stop()
       })
     }
 
     const start = () => {
       channels.forEach((channel) => {
         channel.start()
-      })
-
-      return stop
-    }
-
-    const disconnect = () => {
-      channels.forEach((channel) => {
-        channel.disconnect()
-      })
-    }
-
-    const connect = () => {
-      channels.forEach((channel) => {
         channel.connect()
       })
 
-      return disconnect
+      return stop
     }
 
     return {
-      connect,
-      disconnect,
       on,
-      onStatus,
       onInternalEvent,
+      onStatus,
       post,
       start,
       stop,

packages/presentation/src/PresentationTool.tsx

@@ -307,11 +307,7 @@ export default function PresentationTool(props: {
       }
     })
 
-    const stop = comlink.start()
-
-    return () => {
-      stop()
-    }
+    return comlink.start()
   }, [controller, dataset, projectId, setDocumentsOnPage, setPreviewKitConnection, targetOrigin])
 
   const handleFocusPath = useCallback(

packages/presentation/src/useStatus.ts

@@ -2,12 +2,19 @@ import type {Status, StatusEvent} from '@sanity/comlink'
 import {useCallback, useMemo, useState} from 'react'
 
 export function useStatus(): [string, (event: StatusEvent) => void] {
-  const [statusMap, setStatusMap] = useState(new Map<string, Status>())
+  const [statusMap, setStatusMap] = useState(
+    new Map<string, {status: Status; hasConnected: boolean}>(),
+  )
 
   const status = useMemo(() => {
     const values = Array.from(statusMap.values())
-    if (values.includes('connecting')) return 'connecting'
-    if (values.includes('connected')) return 'connected'
+    const handshaking = values.filter(({status}) => status === 'handshaking')
+    if (handshaking.length) {
+      return handshaking.some(({hasConnected}) => !hasConnected) ? 'connecting' : 'reconnecting'
+    }
+    if (values.find(({status}) => status === 'connected')) {
+      return 'connected'
+    }
     return 'idle'
   }, [statusMap])
 
@@ -17,7 +24,8 @@ export function useStatus(): [string, (event: StatusEvent) => void] {
       if (event.status === 'disconnected') {
         next.delete(event.channel)
       } else {
-        next.set(event.channel, event.status)
+        const hasConnected = next.get(event.channel)?.hasConnected || event.status === 'connected'
+        next.set(event.channel, {status: event.status, hasConnected})
       }
       return next
     })