[Svelte] Migrate from destroy to unmount for Svelte 5 compatibility when controller is disconnected

Author: ChqThomas

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

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

src/Svelte/assets/dist/render_controller.js

@@ -7,7 +7,7 @@ class default_1 extends Controller {
         this.intro = this.introValue ?? undefined;
         this.dispatchEvent('connect');
         const Component = window.resolveSvelteComponent(this.componentValue);
-        this._destroyIfExists();
+        await this._destroyIfExists();
         this.app = await this.mountSvelteComponent(Component, {
             target: this.element,
             props: this.props,
@@ -18,13 +18,19 @@ class default_1 extends Controller {
             component: Component,
         });
     }
-    disconnect() {
-        this._destroyIfExists();
+    async disconnect() {
+        await this._destroyIfExists();
         this.dispatchEvent('unmount');
     }
-    _destroyIfExists() {
+    async _destroyIfExists() {
         if (this.element.root !== undefined) {
-            this.element.root.$destroy();
+            const { unmount } = await import('svelte');
+            if (unmount) {
+                unmount(this.element.root);
+            }
+            else {
+                this.element.root.$destroy();
+            }
             delete this.element.root;
         }
     }

src/Svelte/assets/src/render_controller.ts

@@ -27,7 +27,7 @@ export default class extends Controller<Element & { root?: SvelteComponent }> {
 
         const Component = window.resolveSvelteComponent(this.componentValue);
 
-        this._destroyIfExists();
+        await this._destroyIfExists();
 
         this.app = await this.mountSvelteComponent(Component, {
             target: this.element,
@@ -42,14 +42,21 @@ 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();
+            // @ts-ignore
+            const { unmount } = await import('svelte');
+            if (unmount) {
+                // `unmount` is only available in Svelte >= 5
+                unmount(this.element.root);
+            } else {
+                this.element.root.$destroy();
+            }
             delete this.element.root;
         }
     }

src/Svelte/assets/test/render_controller.test.ts

@@ -84,6 +84,22 @@ describe('SvelteController', () => {
         await waitFor(() => expect(component.innerHTML).toContain('<div><div>Hello without props</div></div>'));
     });
 
+    it('unmount correctly', async () => {
+        const container = mountDOM(`
+          <div data-testid="component" id="container"
+              data-controller="check svelte"
+              data-svelte-component-value="SvelteComponent" />
+        `);
+
+        const component = getByTestId(container, 'component');
+
+        application = startStimulus();
+
+        await waitFor(() => expect(component.innerHTML).toContain('<div><div>Hello without props</div></div>'));
+        component.remove();
+        await waitFor(() => expect(component).not.toBeInTheDocument());
+    });
+
     // Disabled for Svelte 5 : https://github.com/sveltejs/svelte/issues/11280
     it.skipIf(SVELTE_VERSION >= '5')('connect with props and intro', async () => {
         const container = mountDOM(`