Phoenix LiveView Intersperse adds extra whitespaces

[MMore]

The new intersperse component from in Phoenix LiveView is cool, but it adds extra whitespaces that I cannot get rid of.

~H"""
<div id="intersperse">
  <.intersperse :let={item} enum={["One", "Two"]}>
    <:separator>,</:separator>
    <%= item %>
  </.intersperse>
</div>
"""

Generated HTML:

The visible output is: One , Two.
But I would like to have: One, Two.

Unsuccessful tries

• I tried using phx-no-format in the div around
• I tried with a span around , and class="inline-block"
• class="inline-block" in span around the item
• added a css class with pseudo class sep:after { content: ",";}
• I even removed the whitespaces in phoenix_live_view/phoenix_component.ex at e67b0e9429e904477a84b6face22dc5da53672c8 · phoenixframework/phoenix_live_view · GitHub and although I could eliminate some, it didn’t help visually. It seems the for is adding something somewhere with these slots.

PS: I posted that as an issue on Github Phx/Lv already.

[al2o3cr]

@MMore

I even removed the whitespaces in phoenix_live_view/phoenix_component.ex

Double-checking: did you remove the whitespaces in the markup passed to .intersperse?

[MMore]

Yes, everything I could. I basically added phx-no-format and put everything on one line.

[christhekeele]

@MMore

~H"""
<div id="intersperse">
  <.intersperse :let={item} enum={["One", "Two"]}>
    <:separator>,</:separator>
    <%= item %>
  </.intersperse>
</div>
"""

Does the generated HTML change at all if you remove the newlines in your template? ex

~H"""
<div id="intersperse">
  <.intersperse :let={item} enum={["One", "Two"]}><:separator>,</:separator><%= item %></.intersperse>
</div>
"""

HTML is interesting about how it interprets whitespace between or within elements, this is why a lot of HTML DSL engines that do not rely interpolating to a template literal tend to have extra directives to “trim” output. But in your case tightening the literal whitespace in your template should help.

[MMore]

It does: some newlines and whitespaces are gone. But visually that changes nothing unfortunately.

[christhekeele]

Yeah, it looks like the template literal that .intersperse uses contains its own whitespace. You might open an issue/PR with liveview about this, but I get the sense that it’s intended for block elements, not text manipulation. I’d recommend just using Enum.intersperse in some way if you are just building raw text.

[MMore]

Yeah I tried removing the whitespace already there. But even when I put everything there on one line, it still adds new lines which leads to a visual whitespace one , two