There should be a built in hook for running exec JS commands

Agree with this, think it’s something everyone needs. Hey maybe submit a PR?

Yeah I’d be happy to do the work myself. Just wanted to gauge the interest

Sounds like a good addition. You don’t need a hook though, just an event listener on the window.

let execJS = (selector, attr) => {
  document
    .querySelectorAll(selector)
    .forEach((el) => liveSocket.execJS(el, el.getAttribute(attr)))
}

// execute a Phoenix.LiveView.JS command on an element
window.addEventListener("js:exec", (e) =>
  e.target[e.detail.call](...e.detail.args)
)

And the JS command:

https://github.com/fly-apps/live_beats/blob/712204ca172ed6d36456c8ed4fd6aaba50099447/lib/live_beats_web/components/core_components.ex#L666

Please keep in mind these solutions most likely bypass any future CSP you put in place, making it more vulnerable to XSS attacks. I’d not recommend it as a general solutions and, if someone wants to go down this road, please be aware of the security implications.

Well how does the current JS command system work with CSP? There is nothing out of the box to generate nonces for the commands or something is there?