Root HTML comment fails to parse

[moomerman]

Root HTML comment fails to parse

[jdrouet]

After doing some tests with mjml itself, the comments that are out of mj-body are ignored. I might do it the same way.

[jdrouet]

FYI, the last release embeds the changes 😉

[jdrouet]

👋 Hey @moomerman, thanks for this issue.
So the problem here is that we parse against a component in particular.
The entry point being Mjml.parse(...). If we accept anything, I think it would require a breaking change.
Is it really something you can't live without? Why can't you put it in the <mjml> component itself? 🤔

[moomerman]

👋🏼 @jdrouet thanks for getting back. It isn't something under my control unfortunately, an update to the framework I'm using to generate the MJML is adding these comments in. I can work around it on my side, I just thought perhaps it was a bug in the parser since it handles comments fine otherwise, including outside the </mjml><!-- comment -->. The online MJML live editor also correctly ignores the first comment.

[jdrouet]

I'm curious about that tool you use to generate the mjml. Could you share it with me?

[moomerman]

Yep sure. I'm using the Phoenix web framework for Elixir. Phoenix comes with a way of writing components as functions which gives you formatting, syntax highlighting and compile-time checks for things like mismatched tags and required attributes. It also enables you to compose your components nicely as custom HTML tags.

Here's a real example from our codebase:

Reset Password Template

defmodule App.Emails.ResetPassword do
  @moduledoc false
  use MyApp, :email

  attr :url, :string, required: true

  def mjml(assigns) do
    ~H"""
    <.simple_layout>
      <:preview>Reset your password</:preview>
      <:title>Reset your password</:title>

      <mj-text align="center" color="#231F20" font-size="16px" line-height="1.5" padding="10px">
        <span style="word-spacing: normal;">
          You can reset your password by clicking the button below
        </span>
      </mj-text>
      <mj-spacer height="30px"></mj-spacer>
      <.button href={@url}>
        Reset your password <span aria-hidden="true">→</span>
      </.button>
    </.simple_layout>
    """
  end

  def text(user, url) do
    """
    ==============================

    Hi #{user.email},

    You can reset your password by visiting the URL below:

    #{url}

    If you didn't request this change, please ignore this.

    ==============================
    """
  end
end

In the example you can see I'm reusing <.simple_layout> and <.button> components and have "slots" for things like preview and title.

The issue I've come across recently is that Phoenix added debug annotations to track where your components were rendered from in development when you look at the source.

When I render my MJML templates I'm getting these annotations which look like this:

<!-- <App.Emails.ResetPassword.mjml> lib/app/emails/reset_password.ex:8 (app) -->
<!-- @caller lib/app/emails/reset_password.ex:9 (app) -->
<!-- <App.Emails.Components.simple_layout> lib/app/emails/components.ex:11 (app) -->
<mjml>...</mjml>

which currently cause it to fail to parse. It is only happening in dev though and I can add a workaround for it since it is predictable.