Migrate Lexbox UI to Svelte 5 (#1634)

* Rename "derived" uses that mess up migration script

The `pnpx sv migrate svelte-5` script has trouble with changing `$:`
statements to `derived` when there are existing uses of `derived` in the
code, so we'll rename the three cases that have that problem before
running the migration script.

* Result of svelte-5 migration script

This is what `pnpx sv migrate svelte-5` produced, with no changes. There
is one file, `src/routes/(unauthenticated)/login/+page.svelte`, which
might need further attention: a `@migration task` commit was created
saying "review uses of `navigating`" (which used to be imported from
$app/stores and now comes from $app/state instead).

There might not be any changes needed, but if there are, that work will
go in a separate commit.

* Navigating state is guaranteed non-null

In SvelteKit version 2.12 or later, the `navigating` object is
guaranteed never to be null; its properties (from, to, etc.) will be
null if no navigation is going on, but you can safely check
`navigating.to` rather than `navigating?.to`.

* Fix now-incorrect ordering of variables

IconButton was using the `size` prop before it was declared. In Svelte 4
the compiler was reordering this, in Svelte 5 this is no longer allowed;
the variable that uses `size` needs to be moved after the $props call.

* Just use `$bindable()`, not `$bindable(undefined)`

In Svelte 5, if you have set a fallback value for a bindable prop then
you're not allowed to have the caller pass `undefined` to it. But if the
"fallback value" was just `undefined` in the first place, then that's
the default behavior of just plain `$bindable()` with no fallback value.

* Use `page` from `$app/state`, not `$app/stores`

Running the `pnpx sv migrate svelte-5` a second time allowed it to
migrate several uses of the `$page` store into the new `page` state.

This commit is the unchanged result of the migration tool.

* Allow eslint to fix auto-fixable errors

These are errors that used to be suppressed but are no longer errors,
and eslint automatically removed the error-suppressing comments.

* Fix consistent-type-imports errors

Types like `import('svelte').Snippet` are now forbidden, so we replace
them with explicit type imports at the top of the file.

Prettier made other code changes when I saved these files, which I've
placed into a separate commit to make refactoring slightly easier should
that prove necessary.

* Changes made by Prettier when fixing lint errors

Separated into separate commit so these changes will be slightly easier
to revert if they are wrong.

* Fix remaining lint errors
* Fix type errors
* Remove now-unused createBubbler() imports
* change custom overlay to use passed callbacks rather than custom events
* Pass rest props through intermediate Select components
* Fix errors on project page
* Address review comments
* Get rid of infinite loop on register page
* Fix PasswordStrengthMeter without infinite loop

Instead of setting a bindable prop based on a derived from the props
list, which was triggering an infinite loop, we will fall back to
function props and pass an onScoreUpdated function into the password
strength meter component. It's slightly more verbose, but it avoids the
infinite loop of effects triggering updates to themselves that our
previous approach was causing.

* Avoid infinite recursion during SSR

This works just fine in client-side rendering, but causes an infinite
recursive call to headerContent() when rendered server-side. Putting a
`$derived` in the middle breaks the loop and makes the page render
correctly in both SSR and CSR.

---------

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

Author: 3 people

frontend/src/hooks.server.ts

@@ -28,7 +28,7 @@ async function initI18n(event: RequestEvent): Promise<void> {
   await loadI18n();
 }
 
-// eslint-disable-next-line func-style, @typescript-eslint/unbound-method
+// eslint-disable-next-line func-style
 export const handle: Handle = ({event, resolve}) => {
   console.log(`HTTP request: ${event.request.method} ${event.request.url}`);
   event.locals.getUser = () => getUser(event.cookies);

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

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

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

@@ -1,22 +1,40 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
   // Add more as necessary. Should be as limited as possible to maximize consistency. https://daisyui.com/components/badge/
-  export type BadgeVariant = 'badge-neutral' | 'badge-info' | 'badge-primary' | 'badge-warning' | 'badge-success' | undefined;
+  export type BadgeVariant =
+    | 'badge-neutral'
+    | 'badge-info'
+    | 'badge-primary'
+    | 'badge-warning'
+    | 'badge-success'
+    | undefined;
 </script>
 
 <script lang="ts">
   import { Icon, type IconString } from '$lib/icons';
 
-  export let variant: BadgeVariant = 'badge-neutral';
-  export let icon: IconString | undefined = undefined;
-  export let hoverIcon: IconString | undefined = undefined;
-  export let outline = false;
+  interface Props {
+    variant?: BadgeVariant;
+    icon?: IconString | undefined;
+    hoverIcon?: IconString | undefined;
+    outline?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'badge-neutral',
+    icon = undefined,
+    hoverIcon = undefined,
+    outline = false,
+    children,
+  }: Props = $props();
 </script>
 
 <span
   class="badge {variant ?? ''} whitespace-nowrap inline-flex gap-2 items-center group"
   class:badge-outline={outline}
 >
-  <slot />
+  {@render children?.()}
   <span class="contents" class:group-hover:hidden={!!hoverIcon}>
     <Icon {icon} />
   </span>

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

@@ -1,17 +1,36 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { IconString } from '$lib/icons';
   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;
-  export let variant: BadgeButtonVariant = undefined;
-  export let icon: IconString | undefined = undefined;
-  export let hoverIcon: IconString | undefined = undefined;
-  export let disabled = false;
+  interface Props {
+    variant?: BadgeButtonVariant;
+    icon?: IconString | undefined;
+    hoverIcon?: IconString | undefined;
+    disabled?: boolean;
+    onclick?: () => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = undefined,
+    icon = undefined,
+    hoverIcon = undefined,
+    disabled = false,
+    onclick,
+    children,
+  }: Props = $props();
 </script>
 
-<button on:click {disabled} class="badge btn btn-sm !p-0 bright transition-all border-0" class:hover:brightness-90={!disabled}>
+<button
+  {onclick}
+  {disabled}
+  class="badge btn btn-sm !p-0 bright transition-all border-0"
+  class:hover:brightness-90={!disabled}
+>
   <Badge {variant} {icon} hoverIcon={disabled ? undefined : hoverIcon}>
-    <slot />
+    {@render children?.()}
   </Badge>
 </button>

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

@@ -1,9 +1,15 @@
 <script lang="ts">
-  export let grid = false;
+  import type { Snippet } from 'svelte';
+  interface Props {
+    grid?: boolean;
+    children?: Snippet;
+  }
+
+  let { grid = false, children }: Props = $props();
 </script>
 
 <span class:grid class:inline-flex={!grid} class="badge-list flex-wrap gap-3 justify-items-stretch">
-  <slot />
+  {@render children?.()}
 </span>
 
 <style>

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

@@ -3,12 +3,16 @@
   import FormatUserProjectRole from '../Projects/FormatUserProjectRole.svelte';
   import ActionBadge from './ActionBadge.svelte';
   import Badge from './Badge.svelte';
-  export let member: { name: string; role: ProjectRole };
-  export let canManage = false;
 
-  export let type: 'existing' | 'new' = 'existing';
-  $: actionIcon = (type === 'existing' ? 'i-mdi-dots-vertical' as const : 'i-mdi-close' as const);
-  $: variant = member.role === ProjectRole.Manager ? 'btn-primary' as const : 'btn-secondary' as const;
+  interface Props {
+    member: { name: string; role: ProjectRole };
+    canManage?: boolean;
+    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);
 </script>
 
 <ActionBadge {actionIcon} {variant} disabled={!canManage} on:action>
@@ -17,7 +21,7 @@
   </span>
 
   <!-- justify the name left and the role right -->
-  <span class="flex-grow" />
+  <span class="flex-grow"></span>
 
   <Badge>
     <FormatUserProjectRole role={member.role} />

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

@@ -3,12 +3,16 @@
   import FormatUserOrgRole from '../Orgs/FormatUserOrgRole.svelte';
   import ActionBadge from './ActionBadge.svelte';
   import Badge from './Badge.svelte';
-  export let member: { name: string; role: OrgRole };
-  export let canManage = false;
 
-  export let type: 'existing' | 'new' = 'existing';
-  $: actionIcon = (type === 'existing' ? 'i-mdi-dots-vertical' as const : 'i-mdi-close' as const);
-  $: variant = member.role === OrgRole.Admin ? 'btn-primary' as const : 'btn-secondary' as const;
+  interface Props {
+    member: { name: string; role: OrgRole };
+    canManage?: boolean;
+    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);
 </script>
 
 <ActionBadge {actionIcon} {variant} disabled={!canManage} on:action>
@@ -17,7 +21,7 @@
   </span>
 
   <!-- justify the name left and the role right -->
-  <span class="flex-grow" />
+  <span class="flex-grow"></span>
 
   <Badge>
     <FormatUserOrgRole role={member.role} />

frontend/src/lib/components/ButtonToggle.svelte

@@ -1,17 +1,29 @@
 <script lang="ts">
-  export let icon1: string;
-  export let icon2: string;
-  export let text1: string;
-  export let text2: string;
-  export let style: string;
-  let isIconOne = true;
+  import { preventDefault } from 'svelte/legacy';
+
+  interface Props {
+    icon1: string;
+    icon2: string;
+    text1: string;
+    text2: string;
+    style: string;
+  }
+
+  let {
+    icon1,
+    icon2,
+    text1,
+    text2,
+    style
+  }: Props = $props();
+  let isIconOne = $state(true);
 
   function handleClick(): void {
     isIconOne = !isIconOne;
   }
 </script>
 
-<button on:click|preventDefault={handleClick} class="btn {style} flex items-center">
+<button onclick={preventDefault(handleClick)} class="btn {style} flex items-center">
   {#if isIconOne}
     <span>{text1} </span>
     <span class="{icon1} text-lg"></span>

frontend/src/lib/components/BypassCloudflareEmailObfuscation.svelte

@@ -1,7 +1,16 @@
-<!--cloudflare replaces email addresses with a hash, however this can mess up the dom and break svelte, so sometimes we need to bypass it-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { 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-->
 <!--because normal html comments are trimmed in svelte we need to use @html to avoid the comment being trimmed-->
 <!--eslint-disable-next-line svelte/no-at-html-tags-->
 {@html '<!--email_off-->'}
-<slot />
+{@render children?.()}
 <!--eslint-disable-next-line svelte/no-at-html-tags-->
 {@html '<!--/email_off-->'}

frontend/src/lib/components/CopyToClipboardButton.svelte

@@ -3,13 +3,17 @@
   import IconButton from './IconButton.svelte';
   import t from '$lib/i18n';
 
-  var copyingToClipboard = false;
-  var copiedToClipboard = false;
+  var copyingToClipboard = $state(false);
+  var copiedToClipboard = $state(false);
 
-  export let textToCopy: string;
-  export let delayMs: Duration | number = Duration.Default;
-  export let size: 'btn-sm' | undefined = undefined;
-  export let outline: boolean = true;
+  interface Props {
+    textToCopy: string;
+    delayMs?: Duration | number;
+    size?: 'btn-sm' | undefined;
+    outline?: boolean;
+  }
+
+  let { textToCopy, delayMs = Duration.Default, size = undefined, outline = true }: Props = $props();
 
   async function copyToClipboard(): Promise<void> {
     copyingToClipboard = true;
@@ -22,15 +26,21 @@
 </script>
 
 {#if copiedToClipboard}
-<div class="tooltip tooltip-open" data-tip={$t('clipboard.copied')}>
-  <IconButton fake icon="i-mdi-check" {size} variant={outline ? undefined : 'btn-ghost'} class={outline ? 'btn-success' : 'text-success'} />
-</div>
+  <div class="tooltip tooltip-open" data-tip={$t('clipboard.copied')}>
+    <IconButton
+      fake
+      icon="i-mdi-check"
+      {size}
+      variant={outline ? undefined : 'btn-ghost'}
+      class={outline ? 'btn-success' : 'text-success'}
+    />
+  </div>
 {:else}
   <IconButton
-  loading={copyingToClipboard}
-  icon="i-mdi-content-copy"
-  {size}
-  variant={outline ? undefined : 'btn-ghost'}
-  on:click={copyToClipboard}
-/>
+    loading={copyingToClipboard}
+    icon="i-mdi-content-copy"
+    {size}
+    variant={outline ? undefined : 'btn-ghost'}
+    onclick={copyToClipboard}
+  />
 {/if}