Clear syntax for #each block

[rleyvasal]

Would it be possible to make the #each block syntax clean and clear like a for loop? - it is confusing compared to other programming languages.

It is not clear what problem is the #each block syntax trying to solve compared to a standard for loop syntax .

Example from svelte website #each :

<script>
	let cats = [
		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
		{ id: 'z_AbfPXTKms', name: 'Maru' },
		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
	];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
	{#each cats as { id, name }, i}
		<li>
			<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v={id}">
				{i + 1}: {name}
			</a>
		</li>
	{/each}
</ul>

Suggestion

{#each { id, name } of cats, i}

or (god forbids!)

{#for { id, name } in cats}

Loops in other programming languages for loops:

Javascript

for (let i = 0; i < cats.length; i++) {
    console.log(cats[i].id, cats[i].name);
}

Python

for cat in cats:
    print(cat['id'], cat['name'])

C

    for (int i = 0; i < length; i++) {
        printf("%d %s\n", cats[i].id, cats[i].name);
    }

[brunnerh]

If anything, it should be analogous to JS, so:

{#for { id, name } of cats}

But it never could be fully the same because of the key and index terms which have to be fitted somewhere.

Also, switching out such a central syntactical component at this point would cause a lot of unnecessary churn.