Remove the advanced transitions/deferred transitions tutorial's id

[magnus-ISU]

Describe the problem

Documentation and tutorials should not include random useless knowledge that doesn't affect the program.

On: https://svelte.dev/tutorial/svelte/deferred-transitions

The code references the elements' ids. However, these IDs do not exist, and don't do anything. However, they confused me.

The code should have the id's removed; furthermore, another example where IDs are necessary could be added, if someone who worked on this actually knows what it was for.

This needs to be updated for the next tutorial also

Describe the proposed solution

The following code works:

App.svelte
<script>
	import TodoList from './TodoList.svelte';

	const todos = $state([
		{ done: false, description: 'write some docs' },
		{ done: false, description: 'start writing blog post' },
		{ done: true, description: 'buy some milk' },
		{ done: false, description: 'mow the lawn' },
		{ done: false, description: 'feed the turtle' },
		{ done: false, description: 'fix some bugs' }
	]);

	function remove(todo) {
		const index = todos.indexOf(todo);
		todos.splice(index, 1);
	}
</script>

<div class="board">
	<input
		placeholder="what needs to be done?"
		onkeydown={(e) => {
			if (e.key !== 'Enter') return;

			todos.push({
				done: false,
				description: e.currentTarget.value
			});

			e.currentTarget.value = '';
		}}
	/>

	<div class="todo">
		<h2>todo</h2>
		<TodoList todos={todos.filter((t) => !t.done)} {remove} />
	</div>

	<div class="done">
		<h2>done</h2>
		<TodoList todos={todos.filter((t) => t.done)} {remove} />
	</div>
</div>

<style>
	.board {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 1em;
		max-width: 36em;
		margin: 0 auto;
	}

	.board > input {
		font-size: 1.4em;
		grid-column: 1/3;
		padding: 0.5em;
		margin: 0 0 1rem 0;
	}

	h2 {
		font-size: 2em;
		font-weight: 200;
	}
</style>

TodoList.svelte
<script>
	import { send, receive } from './transition.js';

	let { todos, remove } = $props();
</script>

<ul class="todos">
	{#each todos as todo (todo)}
		<li
			class:done={todo.done}
			in:receive
			out:send
		>
			<label>
				<input type="checkbox" bind:checked={todo.done}/>
				<span>{todo.description}</span>
				<button onclick={() => remove(todo)} aria-label="Remove"></button>
			</label>
		</li>
	{/each}
</ul>

<style>
	label {width: 100%;}
	span {flex: 1;}
	button {background-image: url(./remove.svg);}
</style>

transition.js
import { crossfade } from 'svelte/transition';
import { quintOut } from 'svelte/easing';

export const [send, receive] = crossfade({
	duration: (d) => Math.sqrt(d * 200),

	fallback(node, params) {
		const style = getComputedStyle(node);
		const transform = style.transform === 'none' ? '' : style.transform;

		return {
			duration: 600,
			easing: quintOut,
			css: (t) => `
				transform: ${transform} scale(${t});
				opacity: ${t}
			`
		};
	}
});

Importance

nice to have