refactor: update to Svelte 5 [DCH-175] (#168)

* refactor: update to Svelte 5

* fix: Fix CI errors

* fix: Fix DSM Code reactivity

.github/workflows/azure_deployment.yml

@@ -28,7 +28,7 @@ jobs:
 
             - name: npm install, build, and test
               run: |
-                  npm install
+                  npm install --legacy-peer-deps
                   npm run build --if-present
                   npm run test --if-present
 

.github/workflows/tests.yaml

@@ -25,7 +25,7 @@ jobs:
                   cache-dependency-path: package-lock.json
             - name: Install dependencies
               run: |
-                  npm install
+                  npm install --legacy-peer-deps
             - name: Run tests
               run: |
                   npm run test
@@ -47,5 +47,5 @@ jobs:
                   cache: npm
                   cache-dependency-path: package-lock.json
             - run: |
-                  npm install
+                  npm install --legacy-peer-deps
                   npm run lint

Dockerfile

@@ -2,7 +2,7 @@ FROM node:22 as builder
 
 WORKDIR /app
 COPY package*.json ./
-RUN npm ci
+RUN npm ci --legacy-peer-deps
 COPY . .
 RUN npm run build
 

package.json

@@ -23,7 +23,7 @@
         "@sveltejs/kit": "^2.5.18",
         "@tailwindcss/forms": "^0.5.7",
         "@testing-library/jest-dom": "^6.4.6",
-        "@testing-library/svelte": "^4.2.3",
+        "@testing-library/svelte": "^5.2.4",
         "@types/pg": "^8.11.6",
         "@types/showdown": "^2.0.6",
         "@types/sortablejs": "^1.15.8",
@@ -42,7 +42,7 @@
         "prettier": "^3.3.2",
         "prettier-plugin-svelte": "^3.2.5",
         "sortablejs": "^1.15.2",
-        "svelte": "^4.2.18",
+        "svelte": "^5.0.0",
         "svelte-check": "^3.8.4",
         "svelte-markdown": "^0.4.1",
         "tailwindcss": "^3.4.4",
@@ -61,5 +61,7 @@
         "tabWidth": 4,
         "printWidth": 120
     },
-    "dependencies": {}
+    "dependencies": {
+        "@sveltejs/vite-plugin-svelte": "^4.0.0"
+    }
 }

src/lib/components/LoadingBar.svelte

@@ -10,9 +10,12 @@ then it keeps spinning forever.
 <script lang="ts">
     import { ProgressRadial } from "@skeletonlabs/skeleton"
 
-    export let value: number | undefined = undefined
-    export let label: string | undefined = undefined
-    export let hidden = false
+    type Props = {
+        value?: number | undefined
+        label?: string | undefined
+        hidden?: boolean
+    }
+    let { value = undefined, label = undefined, hidden = false }: Props = $props()
 
     const stroke = 100
     const width = "w-12"

src/lib/components/MarkdownEditor.svelte

@@ -44,4 +44,4 @@
 {#if !mounted}
     <LoadingBar label="Loading editor..." />
 {/if}
-<div bind:this={elem} id={`vditor-div-${uuid}`} data-testid="vditor-div" use:isMounted />
+<div bind:this={elem} id={`vditor-div-${uuid}`} data-testid="vditor-div" use:isMounted></div>

src/lib/components/NavBar.svelte

@@ -13,7 +13,7 @@
 <AppBar slotTrail="!space-x-2">
     <svelte:fragment slot="lead">
         <div class="flex items-center">
-            <button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
+            <button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen} aria-label="Drawer Menu">
                 <span>
                     <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
                         <rect width="100" height="20" />

src/lib/components/Navigation.svelte

@@ -14,14 +14,16 @@
         drawerStore.close()
     }
 
