From 2e66534f42c35e6c63ce827b2d21c1759f487445 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Mon, 17 Nov 2025 00:08:23 +0100 Subject: [PATCH] [Svelte] Add support for Svelte 5 --- UPGRADE-3.0.md | 7 + pnpm-lock.yaml | 160 +++++----- src/Svelte/CHANGELOG.md | 1 + src/Svelte/assets/dist/render_controller.d.ts | 4 +- src/Svelte/assets/dist/render_controller.js | 11 +- src/Svelte/assets/package.json | 10 +- src/Svelte/assets/src/render_controller.ts | 13 +- ux.symfony.com/assets/svelte/build/.gitignore | 3 +- ux.symfony.com/assets/svelte/build/build.js | 12 +- .../assets/svelte/build/package.json | 2 +- .../svelte/dist/components/PackageList.js | 300 +++--------------- .../svelte/dist/controllers/PackageSearch.js | 135 ++------ .../svelte/src/components/PackageList.svelte | 4 +- .../src/controllers/PackageSearch.svelte | 8 +- 14 files changed, 188 insertions(+), 482 deletions(-) diff --git a/UPGRADE-3.0.md b/UPGRADE-3.0.md index 74a45fccc44..4346694a446 100644 --- a/UPGRADE-3.0.md +++ b/UPGRADE-3.0.md @@ -38,6 +38,13 @@ class MyLiveComponent { * Options `authReferrerPolicy`, `mapIds`, `channel`, `solutionChannel` have been added * Options `ìd`, `nonce`, `retries`, `url` have been removed +## 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) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06a9deeca02..6c68837186a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -455,8 +455,8 @@ importers: specifier: ^3.0.0 version: 3.2.2 '@sveltejs/vite-plugin-svelte': - specifier: ^2.4.6 - version: 2.5.3(svelte@4.2.20)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) + specifier: ^6.2.1 + version: 6.2.1(svelte@5.43.6)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) '@testing-library/dom': specifier: ^10.4.0 version: 10.4.0 @@ -473,8 +473,8 @@ importers: specifier: ^26.1.0 version: 26.1.0 svelte: - specifier: ^3.0 || ^4.0 - version: 4.2.20 + specifier: ^5.0 + version: 5.43.6 tslib: specifier: ^2.8.1 version: 2.8.1 @@ -1148,6 +1148,9 @@ packages: '@jridgewell/gen-mapping@0.3.12': resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==} + '@jridgewell/remapping@2.3.5': + resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==} + '@jridgewell/resolve-uri@3.1.2': resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} @@ -1317,20 +1320,25 @@ packages: cpu: [x64] os: [win32] - '@sveltejs/vite-plugin-svelte-inspector@1.0.4': - resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==} - engines: {node: ^14.18.0 || >= 16} + '@sveltejs/acorn-typescript@1.0.6': + resolution: {integrity: sha512-4awhxtMh4cx9blePWl10HRHj8Iivtqj+2QdDCSMDzxG+XKa9+VCNupQuCuvzEhYPzZSrX+0gC+0lHA/0fFKKQQ==} + peerDependencies: + acorn: ^8.9.0 + + '@sveltejs/vite-plugin-svelte-inspector@5.0.1': + resolution: {integrity: sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==} + engines: {node: ^20.19 || ^22.12 || >=24} peerDependencies: - '@sveltejs/vite-plugin-svelte': ^2.2.0 - svelte: ^3.54.0 || ^4.0.0 - vite: ^4.0.0 + '@sveltejs/vite-plugin-svelte': ^6.0.0-next.0 + svelte: ^5.0.0 + vite: ^6.3.0 || ^7.0.0 - '@sveltejs/vite-plugin-svelte@2.5.3': - resolution: {integrity: sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==} - engines: {node: ^14.18.0 || >= 16} + '@sveltejs/vite-plugin-svelte@6.2.1': + resolution: {integrity: sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==} + engines: {node: ^20.19 || ^22.12 || >=24} peerDependencies: - svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0 - vite: ^4.0.0 + svelte: ^5.0.0 + vite: ^6.3.0 || ^7.0.0 '@symfony/stimulus-bridge@4.0.1': resolution: {integrity: sha512-+/kSQ4qFXMbZS+HjkhzOxwdN+60pMev7kzzDpQV/Tdm/iIWoxx5GDsVcdLaBb2783BVQHyrBP72JerF2SXTbTg==} @@ -1780,8 +1788,9 @@ packages: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} engines: {node: '>=12'} - code-red@1.0.4: - resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} @@ -1854,10 +1863,6 @@ packages: css-shorthand-properties@1.1.2: resolution: {integrity: sha512-C2AugXIpRGQTxaCW0N7n5jD/p5irUmCrwl03TrnMFBHDbdq44CFWR2zO7rK9xPN4Eo3pUxC4vQzQgbIpzrD1PQ==} - css-tree@2.3.1: - resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} - css-value@0.0.1: resolution: {integrity: sha512-FUV3xaJ63buRLgHrLQVlVgQnQdR4yqdLGaDu7g8CQcWjInDfM9plBTPI9FRfpahju1UBSaMckeb2/46ApS/V1Q==} @@ -2030,11 +2035,17 @@ packages: engines: {node: '>=6.0'} hasBin: true + esm-env@1.2.2: + resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==} + esprima@4.0.1: resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} engines: {node: '>=4'} hasBin: true + esrap@2.1.2: + resolution: {integrity: sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg==} + estraverse@5.3.0: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} @@ -2321,10 +2332,6 @@ packages: jszip@3.10.1: resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==} - kleur@4.1.5: - resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} - engines: {node: '>=6'} - lazystream@1.0.1: resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==} engines: {node: '>= 0.6.3'} @@ -2471,9 +2478,6 @@ packages: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} - mdn-data@2.0.30: - resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} @@ -2625,9 +2629,6 @@ packages: pend@1.2.0: resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==} - periscopic@3.1.0: - resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==} - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -2942,15 +2943,9 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} - svelte-hmr@0.15.3: - resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==} - engines: {node: ^12.20 || ^14.13.1 || >= 16} - peerDependencies: - svelte: ^3.19.0 || ^4.0.0 - - svelte@4.2.20: - resolution: {integrity: sha512-eeEgGc2DtiUil5ANdtd8vPwt9AgaMdnuUFnPft9F5oMvU/FHu5IHFic+p1dR/UOB7XU2mX2yHW+NcTch4DCh5Q==} - engines: {node: '>=16'} + svelte@5.43.6: + resolution: {integrity: sha512-RnyO9VXI85Bmsf4b8AuQFBKFYL3LKUl+ZrifOjvlrQoboAROj5IITVLK1yOXBjwUWUn2BI5cfmurktgCzuZ5QA==} + engines: {node: '>=18'} symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -3154,10 +3149,10 @@ packages: terser: optional: true - vitefu@0.2.5: - resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} + vitefu@1.1.1: + resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==} peerDependencies: - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0 peerDependenciesMeta: vite: optional: true @@ -3334,6 +3329,9 @@ packages: resolution: {integrity: sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==} engines: {node: '>=18'} + zimmerframe@1.1.4: + resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==} + zip-stream@6.0.1: resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==} engines: {node: '>= 14'} @@ -3769,6 +3767,11 @@ snapshots: '@jridgewell/sourcemap-codec': 1.5.4 '@jridgewell/trace-mapping': 0.3.29 + '@jridgewell/remapping@2.3.5': + dependencies: + '@jridgewell/gen-mapping': 0.3.12 + '@jridgewell/trace-mapping': 0.3.29 + '@jridgewell/resolve-uri@3.1.2': {} '@jridgewell/source-map@0.3.10': @@ -3903,26 +3906,28 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.45.1': optional: true - '@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)))(svelte@4.2.20)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1))': + '@sveltejs/acorn-typescript@1.0.6(acorn@8.15.0)': + dependencies: + acorn: 8.15.0 + + '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.6)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)))(svelte@5.43.6)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1))': dependencies: - '@sveltejs/vite-plugin-svelte': 2.5.3(svelte@4.2.20)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) + '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.43.6)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) debug: 4.4.1 - svelte: 4.2.20 + svelte: 5.43.6 vite: 5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1) transitivePeerDependencies: - supports-color - '@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1))': + '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.6)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1))': dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)))(svelte@4.2.20)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) + '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.6)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)))(svelte@5.43.6)(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) debug: 4.4.1 deepmerge: 4.3.1 - kleur: 4.1.5 magic-string: 0.30.17 - svelte: 4.2.20 - svelte-hmr: 0.15.3(svelte@4.2.20) + svelte: 5.43.6 vite: 5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1) - vitefu: 0.2.5(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) + vitefu: 1.1.1(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)) transitivePeerDependencies: - supports-color @@ -4503,13 +4508,7 @@ snapshots: strip-ansi: 6.0.1 wrap-ansi: 7.0.0 - code-red@1.0.4: - dependencies: - '@jridgewell/sourcemap-codec': 1.5.4 - '@types/estree': 1.0.8 - acorn: 8.15.0 - estree-walker: 3.0.3 - periscopic: 3.1.0 + clsx@2.1.1: {} color-convert@2.0.1: dependencies: @@ -4587,11 +4586,6 @@ snapshots: css-shorthand-properties@1.1.2: optional: true - css-tree@2.3.1: - dependencies: - mdn-data: 2.0.30 - source-map-js: 1.2.1 - css-value@0.0.1: optional: true @@ -4804,8 +4798,14 @@ snapshots: optionalDependencies: source-map: 0.6.1 + esm-env@1.2.2: {} + esprima@4.0.1: {} + esrap@2.1.2: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.4 + estraverse@5.3.0: {} estree-walker@2.0.2: {} @@ -5128,8 +5128,6 @@ snapshots: setimmediate: 1.0.5 optional: true - kleur@4.1.5: {} - lazystream@1.0.1: dependencies: readable-stream: 2.3.8 @@ -5242,8 +5240,6 @@ snapshots: math-intrinsics@1.1.0: {} - mdn-data@2.0.30: {} - mime-db@1.52.0: {} mime-types@2.1.35: @@ -5409,12 +5405,6 @@ snapshots: pend@1.2.0: {} - periscopic@3.1.0: - dependencies: - '@types/estree': 1.0.8 - estree-walker: 3.0.3 - is-reference: 3.0.3 - picocolors@1.1.1: {} picomatch@4.0.3: {} @@ -5766,26 +5756,22 @@ snapshots: dependencies: has-flag: 4.0.0 - svelte-hmr@0.15.3(svelte@4.2.20): + svelte@5.43.6: dependencies: - svelte: 4.2.20 - - svelte@4.2.20: - dependencies: - '@ampproject/remapping': 2.3.0 + '@jridgewell/remapping': 2.3.5 '@jridgewell/sourcemap-codec': 1.5.4 - '@jridgewell/trace-mapping': 0.3.29 + '@sveltejs/acorn-typescript': 1.0.6(acorn@8.15.0) '@types/estree': 1.0.8 acorn: 8.15.0 aria-query: 5.3.2 axobject-query: 4.1.0 - code-red: 1.0.4 - css-tree: 2.3.1 - estree-walker: 3.0.3 + clsx: 2.1.1 + esm-env: 1.2.2 + esrap: 2.1.2 is-reference: 3.0.3 locate-character: 3.0.0 magic-string: 0.30.17 - periscopic: 3.1.0 + zimmerframe: 1.1.4 symbol-tree@3.2.4: {} @@ -5990,7 +5976,7 @@ snapshots: lightningcss: 1.30.1 terser: 5.43.1 - vitefu@0.2.5(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)): + vitefu@1.1.1(vite@5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1)): optionalDependencies: vite: 5.4.19(@types/node@22.16.5)(lightningcss@1.30.1)(terser@5.43.1) @@ -6219,6 +6205,8 @@ snapshots: yoctocolors-cjs@2.1.2: optional: true + zimmerframe@1.1.4: {} + zip-stream@6.0.1: dependencies: archiver-utils: 5.0.2 diff --git a/src/Svelte/CHANGELOG.md b/src/Svelte/CHANGELOG.md index d9c27105165..4a62e71c865 100644 --- a/src/Svelte/CHANGELOG.md +++ b/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 diff --git a/src/Svelte/assets/dist/render_controller.d.ts b/src/Svelte/assets/dist/render_controller.d.ts index 6a768739515..2276bb8c95d 100644 --- a/src/Svelte/assets/dist/render_controller.d.ts +++ b/src/Svelte/assets/dist/render_controller.d.ts @@ -16,8 +16,8 @@ declare class export_default extends Controller; + _destroyIfExists(): Promise; private dispatchEvent; } diff --git a/src/Svelte/assets/dist/render_controller.js b/src/Svelte/assets/dist/render_controller.js index fd4894744c7..895cf2ec98a 100644 --- a/src/Svelte/assets/dist/render_controller.js +++ b/src/Svelte/assets/dist/render_controller.js @@ -1,4 +1,5 @@ import { Controller } from "@hotwired/stimulus"; +import { mount, unmount } from "svelte"; class render_controller_default extends Controller { connect() { this.element.innerHTML = ""; @@ -7,7 +8,7 @@ class render_controller_default 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 @@ -17,13 +18,13 @@ class render_controller_default extends Controller { 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; } } diff --git a/src/Svelte/assets/package.json b/src/Svelte/assets/package.json index f23f4b0edd8..8dc86f9a8af 100644 --- a/src/Svelte/assets/package.json +++ b/src/Svelte/assets/package.json @@ -33,23 +33,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", "tsx": "^4.20.3", "typescript": "^5.8.3", diff --git a/src/Svelte/assets/src/render_controller.ts b/src/Svelte/assets/src/render_controller.ts index 70852eb982f..8170cce016d 100644 --- a/src/Svelte/assets/src/render_controller.ts +++ b/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 { @@ -29,8 +30,8 @@ export default class extends Controller { 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 { }); } - 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; } } diff --git a/ux.symfony.com/assets/svelte/build/.gitignore b/ux.symfony.com/assets/svelte/build/.gitignore index dd59f5771a7..7ccd5828849 100644 --- a/ux.symfony.com/assets/svelte/build/.gitignore +++ b/ux.symfony.com/assets/svelte/build/.gitignore @@ -1,3 +1,2 @@ -.yarn -yarn.lock +pnpm-lock.yaml node_modules diff --git a/ux.symfony.com/assets/svelte/build/build.js b/ux.symfony.com/assets/svelte/build/build.js index 13ce4c1605b..91fceafbb05 100644 --- a/ux.symfony.com/assets/svelte/build/build.js +++ b/ux.symfony.com/assets/svelte/build/build.js @@ -12,12 +12,12 @@ function compileDirectory(inputDir, outputDir) { for (const file of files) { const inputFile = path.join(inputDir, file); - + // Exclude node_modules directory if (inputFile.includes('node_')) { continue; } - + const stats = fs.statSync(inputFile); if (stats.isDirectory()) { const newOutputDir = path.join(outputDir, file); @@ -28,11 +28,15 @@ function compileDirectory(inputDir, outputDir) { compileDirectory(inputFile, newOutputDir); continue; } - + if(path.extname(file) === '.svelte') { console.log('Compiling', inputFile); const input = fs.readFileSync(inputFile, 'utf-8'); - const output = compile(input, { format: 'esm' }); + const output = compile(input, { + filename: inputFile, + generate: 'client', + fragments: 'html', + }); const outputFile = path.join(outputDir, `${path.basename(file, '.svelte')}.js`); fs.writeFileSync(outputFile, output.js.code); } diff --git a/ux.symfony.com/assets/svelte/build/package.json b/ux.symfony.com/assets/svelte/build/package.json index a9a4d1a568c..70155683c08 100644 --- a/ux.symfony.com/assets/svelte/build/package.json +++ b/ux.symfony.com/assets/svelte/build/package.json @@ -3,7 +3,7 @@ "@babel/cli": "^7.25.6", "@babel/core": "^7.25.2", "tinyglobby": "^0.2.14", - "svelte": "^3.59.1" + "svelte": "^5.43.8" }, "license": "MIT", "private": true, diff --git a/ux.symfony.com/assets/svelte/dist/components/PackageList.js b/ux.symfony.com/assets/svelte/dist/components/PackageList.js index 72e1f2acd7d..34a1243f4be 100644 --- a/ux.symfony.com/assets/svelte/dist/components/PackageList.js +++ b/ux.symfony.com/assets/svelte/dist/components/PackageList.js @@ -1,273 +1,65 @@ -/* generated by Svelte v3.59.2 */ -import { - SvelteComponent, - add_render_callback, - append, - attr, - create_animation, - create_in_transition, - detach, - element, - empty, - fix_and_destroy_block, - fix_position, - init, - insert, - noop, - safe_not_equal, - set_data, - set_style, - space, - src_url_equal, - text, - transition_in, - update_keyed_each -} from "svelte/internal"; - +import 'svelte/internal/disclose-version'; +import * as $ from 'svelte/internal/client'; import { fade } from 'svelte/transition'; import { flip } from 'svelte/animate'; -function get_each_context(ctx, list, i) { - const child_ctx = ctx.slice(); - child_ctx[1] = list[i]; - return child_ctx; -} - -// (11:0) {:else} -function create_else_block(ctx) { - let div; - let each_blocks = []; - let each_1_lookup = new Map(); - let each_value = /*packages*/ ctx[0]; - const get_key = ctx => /*uxPackage*/ ctx[1].name; - - for (let i = 0; i < each_value.length; i += 1) { - let child_ctx = get_each_context(ctx, each_value, i); - let key = get_key(child_ctx); - each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx)); - } - - return { - c() { - div = element("div"); - - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } - - attr(div, "class", "PackageList"); - }, - m(target, anchor) { - insert(target, div, anchor); - - for (let i = 0; i < each_blocks.length; i += 1) { - if (each_blocks[i]) { - each_blocks[i].m(div, null); - } - } - }, - p(ctx, dirty) { - if (dirty & /*packages*/ 1) { - each_value = /*packages*/ ctx[0]; - for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r(); - each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, fix_and_destroy_block, create_each_block, null, get_each_context); - for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a(); - } - }, - i(local) { - for (let i = 0; i < each_value.length; i += 1) { - transition_in(each_blocks[i]); - } - }, - o: noop, - d(detaching) { - if (detaching) detach(div); +var root_3 = $.from_html(`

`); +var root_2 = $.from_html(`
`); - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].d(); - } - } - }; -} +export default function PackageList($$anchor, $$props) { + $.push($$props, true); -// (9:0) {#if packages.length === 0} -function create_if_block(ctx) { - let t; + let transitionDuration = 200; + var fragment = $.comment(); + var node = $.first_child(fragment); - return { - c() { - t = text("No packages found"); - }, - m(target, anchor) { - insert(target, t, anchor); - }, - p: noop, - i: noop, - o: noop, - d(detaching) { - if (detaching) detach(t); - } - }; -} + { + var consequent = ($$anchor) => { + var text = $.text('No packages found'); -// (13:8) {#each packages as uxPackage(uxPackage.name)} -function create_each_block(key_1, ctx) { - let div1; - let div0; - let img; - let img_src_value; - let img_alt_value; - let t0; - let h3; - let a; - let t1_value = /*uxPackage*/ ctx[1].humanName + ""; - let t1; - let a_href_value; - let t2; - let div1_intro; - let rect; - let stop_animation = noop; + $.append($$anchor, text); + }; - return { - key: key_1, - first: null, - c() { - div1 = element("div"); - div0 = element("div"); - img = element("img"); - t0 = space(); - h3 = element("h3"); - a = element("a"); - t1 = text(t1_value); - t2 = space(); - if (!src_url_equal(img.src, img_src_value = /*uxPackage*/ ctx[1].imageUrl)) attr(img, "src", img_src_value); - attr(img, "alt", img_alt_value = "Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package"); - attr(div0, "class", "PackageListItem__icon"); - set_style(div0, "--gradient", /*uxPackage*/ ctx[1].gradient); - attr(a, "href", a_href_value = /*uxPackage*/ ctx[1].url); - attr(h3, "class", "PackageListItem__label"); - attr(div1, "class", "PackageListItem"); - this.first = div1; - }, - m(target, anchor) { - insert(target, div1, anchor); - append(div1, div0); - append(div0, img); - append(div1, t0); - append(div1, h3); - append(h3, a); - append(a, t1); - append(div1, t2); - }, - p(new_ctx, dirty) { - ctx = new_ctx; + var alternate = ($$anchor) => { + var div = root_2(); - if (dirty & /*packages*/ 1 && !src_url_equal(img.src, img_src_value = /*uxPackage*/ ctx[1].imageUrl)) { - attr(img, "src", img_src_value); - } + $.each(div, 29, () => $$props.packages, (uxPackage) => uxPackage.name, ($$anchor, uxPackage) => { + var div_1 = root_3(); + var div_2 = $.child(div_1); + var img = $.child(div_2); - if (dirty & /*packages*/ 1 && img_alt_value !== (img_alt_value = "Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package")) { - attr(img, "alt", img_alt_value); - } + $.reset(div_2); - if (dirty & /*packages*/ 1) { - set_style(div0, "--gradient", /*uxPackage*/ ctx[1].gradient); - } + var h3 = $.sibling(div_2, 2); + var a = $.child(h3); + var text_1 = $.child(a, true); - if (dirty & /*packages*/ 1 && t1_value !== (t1_value = /*uxPackage*/ ctx[1].humanName + "")) set_data(t1, t1_value); + $.reset(a); + $.reset(h3); + $.reset(div_1); - if (dirty & /*packages*/ 1 && a_href_value !== (a_href_value = /*uxPackage*/ ctx[1].url)) { - attr(a, "href", a_href_value); - } - }, - r() { - rect = div1.getBoundingClientRect(); - }, - f() { - fix_position(div1); - stop_animation(); - }, - a() { - stop_animation(); - stop_animation = create_animation(div1, rect, flip, { duration: transitionDuration }); - }, - i(local) { - if (!div1_intro) { - add_render_callback(() => { - div1_intro = create_in_transition(div1, fade, { duration: transitionDuration }); - div1_intro.start(); + $.template_effect(() => { + $.set_style(div_2, `--gradient: ${$.get(uxPackage).gradient ?? ''};`); + $.set_attribute(img, 'src', $.get(uxPackage).imageUrl); + $.set_attribute(img, 'alt', `Image for the ${$.get(uxPackage).humanName ?? ''} UX package`); + $.set_attribute(a, 'href', $.get(uxPackage).url); + $.set_text(text_1, $.get(uxPackage).humanName); }); - } - }, - o: noop, - d(detaching) { - if (detaching) detach(div1); - } - }; -} - -function create_fragment(ctx) { - let if_block_anchor; - - function select_block_type(ctx, dirty) { - if (/*packages*/ ctx[0].length === 0) return create_if_block; - return create_else_block; - } - - let current_block_type = select_block_type(ctx, -1); - let if_block = current_block_type(ctx); - - return { - c() { - if_block.c(); - if_block_anchor = empty(); - }, - m(target, anchor) { - if_block.m(target, anchor); - insert(target, if_block_anchor, anchor); - }, - p(ctx, [dirty]) { - if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) { - if_block.p(ctx, dirty); - } else { - if_block.d(1); - if_block = current_block_type(ctx); - - if (if_block) { - if_block.c(); - transition_in(if_block, 1); - if_block.m(if_block_anchor.parentNode, if_block_anchor); - } - } - }, - i(local) { - transition_in(if_block); - }, - o: noop, - d(detaching) { - if_block.d(detaching); - if (detaching) detach(if_block_anchor); - } - }; -} - -let transitionDuration = 200; - -function instance($$self, $$props, $$invalidate) { - let { packages = [] } = $$props; - $$self.$$set = $$props => { - if ('packages' in $$props) $$invalidate(0, packages = $$props.packages); - }; + $.animation(div_1, () => flip, () => ({ duration: transitionDuration })); + $.transition(1, div_1, () => fade, () => ({ duration: transitionDuration })); + $.append($$anchor, div_1); + }); - return [packages]; -} + $.reset(div); + $.append($$anchor, div); + }; -class Component extends SvelteComponent { - constructor(options) { - super(); - init(this, options, instance, create_fragment, safe_not_equal, { packages: 0 }); + $.if(node, ($$render) => { + if ($$props.packages.length === 0) $$render(consequent); else $$render(alternate, false); + }); } -} -export default Component; \ No newline at end of file + $.append($$anchor, fragment); + $.pop(); +} \ No newline at end of file diff --git a/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js b/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js index e145a7a19fe..ea0c72c42da 100644 --- a/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js +++ b/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js @@ -1,120 +1,31 @@ -/* generated by Svelte v3.59.2 */ -import { - SvelteComponent, - append, - attr, - create_component, - destroy_component, - detach, - element, - init, - insert, - listen, - mount_component, - safe_not_equal, - set_input_value, - space, - transition_in, - transition_out -} from "svelte/internal"; - +import 'svelte/internal/disclose-version'; +import * as $ from 'svelte/internal/client'; import PackageList from '../components/PackageList.js'; -function create_fragment(ctx) { - let div1; - let input; - let t; - let div0; - let packagelist; - let current; - let mounted; - let dispose; - - packagelist = new PackageList({ - props: { packages: /*filteredPackages*/ ctx[1] } - }); - - return { - c() { - div1 = element("div"); - input = element("input"); - t = space(); - div0 = element("div"); - create_component(packagelist.$$.fragment); - attr(input, "class", "form-control"); - attr(input, "type", "search"); - attr(input, "placeholder", "This search is built in Svelte!"); - attr(div0, "class", "mt-3"); - }, - m(target, anchor) { - insert(target, div1, anchor); - append(div1, input); - set_input_value(input, /*search*/ ctx[0]); - append(div1, t); - append(div1, div0); - mount_component(packagelist, div0, null); - current = true; - - if (!mounted) { - dispose = listen(input, "input", /*input_input_handler*/ ctx[3]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*search*/ 1 && input.value !== /*search*/ ctx[0]) { - set_input_value(input, /*search*/ ctx[0]); - } +var root = $.from_html(`
`); - const packagelist_changes = {}; - if (dirty & /*filteredPackages*/ 2) packagelist_changes.packages = /*filteredPackages*/ ctx[1]; - packagelist.$set(packagelist_changes); - }, - i(local) { - if (current) return; - transition_in(packagelist.$$.fragment, local); - current = true; - }, - o(local) { - transition_out(packagelist.$$.fragment, local); - current = false; - }, - d(detaching) { - if (detaching) detach(div1); - destroy_component(packagelist); - mounted = false; - dispose(); - } - }; -} +export default function PackageSearch($$anchor, $$props) { + $.push($$props, true); -function instance($$self, $$props, $$invalidate) { - let filteredPackages; - let { packages = [] } = $$props; - let search = ''; + let search = $.state(''); + const filteredPackages = $.derived(() => $$props.packages.filter((uxPackage) => uxPackage.humanName.toLowerCase().includes($.get(search).toLowerCase()))); + var div = root(); + var input = $.child(div); - function input_input_handler() { - search = this.value; - $$invalidate(0, search); - } + $.remove_input_defaults(input); - $$self.$$set = $$props => { - if ('packages' in $$props) $$invalidate(2, packages = $$props.packages); - }; + var div_1 = $.sibling(input, 2); + var node = $.child(div_1); - $$self.$$.update = () => { - if ($$self.$$.dirty & /*packages, search*/ 5) { - $: $$invalidate(1, filteredPackages = packages.filter(uxPackage => uxPackage.humanName.toLowerCase().includes(search.toLowerCase()))); + PackageList(node, { + get packages() { + return $.get(filteredPackages); } - }; - - return [search, filteredPackages, packages, input_input_handler]; -} - -class Component extends SvelteComponent { - constructor(options) { - super(); - init(this, options, instance, create_fragment, safe_not_equal, { packages: 2 }); - } -} - -export default Component; \ No newline at end of file + }); + + $.reset(div_1); + $.reset(div); + $.bind_value(input, () => $.get(search), ($$value) => $.set(search, $$value)); + $.append($$anchor, div); + $.pop(); +} \ No newline at end of file diff --git a/ux.symfony.com/assets/svelte/src/components/PackageList.svelte b/ux.symfony.com/assets/svelte/src/components/PackageList.svelte index c94878629ee..6a11b9f0fe2 100644 --- a/ux.symfony.com/assets/svelte/src/components/PackageList.svelte +++ b/ux.symfony.com/assets/svelte/src/components/PackageList.svelte @@ -2,8 +2,8 @@ import { fade } from 'svelte/transition'; import { flip } from 'svelte/animate'; - export let packages = []; - let transitionDuration = 200; + let { packages } = $props(); + let transitionDuration = $state(200); {#if packages.length === 0} diff --git a/ux.symfony.com/assets/svelte/src/controllers/PackageSearch.svelte b/ux.symfony.com/assets/svelte/src/controllers/PackageSearch.svelte index aa128c815fc..ed0f561e7cc 100644 --- a/ux.symfony.com/assets/svelte/src/controllers/PackageSearch.svelte +++ b/ux.symfony.com/assets/svelte/src/controllers/PackageSearch.svelte @@ -1,12 +1,12 @@