How can I easily comment out lines in a *.html.heex file?

Phoenix Forum Questions / Help
1

Suppose I have a *.heex template file that I am iterating rapidly on and I just want to comment out a chunk of it for a few moments. What is the syntax for this? Most of the approaches I have tried just throw errors.

I have resorted to just creating a new empty file, then deleting the lines I want to comment out entirely, saving them in the new file, then copy-pasting them back in later when I want to uncomment them. This is super-laborious.

4 Likes
2

Like in any html file?

<!--
commented code
-->
3

When I try using <!-- --> I get this:

== Compilation error in file lib/myapp_web/views/product_view.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/myapp_web/templates/product/show.html.heex:18:1: expected closing `-->` for comment

Here is the state of the file that gives me that error:

<h1>Show Product</h1>

<ul>

  <li>
    <strong>ProductMaker</strong>
    <%= @maker.email %>
  </li>

  <li>
    <strong>Sheet ID:</strong>
    <%= @product.sheet_id %>
  </li>

<!--
  <li>
    <strong>Product:</strong>
    <%= inspect @product.product %>
  </li>
-->

</ul>
<!--
<span><%= link "Edit", to: Routes.product_path(@conn, :edit, @product) %></span> |
<span><%= link "Back", to: Routes.product_path(@conn, :index) %></span>
-->
4

I’m sorry, I was testing on eex file :sweat:

You might find some tips in this issue…

1 Like
5

Thanks. That issue seems to be directly related to my problem. I’m still not crystal clear on how to comment out lines in a *.heex file, though – I asked for some more clarification in the issue.

6

Did you try <%# commented html code here %>

Just looked at your code, the example I just gave will work until you hit your other %> — woops, thanks for the catch @APB9785.

I’m pretty sure I don’t have this issue in my heex files using the standard html comment syntax. I’ll check later and let you know why/if it works for me.

1 Like
7

The opening <% is fine, it’s the closing %> that will end the comment prematurely.

2 Likes
8

In this example:

<h1>Show Product</h1>
<ul>

  <li>
    <strong>ProductMaker</strong>
    <%= @maker.email %>
  </li>

  <li>
    <strong>Sheet ID:</strong>
    <%= @product.sheet_id %>
  </li>

<%#
  <li>
    <strong>Product:</strong>
    <%= inspect @product.product %>
  </li>
%>

</ul>

<span><%= link "Edit", to: Routes.product_path(@conn, :edit, @product) %></span> |
<span><%= link "Back", to: Routes.product_path(@conn, :index) %></span>

I have tried commenting-out the third list item using the syntax you suggested. I get the following error:

Compilation error in file lib/myapp_web/views/product_view.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/myapp_web/templates/product/show.html.heex:17:3: unmatched closing tag. Expected </ul> for <ul> at line 2, got: </li>

The problem is that there is a <%= something %> within the section that I want to enclose in the comment, so the ending tag for that something ends up closing the comment.

2 Likes
9

Mine work OK too for single and multi lines, but if I add a <%= anything %> to the comment, then I will get the aforementioned compilation error.

1 Like
10

Yes, just quickly checked and I can second @tadasajon and @APB9785 that I receive that compilation error when <%= something %> pops up inside the comment.

11

Adding {anything} to the comment seems to work fine, though. But that won’t solve the problem, because standalone {anything} doesn’t evaluate.

12

Off the top of my head, is this behavior happening because when the html is being parsed/interpolated by thePhoenix heex engine, it is treating <!— —> like an html tag? Is that how html interprets the comment in general?

Then the interpolation would throw an error as it seems to be doing.

In which case, do we just need to add something to identify the comment tag syntax? Or is it something else or much more complex? :blush:

13

The parser identifies <!-- as a comment in handle_text, and passes it off to handle_comment, which needs to find a closing --> or it will raise. The problem is that it seems to “give up” on the search as soon as it hits a <%

3 Likes
14

Here is the solution I came up with:

  1. create a new file in the lib/myapp_web directory and define a new module in it:
defmodule HeexIgnore do
    use Phoenix.Component

    def ignore(assigns), do: ~H""
end
  1. In lib/myapp_web.ex find the private function defp view_helpers do... which contains several import statements. Add this line as one of the imports in that function:
import HeexIgnore
  1. Now all your templates should be able to add the <.ignore> ... </.ignore> incantation in order to completely ignore large chunks of lines.

Thanks to @chrismccord for giving me some tips in the GitHub issue referenced by @kokolegorille

15 Likes
15

I started reading the issue around this that everyone’s been having a conversation on, and not sure I have much else to add. Seems very intentional that they have currently chose this implementation around the comments and sounds like there are some workarounds if you need a different behavior until they can revisit this again and discuss more scenarios. :blush:

Thanks for the links! :heart:

Edit: Yes, looks like @tadasajon went with one of those workarounds.

16

for the record:
this is solved with <%!-- --%> since elixir v1.14.0 09/2022:

<%!--  comment
  over
  multiple lines --%>

getting it to work in vscode:

vscode-elixir-ls supports it since 0.12.0:

i just had to add this to my settings.json to use it in vscode with the default comment-shortcut:

  "custom-language-properties": {
    "phoenix-heex.comments.blockComment": ["<%!--", "--%>"]
  },

(phoenix-heex. might be named html-eex. or similar in your setup)

14 Likes