-    $: classesActive = (href: string) => (href === $page.url.pathname ? "bg-primary-100 dark:bg-primary-700" : "")
+    let classesActive = $derived((href: string) =>
+        href === $page.url.pathname ? "bg-primary-100 dark:bg-primary-700" : ""
+    )
 </script>
 
 <nav class="list-nav p-4 flex flex-col" data-testid="div-navigation">
     <ul class="list-none" style="flex-grow: 1">
         {#each pages as { name, href }}
             <li>
-                <a {href} class={classesActive(href)} data-testid="a-navigation" on:click={drawerClose}>{name}</a>
+                <a {href} class={classesActive(href)} data-testid="a-navigation" onclick={drawerClose}>{name}</a>
             </li>
         {/each}
     </ul>

src/lib/icons/EnvelopeIcon.svelte

@@ -1 +1 @@
-<i class={`fa-solid fa-envelope ${$$props.class}`} />
+<i class={`fa-solid fa-envelope ${$$props.class}`}></i>

src/lib/icons/GithubIcon.svelte

@@ -1 +1 @@
-<i class={`fa-brands fa-github ${$$props.class}`} />
+<i class={`fa-brands fa-github ${$$props.class}`}></i>

src/routes/+layout.svelte

@@ -19,6 +19,7 @@
     import "../app.postcss"
     import ModalSearchDecisionTree from "./templates/TemplatesDirectory/ModalSearchDecisionTree.svelte"
     import ModalDsmForm from "./dsm/ModalDsmForm.svelte"
+
     initializeStores()
     storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow })
 
@@ -29,7 +30,10 @@
     }
 
     $modeCurrent = true
