Live Reload

[Klustre]

Research ways to support live reloading for UI scripts.

[Klustre]

Possible with this esbuild plugin, but it will not work if the script window is already open. Work around this by hashing the file name, but only when live reload is enabled.

import { basename, join, resolve } from 'path'

export default function () {
  return {
    name: 'reload',
    setup(build) {
      build.onEnd(() => {
        build.initialOptions.entryPoints.forEach(async (entryPath) => {
          const buildPath = join(
            build.initialOptions.outdir,
            basename(entryPath).replace('.ts', '.js')
          )
          const res = await fetch('http://127.0.0.1:8080/post', {
            method: 'POST',
            body: JSON.stringify({ path: resolve(buildPath) }),
          })
          if (!res.ok) {
            console.error(`Failed to send ${buildPath}`)
            console.error(`Is Stallion open in Cavalry?`)
            return
          }
          const body = await res.text()
          const success = body?.toLowerCase() === 'success'
          if (!success) {
            console.error(`Failed to send ${buildPath}`)
          } else {
            console.log(`Successfully sent ${buildPath}`)
          }
        })
      })
    }
  }
}

[Splines]

I can also highly recommend to look into Vite, its dev server offers live reloading natively and Vite is in general such a nice and developer-friendly tool.

[Klustre]

Thanks but this ticket is related to reloading the script in Cavalry. Vite's live reload only works in a web context and is based on esbuild which is used in this project.