build: svelte v5 (without components migration)

package.json

@@ -8,6 +8,7 @@
     "build": "npm run i18n && vite build",
     "staging": "npm run i18n && vite build --mode staging",
     "package": "svelte-kit sync && svelte-package",
+    "prepare": "svelte-kit sync",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -42,19 +43,19 @@
   "devDependencies": {
     "@junobuild/config": "^0.0.14",
     "@playwright/test": "^1.50.0",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.5.28",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/svelte": "^5.2.1",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.1",
+    "@sveltejs/package": "^2.3.9",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.6",
     "@types/dompurify": "^3.0.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-svelte": "^2.46.1",
     "jest-environment-jsdom": "^29.7.0",
     "mdsvex": "^0.12.3",
     "node-fetch": "^3.3.2",
@@ -63,13 +64,13 @@
     "prettier-plugin-organize-imports": "^4.0.0",
     "prettier-plugin-svelte": "^3.2.6",
     "sass": "^1.79.1",
-    "svelte-check": "^4.0.2",
-    "svelte-preprocess": "^6.0.2",
-    "svelte2tsx": "^0.7.19",
+    "svelte-check": "^4.1.4",
+    "svelte-preprocess": "^6.0.3",
+    "svelte2tsx": "^0.7.34",
     "typescript": "^5.3.3",
     "user-agent-data-types": "^0.4.2",
-    "vite": "^5.4.6",
-    "vitest": "^2.1.9"
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4"
   },
   "dependencies": {
     "dompurify": "^3.1.6",
@@ -87,7 +88,7 @@
   ],
   "peerDependencies": {
     "@dfinity/utils": "*",
-    "svelte": "^4.2.1"
+    "svelte": "^5"
   },
   "repository": {
     "type": "git",

src/lib/components/Card.svelte

@@ -3,7 +3,7 @@
   import IconCheckCircle from "$lib/icons/IconCheckCircle.svelte";
   import { nonNullish } from "@dfinity/utils";
   import { createEventDispatcher } from "svelte";
-  import type { ComponentType } from "svelte";
+  import type { Component } from "svelte";
 
   export let role: "button" | "checkbox" | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
@@ -39,7 +39,7 @@
     dispatch("click", $event?.detail);
   };
 
