Migrate to Svelte 5

I used `npx sv migrate svelte-5` to start the migration but made changes from there. I removed any legacy package usage since instead of dispatching events, its not passing callbacks through props instead.

Author: javierjulio

src/App.svelte

@@ -32,7 +32,7 @@
     return { puzzle: puzzleSet }
   }
 
-  let puzzleData = generatePuzzleData()
+  let puzzleData = $state(generatePuzzleData())
 
   const saveCompletedGame = async (moveCount) => {
     await db.completedGames.add({
@@ -57,20 +57,20 @@
     }, 200)
   }
 
-  let showModal = false;
+  let showModal = $state(false);
 </script>
 
 <div class="app-root">
   <div class="app-container">
-    <Board puzzle={puzzleData.puzzle} onCompleted={onCompleted}/>
+    <Board bind:puzzle={puzzleData.puzzle} completed={onCompleted}/>
     <div class="footer-bar">
       <MoveCountLabel count={$moveCount}/>
-      <RecordsButton on:click={() => showModal = true}/>
+      <RecordsButton onclick={() => showModal = true}/>
     </div>
   </div>
 </div>
 {#if showModal}
-  <RecordsModal on:close="{() => showModal = false}"/>
+  <RecordsModal close={() => showModal = false}/>
 {/if}
 
 <style>

src/Board.svelte

@@ -2,27 +2,24 @@
   import Card from './Card.svelte';
   import { moveCount } from "./stores/moveCount"
 
-  export let puzzle = [];
-  export let onCompleted;
+  let { puzzle = $bindable([]), completed } = $props();
 
-  let opened = []
+  let opened = $state([])
 
   function delayOf(ms, ...args) {
     return new Promise(resolve => setTimeout(resolve, ms, ...args))
   }
 
   function resetItem(item) {
     item.backfaceIsUp = false
-    puzzle = puzzle
-    // puzzle[item.index].backfaceIsUp = false
   }
 
   function checkCompletion() {
-    const completed = (puzzle.length === puzzle.filter((item) => item.backfaceIsUp).length)
+    const puzzleCompleted = (puzzle.length === puzzle.filter((item) => item.backfaceIsUp).length)
 
-    if (completed) {
+    if (puzzleCompleted) {
       delayOf(300).then(() => {
-        onCompleted()
+        completed()
       })
     }
   }
@@ -39,10 +36,8 @@
     return opened[0].type === opened[1].type
   }
 
-  function handleFlip(event) {
-    const item = event.detail
-    puzzle[item.index].backfaceIsUp = !puzzle[item.index].backfaceIsUp
-    // puzzle = [...puzzle]
+  function handleFlip(item) {
+    item.backfaceIsUp = !item.backfaceIsUp
 
     opened = [...opened, item]
 
@@ -62,7 +57,7 @@
 
 <div class="full-grid disable-text-selection">
   {#each puzzle as item, index (index)}
-    <Card index={index} item={item} flipped={item.backfaceIsUp} on:flip={handleFlip} flippable={opened.length < 2}>
+    <Card index={index} item={item} flipped={item.backfaceIsUp} flip={handleFlip} flippable={opened.length < 2}>
       {item.type.toString()}
     </Card>
   {/each}

src/Card.svelte

@@ -1,16 +1,16 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-
-  const dispatch = createEventDispatcher();
-
-  export let index = 0;
-  export let item = { index: 0, type: 0, backfaceIsUp: false };
-  export let flippable = true;
-  export let flipped = false;
+  let {
+    index = 0,
+    item = { index: 0, type: 0, backfaceIsUp: false },
+    flippable = true,
+    flipped = false,
+    flip,
+    children
+  } = $props();
 
   function clickHandler() {
     if (flippable && !flipped)
-      dispatch('flip', item)
+      flip(item)
   }
 
   function keyUpHandler(event) {
@@ -19,11 +19,11 @@
   }
 </script>
 
-<div data-testid="card-{item.type}" class="card" class:toggled={flipped} on:click={clickHandler} on:keyup={keyUpHandler} role="button" tabindex={index + 1}>
+<div data-testid="card-{item.type}" class="card" class:toggled={flipped} onclick={clickHandler} onkeyup={keyUpHandler} role="button" tabindex={index + 1}>
   <div class="card-front">
   </div>
   <div class="card-back">
-    <slot></slot>
+    {@render children?.()}
   </div>
 </div>
 

src/Modal.svelte

@@ -1,12 +1,11 @@
 <script>
-  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { onDestroy } from 'svelte';
   import { quintOut, sineInOut } from 'svelte/easing';
   import { fade, slide } from 'svelte/transition';
 
-  const dispatch = createEventDispatcher();
-  const close = () => dispatch('close');
+  let { header, content, close } = $props();
 
-  let modal;
+  let modal = $state();
 
   const handle_keydown = e => {
     if (e.key === 'Escape') {
@@ -39,16 +38,18 @@
   }
 </script>
 
-<svelte:window on:keydown={handle_keydown}/>
+<svelte:window onkeydown={handle_keydown}/>
 
 <div class="modal-overlay">
-  <div class="modal-backdrop" transition:fade="{{ duration: 600, easing: sineInOut }}" on:pointerdown={close}>
+  <div class="modal-backdrop" transition:fade="{{ duration: 600, easing: sineInOut }}" onpointerdown={close}>
   </div>
   <div class="modal" role="dialog" aria-modal="true" bind:this={modal} transition:slide="{{ duration: 600, easing: quintOut }}">
-    <slot name="header">
-    </slot>
-    <slot name="content">
-    </slot>
+    {#if header}
+      {@render header()}
+    {/if}
+    {#if content}
+      {@render content()}
+    {/if}
   </div>
 </div>
 

src/MoveCountLabel.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let count = 0
+  let { count = 0 } = $props();
 </script>
 
 <div>

src/RecordsButton.svelte

@@ -1,4 +1,8 @@
-<button class="button" on:click>
+<script>
+  let { onclick } = $props();
+</script>
+
+<button class="button" {onclick}>
   <span class="icon">
     <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>
   </span>

src/RecordsButton.test.js

@@ -8,16 +8,13 @@ describe("RecordsButton", () => {
   })
 
   it("forwards the click event", async () => {
-    const { component } = render(RecordsButton)
-
     let clickReceived = false
-    const off = component.$on('click', () => clickReceived = true)
+
+    const { component } = render(RecordsButton, { onclick: () => clickReceived = true })
 
     const button = screen.queryByRole("button", { name: "Records" })
     await fireEvent.click(button)
 
     expect(clickReceived).toEqual(true)
-
-    off()
   })
 })

src/RecordsModal.svelte

@@ -1,36 +1,25 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
   import Modal from './Modal.svelte';
   import RecordsTable from './RecordsTable.svelte';
 
-	const dispatch = createEventDispatcher();
-	const close = () => dispatch('close');
-
-  let persisted = false
-
-  onMount(async () => {
-    if (navigator.storage && navigator.storage.persist) {
-      persisted = await navigator.storage.persist()
-    }
-  })
+  let { close } = $props();
 </script>
 
-<Modal on:close>
-  <div slot="header" class="modal-header">
-    <!-- svelte-ignore a11y-autofocus -->
-    <button autofocus class="button modal-close-button" on:click={close}>
-      Close
-    </button>
-  </div>
-  <div slot="content" class="records-list">
-    <p class="text-muted">
-      Your objective is to solve puzzles in the fewest moves possible.
-      {#if persisted}
-        Your history is persisted on this device.
-      {/if}
-    </p>
-    <RecordsTable/>
-  </div>
+<Modal close={close}>
+  {#snippet header()}
+    <div  class="modal-header">
+      <!-- svelte-ignore a11y_autofocus -->
+      <button autofocus class="button modal-close-button" onclick={close}>
+        Close
+      </button>
+    </div>
+  {/snippet}
+  {#snippet content()}
+    <div  class="records-list">
+      <p class="text-muted">Your objective is to solve puzzles in the fewest moves possible. Your history is persisted on this device.</p>
+      <RecordsTable/>
+    </div>
+  {/snippet}
 </Modal>
 
 <style>

src/RecordsModal.test.js

@@ -18,16 +18,13 @@ describe("RecordsModal", () => {
   })
 
   it("forwards the close event", async () => {
-    const { component } = render(RecordsModal)
-
     let closeReceived = false
-    const off = component.$on('close', () => closeReceived = true)
+
+    const { component } = render(RecordsModal, { close: () => closeReceived = true })
 
     const button = screen.queryByRole("button", { name: "Close" })
     await fireEvent.click(button)
 
     expect(closeReceived).toEqual(true)
-
-    off()
   })
 })

src/RecordsTable.svelte

@@ -13,7 +13,7 @@
   // https://dexie.org/docs/Tutorial/Svelte
   let data = liveQuery(() => db.completedGames.toArray())
 
-  $: recordsData = groupBy($data || [], "moveCount");
+  let recordsData = $derived(groupBy($data || [], "moveCount"));
 </script>
 
 <table>
@@ -25,7 +25,7 @@
     </tr>
   </thead>
   <tbody>
-    {#if $data && $data.length === 0 }
+    {#if $data && $data.length === 0}
       <tr><td colSpan="3" class="muted centered">No games played</td></tr>
     {:else}
       {#each Object.keys(recordsData).sort(ascOrder) as moveCount, index (index)}