Passing a template literal syntax as variable using locals to components

[xeonicca]

• Maizzle Version: 3.0.1
• Node.js Version: 12.14.1

Hello, first of all thank you for building maizzle; it made email creation so much easier.

I want to report something that is not necessarily a bug but not mentioned in the documentations. WIth the default setup (from maizzle new, I created a button component in which I would like to pass two variables to it: buttonText and buttonLink

The component HTML looks like this

<a href="{{buttonLink}}">{{buttonText}}</a>

and the HTML where I use this component looks like this

<component src="src/components/demo.html" locals='{"buttonLink": "https://mysite.com/?q=@{{var}}", "buttonText":"button text1"}'></component>

The expected output should be

<a href="https://mysite.com/?q={{var}}">button text1</a>

However I am getting

<a href="https://mysite.com/?q=undefined">button text1</a>

Clearly I cant use the raw tag inside HTML attributes, so after messing with the syntax for few hours, I found the following works

<component src="src/components/demo.html" locals='{"buttonLink": "https://mysite.com/?q=@@{{var}}", "buttonText":"button text1"}'></component>

I have not seen this behavior documented in Escaping and I am not even sure if this is expected, perhaps you could share some insights?

[cossssmin]

Yeah that doesn't look right, might be a regex issue in posthtml-expressions.

[cossssmin]

So this is actually not a bug in posthtml-expressions, but a side effect of how it's used in Maizzle.

{{ }} expressions are parsed basically twice when using components: once for the component, and once for the resulting HTML when the component has been rendered in the layout.

It works with @@{{ }} because:

• first pass => @{{ var }}
• second pass => {{ var }}

Whereas if you only use @{{ }}:

• first pass => {{ var }}
• second pass => undefined // expression from first pass is parsed

This is now added to the Component docs.