Merge pull request #15 from twm/s5

Svelte 5
twm · Nov 8, 2024 · ee0a8c7 · ee0a8c7
2 parents e26f3e6 + 6fc6b60
commit ee0a8c7
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 571 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,20 +18,20 @@
         "@playwright/test": "^1.28.1",
         "@sveltejs/adapter-auto": "^3.0.0",
         "@sveltejs/adapter-static": "^3.0.4",
-        "@sveltejs/kit": "^2.0.0",
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/kit": "^2.5.27",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "@types/eslint": "^9.6.0",
         "eslint": "^9.0.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-svelte": "^2.36.0",
+        "eslint-plugin-svelte": "^2.45.1",
         "globals": "^15.0.0",
         "prettier": "^3.1.1",
-        "prettier-plugin-svelte": "^3.1.2",
-        "svelte": "^4.2.7",
-        "svelte-check": "^3.6.0",
-        "typescript": "^5.0.0",
+        "prettier-plugin-svelte": "^3.2.6",
+        "svelte": "^5.0.0",
+        "svelte-check": "^4.0.0",
+        "typescript": "^5.5.0",
         "typescript-eslint": "^8.0.0",
-        "vite": "^5.0.3",
+        "vite": "^5.4.4",
         "vitest": "^2.0.0"
     },
     "type": "module"

diff --git a/src/lib/FracInput.svelte b/src/lib/FracInput.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { run } from "svelte/legacy"
+
     import { frac, parseFrac } from "$lib/frac"
 
     function validate(
@@ -23,19 +25,30 @@
         return true
     }
 
-    export let id: string
-    export let value: number
-    export let min: number | null = null
-    export let max: number | null = null
-    export let step: number | null = null // TODO: Add step buttons
-    export let required: boolean = false
+    interface Props {
+        id: string
+        value: number
+        min?: number | null
+        max?: number | null
+        step?: number | null
+        required?: boolean
+    }
+
+    let {
+        id,
+        value = $bindable(),
+        min = null,
+        max = null,
+        step = null,
+        required = false,
+    }: Props = $props()
 
-    let focused: boolean = false
-    let input: HTMLInputElement
-    let rawValue = frac(value)
-    let displayValue = frac(value)
+    let focused: boolean = $state(false)
+    let input: HTMLInputElement | undefined = $state()
+    let rawValue = $state(frac(value))
+    let displayValue = $state(frac(value))
 
-    $: {
+    run(() => {
         // Round to the nearest 1⁄32nd to match the masked value.
         let v = Math.round(parseFrac(rawValue) * 32) / 32
 
@@ -47,7 +60,7 @@
                 displayValue = rawValue
             }
         }
-    }
+    })
 </script>
 
 <span class="range">
@@ -57,27 +70,27 @@
         value={focused ? rawValue : displayValue}
         bind:this={input}
         {required}
-        on:input={() => {
-            rawValue = input.value
+        oninput={(e) => {
+            rawValue = e.currentTarget.value
         }}
-        on:focus={() => {
+        onfocus={() => {
             focused = true
         }}
-        on:blur={() => {
+        onblur={() => {
             focused = false
         }}
     />
     {#if step !== null}
         <button
             disabled={min == null || value - step < min}
-            on:click={() => {
+            onclick={() => {
                 value -= step
                 rawValue = frac(value)
             }}>-{frac(step)}</button
         >
         <button
             disabled={max == null || value + step > max}
-            on:click={() => {
+            onclick={() => {
                 value += step
                 rawValue = frac(value)
             }}>+{frac(step)}</button

diff --git a/src/lib/Frame.svelte b/src/lib/Frame.svelte
@@ -25,8 +25,8 @@
     // The art is drawn centered in a field large enough to hold the largest
     // possible frame so that it doesn't shift around or resize as the user
     // plays with the frame width.
-    $: maxWidth = $artX + 2 * $frameWidthMax
-    $: maxHeight = $artY + 2 * $frameWidthMax
+    let maxWidth = $derived($artX + 2 * $frameWidthMax)
+    let maxHeight = $derived($artY + 2 * $frameWidthMax)
 </script>
 
 <svg

diff --git a/src/lib/Layout.svelte b/src/lib/Layout.svelte
@@ -1,9 +1,17 @@
+<script lang="ts">
+    interface Props {
+        children?: import("svelte").Snippet
+    }
+
+    let { children }: Props = $props()
+</script>
+
 <div class="wrapper">
     <header>
         <h1>Picture Frame Cutlist Calculator</h1>
     </header>
 
-    <slot></slot>
+    {@render children?.()}
 
     <footer>
         <p>
@@ -26,7 +34,7 @@
         text-align: center;
     }
 
-    footer :is(:link, :visited) {
+    footer :is(:global(:link, :visited)) {
         color: inherit;
     }
 </style>
diff --git a/src/lib/PartList.svelte b/src/lib/PartList.svelte
@@ -14,10 +14,11 @@
     }
 
     let gap = 0.5
-    $: totalWidth = $parts.reduce((max, part) => Math.max(max, part.length), 0)
-    $: totalHeight = $parts.reduce(
-        (total, part) => total + (part.width + gap) * part.count,
-        -gap
+    let totalWidth = $derived(
+        $parts.reduce((max, part) => Math.max(max, part.length), 0)
+    )
+    let totalHeight = $derived(
+        $parts.reduce((total, part) => total + (part.width + gap) * part.count, -gap)
     )
 </script>
 

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,11 +1,16 @@
-<script>
+<script lang="ts">
     import normalizeCss from "$lib/vendor/normalize.css/normalize-8.0.1.css?url"
     import stylesCss from "$lib/styles.css?url"
+    interface Props {
+        children?: import("svelte").Snippet
+    }
+
+    let { children }: Props = $props()
 </script>
 
 <svelte:head>
     <link rel="stylesheet" type="text/css" href={normalizeCss} />
     <link rel="stylesheet" type="text/css" href={stylesCss} />
 </svelte:head>
 
-<slot></slot>
+{@render children?.()}