CEF HUD example

The client creates the browser and forwards selected events:

const hud = vimp.browsers.create('package://ui/index.html')

vimp.on('ui:ready', ({ mountedAt }) => {
  console.log(`HUD mounted at ${mountedAt}`)
})

vimp.on('hud:toast', (payload) => {
  hud.executeJavaScript(
    `window.__vimpRecv?.('hud:toast', ${JSON.stringify(payload)})`,
  )
})

The CEF bundle declares its own bridge payloads:

import '@vimp-mp/types/ui'

declare module '@vimp-mp/types/ui' {
  interface VimpClientInboundEvents {
    'ui:ready': { mountedAt: number }
  }

  interface VimpServerInboundEvents {
    'garage:spawn': { model: string }
  }
}

It can then subscribe and emit without importing runtime values:

const unsubscribe = vimp.on('hud:toast', (payload) => {
  console.log('Toast from the client script:', payload)
})

vimp.emitClient('ui:ready', { mountedAt: Date.now() })
vimp.emitServer('garage:spawn', { model: 'adder' })

window.addEventListener('beforeunload', unsubscribe)

Package the built page below scripting/client/ so package://ui/index.html resolves from the downloaded client package.