build: svelte v5 (#6020)

# Motivation

We want to stay up-to-date with the tooling for best practices and
security reasons.

# Notes

We keep, when possible, the deprecated `ComponentType` in the source
code because if we move to the new types `Component`, component
`ResponsiveTyleRow` starts throwing a typing error in its template
`Error: Argument of type 'string' is not assignable to parameter of type
'never'.`. (see
[job](https://github.com/dfinity/nns-dapp/actions/runs/13107187031/job/36563870978))

Three screenshots were updated in this PR but, visually do no seem to
contains any changes.

# TODOs

Few features and tests need to be adapted for Svelte v5. Those leftovers
were marked with `// TODO: Svelte v5 migration` and have to be resolved
at latest before the release which will contains the upgrade but, after
this PR is merged.

# Changes

- Bump Gix-cmp for Svelte v5, Svelte, Vite and Testling-library
- Update component types in Tests (to resolve issue `Type
'LegacyComponentType' is not assignable to type 'typeof
SvelteComponent`).
- Remove `svelte/internal` in vitest config to fix `Error: Your
application, or one of its dependencies, imported from
'svelte/internal', which was a private module used by Svelte 4
components that no longer exists in Svelte 5. It is not intended to be
public API. If you're a library author and you used 'svelte/internal'
deliberately, please raise an issue on
https://github.com/sveltejs/svelte/issues detailing your use case.`
- Remove global override of `requestAnimationFrame` which leads to error
`Cannot assign to read only property 'requestAnimationFrame' of object
'#<Object>'` and has been resolved in testing library few month ago
according this
[comment](testing-library/svelte-testing-library#206 (comment)).
- Patch configuration for IC-js libraries `spyOn` that ends in error
with `Cannot redefine property`
vitest-dev/vitest#5625 (comment)
- Mock `animate`
(testing-library/svelte-testing-library#284 (comment))
- Update tests using `$on` and `$set` as documented
https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
- Rename test files having to use `$state` for test purpose because
"rune is only available inside `.svelte` and `.svelte.js/ts` files"

---------

Signed-off-by: David Dal Busco <[email protected]>
Co-authored-by: David de Kloet <[email protected]>
Co-authored-by: Max Strasinsky <[email protected]>

Author: 3 people

frontend/package-lock.json

@@ -38,37 +38,37 @@
     "@peculiar/webcrypto": "^1.5.0",
     "@playwright/test": "^1.49.1",
     "@rollup/plugin-inject": "^5.0.5",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.8.3",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.20.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.6",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/svelte": "^5.2.7",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.13.13",
     "@types/wicg-file-system-access": "^2023.10.5",
-    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/coverage-v8": "^3.0.9",
     "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.5",
     "eslint": "^9.20.1",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^2.46.1",
     "fake-indexeddb": "^6.0.0",
-    "globals": "^15.15.0",
+    "globals": "^16.0.0",
     "jsdom": "^26.0.0",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.47",
     "prettier": "^3.5.0",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-svelte": "^3.3.3",
     "sass": "^1.69.4",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.2",
-    "svelte-preprocess": "^6.0.2",
-    "svelte2tsx": "^0.7.19",
+    "svelte": "^5.25.3",
+    "svelte-check": "^4.1.5",
+    "svelte-preprocess": "^6.0.3",
     "typescript": "^5.2.2",
     "typescript-eslint": "^8.24.0",
-    "vite": "^5.4.6",
-    "vitest": "^3.0.5",
-    "vitest-mock-extended": "^2.0.2"
+    "vite": "^6.2.3",
+    "vitest": "^3.0.9",
+    "vitest-mock-extended": "^3.0.1"
   },
   "type": "module",
   "dependencies": {
@@ -77,7 +77,7 @@
     "@dfinity/candid": "^2.3.0",
     "@dfinity/ckbtc": "next",
     "@dfinity/cmc": "next",
-    "@dfinity/gix-components": "next",
+    "@dfinity/gix-components": "^6.0.0",
     "@dfinity/ic-management": "next",
     "@dfinity/identity": "^2.1.3",
     "@dfinity/ledger-icp": "next",

frontend/package.json

@@ -29,7 +29,7 @@
     layoutMenuOpen,
     menuCollapsed,
   } from "@dfinity/gix-components";
-  import type { ComponentType } from "svelte";
+  import type { Component } from "svelte";
   import { cubicIn, cubicOut } from "svelte/easing";
   import { scale } from "svelte/transition";
 
@@ -43,7 +43,7 @@
       | typeof IconNeurons
       | typeof IconVote
       | typeof IconRocketLaunch;
-    statusIcon?: ComponentType;
+    statusIcon?: Component;
   }[];
   $: routes = [
     ...($ENABLE_PORTFOLIO_PAGE

frontend/src/lib/components/common/MenuItems.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" context="module">
-  import type { ComponentType, SvelteComponent } from "svelte";
-  type AnyComponent = ComponentType<SvelteComponent>;
+  import type { Component } from "svelte";
 
   export type CardItem = {
-    component: AnyComponent;
+    component: Component;
     props?: Record<string, unknown>;
   };
 </script>

frontend/src/lib/components/portfolio/StackedCards.svelte

@@ -35,7 +35,8 @@
     {:else}
       <div class="mobile-only">
         1 {$i18n.core.icp} = ${icpPriceFormatted}
-      </div><div>
+      </div>
+      <div>
         {$i18n.accounts.token_price_source}
       </div>
     {/if}

frontend/src/lib/components/ui/IcpExchangeRate.svelte

@@ -94,7 +94,9 @@
     return { result, identifier, token, amount };
   };
 
-  export const scanQrCode = async ({
+  // Using const to export a function is incompatible with Svelte v5
+  // svelte-ignore unused-export-let
+  export let scanQrCode = async ({
     requiredToken,
   }: {
     requiredToken: Token;

frontend/src/lib/modals/transaction/QrWizardModal.svelte

@@ -23,6 +23,7 @@
   import { getTotalStakeInUsd } from "$lib/utils/staking.utils";
   import { getTotalBalanceInUsd } from "$lib/utils/token.utils";
   import { TokenAmountV2, isNullish } from "@dfinity/utils";
+  import type { Component } from "svelte";
 
   export let userTokens: UserToken[] = [];
   export let tableProjects: TableProject[];
@@ -124,8 +125,9 @@
     .map((project) => project.summary);
 
   let launchpadCards: CardItem[];
-  $: launchpadCards = snsSummaries.map((summary) => ({
-    component: LaunchProjectCard,
+  $: launchpadCards = snsSummaries.map<CardItem>((summary) => ({
+    // TODO: Svelte v5 migration - fix type
+    component: LaunchProjectCard as unknown as Component,
     props: { summary },
   }));
 

frontend/src/lib/pages/Portfolio.svelte

@@ -30,9 +30,11 @@
     : undefined;
 
   let transactions: IcrcWalletTransactionsList;
-  let wallet: IcrcWalletPage;
 
-  const reloadAccount = async () => await wallet.reloadAccount?.();
+  // TODO: Svelte v5 migration - marked as potentially undefined because of SnsWallet.spec.ts
+  let wallet: IcrcWalletPage | undefined;
+
+  const reloadAccount = async () => await wallet?.reloadAccount?.();
   const reloadTransactions = () => transactions?.reloadTransactions?.();
 </script>