@sanity/sdk-react 3.4.0-rc.0 → 3.4.0

package/src/hooks/dashboard/useNavigate.test.ts

@@ -1,10 +1,13 @@
 import {type PathChangeMessage} from '@sanity/message-protocol'
+import {installMessageBus, resetMessageBus} from '@sanity/sdk/_internal'
+import {type MessageBusHost, type NavigationLocation, type ValueOf} from '@sanity/sdk/dashboard'
 import {renderHook} from '@testing-library/react'
-import {beforeEach, describe, expect, it, vi} from 'vitest'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 
+import {act, renderHook as renderHookWithInstance} from '../../../test/test-utils'
 import {useNavigate} from './useNavigate'
 
-const mockOnMessage = vi.fn()
+const mockSendMessage = vi.fn()
 let mockMessageHandler: ((data: PathChangeMessage['data']) => void) | undefined
 
 vi.mock('../comlink/useWindowConnection', () => {
@@ -12,11 +15,11 @@ vi.mock('../comlink/useWindowConnection', () => {
     useWindowConnection: ({
       onMessage,
     }: {
-      onMessage: Record<string, (data: PathChangeMessage['data']) => void>
+      onMessage?: Record<string, (data: PathChangeMessage['data']) => void>
     }) => {
-      mockMessageHandler = onMessage['dashboard/v1/history/change-path']
+      mockMessageHandler = onMessage?.['dashboard/v1/history/change-path']
       return {
-        onMessage: mockOnMessage,
+        sendMessage: mockSendMessage,
       }
     },
   }
@@ -41,4 +44,388 @@ describe('useNavigate', () => {
 
     expect(mockNavigateFn).toHaveBeenCalledWith(mockNavigationData)
   })
+
+  it('reports an in-app navigation over the Comlink update-url message', () => {
+    const {result} = renderHook(() => useNavigate(mockNavigateFn))
+
+    result.current({path: 'documents/abc'})
+
+    // jsdom's origin is fixed at http://localhost:3000 in this test env.
+    expect(mockSendMessage).toHaveBeenCalledWith(
+      'dashboard/v1/bridge/listeners/history/update-url',
+      {url: 'http://localhost:3000/documents/abc'},
+    )
+  })
+})
+
+describe('useNavigate (message bus)', () => {
+  const MESSAGE_BUS_KEY = Symbol.for('sanity.os.bus')
+  let host: MessageBusHost
+  // The single navigation.location.update responder for the describe: it records every payload
+  // and replies with whatever `updateReply` currently holds, so a test can force a not-ok reply
+  // without registering a second competing responder.
+  let updates: {url: string; history?: string}[]
+  let updateReply: {ok: true} | {ok: false; reason: 'not-navigable' | 'interrupted' | 'failed'}
+
+  const emitLocation = (value: NavigationLocation | null) =>
+    host.connections.subscribe((client) =>
+      client.emit('navigation.location', value as ValueOf<'navigation.location'>),
+    )
+
+  const publishBasePath = () =>
+    host.connections.subscribe((client) =>
+      client.emit('applications.base-path', {ok: true, value: '/applications/app'}),
+    )
+
+  beforeEach(() => {
+    updates = []
+    updateReply = {ok: true}
+    vi.stubGlobal('__SANITY_APP_ID__', 'app')
+    host = installMessageBus({appId: 'dashboard'})
+    host.subscribe('navigation.location.update', (message) => {
+      updates.push(message.payload)
+      message.reply(updateReply)
+    })
+  })
+
+  afterEach(() => {
+    resetMessageBus()
+    delete (globalThis as {[MESSAGE_BUS_KEY]?: unknown})[MESSAGE_BUS_KEY]
+    vi.unstubAllGlobals()
+  })
+
+  it('does not fire on the initial replayed location', () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    renderHookWithInstance(() => useNavigate(navigateFn))
+
+    expect(navigateFn).not.toHaveBeenCalled()
+  })
+
+  it.each([['push'], ['replace']] as const)(
+    'fires once for a host-mediated %s request to this app',
+    (navigationType) => {
+      publishBasePath()
+      emitLocation({appId: 'dashboard', path: 'dashboard', transition: null})
+
+      const navigateFn = vi.fn()
+      renderHookWithInstance(() => useNavigate(navigateFn))
+
+      const to = {appId: 'app', path: 'documents/abc'}
+      act(() => {
+        emitLocation({appId: 'dashboard', path: 'dashboard', transition: {navigationType, to}})
+        emitLocation({appId: 'app', path: 'documents/abc', transition: {navigationType, to}})
+        emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+      })
+
+      expect(navigateFn).toHaveBeenCalledTimes(1)
+      expect(navigateFn).toHaveBeenCalledWith({path: 'documents/abc', type: navigationType})
+    },
+  )
+
+  it('ignores a transition targeting another app', () => {
+    publishBasePath()
+    emitLocation({appId: 'dashboard', path: 'dashboard', transition: null})
+
+    const navigateFn = vi.fn()
+    renderHookWithInstance(() => useNavigate(navigateFn))
+
+    const to = {appId: 'other', path: 'other/route'}
+    act(() => {
+      emitLocation({
+        appId: 'dashboard',
+        path: 'dashboard',
+        transition: {navigationType: 'push', to},
+      })
+      emitLocation({appId: 'other', path: 'other/route', transition: {navigationType: 'push', to}})
+      emitLocation({appId: 'other', path: 'other/route', transition: null})
+    })
+
+    expect(navigateFn).not.toHaveBeenCalled()
+  })
+
+  it('ignores the app’s own in-app change with no prior transition', () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    renderHookWithInstance(() => useNavigate(navigateFn))
+
+    act(() => {
+      emitLocation({appId: 'app', path: 'documents/def', transition: null})
+    })
+
+    expect(navigateFn).not.toHaveBeenCalled()
+  })
+
+  it('emits navigation.location.update with the joined path and history for an outbound report', async () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    const {result} = renderHookWithInstance(() => useNavigate(navigateFn))
+
+    await act(async () => {
+      result.current({path: 'documents/def', type: 'replace'})
+    })
+
+    expect(updates).toEqual([{url: '/applications/app/documents/def', history: 'replace'}])
+  })
+
+  it('defaults the outbound history to push when no type is given', async () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const {result} = renderHookWithInstance(() => useNavigate(vi.fn()))
+
+    await act(async () => {
+      result.current({path: 'documents/def'})
+    })
+
+    expect(updates).toEqual([{url: '/applications/app/documents/def', history: 'push'}])
+  })
+
+  it('joins a trailing-slash base and a leading-slash path into a single separator', async () => {
+    host.connections.subscribe((client) =>
+      client.emit('applications.base-path', {ok: true, value: '/applications/app/'}),
+    )
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const {result} = renderHookWithInstance(() => useNavigate(vi.fn()))
+
+    await act(async () => {
+      result.current({path: '/documents/def'})
+    })
+
+    expect(updates).toEqual([{url: '/applications/app/documents/def', history: 'push'}])
+  })
+
+  it('does not echo the app’s own outbound report but still fires host-initiated commits', () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    const {result} = renderHookWithInstance(() => useNavigate(navigateFn))
+
+    const own = {appId: 'app', path: 'documents/def'}
+    act(() => {
+      result.current({path: 'documents/def'})
+      emitLocation({
+        appId: 'app',
+        path: 'documents/abc',
+        transition: {navigationType: 'push', to: own},
+      })
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: own},
+      })
+      emitLocation({appId: 'app', path: 'documents/def', transition: null})
+    })
+
+    expect(navigateFn).not.toHaveBeenCalled()
+
+    const hostTo = {appId: 'app', path: 'documents/ghi'}
+    act(() => {
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({
+        appId: 'app',
+        path: 'documents/ghi',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({appId: 'app', path: 'documents/ghi', transition: null})
+    })
+
+    expect(navigateFn).toHaveBeenCalledTimes(1)
+    expect(navigateFn).toHaveBeenCalledWith({path: 'documents/ghi', type: 'push'})
+  })
+
+  it('fires a later host-mediated commit to the same path as a suppressed own report', () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    const {result} = renderHookWithInstance(() => useNavigate(navigateFn))
+
+    const own = {appId: 'app', path: 'documents/def'}
+    act(() => {
+      result.current({path: 'documents/def'})
+      emitLocation({
+        appId: 'app',
+        path: 'documents/abc',
+        transition: {navigationType: 'push', to: own},
+      })
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: own},
+      })
+      emitLocation({appId: 'app', path: 'documents/def', transition: null})
+    })
+
+    expect(navigateFn).not.toHaveBeenCalled()
+
+    const hostTo = {appId: 'app', path: 'documents/def'}
+    act(() => {
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({appId: 'app', path: 'documents/def', transition: null})
+    })
+
+    expect(navigateFn).toHaveBeenCalledTimes(1)
+    expect(navigateFn).toHaveBeenCalledWith({path: 'documents/def', type: 'push'})
+  })
+
+  it('fires a host commit to a path whose own report was rejected by the host', async () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+    updateReply = {ok: false, reason: 'not-navigable'}
+
+    const navigateFn = vi.fn()
+    const {result} = renderHookWithInstance(() => useNavigate(navigateFn))
+
+    await act(async () => {
+      result.current({path: 'documents/def'})
+      await Promise.resolve()
+    })
+
+    const hostTo = {appId: 'app', path: 'documents/def'}
+    act(() => {
+      emitLocation({
+        appId: 'app',
+        path: 'documents/abc',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({appId: 'app', path: 'documents/def', transition: null})
+    })
+
+    expect(navigateFn).toHaveBeenCalledTimes(1)
+    expect(navigateFn).toHaveBeenCalledWith({path: 'documents/def', type: 'push'})
+  })
+
+  it('ignores a commit whose prior transition target path does not match', () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    renderHookWithInstance(() => useNavigate(navigateFn))
+
+    const to = {appId: 'app', path: 'a'}
+    act(() => {
+      emitLocation({appId: 'app', path: 'documents/abc', transition: {navigationType: 'push', to}})
+      emitLocation({appId: 'app', path: 'b', transition: null})
+    })
+
+    expect(navigateFn).not.toHaveBeenCalled()
+  })
+
+  it('suppresses the echo of an own report made with a leading slash', () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    const {result} = renderHookWithInstance(() => useNavigate(navigateFn))
+
+    const own = {appId: 'app', path: 'documents/def'}
+    act(() => {
+      result.current({path: '/documents/def'})
+      emitLocation({
+        appId: 'app',
+        path: 'documents/abc',
+        transition: {navigationType: 'push', to: own},
+      })
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: own},
+      })
+      emitLocation({appId: 'app', path: 'documents/def', transition: null})
+    })
+
+    expect(navigateFn).not.toHaveBeenCalled()
+  })
+
+  it('fires host-mediated commits while the base path is unpublished', () => {
+    emitLocation({appId: 'dashboard', path: 'dashboard', transition: null})
+
+    const navigateFn = vi.fn()
+    renderHookWithInstance(() => useNavigate(navigateFn))
+
+    const to = {appId: 'app', path: 'documents/abc'}
+    act(() => {
+      emitLocation({
+        appId: 'dashboard',
+        path: 'dashboard',
+        transition: {navigationType: 'push', to},
+      })
+      emitLocation({appId: 'app', path: 'documents/abc', transition: {navigationType: 'push', to}})
+      emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+    })
+
+    expect(navigateFn).toHaveBeenCalledTimes(1)
+    expect(navigateFn).toHaveBeenCalledWith({path: 'documents/abc', type: 'push'})
+  })
+
+  it('drops an outbound report when the base path is not ok and still fires a later host commit to that path', async () => {
+    host.connections.subscribe((client) => client.emit('applications.base-path', {ok: false}))
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const navigateFn = vi.fn()
+    const {result} = renderHookWithInstance(() => useNavigate(navigateFn))
+
+    await act(async () => {
+      result.current({path: 'documents/def'})
+    })
+
+    expect(updates).toEqual([])
+
+    const hostTo = {appId: 'app', path: 'documents/def'}
+    act(() => {
+      emitLocation({
+        appId: 'app',
+        path: 'documents/abc',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({
+        appId: 'app',
+        path: 'documents/def',
+        transition: {navigationType: 'push', to: hostTo},
+      })
+      emitLocation({appId: 'app', path: 'documents/def', transition: null})
+    })
+
+    expect(navigateFn).toHaveBeenCalledTimes(1)
+    expect(navigateFn).toHaveBeenCalledWith({path: 'documents/def', type: 'push'})
+  })
+
+  it('returns a referentially stable function across re-renders', () => {
+    publishBasePath()
+    emitLocation({appId: 'app', path: 'documents/abc', transition: null})
+
+    const {result, rerender} = renderHookWithInstance(() => useNavigate(vi.fn()))
+    const first = result.current
+
+    rerender()
+
+    expect(result.current).toBe(first)
+  })
 })

