Old debug annotations don't get cleaned up after a re-render

[thiagomajesk]

Environment

• Elixir version (elixir -v): 1.18.4
• Phoenix version (mix deps): 1.8.0-rc.3
• Phoenix LiveView version (mix deps): 1.0.9
• Operating system: Linux (WSL)
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

---

This might be the expected behavior, but I thought documenting it wouldn't hurt... I noticed that heex annotations (debug_heex_annotations) get appended to the HTML when you use streams, and the old ones never get cleaned up. This is not the perfect repro, but just to give a rough idea of the issue... Inside a Live Component's render, I have something like this:

def update(assigns, socket) do
  {:ok, stream(socket, :animations, [])}}
end

def render(assigns) do
  ~H"""
  <div>
    <.animation_overlay target={@myself} animations={@streams.animations} />
  </div>
  """
end

And the respective components that render the items from the stream:

defp animation_overlay(assigns) do
  ~H"""
  <div phx-update="stream">
    <.animation_container animations={@animations} target={@target}>
      <:effect :let={animation} type={:bounce}>
        {animation.details.amount}
      </:effect>
    </.animation_container>
  </div>
  """
end

defp animation_container(assigns) do
  ~H"""
  <div :for={{dom_id, animation} <- @animations} id={dom_id}>
    <div :if={slot = Enum.find(@effect, &(&1.type == animation.effect))}>
      {render_slot(slot, animation)}
    </div>
  </div>
  """
end

The annotations for .animation_container get appended on every re-render, causing the HTML to have a lot of comments (which is kinda annoying if the component is updated frequently enough). BTW, the re-renders are not necessarily caused by getting new items on the stream, but the "steal" annotations only happen when you have phx-update="stream" on the container.

[SteffenDE]

Yeah that is expected right now, since morphdom cannot track the comments in the stream container. I'm thinking about ways to make this better - one simple way would be to remove any comments.