components made up of inline elements should preserve whitespace

[ruslandoga]

👋

Environment

• Elixir version (elixir -v): 1.17.3
• Phoenix version (mix deps): 1.7.18
• Phoenix LiveView version (mix deps): 1.0.0
• Operating system: Darwin 24.1.0
• Browsers you attempted to reproduce this bug on (the more the merrier):
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:

Actual behavior

Right now the HTML formatter treats all components as block elements, even if they consist of only inline elements.

This causes this component

def styled_link(assigns) do
  ~H"""
  <a href={@href} style="color:red;">{render_slot(@inner_block)}</a>
  """
end

in this template

<p>
  <.styled_link href="some very long url and it goes on and on some very long url and it goes on and on  some very long url and it goes on and on ">go home</.styled_link>.
</p>

to be formatted like this

<p>
  <.styled_link href="some very long url and it goes on and on some very long url and it goes on and on  some very long url and it goes on and on ">
    go home
  </.styled_link>.
</p>

which changes how it gets rendered on page (it adds extra whitespace before the period).

Whereas the a tag by itself is not forced to "line-break"

<p>
  <a href="some very long url and it goes on and on some very long url and it goes on and on  some very long url and it goes on and on ">go home</a>.
</p>

^^^ this doesn't get re-formatted.

---

NOTE: I am aware of the phx-no-format workaround :)

---

Expected behavior

Formatting of components should have the same rules as normal elements. If a component consists of only inline elements, then it should be treated as an inline element itself.

[josevalim]

Honestly, I don't know what to do here. We could implement this, but then it means we have even fewer opportunities to format the user code. Perhaps one option is to make it a configuration option in the formatter? Something like:

inline_heex_elements: ~w(.styled_link foo-bar)