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

Phoenix Forum Proposals/Suggestions
,
1

All the pieces are there to execute arbitrary JS commands from the server. You can put them on a data property and call them from the client with execJs. But you can’t just do this arbitrarily. You need to make a new hook, dispatch the custom calls to it, and have that hook call execJs.

Wouldn’t it be a lot simpler if LiveView JS just shipped with a hook that could execute any JS commands serialized onto an attribute from the server (ie handle_events)?

I’m aware you can build this yourself without too much trouble but why not just ship this? It would allow anyone to call the full range of JS command stuff from handle_events right out of the box.

7 Likes
2

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

3

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

4

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:

5

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.

2 Likes
6

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?

2 Likes