// 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