Bump eslint

eslint.config.js

@@ -29,6 +29,9 @@ export default [
     rules: {
       // eslint doesn't see type parameters declared by <script generics="...">
       "no-undef": "off",
+      // A `$bindable()` prop with no fallback reads as an assignment nothing consumes, since the
+      // parent is what consumes it.
+      "no-useless-assignment": "off",
     },
   },
   {
@@ -55,6 +58,8 @@ export default [
       ],
       "svelte/valid-compile": "off",
       "svelte/no-at-html-tags": "off",
+      "svelte/no-navigation-without-resolve": "off",
+      "svelte/prefer-svelte-reactivity": "off",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-extra-semi": "off",
       "@typescript-eslint/ban-ts-comment": "off",

package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.49.1",
     "@sveltejs/kit": "^2.61.1",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
@@ -31,9 +31,9 @@
     "autoprefixer": "^10.4.23",
     "capacitor-set-version": "^2.2.0",
     "classnames": "^2.5.1",
-    "eslint": "^9.39.2",
+    "eslint": "^10.9.0",
-    "eslint-config-prettier": "^9.1.2",
+    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^2.46.1",
+    "eslint-plugin-svelte": "^3.23.0",
     "globals": "^15.15.0",
     "postcss": "^8.5.15",
     "prettier": "^3.8.1",
@@ -43,7 +43,7 @@
     "svelte-check": "^4.3.5",
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.67.0",
     "vite": "^6.4.2",
     "ws": "^8.18.3"
   },

src/app/components/Content.svelte

@@ -162,7 +162,7 @@
     <div
       class="overflow-hidden text-ellipsis wrap-break-word"
       style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
