Finish svelte 5 migration

src/app/components/ChannelCompose.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {writable} from "svelte/store"
   import {EditorContent} from "svelte-tiptap"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {makeEditor} from "@app/editor"

src/app/components/ChannelMessage.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-  import {createBubbler, stopPropagation} from "svelte/legacy"
-
-  const bubble = createBubbler()
   import {hash} from "@welshman/lib"
   import {now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
@@ -104,8 +101,7 @@
   </div>
   <button
     class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
-    class:group-hover:opacity-100={!isMobile}
+    class:group-hover:opacity-100={!isMobile}>
-    onclick={stopPropagation(bubble("click"))}>
     <ChannelMessageEmojiButton {url} {room} {event} />
     {#if replyTo}
       <Button class="btn join-item btn-xs" onclick={reply}>

src/app/components/ChatEnable.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {WRAP} from "@welshman/util"
   import {repository} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"

src/app/components/ChatStart.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {pubkey} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"

src/app/components/Content.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-  import Content from "./Content.svelte"
-  import {preventDefault, stopPropagation} from "svelte/legacy"
-
   import type {TrustedEvent} from "@welshman/util"
   import {fromNostrURI} from "@welshman/util"
   import {nthEq} from "@welshman/lib"
@@ -21,9 +18,11 @@
     isAddress,
     isNewline,
   } from "@welshman/content"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Content from "@app/components/Content.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentCode from "@app/components/ContentCode.svelte"
   import ContentLinkInline from "@app/components/ContentLinkInline.svelte"

src/app/components/ContentLinkBlock.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault, stopPropagation} from "svelte/legacy"
-
   import {ellipsize, postJson} from "@welshman/lib"
   import {dufflepud, imgproxy} from "@app/state"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/modal"

src/app/components/ContentLinkInline.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {displayUrl} from "@welshman/lib"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"

src/app/components/EventCreate.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {EditorContent} from "svelte-tiptap"
   import {writable} from "svelte/store"
   import {randomId} from "@welshman/lib"
   import {createEvent, EVENT_TIME} from "@welshman/util"
   import {publishThunk, dateToSeconds} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/components/EventReport.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
+  import {preventDefault} from "@lib/html"
-
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"

src/app/components/LogInBunker.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {run, preventDefault} from "svelte/legacy"
-
   import {onMount, onDestroy} from "svelte"
   import {Nip46Broker, getPubkey, makeSecret} from "@welshman/signer"
   import {addSession} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import {slideAndFade} from "@lib/transition"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -65,7 +64,7 @@
   let bunker = $state("")
   let loading = $state(false)
 
