to svelte5

package.json

@@ -15,11 +15,11 @@
     },
     "devDependencies": {
         "@types/luxon": "^3.4.2",
-        "@types/node": "^22.7.9",
+        "@types/node": "^22.9.0",
         "esbuild": "^0.23.1",
         "esbuild-svelte": "^0.8.2",
         "luxon": "^3.5.0",
-        "svelte": "^4.2.19",
+        "svelte": "^5.1.10",
         "svelte-preprocess": "^6.0.3",
         "typescript": "^5.6.3"
     }

src/App.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import { time } from '$lib/dates';
     import { images } from '$lib/images';
 
@@ -12,9 +12,8 @@
 </script>
 
 <script lang="ts">
-    export let name: Name;
-
-    let active: string | undefined;
+    let { name } = $props();
+    let active: string | undefined = $state();
 
     function intersection(section: HTMLElement) {
         const observer = new IntersectionObserver(observe, { threshold: 1 });

src/app.ts

@@ -1,7 +1,8 @@
 import { name, repository } from 'package.json'
+import { mount } from 'svelte';
 import App from './App.svelte';
 
-export default new App({
+export default mount(App, {
     target: document.body,
     props: { name }
 });

src/global.d.ts

@@ -60,6 +60,7 @@ type Translate = {
     days: string;
     weeks: string;
     hours: string;
+    ''
 }
 
 type StartDate = { start: string, title: string, quote: Quote }

src/lib/components/Button.svelte

@@ -1,15 +1,24 @@
+<script lang="ts" module>
+    import type { Snippet } from "svelte";
+    
+    interface Props {
+        id: string, 
+        type: string, 
+        children: Snippet
+    }
+</script>
+
 <script lang="ts">
-    export let id = "";
-    export let type: string;
+    let { id = '', type = $bindable<string>(), children }: Props = $props();
 
     function set(e: MouseEvent) {
         const { id } = e.currentTarget as HTMLButtonElement;
         type = id;
     }
 </script>
 
-<button {id} class="clear outline" on:click={set}>
-    <slot />
+<button {id} class="clear outline" onclick={set}>
+    {@render children?.()}
 </button>
 
 <style>

src/lib/components/Control.svelte

@@ -1,12 +1,14 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import Icon from '$lib/components/Icon.svelte';
 
     import { images } from '$lib/images';
     import { dates } from '$lib/dates';
+
+    interface Props {active: string | undefined}
 </script>
 
 <script lang="ts">
-    export let active: string | undefined;
+    let { active }: Props = $props();
 
     function randomQuote(e: MouseEvent) {
         const { id } = e.target as HTMLButtonElement;
@@ -19,13 +21,13 @@
     }
 </script>
 
-<button class="box" on:click={images.back}>
+<button class="box" onclick={images.back}>
     <Icon name="Images" />
 </button>
-<button class="box" id={active} on:click={deleteDate}>
+<button class="box" id={active} onclick={deleteDate}>
     <Icon name="Delete" />
 </button>
-<button class="box" id={active} on:click={randomQuote}>
+<button class="box" id={active} onclick={randomQuote}>
     <Icon name="Quote" />
 </button>
 

src/lib/components/Counter.svelte

@@ -1,29 +1,24 @@
-<script lang="ts" context="module">
-    import County from "./County.svelte";
+<script lang="ts" module>
+    import County from './County.svelte';
+
+    interface Props {
+        counter: Counter
+    }
 </script>
 
 <script lang="ts">
-    export let counter: Counter;
-
-    let type: keyof Translate;
-
-    function length(counter: Counter, type: keyof Translate) {
-        const { id, title, quote, start, full, ...rest } = counter;
-        const values = Object.values(rest)
-            .filter((r) => r)
-            .join("");
-        // return !type ? values.length : String(full[type]).length;
-    }
+    let { counter }: Props = $props();
+    let type: keyof Translate = $state('');
 </script>
 
-<ul style="--county-length: {length(counter, type)}">
-    {#if type === "months"}
+<ul>
+    {#if type === 'months'}
         <County name="months" value={counter.full.months} bind:type />
-    {:else if type === "weeks"}
+    {:else if type === 'weeks'}
         <County name="weeks" value={counter.full.weeks} bind:type />
-    {:else if type === "days"}
+    {:else if type === 'days'}
         <County name="days" value={counter.full.days} bind:type />
-    {:else if type === "hours"}
+    {:else if type === 'hours'}
         <County name="hours" value={counter.full.hours} bind:type />
     {:else}
         {#if counter.years}

src/lib/components/County.svelte

@@ -1,19 +1,21 @@
-<script lang="ts" context="module">
-    import Button from "./Button.svelte";
-    import { convert } from "$lib/utils";
+<script lang="ts" module>
+    import Button from './Button.svelte';
+    import { convert } from '$lib/utils';
+
+    interface Props {
+        id?: string;
+        value: number;
+        type: keyof Translate;
+        name: keyof Translate;
+    }
 </script>
 
 <script lang="ts">
-    export let name: keyof Translate;
-    export let value: number;
-    export let type: keyof Translate;
-    export let id = "";
+    let { id = '', value, type = $bindable(), name }: Props = $props();
 </script>
 
 <li id={convert(name, value)}>
-    <Button {id} bind:type>
-        {value}
-    </Button>
+    <Button {id} bind:type>{value}</Button>
 </li>
 
 <style>

src/lib/components/DateForm.svelte

@@ -1,13 +1,15 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import { dates, date } from "$lib/dates";
     import { t } from "$lib/utils";
+
+    interface Props { id?: number, counter?: Counter }
 </script>
 
 <script lang="ts">
-    export let id = 0;
-    export let counter: Counter | undefined = undefined;
+    let { id = 0, counter }: Props = $props();
 
     function setDate(e: SubmitEvent) {
+        e.preventDefault()
         if (counter) return;
         const data = new FormData(e.target as HTMLFormElement);
         const date = Object.fromEntries(data) as Partial<StartDate>;
@@ -22,7 +24,7 @@
     }
 </script>
 
-<form action="post" on:submit|preventDefault={setDate}>
+<form action="post" onsubmit={setDate}>
     <fieldset>
         <label>
             <input
@@ -33,7 +35,7 @@
                 class:clear={counter}
                 value={counter?.start || $date}
                 required
-                on:input={changeDate}
+                oninput={changeDate}
             />
         </label>
         <label>
@@ -47,7 +49,7 @@
                 placeholder={t("Counter name", "Имя счётчика")}
                 autocomplete="off"
                 required
-                on:change={changeDate}
+                onchange={changeDate}
             />
         </label>
         {#if !counter}

src/lib/components/Icon.svelte

@@ -1,12 +1,27 @@
+<script lang="ts" module>
+    interface Props {
+        id: string,
+        name: string,
+        size: string,
+        color: string,
+        rotate: number,
+        spin: boolean,
+        style: string,
+        bordered: boolean
+    }
+</script>
+
 <script lang="ts">
-    export let id = "";
-    export let name = "Close";
-    export let size = "16px";
-    export let color = "currentColor";
-    export let rotate = 0;
-    export let spin = false;
-    export let style = "";
-    export let bordered = false;
+    let {
+        id = "",
+        name = "Close",
+        size = "16px",
+        color = "currentColor",
+        rotate = 0,
+        spin = false,
+        style = "",
+        bordered = false,
+    }: Partial<Props> = $props()
 </script>
 
 <svg

src/lib/components/Quote.svelte

@@ -1,9 +1,13 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import { fade } from 'svelte/transition';
+
+    interface Props {
+        quote: [text: string, author: string]
+    }
 </script>
 
 <script lang="ts">
-    export let quote: [text: string, author: string];
+    let { quote }: Props = $props();
 </script>
 
 {#if quote}

src/lib/counters.ts

@@ -1,4 +1,4 @@
-import { Writable, derived } from 'svelte/store';
+import { type Writable, derived } from 'svelte/store';
 import { dates } from './dates';
 import { quotes } from './quotes';
 import { DateTime, Interval } from "luxon";