| Category: JavaScript / Miscellaneous |
| Watchers: 2 |
| Star: 15 |
| Fork: 1 |
| Last update: Mar 13, 2022 |
A code formatter for Heex tamplates.
add :heex_formatter as dependency
defp deps do
[
# ...
{:heex_formatter, github: "feliperenan/heex_formatter"}
]
end
Add it as plugin to your project .formatter file.
[
plugins: [HeexFormatter],
import_deps: [:ecto, :phoenix],
inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
subdirectories: ["priv/*/migrations"]
]
Now run
mix compile
Inspired by Surface Formatter.
plugins: [HeexFormatter] to .formatter.exs
I am getting an error message that plugins: Skipping formatter plugin HeexFormatter because module cannot be found
My application is on elixir 1.13.2 and phoenix 1.6.6LOVE this project! Thank you to you and the rest of the contribs!
Here's a quick sample of running heex_formatter on an almost brand-new Phoenix LiveView project..
Code diff of live.html.heex: https://github.com/megalithic/megalithic.io/pull/2/files#diff-c5cc08848777a65f1977289d91aca51faef0b711e174e6429f083988535a1592
Screenshot of resulting formatting change:
You can see that the live flash alerts render a space so they show up with their styling (padding/etc)..
Thoughts on how to avoid this? Is there a CSS-specific fix, perhaps?
EEx.Tokenizer.tokenize returns a single token for multiline comments. For instance, given the following input:
<section>
<!-- commenting out this div
<div>
<p class="my-class">text</p>
</div>
-->
</section>
The EEx.Tokenizer will return the following structure:
[
{:text, 0, 0,
' <!-- Inline comment -->\n <section>\n <!-- commenting out this div\n <div>\n <p class="my-class">text</p
>\n </div>\n -->\n </section>\n'},
{:eof, 8, 1}
]
Which is send to Phoenix.LiveView.Tokenizer and transformed to:
[
{:tag_open, "section", [], %{column: 3, line: 1}},
{:text,
"\n <!-- commenting out this div\n <div>\n <p class=\"my-class\">text</p>\n </div>\n -->\n ",
%{column_end: 3, line_end: 7}},
{:tag_close, "section", %{column: 3, line: 7}}
]
We get a different structure when there are eex tags included:
Given the HTML with eex tags:
<section>
<!-- commenting out this div
<div>
<p class="my-class"><%= @user.name %></p>
</div>
-->
</section>
That's the EEx.Tokenizer output:
[
{:text, 0, 0,
' <section>\n <!-- commenting out this div\n <div>\n <p class="my-class">'},
{:expr, 3, 27, '=', ' user.name '},
{:text, 3, 43, '</p>\n </div>\n -->\n </section>\n'},
{:eof, 7, 1}
]
Which makes the Phoenix.LiveView.Tokenizer parse only the closing tags after the eex expression.
[
{:tag_open, "section", [], %{column: 3, line: 1}},
{:text, "\n <!-- commenting out this div\n <div>\n <p class=\"my-class\">",
%{column_end: 27, line_end: 4}},
{:eex_tag_render, "<%= user.name %>", %{block?: false, column: 27, line: 3}},
{:tag_close, "p", %{column: 1, line: 1}},
{:tag_close, "div", %{column: 5, line: 2}},
{:text, "\n -->\n ", %{column_end: 3, line_end: 4}},
{:tag_close, "section", %{column: 3, line: 4}}
]
PS: We have the same behaviour on script tags.
Given the context above, I'm not sure how to handle this. I guess we shouldn't format stuff within HTML comment and script tags at all. But since EEx.Tokeziner extracts eex expressions from these tags, we need to find way to put them together as they are so we can just ignore it.
Before going down this road, I'd like to confirm if there is something we could do in the Tokenizers or if I'm missing something.
After running the formatter on this code
<div>
<%# some %>
<%# comment %>
<%# lines %>
</div>
The result has all comment tags stripped out
<div></div>
Putting a comment inside of an inline expression tag also doesn't quite work, the content and all following tags get un-indented one level
<div>
<% # some %>
<% # comment %>
<% # lines %>
</div>
<.next_thing>
A workaround for now is to use a replace expression tag. This stays the same after running the formatter
<div>
<%= # some %>
<%= # comment %>
<%= # lines %>
</div>
For example:
<%= form_for @changeset, Routes.sign_in_path(@conn, :create), fn f -> %>
// 30 lines of html
<% end %>
gets turned into
<%= form_for(@changeset, Routes.sign_in_path(@conn, :create), fn f -> %>
// 30 lines of html
<% end %>
This code was formatted in v0.1
<.live_component
module={WorkGroupTypeComponent}
id={WorkGroupTypeComponent}
work_group_types={@work_group_types}
/>
and master is indenting the self-closing line with an extra space
<.live_component
module={WorkGroupTypeComponent}
id={WorkGroupTypeComponent}
work_group_types={@work_group_types}
/>
Is that expected?
