Support for mj-include tags

[pareeohnos]

Not sure if this is actually possible within rails as it may be related more to how rails processes templates than with the gem itself, but I was wondering if it was possible to fully support the mj-include tag within views.

The gem provides the usual rails ability to use an email layout and yield the individual mail templates which is great, however I'm using an extension for Visual Studio Code which lets me view previews of the emails as I write them which is extremely helpful. Unfortunately because this extension uses just plain mjml it doesn't work with the rails template loading so it almost immediately fails to render emails due to them being invalid, or they're not complete.

To get around the preview issue I was trying to use <mj-include> instead which was working well, however when it came to rendering an actual email, mjml threw out errors about not being able to find the included file because it was now all in the /tmp directory somewhere. I was forced to then go back to using the rails template stuff which is fine and it works and I can use the ActionMailer::Preview classes to generate previews, but it is faster having it instantly render in my editor

[sighmon]

@pareeohnos Sounds like a cool idea. Do you have a sample repo with the problem you could push somewhere? Could you use mj-raw for it? Sounds like it would be better solved in the VSCode extension... is it similar enough to this one? attilabuti/vscode-mjml#55

[pareeohnos]

I don't currently but I'm sure I could put something together for it. I can ask the dev of the VSCode project, but I didn't have any issues with that when using mj-include (apart from what is described in that issue). How would you invisage using mj-raw, not quite sure I follow?

[sighmon]

@pareeohnos I'm not sure I quite understand the problem yet - so I was just grasping at straws with the mj-raw whether it'd be a way to add some Ruby logic to get the asset path right and load an include. But a repo example would be great to work out the best place to solve the problem. :-)

[pareeohnos]

heh sorry I probably explained it really badly - I'll try and throw something together :)

[sighmon]

@pareeohnos not at all... my brain just works best when there's code to dig into.

[pareeohnos]

@sighmon yeah I'm much the same, code is a lot easier to follow. I've put an example here https://github.com/pareeohnos/mjml-vscode-issue

I couldn't get it to produce the error messages for some reason but the issue itself is still visible. If you install the vscode extension and open the app/views/mjml_mailer/foobar.mjml and then load the preview, you should see the preview with 2 bits of text. The top is included via an mj-include tag. But if you startup the rails server and go to localhost:3000/rails/mailers/mjml_mailer/foobar you'll see only the text from the email itself, it won't have included the other files.

If I swap out the mj-include tags and instead do things as described in the documentation (i.e have an email layout file which contains a = yield) then the emails work fine, but I can't then get previews with the vscode extension.

[sighmon]

@pareeohnos Brilliant thanks. Which VSCode extension are you using?

• MJML v1.6.0
• MJML Snippets v1.1.0
• mjml-syntax v0.0.1

When I use MJML v1.6.0 I see the error you're talking about. This line is commented in the output:

<!-- mj-include fails to read file : ../layouts/email_body_common.mjml at /var/folders/xx/yxxxxxxxxxxx...xxxxxxxxgp/layouts/email_body_common.mjml -->

I'll keep poking around a bit. :-)

[sighmon]

@pareeohnos I get the feeling we might need to solve it in a similar way to: https://github.com/mjmlio/mjml#inside-nodejs

And hand in a --config.filePath. I've run out of time today, but if you'd like to have a further look into it that'd be great.

[pareeohnos]

@sighmon I've got the same versions as you, should all be the latest I think.
Yeah I can see that working but wouldn't it be dependent on where the files are put when they get processed? In the error you pasted above it seems the files are getting moved into some temporary location for processing. Is this done by mjm-rails or is this just how rails handles views? That said, as long as the folder structure is kept intact when put into the temp folder all relative paths should work just fine. But that leaves the question - what would the config.filePath be set to if we don't know what the temporary directory is?

[sighmon]

@pareeohnos I'm not going to get to work on this for a little while - did you want to put together a pull request?

[pareeohnos]

Sure no problem, I'll see if I can find some time to put something together but it might also be a while. I'm not currently working on this part of our system as I just got it working using normal rails layouts so will need to refactor and try it again at some point

[drush]

Bumping this issue up.

To summarize, mj-include path needs to be relative to the source MJML file, or have an absolute path. For tools and Preview functionality to work).

You can set the path to a correct absolute value, but this breaks editor-preview.

By example, this fixes the Rails error:
<mj-include path="<%= File.join __dir__ ,'_header.html.mjml' %>" />

I believe the solve here is for mjml-rails to pre-process the include paths and expand them to absolute before parsing.

[drush]

PR Submitted #100