[Svelte] Svelte 5 support

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

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

src/Svelte/assets/dist/render_controller.js

@@ -1,14 +1,14 @@
 import { Controller } from '@hotwired/stimulus';
 
 class default_1 extends Controller {
-    connect() {
+    async connect() {
         this.element.innerHTML = '';
         this.props = this.propsValue ?? undefined;
         this.intro = this.introValue ?? undefined;
         this.dispatchEvent('connect');
         const Component = window.resolveSvelteComponent(this.componentValue);
-        this._destroyIfExists();
-        this.app = new Component({
+        await this._destroyIfExists();
+        this.app = await this.mountSvelteComponent(Component, {
             target: this.element,
             props: this.props,
             intro: this.intro,
@@ -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;
         }
     }
@@ -37,6 +43,13 @@ class default_1 extends Controller {
         };
         this.dispatch(name, { detail, prefix: 'svelte' });
     }
+    async mountSvelteComponent(Component, options) {
+        const { mount } = await import('svelte');
+        if (mount) {
+            return mount(Component, options);
+        }
+        return new Component(options);
+    }
 }
 default_1.values = {
     component: String,

src/Svelte/assets/package.json

@@ -20,12 +20,12 @@
     },
     "peerDependencies": {
         "@hotwired/stimulus": "^3.0.0",
-        "svelte": "^3.0 || ^4.0"
+        "svelte": "^3.0 || ^4.0 || ^5.0"
     },
     "devDependencies": {
         "@hotwired/stimulus": "^3.0.0",
-        "@sveltejs/vite-plugin-svelte": "^2.4.6",
+        "@sveltejs/vite-plugin-svelte": "^3.1.2",
         "@types/webpack-env": "^1.16",
-        "svelte": "^3.0 || ^4.0"
+        "svelte": "^3.0 || ^4.0 || ^5.0"
     }
 }

src/Svelte/assets/src/render_controller.ts

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import type { SvelteComponent } from 'svelte';
+import type { SvelteComponent, ComponentConstructorOptions, ComponentType } from 'svelte';
 
 export default class extends Controller<Element & { root?: SvelteComponent }> {
     private app: SvelteComponent;
@@ -17,7 +17,7 @@ export default class extends Controller<Element & { root?: SvelteComponent }> {
         intro: Boolean,
     };
 
-    connect() {
+    async connect() {
         this.element.innerHTML = '';
 
         this.props = this.propsValue ?? undefined;
@@ -27,10 +27,9 @@ export default class extends Controller<Element & { root?: SvelteComponent }> {
 
         const Component = window.resolveSvelteComponent(this.componentValue);
 
-        this._destroyIfExists();
+        await this._destroyIfExists();
 
-        // @see https://svelte.dev/docs#run-time-client-side-component-api-creating-a-component
-        this.app = new Component({
+        this.app = await this.mountSvelteComponent(Component, {
             target: this.element,
             props: this.props,
             intro: this.intro,
@@ -43,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;
         }
     }
@@ -64,4 +70,19 @@ export default class extends Controller<Element & { root?: SvelteComponent }> {
         };
         this.dispatch(name, { detail, prefix: 'svelte' });
     }
+
+    // @see https://svelte.dev/docs#run-time-client-side-component-api-creating-a-component
+    private async mountSvelteComponent(
+        Component: ComponentType,
+        options: ComponentConstructorOptions
+    ): Promise<SvelteComponent> {
+        // @ts-ignore
+        const { mount } = await import('svelte');
+        if (mount) {
+            // `mount` is only available in Svelte >= 5
+            return mount(Component, options);
+        }
+
+        return new Component(options);
+    }
 }

src/Svelte/assets/test/fixtures/MyComponent.svelte

@@ -1,8 +1,8 @@
-<script>
+<script>
 import { fade } from 'svelte/transition';
 export let name = 'without props';
-</script>
-
-<div transition:fade|global={{ duration: 100 }}>
-    <div>Hello {name}</div>
+</script>
+
+<div transition:fade|global={{ duration: 100 }}>
+    <div>Hello {name}</div>
 </div>

src/Svelte/assets/test/fixtures/MyComponentSvelte5.svelte

@@ -0,0 +1,7 @@
+<script>
+let { name = 'without props' } = $props();
+</script>
+
+<div>
+    <div>Hello {name}</div>
+</div>

src/Svelte/assets/test/register_controller.test.ts

@@ -9,11 +9,13 @@
 
 import { registerSvelteControllerComponents } from '../src/register_controller';
 import MyComponent from './fixtures/MyComponent.svelte';
+import MyComponentSvelte5 from './fixtures/MyComponentSvelte5.svelte';
 import RequireContext = __WebpackModuleApi.RequireContext;
 
 const createFakeFixturesContext = (): RequireContext => {
     const files: any = {
         './MyComponent.svelte': { default: MyComponent },
+        './MyComponentSvelte5.svelte': { default: MyComponentSvelte5 },
     };
 
     const context = (id: string): any => files[id];
@@ -32,5 +34,7 @@ describe('registerSvelteControllerComponents', () => {
         expect(resolveComponent).not.toBeUndefined();
         expect(resolveComponent('MyComponent')).toBe(MyComponent);
         expect(resolveComponent('MyComponent')).not.toBeUndefined();
+        expect(resolveComponent('MyComponentSvelte5')).toBe(MyComponentSvelte5);
+        expect(resolveComponent('MyComponentSvelte5')).not.toBeUndefined();
     });
 });

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

@@ -12,6 +12,7 @@ import { getByTestId, waitFor } from '@testing-library/dom';
 import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
 import SvelteController from '../src/render_controller';
 import MyComponent from './fixtures/MyComponent.svelte';
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
 
 // Controller used to check the actual controller was properly booted
 class CheckController extends Controller {
@@ -83,7 +84,24 @@ describe('SvelteController', () => {
         await waitFor(() => expect(component.innerHTML).toContain('<div><div>Hello without props</div></div>'));
     });
 
-    it('connect with props and intro', async () => {
+    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(`
           <div data-testid="component" id="container"
               data-controller="check svelte"

src/Svelte/assets/test/render_svelte_5_controller.test.ts

@@ -0,0 +1,64 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Application } from '@hotwired/stimulus';
+import { getByTestId, waitFor } from '@testing-library/dom';
+import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
+import SvelteController from '../src/render_controller';
+import MyComponentSvelte5 from './fixtures/MyComponentSvelte5.svelte';
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
+
+const startStimulus = () => {
+    const application = Application.start();
+    application.register('svelte', SvelteController);
+
+    return application;
+};
+
+(window as any).resolveSvelteComponent = () => {
+    return MyComponentSvelte5;
+};
+
+describe.skipIf(SVELTE_VERSION < '5')('Svelte5Controller', () => {
+    let application: Application;
+
+    afterEach(() => {
+        clearDOM();
+        application.stop();
+    });
+
+    it('connect with props', async () => {
+        const container = mountDOM(`
+          <div data-testid="component"
+              data-controller="check svelte 5"
+              data-svelte-component-value="Svelte5Component"
+              data-svelte-props-value="{&quot;name&quot;: &quot;Svelte 5 !&quot;}" />
+        `);
+
+        const component = getByTestId(container, 'component');
+
+        application = startStimulus();
+
+        await waitFor(() => expect(component.innerHTML).toContain('<div><div>Hello Svelte 5 !</div></div>'));
+    });
+
+    it('connect without props', async () => {
+        const container = mountDOM(`
+          <div data-testid="component" id="container"
+              data-controller="check svelte 5"
+              data-svelte-component-value="Svelte5Component" />
+        `);
+
+        const component = getByTestId(container, 'component');
+
+        application = startStimulus();
+
+        await waitFor(() => expect(component.innerHTML).toContain('<div><div>Hello without props</div></div>'));
+    });
+});

src/Svelte/assets/vitest.config.mjs

@@ -3,9 +3,12 @@ import { defineConfig, mergeConfig } from 'vitest/config';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import configShared from '../../../vitest.config.mjs'
 
-export default mergeConfig(
-    configShared,
-    defineConfig({
-         plugins: [svelte()],
-     })
-);
+export default defineConfig(configEnv => mergeConfig(
+	configShared,
+	defineConfig({
+		plugins: [svelte()],
+		resolve: {
+			conditions: configEnv.mode === 'test' ? ['browser'] : [],
+		},
+	})
+))

src/Svelte/doc/index.rst

@@ -8,7 +8,7 @@ Svelte is a JavaScript framework for building user interfaces.
 Symfony UX Svelte provides tools to render Svelte components from Twig,
 handling rendering and data transfers.
 
-Symfony UX Svelte supports Svelte 3 and Svelte 4.
+Symfony UX Svelte supports Svelte 3, 4 and 5.
 
 Installation
 ------------
@@ -51,7 +51,7 @@ Next, install a package to help Svelte:
 That's it! Any files inside ``assets/svelte/controllers/`` can now be rendered as
 Svelte components.
 
-If you are using Svelte 4, you will have to add ``browser``, ``import`` and ``svelte``
+If you are using Svelte 4 or 5, you will have to add ``browser``, ``import`` and ``svelte``
 to the ``conditionNames`` array. This is necessary as per `the Svelte 4 migration guide`_
 for bundlers such as webpack, to ensure that lifecycle callbacks are internally invoked.