[Bug] Duplicate components inheriting previously set variables

[AlexShearcroft]

• Maizzle Version: ^3.7.2
• Node.js Version: 16.2.0

When using the component element further iterations appear to inherit variables previously set, and not the one defined when using page.variable.

This can be replicated using the example below:

test.html

---
title: 'Test'
---
<div>
    <h1>{{ page.title }}</h1>
</div>
<div class="mt-10">
    <component src="test2.html" locals='{"name": "Hello"}'/>
</div>
<div>
    <component src="test2.html" locals='{"name": "World"}'/>
</div>
<div>
    <component src="test2.html" locals='{"name": {{ page.title }}}'/>
</div>

test2.html

{{ name }}

Output being received is:

The expected output would be as follows:

Please advise.

[cossssmin]

There are two issues with your code:

1. locals does not support expressions, only a JSON literal (docs).
2. You need to close the <component> tag, it's not self closing and it won't work properly.

- <component src="test2.html" locals='{"name": {{ page.title }}}'/>
+ <component src="test2.html" locals='{"name": "Hey"}'></component>

So right now you can only pass in text to component locals, you can't evaluate expressions there. Would make a great addition to posthtml-modules - see posthtml/posthtml-modules#64

If you just shortened the self closing <component /> for the example, that's ok, but please keep in mind that doing that in production can lead to unexpected results, like missing markup.

[AlexShearcroft]

Thanks for looking into this and the detailed explanation 👍

[cossssmin]

Happy to help! Maybe some day we'll have Components in Maizzle that work similar to those in front-end frameworks, I am aware they're pretty limited right now... :)