-    $: $page.url.pathname, warmupFunction()
+    $effect(() => {
+        $page.url.pathname
+        warmupFunction()
+    })
 
     async function warmupFunction() {
         if (!browser) return

src/routes/dsm/+page.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
+    import XIcon from "$lib/icons/XIcon.svelte"
     import type { SqlDsmCodeSchema } from "$lib/server/sql"
+    import type { User } from "$lib/types"
     import { getToastStore, type ToastSettings } from "@skeletonlabs/skeleton"
     import { onMount } from "svelte"
-    import EditButton from "./EditButton.svelte"
     import CreateButton from "./CreateButton.svelte"
     import DeleteButton from "./DeleteButton.svelte"
+    import EditButton from "./EditButton.svelte"
     import { indexForNewItemInSortedList } from "./utils"
-    import XIcon from "$lib/icons/XIcon.svelte"
 
-    export let data
+    type Props = { data: { user: User } }
+    let { data }: Props = $props()
 
-    let searchString = ""
-    let dsmCodes: SqlDsmCodeSchema[] = []
-    let autoCompeleteOptions: SqlDsmCodeSchema[] = []
-    let selected: SqlDsmCodeSchema[] = []
+    let searchString = $state("")
+    let selected: SqlDsmCodeSchema[] = $state([])
+
+    let dsmCodes: SqlDsmCodeSchema[] = $state([])
+    let autoCompeleteOptions = $derived(
+        dsmCodes.filter(code => (code.code + " " + code.label).toLowerCase().includes(searchString.toLowerCase()))
+    )
     let inputDiv: HTMLDivElement
-    let isAdmin = data.user?.is_admin
 
+    const isAdmin = data.user?.is_admin
     const toastStore = getToastStore()
     const copyToast: ToastSettings = {
         message: "The selected DSM codes have been copied to your clipboard."
@@ -72,11 +77,8 @@
 
     function onDelete(item: SqlDsmCodeSchema) {
         dsmCodes = dsmCodes.filter(code => code.id !== item.id)
+        selected = selected.filter(code => code.id !== item.id)
     }
-
-    $: autoCompeleteOptions = dsmCodes.filter(code =>
-        (code.code + " " + code.label).toLowerCase().includes(searchString.toLowerCase())
-    )
 </script>
 
 <span class="flex space-x-2 pb-2 h-12">
@@ -96,7 +98,7 @@
         bind:value={searchString}
     />
 
-    <button tabindex="-1" class="btn variant-filled-primary" on:click={exportToClipboard}>
+    <button tabindex="-1" class="btn variant-filled-primary" onclick={exportToClipboard}>
         <span>
             <i class="fas fa-copy"></i>
             Copy
@@ -108,7 +110,7 @@
     {#each selected as selection}
         <button
             class="chip variant-filled hover:variant-filled"
-            on:click={() => (selected = selected.filter(s => s.id !== selection.id))}
+            onclick={() => (selected = selected.filter(s => s.id !== selection.id))}
         >
             <span><XIcon /></span>
             <span>{selection.label}</span>
@@ -119,17 +121,17 @@
 <div class="max-h-[40vh] p-4 overflow-y-auto border-2 bg-white">
     <ul class="w-full">
         {#each autoCompeleteOptions as option}
-            <li class="grid grid-cols-[70px_auto] w-full" class:grid-cols-1={!isAdmin}>
+            <li class:grid-cols-1={!isAdmin} class:grid-cols-[70px_auto]={isAdmin} class="grid w-full">
                 {#if isAdmin}
                     <span class="grid grid-cols-2 mt-2 gap-3 mr-4">
-                        <EditButton bind:dsmItem={option} />
+                        <EditButton bind:dsmItem={dsmCodes[dsmCodes.findIndex(dsm => dsm.id === option.id)]} />
                         <DeleteButton dsmItem={option} {onDelete} />
                     </span>
                 {/if}
                 <button
                     class="btn hover:variant-ghost-primary flex justify-start text-left w-full"
                     class:variant-soft-primary={selected.some(s => s.label === option.label)}
-                    on:click={() => onButtonClick(option)}
+                    onclick={() => onButtonClick(option)}
                 >
                     {option.label}
                 </button>

src/routes/dsm/CreateButton.svelte

@@ -2,7 +2,8 @@
     import type { SqlDsmCodeSchema } from "$lib/server/sql"
     import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
 
-    export let onCreate: (item: SqlDsmCodeSchema) => void
+    type Props = { onCreate: (item: SqlDsmCodeSchema) => void }
+    let { onCreate }: Props = $props()
 
     const instructions = "Create a new DSM code."
 
@@ -41,6 +42,6 @@
     }
 </script>
 
-<button on:click={onClick} class="btn variant-filled-secondary">
+<button onclick={onClick} class="btn variant-filled-secondary">
     <span>Create DSM Code</span>
 </button>

src/routes/dsm/DeleteButton.svelte

@@ -3,8 +3,11 @@
     import type { SqlDsmCodeSchema } from "$lib/server/sql"
     import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
 
-    export let dsmItem: { label: string; code: string; id: number }
-    export let onDelete: (item: SqlDsmCodeSchema) => void
+    type Props = {
+        dsmItem: { label: string; code: string; id: number }
+        onDelete: (item: SqlDsmCodeSchema) => void
+    }
+    let { dsmItem, onDelete }: Props = $props()
 
     const toastStore = getToastStore()
     const modalStore = getModalStore()
@@ -39,6 +42,6 @@
     }
 </script>
 
-<button on:click={onClick} class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]">
+<button onclick={onClick} class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]">
     <TrashIcon class="text-error-600" />
 </button>

src/routes/dsm/EditButton.svelte

@@ -2,7 +2,8 @@
     import EditIcon from "$lib/icons/EditIcon.svelte"
     import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
 
-    export let dsmItem: { label: string; code: string; id: number }
+    type Props = { dsmItem: { label: string; code: string; id: number } }
+    let { dsmItem = $bindable() }: Props = $props()
     const instructions = "Edit the DSM code."
 
     const toastStore = getToastStore()
@@ -41,6 +42,6 @@
     }
 </script>
 
-<button on:click={onClick} class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]">
+<button onclick={onClick} class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]">
     <EditIcon class="text-warning-600" />
 </button>

src/routes/intake/+page.svelte

@@ -5,15 +5,16 @@
     import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
     import { onMount } from "svelte"
 
