Followup work on Svelte 5 migration - code cleanup and so on (#1652)

* Get rid of recursive updates in run() calls

TrainTracks and HgLogView components have slightly tricky logic that the
migration tool didn't quite figure out correctly. Pulling the run() call
apart into multiple `$derived` sections is much cleaner.

* Change `$props()` to const if not bindable

* Convert on:change in FilterBar to prop function

Also got to simplify a convoluted mess around ViewMode in the default
authenticated home page. Now that `$derived` values can be overridden,
it turned into a very simple `$derived(cookieVal ?? defaultVal)` line,
while still allowing the user to set the value.

* Remove most uses of `run()` from svelte/legacy

A couple uses of `run()` need something non-trivial done to replace
them. In one case we need to write better logic in lexSuperForm: the
project code should probably be split into two form entries, one
calculated code and one override, and the checkbox when checked smoothly
replaces the calculated code field with the override field.

In the other case where I kept a `run()` call, we will be able to
replace it easily once async deriveds become available in Svelte 5.
(They're available now in experimental mode, but it's been less than a
week so I want to wait until they settle a bit more).

* Remove more `run()` usages

* Remove `run()` use in project creation page

* Remove a preventDefault use from svelte/legacy

* Remove redundant undefineds in props

Optional props don't need `| undefined` in their type definition, as
it's implied by the `?`. And the assignment via `$props` likewise
doesn't need to set a default `undefined` value to optional props.

* Remove createEventDispatcher from components

* Get rid of `run()` in FilterBar and UserTypeahead

Also replaced PlainInput with a DebouncedInput component, so that we can
switch PlainInput back to being what it sounds like: a plain input field
that doesn't try to do anything clever.

* Remove `run()` usage from email tester page

Note that this would be better as an async derived once it's available
(see discussion #15845 in the Svelte repo for details). Until then,
this works well enough.

* Make PlainInput plain again

* UserTypeahead now uses a PlainInput

* Fix infinite effect loop in EditUserAccount

Accessing the `$form` in onScoreUpdated was causing Svelte to track the
entire form as a dependency of the PasswordStrengthMeter component,
causing an infinite effect loop as soon as we updated `$form.score`.
Svelte is smart enough not to track dependencies for `$form.foo = bar`
but needed to be told not to track the `if ($form)` part.

* Fix customCode reactivity

* Make code-exists error initially undefined

* Remove debouncing prop and refactor DebouncedInput to accept values pushes

* Fix code_exists error shown delayed

---------

Co-authored-by: Tim Haasdyk <[email protected]>

Author: rmunn

frontend/package.json

@@ -102,6 +102,7 @@
     "js-cookie": "^3.0.5",
     "just-order-by": "^1.0.0",
     "mjml": "^4.15.3",
+    "runed": "^0.26.0",
     "set-cookie-parser": "^2.7.1",
     "svelte-exmarkdown": "catalog:",
     "svelte-intl-precompile": "^0.12.3",

frontend/pnpm-lock.yaml

@@ -1,34 +1,28 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Icon, type IconString } from '$lib/icons';
-  import { createEventDispatcher } from 'svelte';
   interface Props {
     disabled?: boolean;
     actionIcon: IconString;
     variant?: 'btn-neutral' | 'btn-primary' | 'btn-secondary';
+    onAction?: () => void;
     children?: Snippet;
   }
 
-  let { disabled = false, actionIcon, variant = 'btn-neutral', children }: Props = $props();
+  const { disabled = false, actionIcon, variant = 'btn-neutral', onAction, children }: Props = $props();
   let iconHoverColor = $derived(variant === 'btn-neutral' ? 'group-hover:bg-base-200' : 'group-hover:bg-neutral/50');
 
-  const dispatch = createEventDispatcher<{
-    action: void;
-  }>();
-
-  function onAction(): void {
-    if (!disabled) {
-      dispatch('action');
-    }
+  function act(): void {
+    if (!disabled) onAction?.();
   }
 
   let pr = $derived(disabled ? '!pr-0' : '!pr-1');
   let br = $derived(disabled ? 'border-r-0' : '');
 </script>
 
 <button
-  onclick={onAction}
-  onkeypress={onAction}
+  onclick={act}
+  onkeypress={act}
   class="btn badge {variant} group transition whitespace-nowrap gap-1 {pr} {br}"
   class:pointer-events-none={disabled}
 >

frontend/src/lib/components/Badges/ActionBadge.svelte

@@ -15,19 +15,13 @@
 
   interface Props {
     variant?: BadgeVariant;
-    icon?: IconString | undefined;
-    hoverIcon?: IconString | undefined;
+    icon?: IconString;
+    hoverIcon?: IconString;
     outline?: boolean;
     children?: Snippet;
   }
 
-  let {
-    variant = 'badge-neutral',
-    icon = undefined,
-    hoverIcon = undefined,
-    outline = false,
-    children,
-  }: Props = $props();
+  const { variant = 'badge-neutral', icon, hoverIcon, outline = false, children }: Props = $props();
 </script>
 
 <span

frontend/src/lib/components/Badges/Badge.svelte

@@ -4,17 +4,17 @@
   import Badge from './Badge.svelte';
 
   // Add more as necessary. Should be as limited as possible to maximize consistency.
-  type BadgeButtonVariant = 'badge-success' | 'badge-warning' | 'badge-neutral' | undefined;
+  type BadgeButtonVariant = 'badge-success' | 'badge-warning' | 'badge-neutral';
   interface Props {
     variant?: BadgeButtonVariant;
-    icon?: IconString | undefined;
-    hoverIcon?: IconString | undefined;
+    icon?: IconString;
+    hoverIcon?: IconString;
     disabled?: boolean;
     onclick?: () => void;
     children?: Snippet;
   }
 
-  let {
+  const {
     variant = undefined,
     icon = undefined,
     hoverIcon = undefined,

frontend/src/lib/components/Badges/BadgeButton.svelte

@@ -5,7 +5,7 @@
     children?: Snippet;
   }
 
-  let { grid = false, children }: Props = $props();
+  const { grid = false, children }: Props = $props();
 </script>
 
 <span class:grid class:inline-flex={!grid} class="badge-list flex-wrap gap-3 justify-items-stretch">

frontend/src/lib/components/Badges/BadgeList.svelte

@@ -7,15 +7,16 @@
   interface Props {
     member: { name: string; role: ProjectRole };
     canManage?: boolean;
+    onAction?: () => void;
     type?: 'existing' | 'new';
   }
 
-  let { member, canManage = false, type = 'existing' }: Props = $props();
-  let actionIcon = ($derived(type === 'existing' ? 'i-mdi-dots-vertical' as const : 'i-mdi-close' as const));
-  let variant = $derived(member.role === ProjectRole.Manager ? 'btn-primary' as const : 'btn-secondary' as const);
+  const { member, canManage = false, onAction, type = 'existing' }: Props = $props();
+  let actionIcon = $derived(type === 'existing' ? ('i-mdi-dots-vertical' as const) : ('i-mdi-close' as const));
+  let variant = $derived(member.role === ProjectRole.Manager ? ('btn-primary' as const) : ('btn-secondary' as const));
 </script>
 
-<ActionBadge {actionIcon} {variant} disabled={!canManage} on:action>
+<ActionBadge {actionIcon} {variant} disabled={!canManage} {onAction}>
   <span class="pr-3 whitespace-nowrap overflow-ellipsis overflow-x-clip" title={member.name}>
     {member.name}
   </span>

frontend/src/lib/components/Badges/MemberBadge.svelte

@@ -7,15 +7,16 @@
   interface Props {
     member: { name: string; role: OrgRole };
     canManage?: boolean;
+    onAction?: () => void;
     type?: 'existing' | 'new';
   }
 
-  let { member, canManage = false, type = 'existing' }: Props = $props();
-  let actionIcon = ($derived(type === 'existing' ? 'i-mdi-dots-vertical' as const : 'i-mdi-close' as const));
-  let variant = $derived(member.role === OrgRole.Admin ? 'btn-primary' as const : 'btn-secondary' as const);
+  const { member, canManage = false, onAction, type = 'existing' }: Props = $props();
+  let actionIcon = $derived(type === 'existing' ? ('i-mdi-dots-vertical' as const) : ('i-mdi-close' as const));
+  let variant = $derived(member.role === OrgRole.Admin ? ('btn-primary' as const) : ('btn-secondary' as const));
 </script>
 
-<ActionBadge {actionIcon} {variant} disabled={!canManage} on:action>
+<ActionBadge {actionIcon} {variant} disabled={!canManage} {onAction}>
   <span class="pr-3 whitespace-nowrap overflow-ellipsis overflow-x-clip" title={member.name}>
     {member.name}
   </span>

frontend/src/lib/components/Badges/OrgMemberBadge.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
   interface Props {
     icon1: string;
     icon2: string;
@@ -9,21 +7,16 @@
     style: string;
   }
 
-  let {
-    icon1,
-    icon2,
-    text1,
-    text2,
-    style
-  }: Props = $props();
+  const { icon1, icon2, text1, text2, style }: Props = $props();
   let isIconOne = $state(true);
 
-  function handleClick(): void {
+  function handleClick(event: Event): void {
     isIconOne = !isIconOne;
+    event.preventDefault();
   }
 </script>
 
-<button onclick={preventDefault(handleClick)} class="btn {style} flex items-center">
+<button onclick={handleClick} class="btn {style} flex items-center">
   {#if isIconOne}
     <span>{text1} </span>
     <span class="{icon1} text-lg"></span>

frontend/src/lib/components/ButtonToggle.svelte

@@ -4,7 +4,7 @@
     children?: Snippet;
   }
 
-  let { children }: Props = $props();
+  const { children }: Props = $props();
 </script>
 
 <!--cloudflare replaces email addresses with a hash, however this can mess up the dom and break svelte, so sometimes we need to bypass it-->