-  run(() => {
+  $effect(() => {
     // For testing and for play store reviewers
     if (bunker === "reviewkey") {
       const secret = makeSecret()

src/app/components/LogInPassword.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {onMount, onDestroy} from "svelte"
   import {postJson, stripProtocol} from "@welshman/lib"
   import {Nip46Broker, makeSecret} from "@welshman/signer"
   import {normalizeRelayUrl} from "@welshman/util"
   import {addSession} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"

src/app/components/LogOut.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
+  import {preventDefault} from "@lib/html"
-
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"

src/app/components/PasswordReset.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {postJson, sleep} from "@welshman/lib"
+  import {preventDefault} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Icon from "@lib/components/Icon.svelte"

src/app/components/PasswordResetRequest.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {postJson, sleep} from "@welshman/lib"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"

src/app/components/ProfileEdit.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {ctx} from "@welshman/lib"
   import {
     createEvent,
@@ -10,6 +8,7 @@
     isPublishedProfile,
   } from "@welshman/util"
   import {pubkey, profilesByPubkey, publishThunk} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/components/ReactionSummary.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {preventDefault, stopPropagation} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {groupBy, uniq, uniqBy, batch} from "@welshman/lib"
   import {REACTION, getTag, REPORT, DELETE} from "@welshman/util"
@@ -8,7 +6,7 @@
   import {deriveEvents} from "@welshman/store"
   import {pubkey, repository, load, displayProfileByPubkey} from "@welshman/app"
   import {displayList} from "@lib/util"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import EventReportDetails from "@app/components/EventReportDetails.svelte"
   import {displayReaction} from "@app/state"

src/app/components/RoomCreate.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {randomId} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/components/SignUp.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {postJson} from "@welshman/lib"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/components/SpaceAuthError.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {displayRelayUrl} from "@welshman/util"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import {preventDefault} from "@lib/html"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/toast"

src/app/components/SpaceCheck.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
   import {ctx, sleep} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"

src/app/components/SpaceCreate.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
+  import {preventDefault} from "@lib/html"
-
   import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"

src/app/components/SpaceCreateExternal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
+  import {preventDefault} from "@lib/html"
-
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"

src/app/components/SpaceExit.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {displayRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"

src/app/components/SpaceInviteAccept.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {ctx, tryCatch} from "@welshman/lib"
   import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"

src/app/components/SpaceJoin.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {displayRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"

src/app/components/ThreadCreate.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {writable} from "svelte/store"
   import {EditorContent} from "svelte-tiptap"
   import {createEvent, THREAD} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/components/ThreadItem.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {nthEq} from "@welshman/lib"
   import {formatTimestamp} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"

src/app/components/ThreadReply.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {writable} from "svelte/store"
   import {EditorContent} from "svelte-tiptap"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import {fly, slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/components/ThreadShare.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {nip19} from "nostr-tools"
   import {goto} from "$app/navigation"
   import {ctx} from "@welshman/lib"
   import {toNostrURI} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"

src/app/components/ThunkStatusDetail.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {run} from "svelte/legacy"
-
   import {PublishStatus} from "@welshman/net"
   import {displayRelayUrl} from "@welshman/util"
   import Button from "@lib/components/Button.svelte"
@@ -14,7 +12,7 @@
 
   let {url, status, message = $bindable(), retry}: Props = $props()
 
-  run(() => {
+  $effect(() => {
     if (!message && status === PublishStatus.Timeout) {
       message = "request timed out"
     }

src/lib/components/Confirm.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
+  import {preventDefault} from "@lib/html"
-
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"

src/lib/components/InputPicture.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {run, preventDefault, stopPropagation} from "svelte/legacy"
-
   import {randomId} from "@welshman/lib"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -44,7 +43,7 @@
   let active = $state(false)
   let initialUrl = $state(url)
 
-  run(() => {
+  $effect(() => {
     if (file) {
       const reader = new FileReader()
 
@@ -55,6 +54,7 @@
         },
         false,
       )
+
       reader.readAsDataURL(file)
     } else {
       url = initialUrl

src/lib/components/InputProfilePicture.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {run, preventDefault, stopPropagation} from "svelte/legacy"
-
   import {randomId} from "@welshman/lib"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -44,7 +43,7 @@
   let active = $state(false)
   let initialUrl = $state(url)
 
-  run(() => {
+  $effect(() => {
     if (file) {
       const reader = new FileReader()
 

src/lib/components/Link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {stopPropagation} from "svelte/legacy"
   import {goto} from "$app/navigation"
+  import {stopPropagation} from "@lib/html"
 
   const {
     children,

src/lib/components/LongPress.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-  import {createBubbler} from "svelte/legacy"
+  const {children, onLongPress, ...restProps} = $props()
 
-  const bubble = createBubbler()
+  const ontouchstart = (event: any) => {
-  const {...props} = $props()
-
-  const onTouchStart = (event: any) => {
     touch = event.touches[0]
-    timeout = setTimeout(props.onLongPress, 500)
+    timeout = setTimeout(onLongPress, 500)
   }
 
-  const onTouchMove = (event: any) => {
+  const ontouchmove = (event: any) => {
     const curTouch = event.touches[0]
 
     if (Math.abs(curTouch.clientX - touch.clientX) > 30) {
@@ -21,19 +18,12 @@
     }
   }
 
-  const onTouchEnd = () => clearTimeout(timeout)
+  const ontouchend = () => clearTimeout(timeout)
 
   let touch: Touch
   let timeout: any
 </script>
 
-<div
+<div role="button" tabindex="0" {ontouchstart} {ontouchmove} {ontouchend} {...restProps}>
-  role="button"
+  {@render children()}
-  tabindex="0"
-  onclick={bubble("click")}
-  ontouchstart={onTouchStart}
-  ontouchmove={onTouchMove}
-  ontouchend={onTouchEnd}
-  {...props}>
-  {@render props.children?.()}
 </div>

src/lib/html.ts

@@ -1,4 +1,5 @@
 import {sleep} from "@welshman/lib"
+export {preventDefault, stopPropagation} from "svelte/legacy"
 
 export const copyToClipboard = (text: string) => {
   const {activeElement} = document

src/routes/settings/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {ctx} from "@welshman/lib"
   import {getListTags, createEvent, getPubkeyTagValues, MUTES} from "@welshman/util"
   import {pubkey, signer, userMutes, tagPubkey, publishThunk} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -17,7 +16,7 @@
     settings = {...$userSettingValues}
   }
 
-  const onSubmit = async () => {
+  const onsubmit = preventDefault(async () => {
     publishThunk({
       event: createEvent(SETTINGS, {
         content: await $signer!.nip04.encrypt($pubkey!, JSON.stringify(settings)),
@@ -31,13 +30,13 @@
     })
 
     pushToast({message: "Your settings have been saved!"})
-  }
+  })
 
   let settings = $state({...$userSettingValues})
   let mutedPubkeys = $state(getPubkeyTagValues(getListTags($userMutes)))
 </script>
 
-<form class="content column gap-4" onsubmit={preventDefault(onSubmit)}>
+<form class="content column gap-4" {onsubmit}>
   <div class="card2 bg-alt col-4 shadow-xl">
     <p class="text-lg">Content Settings</p>
     <FieldInline>

src/routes/spaces/[relay]/+layout.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {run} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {ago, MONTH} from "@welshman/lib"
@@ -44,7 +42,7 @@
   }
 
   // We have to watch this one, since on mobile the badge will be visible when active
-  run(() => {
+  $effect(() => {
     if ($notifications.has($page.url.pathname)) {
       setChecked($page.url.pathname)
     }