Upgrade to Svelte 5.0 #1
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Upgrade `src/lib/components/Anchor/Anchor.svelte`, `src/lib/components/ContrastTheme/ContrastTheme.svelte`, and `src/lib/components/Controls/Controls.svelte` to Svelte 5.0 syntax. * **Reactivity Syntax**: Replace `let` with `$state` for reactive variables. Replace `$:` with `$derived` or `$effect` for reactive statements. * **Props**: Use `$props` to declare props with destructuring. * **Event Handling**: Replace `on:click` with `onclick` for event handlers. Replace `createEventDispatcher` with callback props. * **Other Changes**: Refactor various functions and variables to align with the new syntax and structure of Svelte 5.0.
Reviewer's Guide by SourceryThis pull request upgrades the codebase to Svelte 5.0, focusing on syntax changes related to reactivity, props, and event handling. It also includes refactoring of various functions and variables to align with the new Svelte 5.0 structure. Class diagram showing updated component structure with Svelte 5.0 changesclassDiagram
class Component {
$props
$state
$derived
$effect()
}
class Edge {
+$props: EdgeProps
+$state: EdgeState
+$derived dynamic
+$derived edgeColor
+$effect()
}
class Graph {
+$props: GraphProps
+$state: GraphState
+$derived dimensions
+$effect()
}
class Node {
+$props: NodeProps
+$state: NodeState
+$derived nodePosition
+$effect()
}
Component <|-- Edge
Component <|-- Graph
Component <|-- Node
note for Component "Base structure for
Svelte 5.0 components"
note for Edge "Updated with new
reactivity syntax"
note for Graph "Refactored state
management"
note for Node "Modified props and
state handling"
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @jknohr - I've reviewed your changes - here's some feedback:
Overall Comments:
- Consider keeping
on:eventsyntax instead of changing tooneventattributes, as this may break event modifier functionality and is not a required change for Svelte 5 - Establish consistent patterns for state initialization - some components mix old-style declarations with new
$statesyntax which could lead to confusion
Here's what I looked at during the review
- 🟡 General issues: 1 issue found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Complexity: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| const graphDOMElement = getContext<Writable<HTMLElement>>('graphDOMElement'); | ||
| const dispatch = createEventDispatcher(); | ||
| const dispatch = (eventName, detail) => { |
There was a problem hiding this comment.
issue (bug_risk): Custom event dispatch implementation may not handle bubbling correctly
Consider using Svelte's built-in createEventDispatcher instead of a custom implementation to ensure proper event bubbling and typing.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Upgrade
src/lib/components/Anchor/Anchor.svelte,src/lib/components/ContrastTheme/ContrastTheme.svelte, andsrc/lib/components/Controls/Controls.svelteto Svelte 5.0 syntax.letwith$statefor reactive variables. Replace$:with$derivedor$effectfor reactive statements.$propsto declare props with destructuring.on:clickwithonclickfor event handlers. ReplacecreateEventDispatcherwith callback props.Summary by Sourcery
Update components to use Svelte 5 syntax, including reactivity changes, props updates, and event handling modifications.
New Features:
Enhancements: