breaking: remove support for svelte 4 and support svelte 5 #30700

AtofStryker · 2024-12-03T02:17:44Z

Closes Svelte 5 component testing #29641
Closes breaking: remove support for Svelte 4 #30692

Additional details

Implements Svelte 5 Component Testing for Cypress. Since Svelte 5 had a lot of changes to how components are mounted (see migration guide) as well as types, we felt it was best to support Svelte 5 moving forward and removing support for Svelte 4. The Svelte 4 test harness can always be downloaded from npm, which is explicitly called out in the migration guide.

There are some changes to the Svelte API with Svelte 5 which I try to cover in comments below.

NOTE: The semantic PR job is going to fail because we are referencing one issue as a feature, and the other as a breaking change. I do not think there is a way to get this to pass here

Steps to test

I recommend using the build binaries on the commit to test against a vite project via npm create vite@latest or testing via cypress-io/cypress-component-testing-apps#40

How has the user experience changed?

Users can now scaffold their Svelte 5 projects with Cypress and component testing will work as expected

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation? chore: update docs to svelte 5 cypress-documentation#6028
Have API changes been updated in the type definitions?

cypress · 2024-12-03T03:09:43Z

cypress Run #58762

Run Properties: Passed #58762 • 2043d855d6: breaking: remove support for svelte 4 and support svelte 5 [run ci]

Project	`cypress`
Branch Review	`feat/support_svelte_5`
Run status	`Passed #58762`
Run duration	`17m 53s`
Commit	`2043d855d6: breaking: remove support for svelte 4 and support svelte 5 [run ci]`
Committer	`AtofStryker`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`8`
Pending	`1326`
Skipped	`0`
Passing	`29383`
View all changes introduced in this branch ↗︎

UI Coverage `46.2%`
Untested elements	`186`
Tested elements	`164`

Accessibility `92.55%`
Failed rules	`3 critical` `8 serious` `2 moderate` `2 minor`
Failed elements	`893`

cli/CHANGELOG.md

AtofStryker · 2024-12-05T14:47:05Z

npm/svelte/rollup.config.mjs

@@ -1,4 +1,10 @@
 import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'

