breaking: remove support for svelte 4 and support svelte 5

.circleci/workflows.yml

@@ -1828,6 +1828,32 @@ jobs:
           command: |
             # we need to bootstrap the binary into our project directory and run the tests
             source ./system-tests/scripts/bootstrap-docker-container.sh 'yarn cypress run'
+  # We can remove this job a once https://github.com/sveltejs/svelte-loader/issues/243 is resolved.
+  svelte-webpack-system-test:
+    parallelism: 1
+    working_directory: ~/cypress
+    docker:
+      - image: cypress/browsers-internal:node20.18.1-bullseye-chrome131-ff133
+    environment:
+      # needed to inform the bootstrap-docker-container.sh script to link the binary in the system-test project directory
+      REPO_DIR: /root/cypress
+      TEST_PROJECT_DIR: ./system-tests/projects/svelte-webpack-configured
+      USE_YARN_TO_INSTALL_CYPRESS_BINARY: true
+    steps:
+      - maybe_skip_binary_jobs
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Install monorepo dependencies
+          command: yarn install --ignore-scripts
+      - run:
+          name: install dependencies
+          command: cd ./system-tests/projects/svelte-webpack-configured && yarn
+      - run:
+          name: Bootstrap the Cypress binary and run binary system test
+          command: |
+            # we need to bootstrap the binary into our project directory and run the tests
+            source ./system-tests/scripts/bootstrap-docker-container.sh 'yarn cypress run --component --spec src/mount.cy.ts src/App.cy.ts'
 
   system-tests-chrome:
     <<: *defaults
@@ -2993,6 +3019,7 @@ linux-x64-workflow: &linux-x64-workflow
           - test-npm-module-on-minimum-node-version
           - binary-system-tests
           - yarn-pnp-preprocessor-system-test
+          - svelte-webpack-system-test
           - test-kitchensink
           - unit-tests
           - verify-release-readiness
@@ -3112,6 +3139,11 @@ linux-x64-workflow: &linux-x64-workflow
         requires:
           - get-published-artifacts
           - system-tests-node-modules-install
+    - svelte-webpack-system-test:
+        context: publish-binary
+        requires:
+          - get-published-artifacts
+          - system-tests-node-modules-install
 
 linux-x64-contributor-workflow: &linux-x64-contributor-workflow
   jobs:

cli/CHANGELOG.md

