Calling some JS code upon a LiveView update?

Questions & Help Questions
, ,
4

Works with thermostat_live.ex:

import css from "../css/app.css";
import "phoenix_html"
import {LiveSocket, debug} from "phoenix_live_view"

let liveSocket = new LiveSocket("/live")
liveSocket.connect()

// grab time and weather temperature from thermostat
// --- assets/app.js --- vvv New vvv

document.addEventListener('phx:update', phxUpdateListener);

function phxUpdateListener(_event) {
  const time = extractTime()
  if (!time) {
    return
  }

  const temperature = extractTemperature()
  if (!temperature) {
    return
  }

  const message =  `${time}: ${temperature}`
  console.log(message)
}

function extractTime() {
  const timeSpan = document.querySelector('div.bar > span')
  return timeSpan && timeSpan.textContent
}

function extractTemperature() {
  const weatherForm = document.querySelector('span.weather form')
  if (!weatherForm) {
     return null
  }

  const result = /[+-]?\d+°[CF]/i.exec(weatherForm.lastChild.textContent)

  return result && result[0]
}

Certainly simpler than using a MutationObserver.