+const config = {
+  external: [


we did not need svelte as an imported dependency before, but now we need the mount and unmount functions in svelte 5. Since we want to use whatever version of svelte the user has installed, we want to bundle this as an external dependency

AtofStryker · 2024-12-05T14:48:34Z

npm/svelte/src/mount.ts

-  options: MountOptions<T> = {},
-): Cypress.Chainable<MountReturn<T>> {
+export function mount (
+  Component: Component<Record<string, any>, Record<string, any>, any>,


The component signature for svelte completely changed in Svelte 5, where Svelte components are no longer generic classes . Instead, the typing represents something more simple now, which is just a generic type of Record<string, any>

AtofStryker · 2024-12-05T14:52:42Z

npm/svelte/src/mount.ts

+): Cypress.Chainable<MountReturn> {
+  // In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
+  // so we default the logging of it to false as it doesn't provide a lot of value
+  options.log = options.log || false


depending on how Svelte is bundled has an impact here, where the name of the component can only be determined to be wrapper. For instance, the name in open mode is wrapper, but in run mode it's the full component name. This like has to do with the development version of svelte being used in open mode but production being used in run.

Because of this, I have default the mount log off by default as when developing tests it doesn't provide a lot of value to just say mount<wrapper>

npm/svelte/src/mount.ts

AtofStryker · 2024-12-05T14:53:20Z

packages/scaffold-config/README.md

-| Next.js          | 14.x       | Webpack    | 4.x, 5.x | React 18       | `@cypress/react@latest`    | [Link](../../system-tests/projects/nextjs-configured)               |
+| Name             | Version| Dev Server | Version | Library            | Component Adaptor          | Example Project                                                     |
+| ---------------- | -------| ---------- | ------- | ------------------ | -------------------------- | ------------------------------------------------------------------- |
+| React            | -      | Vite       | 4, 5    | React 18, 19       | `@cypress/react@latest`    | [Link](../../system-tests/projects/react-vite-ts-configured)        |


figured this was a good time to make sure the list is up to date

AtofStryker · 2024-12-05T14:59:37Z

system-tests/project-fixtures/svelte/src/lib/Counter.svelte

@@ -1,10 +1,10 @@
-<script>
-  let count = 0
+<script lang="ts">


most of the changes to these components are to follow the svelte migration guide

biggest differences:

similar to React now, is that Svelte components need to explicitly declare state or props for a given property. This is why there is Counter.svelte which uses state and CounterProp.svelte which uses a prop to set the counter.

Events are NOT propagated up to components by default and event dispatchers are deprecated. The recommended pattern is now to pass a callback function in as a prop and call that when the event is fired (see Changes to Component Events)

There are a few others but these are the main changes. I also converted the projects to typescript as this is the new base case

AtofStryker · 2024-12-05T15:00:53Z

system-tests/projects/svelte-webpack-configured/webpack.config.js

-          loader: 'svelte-loader',
+        test: /\.svelte\.ts$/,
+        use: ['svelte-loader', 'ts-loader'],
+      },


this is copied straight out of svelte-loader README for simplicity

AtofStryker · 2024-12-05T15:03:28Z

system-tests/test/component_testing_spec.ts

+  // svelte-webpack-configured is currently difficult to test.
+  // This is currently tested as a binary-like system-test inside CI.
+  // We can unskip this test and remove the binary-like CircleCI test
+  // once https://github.com/sveltejs/svelte-loader/issues/243 is resolved.


see the readme inside svelte-webpack-configured for why we need to do this. Main reason, aliasing svelte inside webpack doesn't work correctly, so the mount function being pulled in from npm/svelte is a different svelte instance than the one in svelte-webpack-configured. The work around for this is to use the binary (see circle workflow file) as this can't happen when the binary is used instead.

Oh I get it more then. So this won't be an issue for our users right?

correct this is just a problem with our system tests because of how we source the harnesses straight from the ./cli package. installing the binary sidesteps this problem

.circleci/workflows.yml

AtofStryker force-pushed the feat/support_svelte_5 branch 13 times, most recently from 64a9974 to fe87cde Compare December 4, 2024 03:58

AtofStryker linked an issue Dec 4, 2024 that may be closed by this pull request

Svelte 5 component testing #29641

Closed

AtofStryker commented Dec 5, 2024

View reviewed changes

cli/CHANGELOG.md Outdated Show resolved Hide resolved

AtofStryker commented Dec 5, 2024

View reviewed changes

npm/svelte/src/mount.ts Outdated Show resolved Hide resolved

AtofStryker commented Dec 5, 2024

View reviewed changes

AtofStryker self-assigned this Dec 5, 2024

AtofStryker force-pushed the feat/support_svelte_5 branch 2 times, most recently from b97fba5 to 45d2f7d Compare December 5, 2024 15:08

AtofStryker marked this pull request as ready for review December 5, 2024 15:09

AtofStryker requested review from mschile and ryanthemanuel December 5, 2024 15:09

ryanthemanuel reviewed Dec 5, 2024

View reviewed changes

.circleci/workflows.yml Show resolved Hide resolved

AtofStryker requested a review from ryanthemanuel December 6, 2024 17:24

ryanthemanuel approved these changes Dec 9, 2024

View reviewed changes

AtofStryker force-pushed the feat/support_svelte_5 branch from 09394f5 to 822ba62 Compare December 10, 2024 13:01

breaking: remove support for svelte 4 and support svelte 5 [run ci]

2043d85

AtofStryker force-pushed the feat/support_svelte_5 branch from 822ba62 to 2043d85 Compare December 10, 2024 13:44

AtofStryker merged commit 22776eb into release/14.0.0 Dec 10, 2024
80 of 83 checks passed

AtofStryker deleted the feat/support_svelte_5 branch December 10, 2024 14:21

AtofStryker linked an issue Dec 10, 2024 that may be closed by this pull request

breaking: remove support for Svelte 4 #30692

Closed

jennifer-shehane mentioned this pull request Dec 11, 2024

breaking: 14.0.0 Release #30305

Open

28 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

breaking: remove support for svelte 4 and support svelte 5 #30700

breaking: remove support for svelte 4 and support svelte 5 #30700

AtofStryker commented Dec 3, 2024 •

edited

Loading

cypress bot commented Dec 3, 2024 •

edited

Loading

AtofStryker Dec 5, 2024

AtofStryker Dec 5, 2024

AtofStryker Dec 5, 2024

AtofStryker Dec 5, 2024

AtofStryker Dec 5, 2024 •

edited

Loading

AtofStryker Dec 5, 2024 •

edited

Loading

AtofStryker Dec 5, 2024

ryanthemanuel Dec 5, 2024

AtofStryker Dec 6, 2024

breaking: remove support for svelte 4 and support svelte 5 #30700

breaking: remove support for svelte 4 and support svelte 5 #30700

Conversation

AtofStryker commented Dec 3, 2024 • edited Loading

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress bot commented Dec 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AtofStryker Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

AtofStryker Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AtofStryker commented Dec 3, 2024 •

edited

Loading

cypress bot commented Dec 3, 2024 •

edited

Loading

AtofStryker Dec 5, 2024 •

edited

Loading

AtofStryker Dec 5, 2024 •

edited

Loading