refactor: deprecated event dispatcher

Author: perryd01

src/App.svelte

@@ -100,15 +100,15 @@
 		}
 	};
 
-	const handleRemove = (event: CustomEvent<ItemDeleteEvent>) => {
-		todoStore.remove(event.detail.id);
+	const handleRemove = (item: ItemDeleteEvent) => {
+		todoStore.remove(item.id);
 	};
 
-	const handleEdit = (event: CustomEvent<ItemEditEvent>) => {
-		const matchedTodo = todoStore.todos.find((todo) => todo.id === event.detail.id);
+	const handleEdit = (item: ItemEditEvent) => {
+		const matchedTodo = todoStore.todos.find((todo) => todo.id === item.id);
 
 		if (!matchedTodo) {
-			console.warn(`Todo item with id ${event.detail.id} not found.`);
+			console.warn(`Todo item with id ${item.id} not found.`);
 			return;
 		}
 
@@ -168,11 +168,11 @@
 
 		<section class="list-todo-wrapper">
 			<ui5-panel class="list-todos-panel" header-text="Incompleted Tasks" collapsed={!undoneTodos.length || undefined}>
-				<TodoList items={undoneTodos} on:item-edit={handleEdit} on:item-delete={handleRemove} on:selection-change={handleToggleDone} />
+				<TodoList items={undoneTodos} onEdit={handleEdit} onDelete={handleRemove} onSelectionChange={handleToggleDone} />
 			</ui5-panel>
 
 			<ui5-panel class="list-todos-panel" header-text="Completed Tasks" collapsed={!doneTodos.length || undefined}>
-				<TodoList items={doneTodos} on:item-edit={handleEdit} on:item-delete={handleRemove} on:selection-change={handleToggleDone} />
+				<TodoList items={doneTodos} onEdit={handleEdit} onDelete={handleRemove} onSelectionChange={handleToggleDone} />
 			</ui5-panel>
 		</section>
 	</section>

src/lib/TodoItem.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import "@ui5/webcomponents/dist/ListItemCustom";
 	import type { TodoItemT } from "../types/TodoItem.type";
 	import type { ItemEditEvent, ItemDeleteEvent } from "./todoitem.event";
@@ -8,26 +7,18 @@
 		// Props
 		item: TodoItemT;
 		datakey: number;
+		onDelete(item: ItemDeleteEvent): void;
+		onEdit(item: ItemEditEvent): void;
 	}
 
-	let { item, datakey }: Props = $props();
-
-	// Events do not bubble from nested components
-	// in svelte, we must dispatch them
-	const dispatcher = createEventDispatcher();
+	let { item, datakey, onEdit, onDelete }: Props = $props();
 
 	const handleEditPress = () => {
-		const event: ItemEditEvent = {
-			id: item.id,
-		};
-		dispatcher<string>("item-edit", event);
+		onEdit({ id: item.id });
 	};
 
 	const handleDeletePress = () => {
-		const event: ItemDeleteEvent = {
-			id: item.id,
-		};
-		dispatcher("item-delete", event);
+		onDelete({ id: item.id });
 	};
 </script>
 

src/lib/TodoList.svelte

@@ -1,22 +1,24 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import "@ui5/webcomponents/dist/List";
 
 	import TodoItem from "./TodoItem.svelte";
 	import type { TodoItemT } from "../types/TodoItem.type";
+	import type { ItemDeleteEvent, ItemEditEvent } from "./todoitem.event";
+	import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
 
 	interface Props {
 		items: TodoItemT[];
+		onEdit(item: ItemEditEvent): void;
+		onDelete(item: ItemDeleteEvent): void;
+		onSelectionChange(event: CustomEvent<ListSelectionChangeEventDetail>): void;
 	}
 
-	let { items }: Props = $props();
+	let { items, onEdit, onDelete, onSelectionChange }: Props = $props();
 </script>
 
-<ui5-list selection-mode="Multiple" onselection-change={bubble('selection-change')}>
+<ui5-list selection-mode="Multiple" onselection-change={(event: CustomEvent<ListSelectionChangeEventDetail>) => onSelectionChange(event)}>
 	{#each items as item (item.id)}
-		<TodoItem {item} datakey={item.id} on:item-edit on:item-delete />
+		<TodoItem {item} datakey={item.id} {onEdit} {onDelete} />
 	{/each}
 </ui5-list>