Live view mix format

If i have fallowing code (<.link navigate={...} class={["class"]}, other-attr="value" ...>Show</.link>) component mix format makes it multiline and thats fine, but:

(<.link 
  navigate={...} 
  class={["class"]} 
  other-attr="value" 
  {@rest}
>
  Show
</.link>)

Inner contents Show as well now has white space before and after which leads to underline expand one white space before and after
Screenshot 2022-10-24 at 11.58.24

If i manually put code like so,

(<.link 
  navigate={...} 
  class={["class"]} 
  other-attr="value" 
  {@rest}
>Show</.link>)

mix format still expands it to more lines. In elixir code it does not have effect, but in html those newlines/whitespaces result in factual output changes.

Is there a way around it?

1 Like

display: inline-flex on the link

2 Likes

Thanks man, once again. Tried it - works. Now just need to apply it to all the places.

That feels like a bug to me. Mix format should not have any impact on the output result.

1 Like

Yeah, I tend to agree. But also html’s default whitespace handling is really shitty and tends to require rather unreadable code in places like this just to get rid of leading or trailing whitespace around text nodes.

1 Like

I don’t want to hijack this thread, but I’ve run into a similar issue with a for-loop, and I think it might be helpful to include this example here:

<%= for {graphemes, tags} <- @graphemes_with_tags do %><.text_element tags={tags} text={Enum.join(graphemes)} /><% end %>

The component is essentially a very minimal implementation of ProseMirror’s renderer. If the text_element component is on its own line, it causes additional whitespace to appear, e.g., anytime an inline style changes.

It doesn’t seem like the phx-no-format attribute would work here, either.

In a case like this, should we just not format that file? Or is there another workaround that could be added to the formatter?

How about the following?

<parent phx-no-format><.inner :for={…} \></parent>

Also css is still an option as well :slight_smile:

1 Like

Thanks so much, that’s perfect!

I’m not sure how I missed the :for syntax for the loop, but that’s exactly what I needed. :upside_down_face: