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

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-11-21-24
+12-02-24

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'build-binary-placeholder'
+        - 'feat/support_svelte_5'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -42,7 +42,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'build-binary-placeholder', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_svelte_5', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -53,7 +53,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'build-binary-placeholder', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_svelte_5', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -76,7 +76,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'build-binary-placeholder', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_svelte_5', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -152,7 +152,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "build-binary-placeholder" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_svelte_5" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

cli/CHANGELOG.md

@@ -20,7 +20,7 @@ _Released 12/3/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` version 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).
@@ -41,6 +41,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr
 - Cypress Component Testing now supports:
   - `Next.js` version 15. Addresses [#30445](https://github.com/cypress-io/cypress/issues/30445).
   - `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).
+  - `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

@@ -3,33 +3,25 @@ import {
   setupHooks,
   checkForRemovedStyleOptions,
 } 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) || []
 
@@ -42,7 +34,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>
  *
@@ -57,10 +49,14 @@ 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
+
   checkForRemovedStyleOptions(options)
 
   return cy.then(() => {
@@ -69,9 +65,10 @@ export function mount<T extends SvelteComponent> (
 
     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({
+    // https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+    componentInstance = svelteMount(ComponentConstructor, {
       target,
       ...options,
     })
@@ -88,7 +85,7 @@ export function mount<T extends SvelteComponent> (
         })
       }
     })
-    .wrap({ component: componentInstance as T }, { log: false })
+    .wrap({ component: componentInstance as Record<string, any> }, { log: false })
   })
 }
 

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 = [

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/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

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

@@ -1,24 +1,25 @@
-import Counter from './Counter.svelte'
-import Context from './Context.svelte'
-import Store from './Store.svelte'
-import { messageStore } from './store'
+import Counter from './lib/Counter.svelte'
+import CounterProp from './lib/CounterProp.svelte'
+import Context from './lib/Context.svelte'
+import Store from './lib/Store.svelte'
+import { messageStore } from './lib/store'
 
 describe('Svelte mount', () => {
   it('mounts', () => {
     cy.mount(Counter)
-    cy.contains('h1', 'Count is 0')
+    cy.contains('button', 'count is 0')
   })
 
   it('reacts to state changes', () => {
     cy.mount(Counter)
-    cy.contains('h1', 'Count is 0')
+    cy.contains('button', 'count is 0')
     cy.get('button').click()
-    cy.contains('h1', 'Count is 1')
+    cy.contains('button', 'count is 1')
   })
 
   it('accepts props', () => {
-    cy.mount(Counter, { props: { count: 42 } })
-    cy.contains('h1', 'Count is 42')
+    cy.mount(CounterProp, { props: { count: 42 } })
+    cy.contains('button', 'count is 42')
   })
 
   it('accepts context', () => {
@@ -31,14 +32,6 @@ describe('Svelte mount', () => {
     cy.contains('h1', payload.msg)
   })
 
-  it('spies on outputs', () => {
-    cy.mount(Counter).then(({ component }) => {
-      component.$on('change', cy.spy().as('changeSpy'))
-      cy.get('button').click()
-      cy.get('@changeSpy').should('have.been.called')
-    })
-  })
-
   it('anchors mounted component', () => {
     cy.mount(Counter, { anchor: document.getElementById('anchor') })
     cy.get('[data-cy-root]').children().last().should('have.id', 'anchor')
@@ -57,7 +50,11 @@ describe('Svelte mount', () => {
 
   context('log', () => {
     it('displays component name in mount log', () => {
-      cy.mount(Counter)
+      // svelte 5 is a function with the name data living on an internal symbol,
+      // so we are unable to calculate the name
+      cy.mount(Counter, {
+        log: true,
+      })
 
       cy.wrap(Cypress.$(window.top.document.body)).within(() => {
         return cy
@@ -67,13 +64,13 @@ describe('Svelte mount', () => {
         .within(() => {
           return cy
           .get('.command-name-mount')
-          .should('contain', 'mount<Counter ... />')
+          .should('contain', 'mount<wrapper ... />')
         })
       })
     })
 
     it('does not display mount log', () => {
-      cy.mount(Counter, { log: false })
+      cy.mount(Counter)
 
       cy.wrap(Cypress.$(window.top.document.body)).within(() => {
         return cy
@@ -109,11 +106,11 @@ describe('Svelte mount', () => {
 
     it('should remove previous mounted component', () => {
       cy.mount(Counter)
-      cy.contains('h1', 'Count is 0')
-      cy.mount(Counter, { props: { count: 42 } })
-      cy.contains('h1', 'Count is 42')
+      cy.contains('button', 'count is 0')
+      cy.mount(CounterProp, { props: { count: 42 } })
+      cy.contains('button', 'count is 42')
 
-      cy.contains('h1', 'Count is 0').should('not.exist')
+      cy.contains('button', 'count is 0').should('not.exist')
       cy.get('[data-cy-root]').children().should('have.length', 2)
     })
   })