superchris
Support handling CustomEvents in LiveView
Currently there is no out of the box way to support DOM Custom Events in phoenix. I’ve created a separate library to do this, but I’d love to see it no longer needed 
In taking a gander at the LV js code, it seems to me that a good way to support this would be to:
- allow a
customEventsproperty to specify a single or array of custom event names on thedomoption to theLiveSocketconstructor. - the
bindTopLevelEvents(i think?) would then need to add bindings for each of the specified custom event names - combined, this should allow the user to do
phx-mycustomevent="mycustomevent"in their code - I would propose the payload for it to be the
detailproperty of the custom even along with anyphx-value-s merged in. - Possibly, the dataset of the target element could be merged in. This is what the existing library does
If there is consensus this is at least worth exploring, I’d be happy to have a go at a PR
Most Liked
superchris
Yeah that’s the trade-off, you either have to tell phoenix what custom events can possibly occur, or you have to iterate over the attributes.
This could make sense. At that point it gets kinda close to what my hook does, it would be pretty close to just merging the custom event hook into LV itself. But not having people need to add in the npm and hook themselves to use custom events would be a win for sure. The only concern I can think of is that you have to make the assumption that any attribute that starts with phx- that isn’t known by LV is a custom event. I wonder if some more specific prefix like phx-ce- or something isn’t better. A few more characters of typing but it’s more clear I think.
I was hoping to hear a little more feedback before I picked an approach and attempted a PR, but maybe it just makes sense to dive in.
Popular in Proposals: Ideas
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Real-time error tracking, performance insights, and observability for devs.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"