Add support for auto shuffling at the iterative block level

[evs-chris]

Description:

This adds experimental support for automatic shuffling at the iterative block level, which means that you can tell an {{#each}} block that (or how) to shuffle and it will do so even on regular set updates. This opens up the ability to have shuffling in an iterative section that is dealing with a computed value.

{{#each items, true as shuffle}}...{{/each}}
{{#each items as item, true as shuffle}}...{{/each}}
{{#each items, 'some.key.path' as shuffle}}...{{/each}}
{{#each items as item, 'some.key.path' as shuffle}}...{{/each}}
<!-- and of course, you can also leave off the 'as' if that's your thing -->
{{#each items item, 'some.key.path' shuffle}}...{{/each}}

The alias syntax is used for consistency and parse-abilty, even though it's not necessarily the most ideal way to convey this particular directive. I'm also planning to add the ability to set the iteration context based on a lookup in a source array via

{{#each compute(some(items)), items source}}
  the actual context here will be items[indexOf the current iteration in the source]
{{/each}}

That will allow, among other things, filtering lists with bindings without having to do the whole syncComputedChildren thing.

Regarding the keypath version of the shuffle setting, I chose to use a string rather than a reference to allow future shuffling based on a function.

If I feel particularly frisky, I may also try to get a shuffle transition in here too, but I may punt on that for now, as this is the last set of things that I want to get in before I cut 0.10.

Fixes the following issues:

#3097 #2947

Is breaking:

Nope

[dagnelies]

Hi Chris,

as a comment, I'd like to point out the syntax is somewhat misleading. First, shuffling usually denotes randomly reordering an array, so it's kind of disturbing to see that word. ...the other is: what the heck does this do?! ....I read your description twice, and I still have no clue what this is about 😛

[PaulMaly]

The same thoughts. I think we need to have some real example of this feature.

[evs-chris]

I'll agree that the syntax is not the best possible way to communicate this, but it's the best compromise I could come up with that fits the rest of what's available in ractive. The shuffle alias derives its name directly from the set option that does the same thing at the model level. When an item that is rendered in a list is moved within the list, instead of simply updating the dom associated with the item, this will move the dom to its new position. This is keyed updating in other frameworks, and had only been possible in ractive prior to this with non-computed lists using array methods (splice and friends) or a shuffling set. This has come up in a number of issues.

The shuffle part is also very closely related to (well, overlapping with) the second part of this pr, which is mapped iteration contexts, wherein you can instruct an each block to use a list element's source model for the iteration context rather than a computed child context. The easiest way to explain that is {{#each items.slice()}}{{@keypath}} === @items.slice().${@index}{{/each}} and {{#each items.slice(), items source}}{{@keypath}} === items.${@index}{{/each}}. The benefits are less obvious with such a simple expression to compute a list, but it's very helpful for filtering and sorting lists that needed to have items or parts of items bound later without causing everything associated with the list computation the be recomputed every time some part is touched (syncComputedChildren).

All that said, these are experimental features that I wanted to get a bit of exposure for for feedback, and they don't affect anything if not specifically invoked, making them safe to include in a stable build.

[giovannipiller]

This is keyed updating in other frameworks

hmmm, just to have another example. This:

{{#each people as person, 'name' as shuffle}}
	<div>{{person.name}}</div>
{{/each}}

Would work as Svelte's keyed each blocks?

{{#each people as person @name}}
	<div>{{person.name}}</div>
{{/each}}

[evs-chris]

Would work as Svelte's keyed each blocks?

It does indeed.

[giovannipiller]

Thank you Chris! This is an awesome feature! 😊
Will start playing with it very soon!

[PaulMaly]

Thanks, I, at last, have understood a purpose. Excellent work, @evs-chris !