maltoe
LiveView + WebComponents re-render issue
Hello 
We have a small table-based index page based on LiveView, which displays (among other data) some timestamps in “relative” format using <relative-time> from GitHub - github/relative-time-element: Web component extensions to the standard <time> element..
This works great on first render but as soon as the table content is updated via the websocket, the time elements are re-rendered with their “fallback” content (the timestamp).
The markup is generated using this function:
def relative_time(datetime)
{:ok, humanized} = MyApp.Cldr.DateTime.to_string(datetime, format: :short)
content_tag(:"relative-time", humanized, datetime: to_string(datetime))
end
Does anyone have an idea? I’m pretty sure the web components aren’t initialized properly (i.e. some JS doesn’t run), but I wonder why that is?
Best,
malte
Marked As Solved
maltoe
phx-update: "ignore" does this trick, though I don’t understand why.
Also Liked
kelvinst
Well, basically what you want to do is to create a phx-hook to re run the time-elements code when your nodes are updated by the websocket. Checkout the client hooks docs
kelvinst
Hmmmmm, I’m not really sure, but I suspect that placing phx-update="ignore" on whatever tag is just going to guarantee that tag or its contents is not going to be changed anymore, or at least that is what I would expect to happen. But as far as I understood, you marked the individual datetime elements with that, and not the table that contains them, and what’s changing when you click to reorder is that table, not the actual date time elements, they stay the same, they are just moved around.
maltoe
Yes, the phx-update="ignore" attributes went on the <relative-time> elements.
Looking at the ws packages it seems that LV is sending the entire table with each re-ordering, so I suppose the “moving around” of elements you describe is magic that happens in morphdom. That is quite impressive.
Thanks for your help!
Popular in Questions
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
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.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"