@@ -20,7 +20,7 @@ _Released 12/17/2024 (PENDING)_
   - `Next.js` versions 10, 11, 12, and 13. Addresses [#29583](https://github.com/cypress-io/cypress/issues/29583).
   - `Nuxt.js` version 2. Addresses [#30468](https://github.com/cypress-io/cypress/issues/30468).
   - `React` versions 16 and 17. Addresses [#29607](https://github.com/cypress-io/cypress/issues/29607).
-  - `Svelte` version 3. Addresses [#30492](https://github.com/cypress-io/cypress/issues/30492).
+  - `Svelte` versions 3 and 4. Addresses [#30492](https://github.com/cypress-io/cypress/issues/30492) and [#30692](https://github.com/cypress-io/cypress/issues/30692).
   - `Vue` version 2. Addresses [#30295](https://github.com/cypress-io/cypress/issues/30295).
 - The `cypress/react18` test harness is no longer included in the Cypress binary. Instead, React 18 support is now shipped with `cypress/react`! Addresses [#29607](https://github.com/cypress-io/cypress/issues/29607).
 - The `cypress/angular-signals` test harness is no longer included in the Cypress binary. Instead, signals support is now shipped with `cypress/angular`! This requires `rxjs` to be installed as a `peerDependency`. Addresses [#29606](https://github.com/cypress-io/cypress/issues/29606).
@@ -43,6 +43,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr
   - `React` version 19. Cypress will allow detected use of the React 19 Release Candidate until React 19 is officially released. Addresses [#29470](https://github.com/cypress-io/cypress/issues/29470).
   - `Angular` version 19. Addresses [#30175](https://github.com/cypress-io/cypress/issues/30175).
   - `Vite` version 6. Addresses [#30591](https://github.com/cypress-io/cypress/issues/30591).
+  - `Svelte` version 5. Addresses [#29641](https://github.com/cypress-io/cypress/issues/29641).
 
 **Bugfixes:**
 

npm/svelte/README.md

@@ -1,8 +1,8 @@
 # @cypress/svelte
 
-Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
+Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner
 
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases or in the case you may require an older or non supported version of svelte.
 
 ## Development
 

npm/svelte/package.json

@@ -12,12 +12,12 @@
   },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
-    "svelte": "^4.2.19",
+    "svelte": "^5.4.0",
     "typescript": "~5.4.5"
   },
   "peerDependencies": {
     "cypress": ">=10.6.0",
-    "svelte": ">=4.0.0"
+    "svelte": ">=5.0.0"
   },
   "files": [
     "dist/**/*"

npm/svelte/rollup.config.mjs

@@ -1,4 +1,10 @@
 import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
 
+const config = {
+  external: [
+    'svelte',
+  ],
+}
+
 // updated respectExternal to false due to this issue: https://github.com/Swatinem/rollup-plugin-dts/issues/162#issuecomment-1702374232
-export default createEntries({ formats: ['es', 'cjs'], input: 'src/index.ts', dtsOptions: { respectExternal: false } })
+export default createEntries({ formats: ['es', 'cjs'], input: 'src/index.ts', dtsOptions: { respectExternal: false }, config })

npm/svelte/src/mount.ts

@@ -2,33 +2,25 @@ import {
   getContainerEl,
   setupHooks,
 } from '@cypress/mount-utils'
-import type { ComponentConstructorOptions, ComponentProps, SvelteComponent } from 'svelte'
+import { mount as svelteMount, unmount as svelteUnmount } from 'svelte'
+import type { MountOptions, Component } from 'svelte'
 
 const DEFAULT_COMP_NAME = 'unknown'
 
-type SvelteConstructor<T> = new (...args: any[]) => T;
-type SvelteComponentOptions<T extends SvelteComponent> = Omit<
-  ComponentConstructorOptions<ComponentProps<T>>,
-  'hydrate' | 'target' | '$$inline'
->;
-
-export interface MountOptions<T extends SvelteComponent>
-  extends SvelteComponentOptions<T> {
-  log?: boolean
-}
-
-export interface MountReturn<T extends SvelteComponent> {
-  component: T
+export interface MountReturn{
+  component: Record<string, any>
 }
 
-let componentInstance: SvelteComponent | undefined
+let componentInstance: Record<string, any> | undefined
 
 const cleanup = () => {
-  componentInstance?.$destroy()
+  if (componentInstance) {
+    svelteUnmount(componentInstance)
+  }
 }
 
 // Extract the component name from the object passed to mount
-const getComponentDisplayName = <T extends SvelteComponent>(Component: SvelteConstructor<T>): string => {
+const getComponentDisplayName = (Component: Component<Record<string, any>, Record<string, any>, any>): string => {
   if (Component.name) {
     const [, match] = /Proxy\<(\w+)\>/.exec(Component.name) || []
 
@@ -41,7 +33,7 @@ const getComponentDisplayName = <T extends SvelteComponent>(Component: SvelteCon
 /**
  * Mounts a Svelte component inside the Cypress browser
  *
- * @param {SvelteConstructor<T>} Component Svelte component being mounted
+ * @param {Record<string, any>} Component Svelte component being mounted
  * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
  * @returns Cypress.Chainable<MountReturn>
  *
@@ -56,19 +48,24 @@ const getComponentDisplayName = <T extends SvelteComponent>(Component: SvelteCon
  *
  * @see {@link https://on.cypress.io/mounting-svelte} for more details.
  */
-export function mount<T extends SvelteComponent> (
-  Component: SvelteConstructor<T>,
-  options: MountOptions<T> = {},
-): Cypress.Chainable<MountReturn<T>> {
+export function mount (
+  Component: Component<Record<string, any>, Record<string, any>, any>,
+  options: Omit<MountOptions, 'target'> & {log?: boolean} = {},
+): 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
+
   return cy.then(() => {
     // Remove last mounted component if cy.mount is called more than once in a test
     cleanup()
 
     const target = getContainerEl()
 
-    const ComponentConstructor = ((Component as any).default || Component) as SvelteConstructor<T>
+    const ComponentConstructor = ((Component as any).default || Component) as Component<Record<string, any>, Record<string, any>, any>
 
-    componentInstance = new ComponentConstructor({
+    // @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+    componentInstance = svelteMount(ComponentConstructor, {
       target,
       ...options,
     })
@@ -85,7 +82,7 @@ export function mount<T extends SvelteComponent> (
         })
       }
     })
-    .wrap({ component: componentInstance as T }, { log: false })
+    .wrap({ component: componentInstance as Record<string, any> }, { log: false })
   })
 }
 

packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts

@@ -146,7 +146,7 @@ describe('scaffolding component testing', {
       cy.contains('button', 'Next step').click()
       cy.findByRole('button', { name: 'Continue' }).click()
       cy.get('[data-cy="launchpad-Configuration files"]').should('be.visible')
-      verifyConfigFile(`cypress.config.js`)
+      verifyConfigFile(`cypress.config.ts`)
     })
   })
 
@@ -160,7 +160,7 @@ describe('scaffolding component testing', {
       cy.contains('button', 'Next step').click()
       cy.findByRole('button', { name: 'Continue' }).click()
       cy.get('[data-cy="launchpad-Configuration files"]').should('be.visible')
-      verifyConfigFile(`cypress.config.js`)
+      verifyConfigFile(`cypress.config.ts`)
     })
   })
 

packages/scaffold-config/README.md

@@ -8,16 +8,16 @@ We will also attempt to scaffold a configuration file for projects using React a
 
 ### Supported Frameworks and Libraries
 
-| Name             | Version    | Dev Server | Version  | Library        | Component Adaptor          | Example Project                                                     |
-| ---------------- | -------    | ---------- | -------- | -------------- | -------------------------- | ------------------------------------------------------------------- |
-| React            | -          | Vite       | 4.x, 5.x | React 16, 17   | `@cypress/react@latest`    | [Link](../../system-tests/projects/react-vite-ts-configured)        |
-| React            | -          | Webpack    | 4.x, 5.x | React 16, 17   | `@cypress/vue@latest`      | [Link](../../system-tests/projects/react18)                         |
-| Vue              | -          | Vite       | 4.x, 5.x | Vue 3          | `@cypress/react@latest`    | [Link](../../system-tests/projects/vue3-vite-ts-configured)         |
-| Vue              | -          | Webpack    | 4.x, 5.x | Vue 3          | `@cypress/vue@latest`      | [Link](../../system-tests/projects/vue3-webpack-ts-configured)      |
-| Angular          | -          | Webpack    | 5.x      | Angular 17, 18 | `@cypress/angular@latest`  | [Link](../../system-tests/projects/angular-cli-configured)          |
-| Svelte           | -          | Vite       | 4.x, 5.x | Svelte 4       | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-vite-configured)          |
-| Svelte           | -          | Webpack    | 4.x, 5.x | Svelte 4       | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-webpack-configured)       |
-| 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)        |
+| React            | -      | Webpack    | 4, 5    | React 18, 19       | `@cypress/vue@latest`      | [Link](../../system-tests/projects/react18)                         |
+| Vue              | -      | Vite       | 4, 5, 6 | Vue 3              | `@cypress/react@latest`    | [Link](../../system-tests/projects/vue3-vite-ts-configured)         |
+| Vue              | -      | Webpack    | 4, 5    | Vue 3              | `@cypress/vue@latest`      | [Link](../../system-tests/projects/vue3-webpack-ts-configured)      |
+| Angular          | -      | Webpack    | 5       | Angular 17, 18, 19 | `@cypress/angular@latest`  | [Link](../../system-tests/projects/angular-cli-configured)          |
+| Svelte           | -      | Vite       | 4, 5, 6 | Svelte 5           | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-vite-configured)          |
+| Svelte           | -      | Webpack    | 4, 5    | Svelte 5           | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-webpack-configured)       |
+| Next.js          | 14, 15 | Webpack    | 4, 5    | React 18, 19       | `@cypress/react@latest`    | [Link](../../system-tests/projects/nextjs-configured)               |
 
 ### Adding More Projects
 

packages/scaffold-config/src/dependencies.ts

@@ -112,7 +112,7 @@ export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {
   package: 'svelte',
   installer: 'svelte',
   description: 'Cybernetically enhanced web apps',
-  minVersion: '^4.0.0',
+  minVersion: '^5.0.0',
 } as const
 
 export const WIZARD_DEPENDENCIES = [

packages/scaffold-config/test/unit/detect.spec.ts

@@ -162,12 +162,12 @@ describe('detectFramework', () => {
     })
   })
 
-  ;['4.0.0', '5.0.0'].forEach((v) => {
+  ;['5.0.0', '6.0.0'].forEach((v) => {
     it(`Svelte and Vite v${v}`, async () => {
       const projectPath = await scaffoldMigrationProject('svelte-vite-unconfigured')
 
       fakeDepsInNodeModules(projectPath, [
-        { dependency: 'svelte', version: '4.0.0' },
+        { dependency: 'svelte', version: '5.0.0' },
         { dependency: 'vite', version: v },
       ])
 
@@ -182,7 +182,7 @@ describe('detectFramework', () => {
     const projectPath = await scaffoldMigrationProject('svelte-webpack-unconfigured')
 
     fakeDepsInNodeModules(projectPath, [
-      { dependency: 'svelte', version: '4.0.0' },
+      { dependency: 'svelte', version: '5.0.0' },
       { dependency: 'webpack', version: '5.0.0' },
     ])
 

system-tests/project-fixtures/svelte/cypress/support/component.ts

@@ -0,0 +1,16 @@
+import { mount } from 'cypress/svelte'
+import '../../src/app.css'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)

system-tests/project-fixtures/svelte/src/App.cy.js → system-tests/project-fixtures/svelte/src/App.cy.ts

@@ -1,7 +1,11 @@
 import App from './App.svelte'
 
 it('should render with style', () => {
-  cy.mount(App)
+  cy.mount(App, {
+    // logging due to @packages/app/reporter-ct-mount-hover.cy.ts tests to test the mount log
+    log: true,
+  })
+
   cy.contains('Hello World!')
   // Verify global styles
   cy.get('.very-red').should('have.css', 'color', 'rgb(255, 0, 0)')

system-tests/projects/svelte-vite-unconfigured/src/lib/Counter.svelte → system-tests/project-fixtures/svelte/src/lib/Counter.svelte

@@ -1,10 +1,10 @@
-<script>
-  let count = 0
+<script lang="ts">
+  let count: number = $state(0)
   const increment = () => {
     count += 1
   }
 </script>
 
-<button on:click={increment}>
+<button onclick={increment}>
   count is {count}
 </button>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  let { count } =  $props()
+  count = count || 0
+</script>
+
+<button>
+  count is {count}
+</button>

system-tests/project-fixtures/svelte/src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app