Svelte v5 migrate

[perryd01]

• upgrade dependencies
  • @ui5/webcomponents: 2.10.0
  • svelte: 5.30.1
• migrate to Svelte v5 syntax
• refactor code for fixing DRY and improve readability

[cla-assistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[cla-assistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull Request Overview

This PR migrates the application from Svelte v3 to v5 with updated dependency versions and syntax modernization. The migration refactors code structure by extracting the header component and updating event handling patterns while maintaining existing functionality.

• Upgrade to Svelte v5 syntax with new reactivity patterns ($state, $props)
• Update UI5 Web Components and build dependencies to latest versions
• Extract header functionality into separate component for better maintainability

Reviewed Changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
package.json	Update dependencies to Svelte v5 and latest UI5 Web Components
vite.config.js	Remove splitVendorChunkPlugin from Vite configuration
svelte.config.js	Migrate from svelte-preprocess to vitePreprocess
eslint.config.js	Replace legacy ESLint configuration with flat config format
src/main.ts	Update app mounting from constructor to mount function
src/stores/stores.svelte.ts	Implement new reactive state management with Svelte v5 syntax
src/lib/Header.svelte	Extract header component with theme and profile management
src/lib/TodoList.svelte	Update props syntax and event handling for v5 compatibility
src/lib/TodoItem.svelte	Convert to new props interface and event handler syntax
src/App.svelte	Refactor main component using Header component and v5 patterns

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The TodoItemType type is duplicated with TodoItemT imported from the types file. Consider using the existing type instead of defining a duplicate.

Suggested change

	class TodoStore<T extends TodoItemType> {
	class TodoStore<T extends TodoItemT> {

[Copilot]

Debug console.log statement should be removed from production code.

Suggested change

console.log(item, id);

[Copilot]

Using array length as ID can cause duplicate IDs when items are removed. This will assign ID 2 to a new item even if there's already an item with ID 2. Consider using a counter or finding the maximum existing ID + 1.

Suggested change

	id: this.todos.length,
	const maxId = this.todos.length > 0 ? Math.max(...this.todos.map(t => t.id)) : 0;
	const item = {
	...newTodo,
	id: maxId + 1,

[Copilot]

The bind:this directive is binding to profileSettingsPopover instead of a list reference variable. This should bind to a separate list variable.

Suggested change

	<ui5-list selection-mode="Single" separators="None" onitem-click={handleProfileSettingsSelect} bind:this={profileSettingsPopover}>
	<ui5-list selection-mode="Single" separators="None" onitem-click={handleProfileSettingsSelect} bind:this={profileSettingsList}>