[Svelte] Add support for Svelte 5

UPGRADE-3.0.md

@@ -69,6 +69,13 @@ class MyLiveComponent {
 - The Twig function `ux_controller_link_tags()` has been removed, which requires Symfony AssetMapper >=6.4,
   run `composer require symfony/asset-mapper:>=6.4` if you don't have it installed yet.
 
+## Svelte
+
+- The support for Svelte 3 has been dropped, only Svelte 5 is supported now.
+  Make sure to upgrade your Svelte components accordingly.
+
+    TODO: to complete...
+
 ## Swup
 
 - The package has been removed, see the [previous README](https://raw.githubusercontent.com/symfony/ux/refs/heads/2.x/src/Turbo/README.md)

src/Svelte/CHANGELOG.md

@@ -5,6 +5,7 @@
 - Minimum required Symfony version is now 6.4
 - Minimum required PHP version is now 8.2
 - Remove old compatibility layer with deprecated `StimulusTwigExtension` from WebpackEncoreBundle ^1.0, use StimulusBundle instead
+- Drop support of Svelte 3, only Svelte 5 is supported now
 
 ## 2.30
 

src/Svelte/assets/dist/loader.d.ts

@@ -1,5 +1,5 @@
-import { ComponentCollection } from "./components.js";
 import { SvelteComponent } from "svelte";
+import { ComponentCollection } from "./components.js";
 declare global {
   function resolveSvelteComponent(name: string): typeof SvelteComponent<any>;
   interface Window {

src/Svelte/assets/dist/render_controller.d.ts

@@ -15,8 +15,8 @@ declare class export_default extends Controller<Element & {
     intro: BooleanConstructor;
   };
   connect(): void;
-  disconnect(): void;
-  _destroyIfExists(): void;
+  disconnect(): Promise<void>;
+  _destroyIfExists(): Promise<void>;
   private dispatchEvent;
 }
 export { export_default as default };

src/Svelte/assets/dist/render_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import { mount, unmount } from "svelte";
 var _Class = class extends Controller {
 	connect() {
 		this.element.innerHTML = "";
@@ -7,21 +8,21 @@ var _Class = class extends Controller {
 		this.dispatchEvent("connect");
 		const Component = window.resolveSvelteComponent(this.componentValue);
 		this._destroyIfExists();
-		this.app = new Component({
+		this.app = mount(Component, {
 			target: this.element,
 			props: this.props,
 			intro: this.intro
 		});
 		this.element.root = this.app;
 		this.dispatchEvent("mount", { component: Component });
 	}
-	disconnect() {
-		this._destroyIfExists();
+	async disconnect() {
+		await this._destroyIfExists();
 		this.dispatchEvent("unmount");
 	}
-	_destroyIfExists() {
+	async _destroyIfExists() {
 		if (this.element.root !== void 0) {
-			this.element.root.$destroy();
+			await unmount(this.element.root);
 			delete this.element.root;
 		}
 	}

src/Svelte/assets/package.json

@@ -31,23 +31,25 @@
         },
         "importmap": {
             "@hotwired/stimulus": "^3.0.0",
-            "svelte/internal": "^3.0",
+            "svelte": "^5.0",
+            "svelte/internal/client": "^5.0",
+            "svelte/internal/disclose-version": "^5.0",
             "@symfony/ux-svelte": "path:%PACKAGE%/dist/loader.js"
         }
     },
     "peerDependencies": {
         "@hotwired/stimulus": "^3.0.0",
-        "svelte": "^3.0 || ^4.0"
+        "svelte": "^5.0"
     },
     "devDependencies": {
         "@hotwired/stimulus": "^3.0.0",
-        "@sveltejs/vite-plugin-svelte": "^2.4.6",
+        "@sveltejs/vite-plugin-svelte": "^6.2.1",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/user-event": "^14.6.1",
         "@types/webpack-env": "^1.16",
         "jsdom": "^26.1.0",
-        "svelte": "^3.0 || ^4.0",
+        "svelte": "^5.0",
         "tslib": "^2.8.1",
         "typescript": "^5.8.3",
         "vitest": "^4.1.0"

src/Svelte/assets/src/render_controller.ts

@@ -1,4 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
+import { mount, unmount } from 'svelte';
 import type { SvelteComponent } from 'svelte';
 
 export default class extends Controller<Element & { root?: SvelteComponent }> {
@@ -29,8 +30,8 @@ export default class extends Controller<Element & { root?: SvelteComponent }> {
 
         this._destroyIfExists();
 
-        // @see https://svelte.dev/docs#run-time-client-side-component-api-creating-a-component
-        this.app = new Component({
+        // @see https://svelte.dev/docs/svelte/svelte#mount
+        this.app = mount(Component, {
             target: this.element,
             props: this.props,
             intro: this.intro,
@@ -43,14 +44,14 @@ export default class extends Controller<Element & { root?: SvelteComponent }> {
         });
     }
 
-    disconnect() {
-        this._destroyIfExists();
+    async disconnect() {
+        await this._destroyIfExists();
         this.dispatchEvent('unmount');
     }
 
-    _destroyIfExists() {
+    async _destroyIfExists() {
         if (this.element.root !== undefined) {
-            this.element.root.$destroy();
+            await unmount(this.element.root);
             delete this.element.root;
         }
     }