Merge pull request #600 from jermspeaks/migration/svelte-5

Migration to Svelte 5

Author: jermspeaks

src/components/Animation.svelte

@@ -1,6 +1,6 @@
 <script>
   import { slide } from "svelte/transition";
-  let items = ["Item 1", "Item 2", "Item 3"];
+  let items = $state(["Item 1", "Item 2", "Item 3"]);
 
   function addItem() {
     items = [...items, `Item ${items.length + 1}`];
@@ -13,7 +13,7 @@
 
 <button
   class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
-  on:click={addItem}>Add Item</button
+  onclick={addItem}>Add Item</button
 >
 
 <ul class="list-none">
@@ -22,7 +22,7 @@
       {item}
       <button
         class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
-        on:click={() => removeItem(index)}>Remove</button
+        onclick={() => removeItem(index)}>Remove</button
       >
     </li>
   {/each}

src/components/CRUD.svelte

@@ -1,27 +1,21 @@
 <!-- https://eugenkiss.github.io/7guis/tasks#crud -->
 
 <script>
-  let people = [
+  import { run } from 'svelte/legacy';
+
+  let people = $state([
     { first: "Hans", last: "Emil" },
     { first: "Max", last: "Mustermann" },
     { first: "Roman", last: "Tisch" },
-  ];
+  ]);
 
-  let prefix = "";
-  let first = "";
-  let last = "";
-  let i = 0;
+  let prefix = $state("");
+  let first = $state("");
+  let last = $state("");
+  let i = $state(0);
 
-  $: filteredPeople = prefix
-    ? people.filter((person) => {
-        const name = `${person.last}, ${person.first}`;
-        return name.toLowerCase().startsWith(prefix.toLowerCase());
-      })
-    : people;
 
-  $: selected = filteredPeople[i];
 
-  $: reset_inputs(selected);
 
   function create() {
     people = people.concat({ first, last });
@@ -48,6 +42,16 @@
     first = person ? person.first : "";
     last = person ? person.last : "";
   }
+  let filteredPeople = $derived(prefix
+    ? people.filter((person) => {
+        const name = `${person.last}, ${person.first}`;
+        return name.toLowerCase().startsWith(prefix.toLowerCase());
+      })
+    : people);
+  let selected = $derived(filteredPeople[i]);
+  run(() => {
+    reset_inputs(selected);
+  });
 </script>
 
 <input
@@ -78,11 +82,11 @@
 >
 
 <div class="buttons">
-  <button on:click={create} disabled={!first || !last}>create</button>
-  <button on:click={update} disabled={!first || !last || !selected}
+  <button onclick={create} disabled={!first || !last}>create</button>
+  <button onclick={update} disabled={!first || !last || !selected}
     >update</button
   >
-  <button on:click={remove} disabled={!selected}>delete</button>
+  <button onclick={remove} disabled={!selected}>delete</button>
 </div>
 
 <style>

src/components/Card.svelte

@@ -1,10 +1,10 @@
 <script>
-  export let title;
+  let { title, children } = $props();
 </script>
 
 <section>
   <h2>{title}</h2>
-  <slot />
+  {@render children?.()}
 </section>
 
 <style>

src/components/Cells/Cell.svelte

@@ -1,31 +1,37 @@
 <script>
-  export let j;
-  export let i;
-  export let focused;
-  export let data;
-  export let p;
-  export let handleFocus;
-  export let handleBlur;
-  export let handleKeydown;
-  export let handleInput;
+  import { run } from 'svelte/legacy';
+
+  let {
+    j,
+    i,
+    focused,
+    data,
+    p,
+    handleFocus,
+    handleBlur,
+    handleKeydown,
+    handleInput
+  } = $props();
 
   let key = j + i;
-  let hasFocus = false;
-  $: if (focused === key && !hasFocus) {
-    hasFocus = true;
-  } else if (focused !== key && hasFocus) {
-    hasFocus = false;
-  }
+  let hasFocus = $state(false);
+  run(() => {
+    if (focused === key && !hasFocus) {
+      hasFocus = true;
+    } else if (focused !== key && hasFocus) {
+      hasFocus = false;
+    }
+  });
 </script>
 
 {#if hasFocus}
   <input
     id={"input-" + key}
     value={$data[key] || ""}
-    on:focus={() => handleFocus(key)}
-    on:blur={() => handleBlur(key)}
-    on:keydown={(e) => handleKeydown(e, j, i)}
-    on:input={(e) => handleInput(e, key)}
+    onfocus={() => handleFocus(key)}
+    onblur={() => handleBlur(key)}
+    onkeydown={(e) => handleKeydown(e, j, i)}
+    oninput={(e) => handleInput(e, key)}
   />
 {:else}
   <div>{p.parse($data[key]) || ""}</div>

src/components/Cells/Cells.svelte

@@ -7,12 +7,12 @@
 
   const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 
-  export let shape = [100, 100];
+  let { shape = [100, 100] } = $props();
   const rows = range(shape[1]);
   const columns = letterRange(shape[0]);
   const p = new Parser(data, columns, rows);
-  let focused;
-  let tBody;
+  let focused = $state();
+  let tBody = $state();
 
   function range(n) {
     return [...Array(n).keys()];
@@ -104,7 +104,7 @@
   <table>
     <thead>
       <tr>
-        <td class="row-key" />
+        <td class="row-key"></td>
         {#each columns as column}
           <td class="column-key">{column}</td>
         {/each}
@@ -115,7 +115,7 @@
         <tr id={"row-" + i}>
           <td class="row-key">{i}</td>
           {#each columns as j}
-            <td id={j + i} on:click={() => handleFocus(j + i)}>
+            <td id={j + i} onclick={() => handleFocus(j + i)}>
               <Cell
                 {j}
                 {i}
@@ -134,7 +134,7 @@
     </tbody>
   </table>
 </div>
-<button on:click={clear}>Clear</button>
+<button onclick={clear}>Clear</button>
 
 <style>
   .wrapper {

src/components/CircleDrawer.svelte

@@ -7,21 +7,28 @@ radius of the selected circle.
 -->
 
 <script>
+  import { run, preventDefault, stopPropagation } from 'svelte/legacy';
+
   const BASE_RADIUS = 30;
 
-  let step = 0;
-  let snapshots = [[]];
-  let radius = BASE_RADIUS;
-  let resizing = false;
-  $: present = snapshots[step];
-  $: if (resizing) {
-    let resizingIndex = present.findIndex(
-      (circle) => circle.x === resizing.x && circle.y === resizing.y
-    );
-    let newPresent = present.slice();
-    newPresent[resizingIndex] = { ...present[resizingIndex], r: radius };
-    present = newPresent;
-  }
+  let step = $state(0);
+  let snapshots = $state([[]]);
+  let radius = $state(BASE_RADIUS);
+  let resizing = $state(false);
+  let present;
+  run(() => {
+    present = snapshots[step];
+  });
+  run(() => {
+    if (resizing) {
+      let resizingIndex = present.findIndex(
+        (circle) => circle.x === resizing.x && circle.y === resizing.y
+      );
+      let newPresent = present.slice();
+      newPresent[resizingIndex] = { ...present[resizingIndex], r: radius };
+      present = newPresent;
+    }
+  });
 
   function handleRightClick(e) {
     let circle = e.target;
@@ -67,23 +74,23 @@ radius of the selected circle.
 
 <div class="wrapper">
   <div class="buttons">
-    <button disabled={!step} on:click={undo}>Undo</button>
-    <button disabled={step === snapshots.length - 1} on:click={redo}
+    <button disabled={!step} onclick={undo}>Undo</button>
+    <button disabled={step === snapshots.length - 1} onclick={redo}
       >Redo</button
     >
   </div>
   <div class="canvas">
-    <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-    <svg on:click={addCircle}>
+    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+    <svg onclick={addCircle}>
       {#each present as circle (circle.x + "," + circle.y)}
         <circle
           cx={circle.x}
           cy={circle.y}
           r={circle.r}
           fill="white"
           stroke="black"
-          on:click|stopPropagation|preventDefault={() => {}}
-          on:contextmenu|stopPropagation|preventDefault={handleRightClick}
+          onclick={stopPropagation(preventDefault(() => {}))}
+          oncontextmenu={stopPropagation(preventDefault(handleRightClick))}
         />
       {/each}
     </svg>
@@ -92,11 +99,11 @@ radius of the selected circle.
   {#if resizing}
     <div 
       class="overlay"
-      on:click={endResize}
-      on:keydown={endResize}
+      onclick={endResize}
+      onkeydown={endResize}
       tabindex="0"
       role="button"
-    />
+></div>
     <div class="resizer">
       <p>Adjust radius of circle at ({resizing.x}, {resizing.y})</p>
       <p>{radius}</p>