build(frontend): svelte v5 #3929
Draft
Conversation
This file contains 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
peterpeterparker
added a commit
that referenced
this pull request
Dec 11, 2024
# Motivation It's probably a warning currently but, following becomes an error when migrating to Svelte v5 in #3929: > `<span>` cannot be a child of `<option>`. `<option>` only allows these children: `<#text>`. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components. # Changes - Remove `span` in `option`.
peterpeterparker
added a commit
that referenced
this pull request
Dec 11, 2024
# Motivation Migration to Svelte v5 (#3929) involves replacing the ComponentType. While updating the Listener, a minor TypeScript issue was identified. We use a `svelte:component` that maps a token property, which may or may not be present, and can sometimes be set or unset. This approach works because the component is assigned to a state variable, but it is not fully TypeScript-compliant. To address this, we can leverage the template to correctly mount the listener.
peterpeterparker
added a commit
that referenced
this pull request
Dec 11, 2024
# Motivation It's currently not an issue but, while migrating to Svelte v5 #3929 I noticed that the `BitcoinListener` was missing the property `token`. This is required because in the listener utils function `mapListeners` we are mapping the component to a `TokenToListener` with `{ token, listener: BitcoinListener }` however, this `token` does not exist effectivelly. # Changes - Add `export const token` unused to `BitcoinListener`
peterpeterparker
added a commit
that referenced
this pull request
Dec 11, 2024
…uous (#3933) # Motivation Following is a warning but becomes an error when upgrading the dependencies for Svelte v5 in #3929: > ...src/lib/components/ui/StaticSteps.svelte 22:3 error Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />` https://svelte.dev/e/element_invalid_self_closing_tag(element_invalid_self_closing_tag) svelte/valid-compile # Changes - Update self closing iframe and div --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
peterpeterparker
added a commit
that referenced
this pull request
Dec 11, 2024
# Motivation I don't even known why it works currently. Following is a warning but becomes an error when upgrading the dependencies for Svelte v5 in #3929: > ...lib/components/icons/IconAstronautArrow.svelte 116:2 error Unused CSS selector "button:hover .svg-arrow-go path" https://svelte.dev/e/css_unused_selector(css_unused_selector) svelte/valid-compile 116:2 error Unused CSS selector "button:hover .svg-arrow-go line" https://svelte.dev/e/css_unused_selector(css_unused_selector) svelte/valid-compile 122:2 error Unused CSS selector "button:hover .svg-arrow-go line" https://svelte.dev/e/css_unused_selector(css_unused_selector) svelte/valid-compile 132:2 error Unused CSS selector "button:hover .svg-vizor path" https://svelte.dev/e/css_unused_selector(css_unused_selector) svelte/valid-compile 136:2 error Unused CSS selector "button:hover .svg-infinity path" https://svelte.dev/e/css_unused_selector(css_unused_selector) svelte/valid-compile # Changes - Move `button:hover` selector where button finds place.
peterpeterparker
added a commit
that referenced
this pull request
Dec 16, 2024
# Motivation Svelte v5 seems to be stricter in terms of typing, which causes the linter to fail in #3929 when the `TransactionUI` is used to create a `svelte:component`. After reviewing the issue, I also noticed that we are spreading the `transaction` within the `transactionUi` while mixing it with a `token`. From a typing perspective, I believe it would be safer to maintain a clear separation between these two pieces of information. This PR addresses both issues. # Changes - Replace `svelte:component` by a direct usage of the component in the template - Do not spread the transaction in the transaction UI - Adapt types and consumers accordingly
peterpeterparker
added a commit
that referenced
this pull request
Dec 16, 2024
# Motivation Svelte v5 #3929 wraps rendered elements with `<!----><!---->` around it. If we use `.innerHTML` for comparison purpose we would need to amend those comments or trim those, which isn't nice. Therefore, instead of it, we can use `.textContent` for comparison purposes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Motivation
We want to stay up-to-date with the tooling for best practices and security reasons.
Changes
Tests