The #each block example and explanations are overly lengthy and could be more concise.

[sir-kokabi]

Describe the problem

Svelte aims for simplicity in its language syntax, documentation, and examples. However, this principle is sometimes overlooked. For example, in the #each-block section, there's a lengthy example that doesn't add much value and can distract users.

When users are learning about the #each block, it's best to avoid overly elaborate styles. Such examples can complicate code understanding rather than help. Attributes like aria-current and aria-label often lead to unnecessary questions.

While the example is useful, explaining concepts concisely is even better. Clear documentation helps users quickly grasp and use Svelte, which encourages a strong community.

Describe the proposed solution

I've prepared a simple example that I can use to update the documents and pull request if you're agree. If you disagree, I'd really like to know which of my statements you disagree with? These discussions help me to have better collaboration in the future.

<script>
let names = ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace'];
$: winners = names
  .filter(() => Math.random() < 0.5)
  .slice(0, 5);
</script>

<ul>
  {#each winners as winner, index}
    <li>{index + 1}. {winner}</li>
  {/each}
</ul>

This example, besides being much shorter than the current example in the documentation and having no style or blind spot, also has the advantage of demonstrating the need to use #each block well. In the original example currently in the documentation, you can achieve the goal simply by repeating the buttons without #each, but in my example, this shortcoming does not exist.

Importance

nice to have