I am using tailwind, so I have made myself a few helper functions to stamp common css classes or html. One of those is a container that accepts a block, wrapping that content in a div.

  def container_box(opts \\ [], do: content) do
    %{class: class} = Enum.into(opts, %{class: ""})
    ~E"""
    <section class="classes... <%= class %>">
    <%= content %>
    </section>
    """
  end

One of my (stateful) components (a modal) calls this function at the top of it’s template.

<%= container_box() do %>

    <h1 class="font-bold mb-12">User</h1>

    <%= f = form_for @changeset, "#",
      id: "user-form",
      phx_target: @myself,
      phx_change: "validate",
      phx_submit: "save",
     ....

I noticed that when I interact with the form, my change digests as described in the console are just one fat lump. I just get an object that’s got one key, a huge string book ended by my “container_box” <section> tags.

If I remove the calls, my thin updates are restored and I get update-objects with more than one key.

My understanding is that live view will construct a mapping of all variables used and just send updates to elements where those variables would be effected. I guess because the whole template is wrapped in a call, it just sees it as one ever changing leex var/string/struct/object?

Now it all still works but it certainly feels like an indication that I am doing something wrong.

Is there an easy fix that still lets me DRY up the template?

Should my container be another stateless live component? I actually had it like that some time ago, but then read that it’s a wasteful manner when I just want to wrap some strings around something.

I know I can make a new css class that applies all the tailwind classes, but I’m curious if there is a LiveView trick since I have other helpers which do more structural work beyond pinning some classes so I think I might hit this issue again later.