Render behavior different with nested components using <include...> and <@xxxxx>

[vinej]

Bug Report

Rendering behavior is different with nested components using <include...> and <@...>

Marko Version: 4.9.0

Details

I created a panel component like that

<div class="panel-header">
    <include(input.header)/>
</div>
<div class="panel-content">
    <include(input.content)/>
</div>
<div class="panel-footer">
    <include(input.footer)/>
</div>

After I defined another component like that (partial code for exemple)

<panel>
  <@header>List of companies</@header>
  <@content> 
      <div>
        <ul>
        <for (cie in state.companies>
          <li key=cie.code class="animated bounce">${cie.code}</li>
        </for>
        </ul>
        </div>
    </@content>
    <@footer>JYV</@footer>
</panel>
<div>
   <ul>
    <for (cie in state.companies>
        <li key=cie.code class="animated bounce">${cie.code}</li>
    </for>
    </ul>
</div>

Bug with rendering

• when I add a new company to the list, the list inside the <panel> is refresh completely. I added a bouncing transition to see the behavior : all the list is bouncing.

• The list outside the <panel> is working as expected. When I add a new company into the list only the new company is bouncing, that means that only the new company has been added into the DOM.

Thanks

Jean-Yves

[DylanPiercey]

Given the version of Marko here, it was likely a diffing issue that is now fixed.