Phoenix LiveView Intersperse adds extra whitespaces

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

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

Generated HTML:
Screenshot 2023-04-24 at 20 42 30

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

Unsuccessful tries

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

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

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

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

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

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.

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

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.

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