Mjml: dynamic replacing content for mj-include with handlebars

[bytewiz]

Hi,

I tried running my mjml file trough handlebars compile function to replace the content, but it is not able to reach into <mj-include /> and replace the template tags there.

So is there a way to "render" the include file in mjml and still keep it as .mjml or similar? or make handlebars reach into the <mj-include/> file?

Thanks

[iRyusa]

Hi @bytewiz

That's a tricky question, there's no way to do that in MJML3 I think (don't know if we export the include handler).

In MJML4 the parser will replace it directly into the JSON so you can get the JSON back and convert it to XML with something like this https://github.com/mjmlio/json2mjml

[bytewiz]

@iRyusa alright thanks for quick reply! 👍

I will investigate and maybe come up with my own version for a solution 👌 and if so I will happily refer it to this issue.

[mattlub]

If you are compiling with handlebars first you can use handlebars partials instead of mjml-include tags.

[iRyusa]

I think @mattlub has the best compromise here 👍

[joergi]

will there be any update with the new middleware?
or still partials as mentioned by @mattlub ?
We run exactly in this problem, because we could not get our environmental variables in the mj-include

[iRyusa]

Preprocessors are applied on each mj-included file before parsing, so it should works fine I guess

[joergi]

unfortunately it's not working.

in our main.hbs we use:

<mj-include path="tobeincluded.hbs" />

in the tobeincluded.hbs we use:

<mj-section padding="16px 0" background-color="#CEDDe4" full-width="full-width">
    <mj-column width="100%" padding="0">
       <mj-text>{{config.something}}</mj-text>
    </mj-column>
</mj-section>

it's just showing in the rendered page the {{config.something}}
If I put the <mj-text>{{config.something}}</mj-text> it's working as expected, so we are getting the data from the config, but just not inside the mj-include.

Partials would work too, but we were hoping, that the middleware fixes this issue?
If I should open a new issue because of this, let me know!

[iRyusa]

You need to share the whole setup here... with that few info it's hard to see what can go wrong, what's your preProcessor options looks like ?

[joergi]

ok, will try to build you our setup. will need some time.

[joergi]

Hey,
we did a small example.
as you can see:
the environmental variable is available in the main.hbs but it's not printed in the included file.
this is how it looks:

Project: https://github.com/joergi/mjml-handlebar-no-environmental-variables

if you have any questions, please feel free to ask
We use the newest version (4.6.2) of mjml. The middleware / preprocessor is not helping here (or we do something completely wrong)

Thanks a lot

[iRyusa]

Well you're not using preprocessors in your current setup so that's why it doesn't work. You actually compile Handlebars into compiling with MJML so include are resolved AFTER handlebars and not before.

If you use preprocessors then it should work because every xml string will interpreted by Handlebars.
If you don't want to use preprocessors then you can just use regular handlebars partials.

[joergi]

@iRyusa - hmm do you have somewhere a working example? Maybe I got understood something with the preprocessor completly wrong.

[iRyusa]

Preprocessors is a new option that you have to pass on mjml2html function, you have nothing declared here: https://github.com/joergi/mjml-handlebar-no-environmental-variables/blob/master/src/controller/controller.ts#L16 apart from minify option. Here's an example in our test case : https://github.com/mjmlio/mjml/blob/f161c51ece176c59d193ca8f8b1c2e610f87f4d2/packages/mjml-parser-xml/test/test-preprocessors.js

[joergi]

Thanks a lot, I will give it a try. Is there an "official documentation" about it? or just the example? I haven't found it through the search on the documentation.

[iRyusa]

Not yet this is a really new addition from a PR, https://github.com/mjmlio/mjml/blob/master/packages/mjml/README.md it's listed as an option from the doc still