Comments (6)
After doing some tests with mjml itself, the comments that are out of mj-body are ignored. I might do it the same way.
from mrml.
FYI, the last release embeds the changes 😉
from mrml.
👋 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? 🤔
from mrml.
👋🏼 @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.
from mrml.
I'm curious about that tool you use to generate the mjml. Could you share it with me?
from mrml.
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.
from mrml.
Related Issues (20)
- build a wasmer lib
- <mj-font> tag not valid anymore? HOT 5
- Mjml validation HOT 1
- Default fonts does not seems to behave as a fallback HOT 3
- License question HOT 1
- Invalid nested HTML comments in generated MSO conditionals HOT 1
- UnexpectedToken with HTML comments in mj-head HOT 1
- mj-include for css does not work HOT 2
- Support parsing elements with no closing tag in `mj-raw` HOT 3
- Self-closing empty nodes in mj-raw results in invalid HTML
- Add types stub to the Python package HOT 2
- Replace string by Cow<'_, str> in style set
- use miette to report errors
- Handle mj-html-attributes
- Mjml nodes should have consistently public children HOT 1
- Support void (self-closing) HTML elements in mj-raw HOT 2
- Preserve whitespace between inline Elements
- parse with warnings
- MRML panics when using mj-divider inside mj-text
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mrml.