package/src/hooks/dashboard/useNavigate.ts

@@ -1,52 +1,99 @@
-import {type PathChangeMessage, SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+/* eslint-disable react-compiler/react-compiler -- the transport branch in `useNavigate` is a deliberate rules-of-hooks exception; the compiler refuses files that disable it */
+import {
+  type Bridge,
+  type PathChangeMessage,
+  SDK_CHANNEL_NAME,
+  SDK_NODE_NAME,
+} from '@sanity/message-protocol'
+import {isDashboardEnvironment, requireDashboardMessageBus} from '@sanity/sdk/_internal'
+import {type NavigationLocation, TopicError} from '@sanity/sdk/dashboard'
+import {useCallback, useEffect, useEffectEvent, useRef} from 'react'
+import {filter, map, pairwise} from 'rxjs'
 
 import {useWindowConnection} from '../comlink/useWindowConnection'
+import {useSanityInstance} from '../context/useSanityInstance'
+
+type UpdateURLMessage = Bridge.Listeners.History.UpdateURLMessage
+
+/**
+ * A navigation the Dashboard asks the app to perform, or that the app reports to the Dashboard.
+ * `path` is relative to the app's own route, with no leading slash (`'documents/abc'`), and may
+ * carry a query string and hash.
+ * @public
+ */
+export type DashboardNavigation = PathChangeMessage['data']
+
+/**
+ * Reports an in-app navigation to the Dashboard so the browser URL and the Dashboard's own
+ * router follow the app. `type` defaults to `'push'` and only applies in the federated runtime;
+ * see {@link useNavigate}.
+ * @public
+ */
+export type NavigateToDashboardPath = (options: {path: string; type?: 'push' | 'replace'}) => void
 
 /**
  * @public
  *
  * A helper hook designed to be injected into routing components for apps within the Dashboard.
- * While the Dashboard can usually handle navigation, there are special cases when you
- * are already within a target app, and need to navigate to another route inside of that app.
+ * It keeps the app's router and the Dashboard in two-way sync: `navigateFn` receives the
+ * navigations the Dashboard asks the app to perform, and the returned function reports the app's
+ * own in-app navigations back to the Dashboard so the browser URL and the Dashboard's router
+ * follow along.
  *
- * For example, your user might "favorite" a document inside of your application.
- * If they click on the Dashboard favorites item in the sidebar, and are already within your application,
- * there needs to be some way for the dashboard to signal to your application to reroute to where that document was favorited.
+ * A navigation the app reports is not echoed back through `navigateFn`. The returned function is
+ * referentially stable.
  *
- * This hook is intended to receive those messages, and takes a function to route to the correct path.
+ * The two Dashboard runtimes differ:
+ * - In an iframe (Comlink), inbound `type` may be `'push'`, `'replace'` or `'pop'`. Reporting is
+ *   optional because the bridge already forwards the iframe's own `pushState`; a reported `type`
+ *   is ignored and the host applies the URL as a `replace`.
+ * - In a federated app (message bus), inbound `type` is `'push'` or `'replace'`; `'pop'` is never
+ *   sent. Reporting is required because the app's router does not reach the host, and `type` is
+ *   honoured. Until the Dashboard publishes the app's base path, reports are dropped with a
+ *   console warning.
  *
  * @param navigateFn - Function to handle navigation; should accept:
  * - `path`: a string, which will be a relative path (for example, 'my-route')
  * - `type`: 'push', 'replace', or 'pop', which will be the type of navigation to perform
+ * @returns A function the app calls to report its own in-app navigations to the Dashboard.
  *
  * @example
  * ```tsx
  * import {useNavigate} from '@sanity/sdk-react/dashboard'
- * import {BrowserRouter, useNavigate as useRouterNavigate} from 'react-router'
- * import {Suspense} from 'react'
+ * import {useEffect} from 'react'
+ * import {useLocation, useNavigate as useRouterNavigate} from 'react-router'
  *
- * function DashboardNavigationHandler() {
- *   const navigate = useRouterNavigate()
- *   useNavigate(({path, type}) => {
- *     navigate(path, {replace: type === 'replace'})
+ * function DashboardNavigationSync() {
+ *   const routerNavigate = useRouterNavigate()
+ *   const {pathname, search, hash} = useLocation()
+ *   const navigate = useNavigate(({path, type}) => {
+ *     routerNavigate(path, {replace: type === 'replace'})
  *   })
+ *   useEffect(() => {
+ *     navigate({path: `${pathname.slice(1)}${search}${hash}`})
+ *   }, [navigate, pathname, search, hash])
  *   return null
  * }
- *
- * // Wrap the component with Suspense since the hook may suspend
- * function MyApp() {
- *   return (
- *     <BrowserRouter>
- *       <Suspense>
- *         <DashboardNavigationHandler />
- *       </Suspense>
- *     </BrowserRouter>
- *   )
- * }
  * ```
  */
-export function useNavigate(navigateFn: (options: PathChangeMessage['data']) => void): void {
-  useWindowConnection<PathChangeMessage, never>({
+export function useNavigate(
+  navigateFn: (options: DashboardNavigation) => void,
+): NavigateToDashboardPath {
+  // The branch is stable: the transport is fixed for the page lifetime, so one set of hooks
+  // always runs and the other never does.
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- transport is fixed for the page lifetime
+  if (isDashboardEnvironment()) return useBusNavigate(navigateFn)
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- transport is fixed for the page lifetime
+  return useComlinkNavigate(navigateFn)
+}
+
+function useComlinkNavigate(
+  navigateFn: (options: DashboardNavigation) => void,
+): NavigateToDashboardPath {
+  const {sendMessage} = useWindowConnection<
+    UpdateURLMessage | PathChangeMessage,
+    PathChangeMessage
+  >({
     name: SDK_NODE_NAME,
     connectTo: SDK_CHANNEL_NAME,
     onMessage: {
@@ -55,4 +102,100 @@ export function useNavigate(navigateFn: (options: PathChangeMessage['data']) =>
       },
     },
   })
+
+  return useCallback<NavigateToDashboardPath>(
+    ({path}) =>
+      sendMessage('dashboard/v1/bridge/listeners/history/update-url', {
+        url: new URL(path, window.location.origin).href,
+      }),
+    [sendMessage],
+  )
+}
+
+function joinPath(base: string, path: string): string {
+  const root = base.replace(/\/$/, '')
+  return path ? `${root}/${path}` : root
+}
+
+function useBusNavigate(
+  navigateFn: (options: DashboardNavigation) => void,
+): NavigateToDashboardPath {
+  const instance = useSanityInstance()
+  const bus = requireDashboardMessageBus(instance, 'navigate')
+  const navigate = useEffectEvent(navigateFn)
+  // The path of this app's latest outbound request, used to suppress the echo of our own commit.
+  const ownRequest = useRef<string | null>(null)
+
+  useEffect(() => {
+    // bus.subscribe, not useTopic: the rule needs the previous emission, and React coalesces
+    // store notifications that land in one task, so a snapshot + ref could miss the
+    // `{to, transition}` -> `{to, transition: null}` pair. The observable delivers every emission.
+    const sub = bus
+      .subscribe('navigation.location')
+      .pipe(
+        pairwise(),
+        filter(
+          (
+            pair,
+          ): pair is [
+            NavigationLocation & {transition: NonNullable<NavigationLocation['transition']>},
+            NavigationLocation & {transition: null},
+          ] => {
+            const [prev, curr] = pair
+            return (
+              curr?.transition === null &&
+              curr.appId === bus.appId &&
+              prev?.transition?.to.appId === bus.appId &&
+              prev.transition.to.path === curr.path
+            )
+          },
+        ),
+        filter(([, curr]) => {
+          // Loop suppression: any own-app host-mediated commit consumes the pending request, so
+          // a request that lands elsewhere (or never lands) can't strand its path and drop a
+          // later host navigation. Only the commit for our exact path is our own echo to drop.
+          const suppress = curr.path === ownRequest.current
+          ownRequest.current = null
+          return !suppress
+        }),
+        map(([prev, curr]) => ({path: curr.path, type: prev.transition.navigationType})),
+      )
+      .subscribe((change) => navigate(change))
+    return () => sub.unsubscribe()
+  }, [bus])
+
+  return useCallback<NavigateToDashboardPath>(
+    ({path, type = 'push'}) => {
+      // The host commits paths without a leading slash; store the same form so the echo matches.
+      const own = path.replace(/^\//, '')
+      ownRequest.current = own
+      // A request that never landed must drop its suppression, or a later host navigation to the
+      // same path would be dropped. Best-effort: never throws.
+      const clearIfStale = () => {
+        if (ownRequest.current === own) ownRequest.current = null
+      }
+      // The base path is read per call, not in render, so a host that has not published it only
+      // loses outbound reporting; the inbound subscription above still installs.
+      bus
+        .query('applications.base-path')
+        .then((base) => {
+          if (!base.ok) throw new TopicError('applications.base-path')
+          return bus.emit('navigation.location.update', {
+            url: joinPath(base.value, own),
+            history: type,
+          })
+        })
+        .then(
+          (reply) => {
+            if (!reply.ok) clearIfStale()
+          },
+          (error) => {
+            // eslint-disable-next-line no-console
+            console.warn('Failed to report navigation to the Dashboard', error)
+            clearIfStale()
+          },
+        )
+    },
+    [bus],
+  )
 }