framework: Maizzle is parsing {{ }} even if they are inside if condition tag with not satisfied condition

• Maizzle Version: 2.4.1
• Node.js Version: 12.19.0

Hi Cosmin.

While playing a bit more with maizzle events and data coming from “outside” (api for example), i noticed a weird behaviour.

Let’s suppose that you have an api returning an object of something, that you save under config.templateData. You can access this object and everything could be inside it through page.templateData into your templates/components files. If you have a situation like this:

<extends src="src/layouts/master.html">
    <block name="template">
        
        <table class="w-full">
            <tr>
                <th>
                    <if condition="page.templateData">
                        
                        {{ page.templateData.introBox.title }}

                    </if>

                </th>
            </tr>
        </table>

    </block>
</extends>

The behaviour that everybody (i think) would expect from this code is that if the object is undefined (for random reasons) you skip all code that is inside if condition tag. Well, here is the weird behaviour. If you don’t have that object, it returns undefined and the if condition is skipped, but maizzle (or better, i thing it’s posthtml-expressions in this case) reads the content inside curly braces {{ }} and tries to parse it, even if it should be bypassed because condition is not satisfied.

The error that maizzle throws is that i try to access a title property on undefined. Well, if i control that just external object exists, and if not exists, it shout not care about what i’m trying to do inside that if condition block. It should just escape everything, bypass it. It shoud not be his business what i am trying to do and what variables i’m trying to access inside that if block.

Same situation if you try to instantiate a new component inside that if block if condition is satisfied, without passing nothing into locals of that component. But, if you try to access the same variable into that component’s definition it tries to parse it, and this is totally wrong. If the condition is not satisfied, it should just escape it.

This is what i mean in this second case:

<extends src="src/layouts/master.html">
    <block name="template">
        
        <table class="w-full">
            <tr>
                <th>
                    <if condition="page.templateData">
                        
                        <component src="src/components/testcomponent.html"></component>

                    </if>

                </th>
            </tr>
        </table>

    </block>
</extends>

and this is what i have inside testcomponent file

<table class="w-full">
    <tr>
        <th>

            {{ page.templateData.introBox.title }}

        </th>
    </tr>
</table>

Let me know please what do you think about this. Thank you.