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}`)
          }
        })
      })
    }
  }
}