Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build: svelte v5 (without components migration) #548

Draft
wants to merge 23 commits into
base: main
Choose a base branch
from

Conversation

peterpeterparker
Copy link
Member

@peterpeterparker peterpeterparker commented Dec 10, 2024

Motivation

We want to use the most recent tools, but we also want to avoid being left behind, notably in terms of security. For example, SvelteKit is going to patch a minor issue with cookies only in a future version. That's why we are migrating to Svelte v5.

Notes

This PR updates the dependencies and makes the required configuration changes. No components are migrated since Svelte v5 is backward compatible with how Svelte v4 is composed.

Changes - App

  • Bump Svelte v5 and related dependencies
  • Set peer as Svelte v5

Changes - Tests

  • Bump Svelte Testing library
  • Mock ResizeObserver and element.animate required by Svelte v5
  • Update tests using $on and $set as documented https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
  • Rename test files having to use $state for test purpose because "rune is only available inside .svelte and .svelte.js/ts files"
  • Remove svelte/internal config overwrite ("Your application, or one of its dependencies, imported from 'svelte/internal', which was a private module used by Svelte 4 components that no longer exists in Svelte 5.")

Changes - Screenshots

  • The popover screenshots are modified because on main the code snippet of the targeted page was actually not rendered correctly. A new line was missing and the type of the property export let button: HTMLButtonElement | undefined was not rendered. I did not managed to fix that on main.

@peterpeterparker peterpeterparker requested review from a team as code owners December 10, 2024 05:40
@peterpeterparker peterpeterparker marked this pull request as draft December 10, 2024 05:44
peterpeterparker added a commit that referenced this pull request Dec 10, 2024
# Motivation

Svelte v5 appears to add `<!---->` comments in the DOM when rendering
deprecated `slot` elements. As a result, the tooltip tests that read
HTML to compare text would not be compatible.

# Notes

Related to PR #548.

# Changes

- Replace usage of `innerHTML` to compare text in the `Tooltip` test
with `textContent`.
@peterpeterparker peterpeterparker marked this pull request as ready for review December 11, 2024 06:03
@peterpeterparker peterpeterparker marked this pull request as draft December 11, 2024 06:03
peterpeterparker added a commit that referenced this pull request Dec 17, 2024
# Motivation

Using an `$on` callback for testing is deprecated in Svelte v5 (PR
#548). Instead, we will now use the `events` option of `render`, which
itself will eventually be replaced by the library. To minimize changes
in the Svelte v5 PR, we refactored the test to use a utility function
that handles rendering and event binding.

# Changes

- Introduce and use `renderWithEvents` utilitiy.

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant