dotfiles/app/assets/js/app.js

// If you want to use Phoenix channels, run `mix help phx.gen.channel`
// to get started and then uncomment the line below.
// import "./user_socket.js"

import "phoenix_html"
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
import topbar from "../vendor/topbar"
import Alpine from "alpinejs"
import { Terminal } from "xterm"
import { FitAddon } from "@xterm/addon-fit"

let Hooks = {}

// TODO: Move this code and xterm into a separate generated file, and load that file only when needed
Hooks.Terminal = {
  mounted() {
    const term = new Terminal({
      fontFamily: '"Courier New", "DejaVu Sans Mono", "Everson Mono", monospace',
      fontSize: 13,
      convertEol: true,
      theme: {
        background: "#24273a",
        foreground: "#cad3f5",
        cursor: "#f4dbd6",
        black: "#494D64",
        red: "#ed8796",
        green: "#a6da95",
        yellow: "#eed49f",
        blue: "#8aadf4",
        magenta: "#f5bde6",
        cyan: "#8bd5ca",
        white: "#b8c0e0",
      }
    })

    const fitAddon = new FitAddon()
    const resizeObserver = new ResizeObserver(() => fitAddon.fit())

    term.loadAddon(fitAddon)
    term.open(this.el)
    term.onData(data => this.pushEventTo(this.el, "data_event", data))
    term.onResize(resize => this.pushEventTo(this.el, "resize_event", resize))

    this.handleEvent("data", payload => term.write(payload.data || ""))

    fitAddon.fit()
    resizeObserver.observe(this.el)
  }
}

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to)
      }
    }
  },
  hooks: Hooks,
})

// Show progress bar on live navigation and form submits
topbar.config({ barColors: { 0: "#29d" }, shaDowColor: "rgba(0, 0, 0, .3)" })
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())

// connect if there are any LiveViews on the page
liveSocket.connect()

// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket

Alpine.start()
window.Alpine = Alpine