Hey there.
I don’t know if this is intended behaviour, thus I wanted to open a discussion here before opening a bug report.
I tried to conditionally register a phx-hook (I have a timeline that under certain circumstances should be sortable).
I created a demo of the behaviour here: phx-hook-demo/lib/demo_web/hook_demo_live.ex at main · nduitz/phx-hook-demo · GitHub
To break it down:
Simply changing the value to enable does not do the trick (phx-hook={@enabled? && "SomeHook"}). However changing the id along with the enabled assign would invoke the mounted() callback of the hook: id={@enabled && "hooked" || "unhooked} phx-hook={@enabled? && "SomeHook"}
It seems that this behaviour exists for fair reasons but I think the documentation could be more explicit about this.
I assume you can’t toggle hooks via buttons because they are triggered by mount/update.
You could just connect the hook regardless, and have a data-attribute={@condition} on the hook element then check the data-attribute for true or false and run the code based on the outcome.
This doesn’t sound like a bug to me. You said it in your answer, but the hook isn’t going to active because the JS is only activated on mount. Changing id is a possibly lesser known trick to cause a component to remount.
My first instinct was to agree. But what happens if you do this?
<%= if @foo do %>
<div id="foo" phx-hook="MyHook" />
<% else %>
<div id="foo" phx-hook="OtherHook" />
<% end %>
Or this?
<%= if @foo do %>
<div id="foo" phx-hook="MyHook" data-foo="bar" />
<% else %>
<div id="foo" phx-hook="MyHook" data-hello="world" />
<% end %>
If changing the hook doesn’t remount the hook, then either both of these must trigger remount or neither must. And I’m not sure if either of those options feels correct to me.
Intuitively I would expect the hook to behave like a component, remounting if it has changed (id or phx-hook has changed), which is also clearly what the OP was expecting. Requiring the id to change is violating the declarative behavior of the API and forcing you to write imperative code (to update the id) in order to update the result, which will cause bugs.
I believe what’s actually going on here is that hooks (like LiveComponents) are tied to an id for their lifecycle, meaning you could probably “teleport” them anywhere in the page and they would remain intact if you did it in the same render batch. I don’t know exactly how the internals work, but I believe that’s the general idea.
This is distinct from how components work in, say, React, where the mount/unmount lifecycle is tied to the position in the DOM (and a key for dynamic children). TBH the React version is probably strictly superior, though there are some theoretical advantages for the id approach with LiveView since sending things over the wire is so expensive (i.e. you can pick up a whole subtree and move it).
But in the case of hooks this leads to surprising behavior, where changing the hook does not remount it. At least assuming the OP is correct - I have never tried this either. I think this probably could be fixed by detecting a hook has changed for a given id and remounting it, though again I don’t know the internals very well.
The issue is solved in your example and fits perfectly with Liveviews lifecycle already.
The below makes the div code modular, and will always trigger an Updated() diff due to the conditional rendering.
<%= if @foo do %>
<.live_component module={Component} id={"id"} hook="newHook" />
<% else %>
<.live_component module={Component} id={"id"} hook="OtherHook" />
<% end %>
use AppName, :live_component
def render(assigns) do
~H"""
<div id="hook" phx-hook={@hook}>
I didn’t mean to imply that updated() would fix your specific example in its current state. From the looks of it, the issue is that you aren’t doing anything that actually effects the DOM in the non working part, but changing the ID in the working part causes the component to remount.
I meant to show how I would do it for the issue you’re trying to solve. I would create a live_component, pass the hook as an attribute as either a string or nil, then conditionally render the components with whatever your ID system is. I don’t know your exact use case, but if you’re toggling hooks on and off then using mounted() and updated() sounds like it makes more sense to me. But again, don’t know the exact use case so I’m assuming based on the toggle button. I may have jumped the gun on suggesting updated() if your plan is to load one or the other rather than toggle between them frequently in the same session. But still, I would make it a conditionally rendered component rather than add conditions to the hook/ids personally.
My use case is a timeline I use in a game that is always rendered but only becomes interactable if it is the players turn.
Your suggestion would certainly work, but I went with updating the id for now. Thanks for your input though!
Btw I think the exact behaviour I observed is documented in code here:
// if we are patching the root target container and the id has changed, treat it as a new node
// by replacing the fromEl with the toEl, which ensures hooks are torn down and re-created
That change is specific to LiveComponents, it doesn’t affect regular DOM nodes. And it only makes the behavior consistent between LiveComponents and any other node when changing its ID.
alalalalalalalalalalalalala
