Only update each-blocks if their value has changed

[Rich-Harris]

The 'Each blocks' example in the REPL produces this code:

// ...	
update: function ( changed, root ) {
    var __tmp;

    var eachBlock_value = root.cats;
    
    for ( var i = 0; i < eachBlock_value.length; i += 1 ) {
        if ( !eachBlock_iterations[i] ) {
            eachBlock_iterations[i] = renderEachBlock( root, eachBlock_value, eachBlock_value[i], i, component );
            eachBlock_iterations[i].mount( eachBlock_anchor.parentNode, eachBlock_anchor );
        } else {
            eachBlock_iterations[i].update( changed, root, eachBlock_value, eachBlock_value[i], i );
        }
    }
    
    teardownEach( eachBlock_iterations, true, eachBlock_value.length );
    
    eachBlock_iterations.length = eachBlock_value.length;
},

If it were this instead...

// ...	
update: function ( changed, root ) {
    var __tmp;

    if ( 'cats' in changed ) {
        var eachBlock_value = root.cats;
        
        for ( var i = 0; i < eachBlock_value.length; i += 1 ) {
            if ( !eachBlock_iterations[i] ) {
                eachBlock_iterations[i] = renderEachBlock( root, eachBlock_value, eachBlock_value[i], i, component );
                eachBlock_iterations[i].mount( eachBlock_anchor.parentNode, eachBlock_anchor );
            } else {
                eachBlock_iterations[i].update( changed, root, eachBlock_value, eachBlock_value[i], i );
            }
        }
        
        teardownEach( eachBlock_iterations, true, eachBlock_value.length );
        
        eachBlock_iterations.length = eachBlock_value.length;
    }
},

...we'd prevent a lot of unnecessary work.

[PaulBGD]

I did this in some example code while working on #279, I must have missed it. Has changed always been in there?

[Rich-Harris]

Honestly can't remember if it was there from the start. In any case, I realised it's slightly more complex than my example above makes out — while in this example...

<ul>
  {{#each cats as cat}}
    <li><a target='_blank' href='{{cat.video}}'>{{cat.name}}</a></li>
  {{/each}}
</ul>

...you can skip the block if cats wasn't one of the properties in the set(...) that triggered the update, that's not true if the each block contains data from outside that context:

{{#each comments as comment}}
  <div class='comment'>
    <span class='meta'>
      {{comment.author}} wrote {{elapsed(comment.time, time}} ago:
    </span>

    {{{comment.html}}}
  </div>
{{/each}}

In that example you'd need to update members of the block if time had changed (or elapsed, not that it would):

// ...	
update: function ( changed, root ) {
    var __tmp;

    if ( 'comments' in changed || 'time' in changed ) {
        var eachBlock_value = root.comments;
        
        for ( var i = 0; i < eachBlock_value.length; i += 1 ) {
            if ( !eachBlock_iterations[i] ) {
                eachBlock_iterations[i] = renderEachBlock( root, eachBlock_value, eachBlock_value[i], i, component );
                eachBlock_iterations[i].mount( eachBlock_anchor.parentNode, eachBlock_anchor );
            } else {
                eachBlock_iterations[i].update( changed, root, eachBlock_value, eachBlock_value[i], i );
            }
        }
        
        teardownEach( eachBlock_iterations, true, eachBlock_value.length );
        
        eachBlock_iterations.length = eachBlock_value.length;
    }
},

So we'd need to capture all the dependencies of any expressions used in the block. (We already get this for free in generator.contextualise, but it's not currently stored in the right way.)

[Rich-Harris]

Fixed in 1.16