Calling some JS code upon a LiveView update?

JS interop is an on-going effort.

So in case there isn’t a suggestion from anyone more familiar with LiveView forthcoming, it may be worthwhile to check out MutationObserver (as already suggested here) in order to run some client code in response to any changes in the DOM.

It’s also possible to listen for "phx:update" events which are (at least to my knowledge) emitted when the DOM is done being patched.

https://github.com/phoenixframework/phoenix_live_view/issues/81#issuecomment-473750152

I used it in some of my “experiments” with client side js libs (similarly to LiveView: How to trigger JS function? (Update chart.js on data change)) to create/destroy/recreate their objects when the DOM elements they were “bound” to got “morphdomed”.

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.

Thank you both. The phx:update event did the trick for us. Many thanks.