Update treetop project to Svelte 5

Author: msmolens

src/treetop/Bookmark.svelte

@@ -7,9 +7,13 @@
   import type * as Treetop from './types';
   import { truncateMiddle } from './utils';
 
-  export let nodeId: string;
-  export let title: string;
-  export let url: string;
+  interface Props {
+    nodeId: string;
+    title: string;
+    url: string;
+  }
+
+  let { nodeId, title, url }: Props = $props();
 
   const lastVisitTimeMap: Treetop.LastVisitTimeMap =
     getContext('lastVisitTimeMap');
@@ -21,30 +25,22 @@
   // Maximum length of displayed bookmark titles and, in tooltips, URLs.
   const maxLength = 78;
 
-  let name: string;
-  $: {
-    // Set name, truncating based on preference setting.
-    // Fall back to URL if title is blank.
-    if ($truncate) {
-      name = lodashTruncate(title || url, {
-        length: maxLength,
-        separator: ' ',
-      });
-    } else {
-      name = title || url;
-    }
-  }
-
-  let tooltip: string | undefined;
-  $: {
-    // Set tooltip if preference is enabled.
-    // Display title and URL on separate lines, truncating long URLs in the middle.
-    if ($tooltips) {
-      tooltip = `${title}\n${truncateMiddle(url, maxLength)}`;
-    } else {
-      tooltip = undefined;
-    }
-  }
+  // Set name, truncating based on preference setting.
+  // Fall back to URL if title is blank.
+  const name = $derived(
+    $truncate
+      ? lodashTruncate(title || url, {
+          length: maxLength,
+          separator: ' ',
+        })
+      : title || url,
+  );
+
+  // Set tooltip if preference is enabled.
+  // Display title and URL on separate lines, truncating long URLs in the middle.
+  const tooltip = $derived(
+    $tooltips ? `${title}\n${truncateMiddle(url, maxLength)}` : undefined,
+  );
 
   // Number of milliseconds in a day
   const MILLISECONDS_PER_DAY =
@@ -54,25 +50,18 @@
     24; // hours per day
 
   // Approximate number of days since last visit
-  let lastVisitTimeDays: number;
-  $: lastVisitTimeDays =
-    ($clock.getTime() - $lastVisitTime) / MILLISECONDS_PER_DAY;
+  const lastVisitTimeDays = $derived(
+    ($clock.getTime() - $lastVisitTime) / MILLISECONDS_PER_DAY,
+  );
 
   // Set visited class based on number of days since last visit
-  let visitedClass: string;
-  $: {
-    if (lastVisitTimeDays < 1) {
-      visitedClass = 'visitedPastDay';
-    } else if (lastVisitTimeDays < 2) {
-      visitedClass = 'visitedPastTwoDays';
-    } else if (lastVisitTimeDays < 3) {
-      visitedClass = 'visitedPastThreeDays';
-    } else if (lastVisitTimeDays < 7) {
-      visitedClass = 'visitedPastWeek';
-    } else {
-      visitedClass = '';
-    }
-  }
+  const visitedClass = $derived.by(() => {
+    if (lastVisitTimeDays < 1) return 'visitedPastDay';
+    if (lastVisitTimeDays < 2) return 'visitedPastTwoDays';
+    if (lastVisitTimeDays < 3) return 'visitedPastThreeDays';
+    if (lastVisitTimeDays < 7) return 'visitedPastWeek';
+    return '';
+  });
 </script>
 
 <style>
@@ -108,6 +97,7 @@
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: 1px;
+    text-underline-offset: 0.1em;
   }
 
   a:hover {

src/treetop/ConfirmationDialog.svelte

@@ -1,23 +1,39 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import type { MDCDialogCloseEvent } from '@material/dialog';
   import Button, { Label } from '@smui/button';
   import Dialog, { Actions, Content, InitialFocus, Title } from '@smui/dialog';
 
-  const dispatch = createEventDispatcher<{
-    confirm: null;
-    cancel: null;
-  }>();
+  interface Props {
+    open?: boolean;
+    title: string;
+    message: string;
+    cancelLabel: string;
+    confirmLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+  }
 
-  export let open = false;
-  export let title: string;
-  export let message: string;
-  export let cancelLabel: string;
-  export let confirmLabel: string;
+  let {
+    open = $bindable(false),
+    title,
+    message,
+    cancelLabel,
+    confirmLabel,
+    onConfirm,
+    onCancel,
+  }: Props = $props();
 
   function handleClosed(e: MDCDialogCloseEvent) {
-    const message = e.detail.action === 'confirm' ? 'confirm' : 'cancel';
-    dispatch(message);
+    switch (e.detail.action) {
+      case 'confirm':
+        onConfirm();
+        break;
+      case 'cancel':
+        onCancel();
+        break;
+      default:
+        break;
+    }
   }
 </script>
 
@@ -26,7 +42,7 @@
   class="treetopDialog"
   aria-labelledby="dialog-title"
   aria-describedby="dialog-content"
-  on:SMUIDialog:closed={handleClosed}>
+  onSMUIDialogClosed={handleClosed}>
   <Title id="dialog-title">{title}</Title>
   <Content id="dialog-content">{message}</Content>
   <Actions>

src/treetop/FilterInput.svelte

@@ -1,30 +1,36 @@
 <script lang="ts">
   /* eslint-disable simple-import-sort/imports */
 
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import TextField from '@smui/textfield';
   // FIXME: IconButton must appear after TextField, otherwise custom
   // TextField styles aren't applied correctly
   import IconButton from '@smui/icon-button';
   import debounce from 'lodash-es/debounce';
 
+  interface Props {
+    onInput: (filter: string) => void;
+  }
+
+  let { onInput }: Props = $props();
+
   // Input
   let input: TextField;
 
   // Filter string
-  let filter = '';
+  let filter = $state('');
 
   // Icon button
   let iconButton: IconButton;
 
   // Debounce duration for typing in filter input (ms)
   const FILTER_DEBOUNCE_MS = 275;
 
-  const dispatch = createEventDispatcher<{ input: { filter: string } }>();
-
   // CSS 'visibility' value for the clear button.
   // The button is visible only when text is entered.
-  $: clearIconButtonVisibility = filter.length > 0 ? 'visible' : 'hidden';
+  const clearIconButtonVisibility = $derived(
+    filter.length > 0 ? 'visible' : 'hidden',
+  );
 
   export function focus() {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
@@ -43,7 +49,7 @@
    * Dispatch an input event with the current filter string.
    */
   function dispatchInputEvent() {
-    dispatch('input', { filter });
+    onInput(filter);
   }
 
   /**
@@ -102,20 +108,20 @@
 </style>
 
 <div class="searchBox">
-  <form on:submit={handleFilterSubmit}>
-    <!-- svelte-ignore missing-declaration -->
+  <form onsubmit={handleFilterSubmit}>
     <TextField
       bind:this={input}
       bind:value={filter}
-      on:input={debounceFilterInput}
-      on:keydown={onKeyDown}
+      oninput={debounceFilterInput}
+      onkeydown={onKeyDown}
       label={chrome.i18n.getMessage('search')}>
-      <IconButton
-        bind:this={iconButton}
-        class="material-icons"
-        slot="trailingIcon"
-        style="visibility: {clearIconButtonVisibility}"
-        on:click={clearFilterInput}>clear</IconButton>
+      {#snippet trailingIcon()}
+        <IconButton
+          bind:this={iconButton}
+          class="material-icons"
+          style="visibility: {clearIconButtonVisibility}"
+          onclick={clearFilterInput}>clear</IconButton>
+      {/snippet}
     </TextField>
   </form>
 </div>