-    let redcapSurveyId = ""
-    let isLoading = false
-    let modalOpen = false
+    let redcapSurveyId = $state("")
+    let isLoading = $state(false)
     let redcapIdentifierImage: HTMLImageElement
 
     const model = "anthropic.claude-3-5-sonnet-20241022-v2:0"
     const toastStore = getToastStore()
     const modalStore = getModalStore()
 
+    let modalOpen = $derived($modalStore.length > 0)
+
     onMount(() => {
         redcapIdentifierImage = new Image()
         redcapIdentifierImage.src = "redcap_identifier.png"
@@ -62,8 +63,6 @@
                 isLoading = false
             })
     }
-
-    $: modalOpen = $modalStore.length > 0
 </script>
 
 <h3 class="h3">Intake Reports</h3>
@@ -77,14 +76,14 @@
 {:else}
     <div class="flex space-x-1">
         <label for="redcapSurveyId">MRN</label>
-        <button class="hover-highlight" on:click={explainMRN} disabled={modalOpen} tabindex="-1">
+        <button class="hover-highlight" onclick={explainMRN} disabled={modalOpen} tabindex="-1">
             <QuestionMarkCircleIcon />
         </button>
     </div>
 
     <form class="space-y-2">
         <input class="input w-72" placeholder="MRN" bind:value={redcapSurveyId} />
         <br />
-        <button class="btn variant-filled-primary" on:click={onSubmit} disabled={isLoading}> Submit </button>
+        <button class="btn variant-filled-primary" onclick={onSubmit} disabled={isLoading}> Submit </button>
     </form>
 {/if}

src/routes/summarization/+page.svelte

@@ -121,7 +121,7 @@
 
 Upload a clinical report to generate a summary. The clinical report should contain the 'clinical summary and
 impressions' and 'recommendations' sections, as we only send the paragraphs in between these.
-<form class="space-y-2" on:submit={onSubmit}>
+<form class="space-y-2" onsubmit={onSubmit}>
     <input type="file" accept=".docx" bind:files={file} />
     <button type="submit" class="btn variant-filled-primary">Submit</button>
 </form>

src/routes/templates/+page.svelte

@@ -1,9 +1,9 @@
-<script script lang="ts">
+<script lang="ts">
     import LoadingBar from "$lib/components/LoadingBar.svelte"
-    import { Tab, TabGroup } from "@skeletonlabs/skeleton"
+    import { getToastStore, Tab, TabGroup } from "@skeletonlabs/skeleton"
     import { onMount } from "svelte"
     import Checkout from "./Checkout/Checkout.svelte"
-    import { DecisionTree } from "./DecisionTree"
+    import { DecisionTree } from "./DecisionTree.svelte"
     import TemplatesDirectory from "./TemplatesDirectory/TemplatesDirectory.svelte"
     import SelectedNodes from "./SelectedNodes.svelte"
     import MarkdownEditor from "$lib/components/MarkdownEditor.svelte"
@@ -16,6 +16,25 @@
     let nodes: undefined | DecisionTree = undefined
     let fetchFailed = false
 
+    const toastStore = getToastStore()
+
+    function onAddToCart(node: DecisionTree) {
+        if (!node) return
+        if (selectedNodes.find(savedNode => savedNode.id === node.id)) {
+            toastStore.trigger({
+                background: "variant-filled-warning",
+                message: "This template is already selected."
+            })
+            return
+        }
+
+        selectedNodes = [...selectedNodes, node]
+        toastStore.trigger({
+            background: "variant-filled-success",
+            message: "Template added to selection."
+        })
+    }
+
     onMount(async () => {
         const templates = fetch("/api/templates")
             .then(res => res.json())
@@ -47,7 +66,7 @@
 
         <svelte:fragment slot="panel">
             <div hidden={tabSet !== 0}>
-                <TemplatesDirectory {nodes} bind:selectedNodes isAdmin={data.user?.is_admin} />
+                <TemplatesDirectory {nodes} {onAddToCart} isAdmin={data.user?.is_admin || false} />
             </div>
             <div hidden={tabSet !== 1}>
                 <SelectedNodes bind:nodes={selectedNodes} />