-      {#each shortContent as parsed, i}
+      {#each shortContent as parsed, i (i)}
         {#if isNewline(parsed) && !isBlock(i - 1)}
           <ContentNewline value={parsed.value} />
         {:else if isTopic(parsed)}

src/app/components/ContentMinimal.svelte

@@ -114,9 +114,10 @@
         "overflow-hidden text-ellipsis",
         singleLine ? "whitespace-nowrap" : "wrap-break-word",
       )}>
-      {#each shortContent as parsed, i}
+      {#each shortContent as parsed, i (i)}
         {#if isNewline(parsed)}
           {#if singleLine}
+            <!-- eslint-disable-next-line svelte/no-useless-mustaches -->
             {" "}
           {:else}
             <ContentNewline value={parsed.value} />

src/app/components/ContentNewline.svelte

@@ -2,6 +2,6 @@
   const {value} = $props()
 </script>
 
-{#each value as _}
+{#each value as _, i (i)}
   <br />
 {/each}

src/app/components/IconPicker.svelte

@@ -49,7 +49,7 @@
 </label>
 <div class="mt-2 max-h-80 overflow-y-auto">
   <div class="grid grid-cols-8 gap-2 p-2">
-    {#each filteredIcons as icon}
+    {#each filteredIcons as icon (icon.url)}
       <button
         type="button"
         title={icon.name}

src/app/components/LogIn.svelte

@@ -114,7 +114,7 @@
         Log in with Extension
       </Button>
     {/if}
-    {#each signers as signerApp}
+    {#each signers as signerApp (signerApp.name)}
       <Button {disabled} class="button button-primary" onclick={() => loginWithNip55(signerApp)}>
         {#if loading === "nip55"}
           <Spinner size="sm" class="mr-3" />

src/app/components/ProgressBar.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="flex w-full">
-  {#each Array(total) as _, i}
+  {#each Array(total) as _, i (i)}
     <div
       class="h-1 flex-1 transition-colors {i < current
         ? 'bg-primary text-primary-content'

src/app/components/Reaction.svelte

@@ -18,7 +18,7 @@
 {:else if event.content === "-"}
   <Icon icon={ThumbsDown} />
 {:else}
-  {#each parse(event) as parsed}
+  {#each parse(event) as parsed, i (i)}
     {#if isEmoji(parsed)}
       <ContentEmoji value={parsed.value} />
     {:else}

src/app/components/ReactionSummary.svelte

@@ -192,7 +192,7 @@
         <span>{$reports.length}</span>
       </Button>
     {/if}
-    {#each groupedZaps.entries() as [key, zaps]}
+    {#each groupedZaps.entries() as [key, zaps] (key)}
       {@const amount = fromMsats(sum(zaps.map(zap => zap.invoiceAmount)))}
       {@const pubkeys = uniq(zaps.map(zap => zap.request.pubkey))}
       {@const isOwn = pubkeys.includes($user.pubkey)}
@@ -217,7 +217,7 @@
         <span>{amount}</span>
       </Button>
     {/each}
-    {#each groupedReactions.entries() as [key, events]}
+    {#each groupedReactions.entries() as [key, events] (key)}
       {@const pubkeys = events.map(e => e.pubkey)}
       {@const isOwn = pubkeys.includes($user.pubkey)}
       {@const info = displayList(

src/app/components/RelayAdd.svelte

@@ -54,7 +54,7 @@
   let limit = $state(20)
   let element: Element | undefined = $state()
 
-  const loading = $state(new SvelteSet<string>())
+  const loading = new SvelteSet<string>()
   const relaySearch = $app.use(Relays).relaySearch
   const blockedRelayUrls = $blockedRelayLists.urls($user.pubkey).$
 

src/app/components/RelayList.svelte

@@ -51,7 +51,7 @@
     }
   }
 
-  const loading = $state(new SvelteSet<string>())
+  const loading = new SvelteSet<string>()
 </script>
 
 <Modal>

src/app/components/RelaySettingsHealthChecks.svelte

@@ -33,7 +33,7 @@
     {PLATFORM_NAME} actively checks your connection to the network in the background to discover relays
     that are offline, that you don't have access to, or are otherwise causing trouble.
   </p>
-  {#each $pending as healthCheck}
+  {#each $pending as healthCheck (healthCheck.title)}
     <RelaySettingsHealthCheck {healthCheck} />
   {/each}
   {#if $pending.length > 0}

src/app/components/RoomInvite.svelte

@@ -46,11 +46,7 @@
   }
 
   let canShare = $state(false)
-  let invite = $state("")
+  let invite = $derived(makeInviteLink({url, claim: $claim, h, code: $roomCode}))
-
-  $effect(() => {
-    invite = makeInviteLink({url, claim: $claim, h, code: $roomCode})
-  })
 
   onMount(async () => {
     try {

src/app/components/RoomItemAddMember.svelte

@@ -11,7 +11,7 @@
   const {url, event}: Props = $props()
 </script>
 
-{#each tagValues(hexTags("p"), event.tags) as pubkey}
+{#each tagValues(hexTags("p"), event.tags) as pubkey (pubkey)}
   <div class="py-1 text-center text-xs opacity-75">
     <ProfileLink unstyled class="text-primary" {url} {pubkey} /> joined the room
   </div>

src/app/components/Share.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {derived} from "svelte/store"
   import cx from "classnames"
   import {remove} from "@welshman/lib"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"

src/app/components/SpaceInvite.svelte

@@ -76,15 +76,11 @@
   const canAddMembers = $derived($supportedMethods.includes("allowpubkey"))
 
   let canShare = $state(false)
-  let invite = $state("")
+  let invite = $derived(makeInviteLink({url, claim: $claim}))
 
   let adding = $state(false)
   let pubkeys: string[] = $state([])
 
-  $effect(() => {
-    invite = makeInviteLink({url, claim: $claim})
-  })
-
   onMount(async () => {
     try {
       const {value} = await Share.canShare()

src/app/components/ThunkFailure.svelte

@@ -50,12 +50,10 @@
       component={ThunkStatusDetail}
       props={{thunk, retry}}
       params={{interactive: true, maxWidth: "none"}}>
-      {#snippet children()}
       <span class="flex cursor-pointer items-center gap-1 opacity-75">
         <Icon icon={Danger} class="text-error" size={3} />
         <span>Failed to send!</span>
       </span>
-      {/snippet}
     </Tippy>
   </button>
 {/if}

src/app/components/VideoCallContent.svelte

@@ -275,7 +275,7 @@
         class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
         {#if tileGrid}
           <div class="flex flex-col items-center gap-2">
-            {#each tileGrid.rows as row, rowIndex}
+            {#each tileGrid.rows as row, rowIndex (rowIndex)}
               {@const offset = tileGrid.rows
                 .slice(0, rowIndex)
                 .reduce((sum, r) => sum + r.columnCount, 0)}

src/app/components/ZapForm.svelte

@@ -50,7 +50,7 @@
     {/snippet}
   </Field>
   <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
-    {#each $zapAmounts as preset}
+    {#each $zapAmounts as preset, i (i)}
       <Button
         class={cx("button button-sm", {
           "button-primary": preset === amount,

src/app/components/ZapInvoice.svelte

@@ -146,7 +146,6 @@
       </div>
     {:else}
       <ZapForm bind:amount bind:content>
-        {#snippet children()}
         <div class="card card-sm card-flat flex flex-col items-center gap-3 p-4 text-center">
           <p class="text-content-muted text-sm">
             Connect a wallet to pay instantly without scanning a QR code.
@@ -155,7 +154,6 @@
             Connect a lightning wallet
           </Button>
         </div>
-        {/snippet}
       </ZapForm>
     {/if}
   </ModalBody>

src/app/editor/EditorContent.svelte

@@ -14,6 +14,9 @@
   onMount(() => {
     editor.then(ed => {
       if (ed.options.element) {
+        // Tiptap builds and owns its editor element, so mounting it here is the point of this
+        // component rather than something svelte could be left to render.
+        // eslint-disable-next-line svelte/no-dom-manipulating
         element?.append(ed.options.element)
       }
 

src/lib/components/Divider.svelte

@@ -5,7 +5,7 @@
     children?: Snippet
   }
 
-  const {children, ...props}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="flex items-center gap-2 p-2 text-xs uppercase text-content-subtle">

src/lib/components/InputList.svelte

@@ -55,6 +55,7 @@
 </script>
 
 <div class="flex flex-col gap-2" role="list">
+  <!-- eslint-disable-next-line svelte/require-each-key -->
   {#each value as item, index}
     <div
       class="flex items-center gap-2"

src/lib/components/Scanner.svelte

@@ -62,7 +62,7 @@
       class="select input input-sm absolute bottom-1 right-1 w-auto"
       bind:value={camera}
       onchange={changeCamera}>
-      {#each cameras as camera}
+      {#each cameras as camera (camera.id)}
         <option value={camera.id}>{camera.label || `Camera ${camera.id}`}</option>
       {/each}
     </select>

src/routes/settings/wallet/+page.svelte

@@ -269,6 +269,7 @@
     </strong>
     <p class="text-sm opacity-75">Preset amounts shown when sending a zap.</p>
     <div class="flex flex-col gap-2">
+      <!-- eslint-disable-next-line svelte/require-each-key -->
       {#each zapAmountDraft as amount, index}
         <div class="flex items-center gap-2">
           <Button