update to svelte5

mrwormhole · Jan 12, 2025 · 216bb1e · 216bb1e
1 parent f5940cc
commit 216bb1e
Show file tree

Hide file tree

Showing 7 changed files with 329 additions and 597 deletions.
diff --git a/package.json b/package.json
@@ -14,15 +14,15 @@
     "devDependencies": {
         "@biomejs/biome": "1.8.3",
         "@sveltejs/adapter-static": "^3.0.2",
-        "@sveltejs/kit": "^2.5.14",
-        "@sveltejs/vite-plugin-svelte": "^3.1.1",
+        "@sveltejs/kit": "^2.5.27",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "bulma": "^0.9.4",
         "sass": "^1.77.5",
-        "svelte": "^4.2.18",
-        "svelte-check": "^3.8.0",
+        "svelte": "^5.0.0",
+        "svelte-check": "^4.0.0",
         "tslib": "^2.6.3",
-        "typescript": "^5.4.5",
-        "vite": "^5.3.1"
+        "typescript": "^5.5.0",
+        "vite": "^5.4.4"
     },
     "type": "module"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-export let appName: string;
+const { appName } = $props();
 </script>
 
 

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-export let appName: string;
+const { appName } = $props();
 </script>
 
 <header class="hero is-info">

diff --git a/src/lib/InvoiceForm.svelte b/src/lib/InvoiceForm.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { browser } from "$app/environment";
 import { goto } from "$app/navigation";
+import { run } from "svelte/legacy";
 import { invoice } from "../store";
 import { DecimalFixed, DecimalFixedNum } from "./decimal";
 
@@ -18,23 +19,25 @@ const validImageTypes = ["image/jpg", "image/jpeg", "image/png"];
 const mb = 1 << (10 * 2);
 const dayInMs = 1000 * 60 * 60 * 24;
 
-let notifications: Array<string> = [];
+let notifications: Array<string> = $state([]);
 
-$: if (browser) {
-    // total amount tracker
-    $invoice.totalAmount = 0;
-    for (const row of $invoice.rows) {
-        if (row.rate === undefined || row.quantity === undefined) {
-            row.amount = "";
-            continue;
-        }
+run(() => {
+    if (browser) {
+        // total amount tracker
+        $invoice.totalAmount = 0;
+        for (const row of $invoice.rows) {
+            if (row.rate === undefined || row.quantity === undefined) {
+                row.amount = "";
+                continue;
+            }
 
-        row.rate = DecimalFixedNum(row.rate);
-        row.quantity = DecimalFixedNum(row.quantity);
-        row.amount = DecimalFixed(row.rate * row.quantity);
-        $invoice.totalAmount += Number.parseFloat(row.amount);
+            row.rate = DecimalFixedNum(row.rate);
+            row.quantity = DecimalFixedNum(row.quantity);
+            row.amount = DecimalFixed(row.rate * row.quantity);
+            $invoice.totalAmount += Number.parseFloat(row.amount);
+        }
     }
-}
+});
 
 function setLogo(event: Event) {
     const target = event.target as HTMLInputElement;
@@ -119,7 +122,8 @@ function clear() {
 
 <form
     class="container"
-    on:submit|preventDefault={() => {
+    onsubmit={(event: Event) => {
+        event.preventDefault();
         notifications = [];
         goto("/print");
     }}
@@ -148,11 +152,11 @@ function clear() {
                             aria-label="logo"
                             name="logo"
                             accept={validImageTypes.join(",")}
-                            on:change={setLogo}
+                            onchange={setLogo}
                         />
                         <span class="file-cta">
                             <span class="file-icon">
-                                <i class="fa fa-upload" />
+                                <i class="fa fa-upload"></i>
                             </span>
                             <span class="file-label"> Upload </span>
                         </span>
@@ -170,7 +174,7 @@ function clear() {
                     aria-label="issueDate"
                     name="issueDate"
                     bind:value={$invoice.issueDate}
-                    on:change={setAutoDueDate}
+                    onchange={setAutoDueDate}
                     required
                 />
             </div>
@@ -196,7 +200,7 @@ function clear() {
                         aria-label="from" 
                         name="from"
                         bind:value={$invoice.from}
-                    />
+></textarea>
                 </div>
                 <div class="tile is-child">
                     <textarea
@@ -205,7 +209,7 @@ function clear() {
                         aria-label="to"
                         name="to"
                         bind:value={$invoice.to}
-                    />
+></textarea>
                 </div>
             </div>
         </div>
@@ -240,7 +244,7 @@ function clear() {
                                     aria-label="rowRate"
                                     class="input is-borderless"
                                     type="number"
-                                    on:change|preventDefault={setDecimal}
+                                    onchange={setDecimal}
                                     min="0"
                                     step="0.01"
                                     placeholder="1.00"
@@ -254,7 +258,7 @@ function clear() {
                                     aria-label="rowQuantity"
                                     class="input is-borderless"
                                     type="number"
-                                    on:change|preventDefault={setDecimal}
+                                    onchange={setDecimal}
                                     min="0"
                                     step="0.01"
                                     placeholder="1.00"
@@ -294,14 +298,15 @@ function clear() {
             name="notes"
             rows="12"
             bind:value={$invoice.notes}
-        />
+></textarea>
 
         {#if notifications.length != 0}
             <div class="notification is-danger">
                 <button
                     class="delete"
-                    on:click|preventDefault={() => (notifications = [])}
-                />
+                    aria-label="close-notification"
+                    onclick={() => (notifications = [])}
+></button>
                 <ul class="">
                     {#each notifications as notification}
                         <li class="">
@@ -323,26 +328,26 @@ function clear() {
             <button
                 class="button is-light"
                 type="button"
-                on:click|preventDefault={addRow}
+                onclick={addRow}
             >
                 <span class="icon">
-                    <i class="fa fa-plus-circle" aria-hidden="true" />
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                 </span>
                 <span>Add a Row</span>
             </button>
             <button
                 class="button is-light"
                 type="button"
-                on:click|preventDefault={clear}
+                onclick={clear}
             >
                 <span class="icon">
-                    <i class="fa fa-refresh" aria-hidden="true" />
+                    <i class="fa fa-refresh" aria-hidden="true"></i>
                 </span>
                 <span>Clear</span>
             </button>
             <button class="button is-dark" type="submit">
                 <span class="icon">
-                    <i class="fa fa-print" aria-hidden="true" />
+                    <i class="fa fa-print" aria-hidden="true"></i>
                 </span>
                 <span>Print</span>
             </button>

diff --git a/src/lib/InvoicePrint.svelte b/src/lib/InvoicePrint.svelte
@@ -3,11 +3,10 @@ import { onMount } from "svelte";
 import { invoice } from "../store";
 import { DecimalFixed } from "./decimal";
 
-export let title = "Invoice";
-
-let from: Array<string> = [];
-let to: Array<string> = [];
-let notes: Array<string> = [];
+let { title = "Invoice" } = $props();
+let from: Array<string> = $state([]);
+let to: Array<string> = $state([]);
+let notes: Array<string> = $state([]);
 
 onMount(() => {
     if ($invoice.invoiceNumber.trim() !== "") {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
-<script>  
-import "../app.scss";
+<script lang="ts">  
+	import "../app.scss";
+	let { children } = $props();
 </script>
 
-<slot />
+{@render children()}