refactor: migrate to Svelte v5 #17
Conversation
|
|
|
|
There was a problem hiding this comment.
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.
perryd01
force-pushed
the
svelte5-migrate
branch
2 times, most recently
from
b6d0df6 to
833d33a
Compare
perryd01
force-pushed
the
svelte5-migrate
branch
from
6fce97c to
88437de
Compare
perryd01
force-pushed
the
svelte5-migrate
branch
from
88437de to
a0df897
Compare
| const handleThemeSettingsToggle = (event) => { | ||
| themeSettingsPopover.opener = event.detail.targetRef; | ||
| themeSettingsPopover.open = true; | ||
| const handleItemInput = (event: any) => { |
There was a problem hiding this comment.
could not find any types for this kind of event
https://ui5.github.io/webcomponents/components/Input/#input
| <div class="edit-wrapper"> | ||
| <ui5-label>Title:</ui5-label> | ||
| <ui5-textarea class="title-textarea" show-exceeded-text maxlength="24" bind:this={dialogTextArea} value={itemEditText} /> | ||
| <ui5-textarea class="title-textarea" show-exceeded-text maxlength={24} value={dialogFields.text} onchange={(event: any) => (dialogFields.text = event.target.value)}></ui5-textarea> |
There was a problem hiding this comment.
could not find types for the onchange event
https://ui5.github.io/webcomponents/components/TextArea/#change
perryd01
force-pushed
the
svelte5-migrate
branch
from
457130c to
995cfa3
Compare
perryd01
force-pushed
the
svelte5-migrate
branch
from
02a8289 to
097d819
Compare
1 participant
@ui5/webcomponents: 2.16.0svelte: 5.43.1