-  let iconCmp: ComponentType | undefined = undefined;
+  let iconCmp: Component | undefined = undefined;
 
   $: (() => {
     switch (icon) {

src/lib/components/Layout.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import SplitPane from "$lib/components/SplitPane.svelte";
   import Menu from "$lib/components/Menu.svelte";
-  import type { ComponentType } from "svelte";
   import StretchPane from "$lib/components/StretchPane.svelte";
   import LogoNNS from "$lib/components/LogoNNS.svelte";
   import LogoOnChain from "$lib/components/LogoOnChain.svelte";
 
   export let layout: "split" | "stretch" = "split";
 
-  let component: ComponentType;
+  let component: typeof StretchPane | typeof SplitPane;
   $: component = layout === "stretch" ? StretchPane : SplitPane;
 </script>
 

src/lib/components/Toast.svelte

@@ -8,7 +8,7 @@
     ToastPosition,
     ToastTheme,
   } from "$lib/types/toast";
-  import { onDestroy, onMount, type ComponentType } from "svelte";
+  import { onDestroy, onMount, type Component } from "svelte";
   import Spinner from "./Spinner.svelte";
   import IconWarning from "$lib/icons/IconWarning.svelte";
   import IconClose from "$lib/icons/IconClose.svelte";
@@ -21,7 +21,7 @@
 
   export let msg: ToastMsg;
 
-  const iconMapper = (level: ToastLevel): ComponentType | undefined =>
+  const iconMapper = (level: ToastLevel): Component | undefined =>
     ({
       ["success"]: IconCheckCircle,
       ["warn"]: IconWarning,
@@ -38,7 +38,7 @@
   let title: string | undefined;
   let overflow: "scroll" | "truncate" | "clamp" | undefined;
   let position: ToastPosition | undefined;
-  let icon: ComponentType | undefined;
+  let icon: Component | undefined;
   let theme: ToastTheme | undefined;
   let renderAsHtml: boolean | undefined;
 

src/lib/types/toast.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from "svelte";
+import type { Component } from "svelte";
 
 export type ToastLevel = "success" | "warn" | "error" | "info" | "custom";
 
@@ -15,7 +15,7 @@ export interface ToastMsg {
   duration?: number;
   position?: ToastPosition;
   overflow?: "scroll" | "truncate" | "clamp";
-  icon?: ComponentType;
+  icon?: Component;
   theme?: ToastTheme;
   renderAsHtml?: boolean;
 }

src/routes/(split)/components/qr-code-generator/+page.md

@@ -1,10 +1,10 @@
 <script lang="ts">
     import { browser } from "$app/environment";
-    import type { ComponentType } from "svelte";
+    import type { Component } from "svelte";
     import { onMount } from "svelte";
     import icpRounded from "$docs/assets/icp-rounded.svg";
 
-    let QRCode: ComponentType | undefined = undefined;
+    let QRCode: Component | undefined = undefined;
 
     onMount(async () => {
         if (!browser) {

src/routes/(split)/components/toasts/+page.md

@@ -123,7 +123,7 @@ A toast message can be created with following properties.
 | `duration`     | A timeout (in milliseconds) after which the toast automatically disappear.                                   | `number`                                 |           |
 | `position`     | The position of the toast. A related `<Toasts />` component should be declared in order to use the position. | `bottom` or `top`                        |           |
 | `overflow`     | By default, a text content of a toast is scrollbable. This option truncate or clamp the text and title.      | `scroll` or `truncate` or `clamp`        |           |
-| `icon`         | A custom icon to be displayed before the text of the toast.                                                  | `ComponentType`                          |           |
+| `icon`         | A custom icon to be displayed before the text of the toast.                                                  | `Component`                              |           |
 | `renderAsHtml` | Whether the `text` should be rendered as HTML.                                                               | `boolean`                                |           |
 
 ## Showcase

src/tests/lib/components/ComponentTest.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { ComponentType } from "svelte";
+  import type { Component } from "svelte";
 
-  export let cmp: ComponentType;
+  export let cmp: Component;
   export let testId: string;
 </script>
 

src/tests/lib/components/Input.spec.ts → src/tests/lib/components/Input.svelte.spec.ts

@@ -321,53 +321,51 @@ describe("Input", () => {
       testGetAttribute({ container, attribute: "type", expected: "text" });
     });
 
-    it("should bind value", () =>
-      new Promise<void>((done) => {
-        const { container, component } = render(InputValueTest, {
-          props: {
-            ...props,
-            inputType: "icp",
-          },
-        });
+    it("should bind value", () => {
+      const testProps = $state({
+        ...props,
+        inputType: "icp" as const,
+        amount: undefined,
+      });
 
-        const input: HTMLInputElement | null = container.querySelector("input");
+      const { container } = render(InputValueTest, {
+        props: testProps,
+      });
+
+      const input: HTMLInputElement | null = container.querySelector("input");
 
-        if (isNullish(input)) {
-          throw new Error("No input");
-        }
+      if (isNullish(input)) {
+        throw new Error("No input");
+      }
 
-        fireEvent.input(input, { target: { value: "100" } });
-        expect(input.value).toBe("100");
+      fireEvent.input(input, { target: { value: "100" } });
+      expect(input.value).toBe("100");
 
-        component.$on("testAmount", ({ detail }) => {
-          expect(detail.amount).toBe(100);
-          done();
-        });
-      }));
-
-    it("should bind value as string", () =>
-      new Promise<void>((done) => {
-        const { container, component } = render(InputValueTest, {
-          props: {
-            ...props,
-            inputType: "currency",
-            decimals: 18,
-          },
-        });
+      expect(testProps.amount).toBe(100);
+    });
 
-        const input: HTMLInputElement | null = container.querySelector("input");
-        assertNonNullish(input);
+    it("should bind value as string", () => {
+      const ethValue = "0.000000094829004242";
 
-        const ethValue = "0.000000094829004242";
+      const testProps = $state({
+        ...props,
+        inputType: "currency" as const,
+        decimals: 18,
+        amount: undefined,
+      });
 
-        fireEvent.input(input, { target: { value: ethValue } });
-        expect(input.value).toBe(ethValue);
+      const { container } = render(InputValueTest, {
+        props: testProps,
+      });
 
-        component.$on("testAmount", ({ detail }) => {
-          expect(detail.amount).toBe(ethValue);
-          done();
-        });
-      }));
+      const input: HTMLInputElement | null = container.querySelector("input");
+      assertNonNullish(input);
+
+      fireEvent.input(input, { target: { value: ethValue } });
+      expect(input.value).toBe(ethValue);
+
+      expect(testProps.amount).toBe(ethValue);
+    });
 
     it("should not accept not icp formatted changed", async () => {
       const { container } = render(Input, {
@@ -400,30 +398,29 @@ describe("Input", () => {
       expect(input.value).toBe(".0000001");
     });
 
-    it('should replace "" with undefined', () =>
-      new Promise<void>((done) => {
-        const { container, component } = render(InputValueTest, {
-          props: {
-            ...props,
-            value: "0",
-            inputType: "icp",
-          },
-        });
+    it('should replace "" with undefined', () => {
+      const testProps = $state({
+        ...props,
+        value: "0",
+        inputType: "icp" as const,
+        amount: undefined,
+      });
 
-        const input: HTMLInputElement | null = container.querySelector("input");
+      const { container } = render(InputValueTest, {
+        props: testProps,
+      });
 
-        if (isNullish(input)) {
-          throw new Error("No input");
-        }
+      const input: HTMLInputElement | null = container.querySelector("input");
 
-        fireEvent.input(input, { target: { value: "" } });
-        expect(input.value).toBe("");
+      if (isNullish(input)) {
+        throw new Error("No input");
+      }
 
-        component.$on("testAmount", ({ detail }) => {
-          expect(detail.amount).toBe(undefined);
-          done();
-        });
-      }));
+      fireEvent.input(input, { target: { value: "" } });
+      expect(input.value).toBe("");
+
+      expect(testProps.amount).toBe(undefined);
+    });
 
     it("should avoid exponent formatted initial zero in icp mode", () => {
       const { container } = render(InputValueTest, {
@@ -449,12 +446,14 @@ describe("Input", () => {
     });
 
     it("should avoid exponent formatted on change in icp mode", async () => {
-      const { container, component } = render(Input, {
-        props: {
-          ...props,
-          value: "",
-          inputType: "icp",
-        },
+      const testProps = $state({
+        ...props,
+        value: "",
+        inputType: "icp" as const,
+      });
+
+      const { container } = render(Input, {
+        props: testProps,
       });
 
       const input: HTMLInputElement | null = container.querySelector("input");
@@ -463,7 +462,7 @@ describe("Input", () => {
         throw new Error("No input");
       }
 
-      component.$set({ value: 0.00000001 });
+      testProps.value = "0.00000001";
 
       // svelte does not update the dom immediately
       expect(input.value).toBe("");
@@ -518,29 +517,27 @@ describe("Input", () => {
       expect(input.value).toBe("0.000000011231232121");
     });
 
-    it("should not round custom decimals with JS imprecision", () =>
-      new Promise<void>((done) => {
-        const { container, component } = render(InputValueTest, {
-          props: {
-            ...props,
-            value: "0.12",
-            inputType: "currency",
-            decimals: 18,
-          },
-        });
+    it("should not round custom decimals with JS imprecision", () => {
+      const testProps = $state({
+        ...props,
+        value: "0.12",
+        inputType: "currency" as const,
+        decimals: 18,
+        amount: undefined,
+      });
 
-        const input: HTMLInputElement | null = container.querySelector("input");
-        assertNonNullish(input);
+      const { container } = render(InputValueTest, {
+        props: testProps,
+      });
 
-        fireEvent.input(input, { target: { value: "0.122" } });
+      const input: HTMLInputElement | null = container.querySelector("input");
+      assertNonNullish(input);
 
-        component.$on("testAmount", ({ detail }) => {
-          // Example if the input would be rounded with Number(value).toFixed(18)
-          expect(detail.amount).not.toBe("0.121999999999999997");
-          expect(detail.amount).toBe("0.122");
-          done();
-        });
-      }));
+      fireEvent.input(input, { target: { value: "0.122" } });
+
+      expect(testProps.amount).not.toBe("0.121999999999999997");
+      expect(testProps.amount).toBe("0.122");
+    });
   });
 
   it("should bind input element", async () => {