Update components/event components to Svelte 5 syntax

Author: tegan-temporal

src/lib/components/event/event-category-multiselect-filter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import MultiSelect from '$lib/holocene/select/multi-select.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -12,28 +12,37 @@
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
   import { isVersionNewer } from '$lib/utilities/version-check';
 
-  export let compact = false;
+  interface Props {
+    compact?: boolean;
+  }
+
+  let { compact = false }: Props = $props();
+
+  const label = $derived(
+    compact
+      ? translate('events.event-type')
+      : translate('events.workflow-events'),
+  );
 
-  $: label = compact
-    ? translate('events.event-type')
-    : translate('events.workflow-events');
+  const parameter = 'category';
 
-  let parameter = 'category';
-  let options = (compact ? compactEventTypeOptions : allEventTypeOptions).map(
-    (o) => ({
+  const options = $derived.by(() => {
+    const baseOptions = (
+      compact ? compactEventTypeOptions : allEventTypeOptions
+    ).map((o) => ({
       ...o,
       label: translate(o.label),
-    }),
-  );
+    }));
+    return isVersionNewer('1.21', $temporalVersion)
+      ? baseOptions.filter(({ value }) => value !== 'update')
+      : baseOptions;
+  });
 
-  $: {
-    if (isVersionNewer('1.21', $temporalVersion)) {
-      options = options.filter(({ value }) => value !== 'update');
-    }
-  }
-  $: initialSelected = $eventCategoryFilter
-    ? options.filter((o) => $eventCategoryFilter.includes(o.value))
-    : [];
+  const initialSelected = $derived(
+    $eventCategoryFilter
+      ? options.filter((o) => $eventCategoryFilter.includes(o.value))
+      : [],
+  );
 
   const onOptionClick = (_options) => {
     if (_options.length === options.length) {
@@ -44,7 +53,7 @@
     updateQueryParameters({
       parameter: parameter,
       value,
-      url: $page.url,
+      url: page.url,
     });
   };
 </script>

src/lib/components/event/event-details-link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Link from '$lib/holocene/link.svelte';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
@@ -10,11 +10,23 @@
     routeForWorkflow,
   } from '$lib/utilities/route-for';
 
-  export let value: string;
-  export let attributes: CombinedAttributes;
-  export let type: EventLinkType;
+  interface Props {
+    value: string;
+    attributes: CombinedAttributes;
+    type: EventLinkType;
+    class?: string;
+  }
+
+  let {
+    value,
+    attributes,
+    type,
+    class: className = '',
+    ...rest
+  }: Props = $props();
 
-  $: ({ workflow, namespace } = $page.params);
+  const workflow = $derived(page.params.workflow);
+  const namespace = $derived(page.params.namespace);
 
   function getHref(
     ns: string,
@@ -40,9 +52,9 @@
     }
   }
 
-  $: href = getHref(namespace, workflow, attributes, value, type);
+  const href = $derived(getHref(namespace, workflow, attributes, value, type));
 </script>
 
-<Link class={$$restProps.class} {href}>
+<Link class={className} {href} {...rest}>
   {value}
 </Link>

src/lib/components/event/event-details-row.svelte

@@ -12,12 +12,23 @@
   import EventDetailsLink from './event-details-link.svelte';
   import PayloadDecoder from './payload-decoder.svelte';
 
-  export let key: string;
-  export let value: string | Record<string, unknown> | Payloads;
-  export let attributes: CombinedAttributes;
-  export let showKey = true;
+  interface Props {
+    key: string;
+    value: string | Record<string, unknown> | Payloads;
+    attributes: CombinedAttributes;
+    showKey?: boolean;
+    class?: string;
+  }
+
+  let {
+    key,
+    value,
+    attributes,
+    showKey = true,
+    class: className = '',
+  }: Props = $props();
 
-  $: linkType = displayLinkType(key, attributes);
+  const linkType = $derived(displayLinkType(key, attributes));
 </script>
 
 {#if key}
@@ -35,7 +46,7 @@
       >
         <PayloadDecoder {value} key="payloads">
           {#snippet children(decodedValue)}
-            <div class={merge('payload', $$props.class)}>
+            <div class={merge('payload', className)}>
               <code>
                 <pre class="truncate">{decodedValue.slice(0, 60)}</pre>
               </code>

src/lib/components/event/event-empty-row.svelte

@@ -4,9 +4,17 @@
   import { translate } from '$lib/i18n/translate';
   import { isCloud } from '$lib/stores/advanced-visibility';
 
-  export let loading = false;
-  export let title = translate('events.empty-state-title');
-  export let content = translate('events.empty-state-description');
+  interface Props {
+    loading?: boolean;
+    title?: string;
+    content?: string;
+  }
+
+  let {
+    loading = false,
+    title = translate('events.empty-state-title'),
+    content = translate('events.empty-state-description'),
+  }: Props = $props();
 </script>
 
 <tr class="bg-primary">

src/lib/components/event/event-link.svelte

@@ -4,26 +4,41 @@
   import type { EventLink } from '$lib/types';
   import { getEventLinkHref } from '$lib/utilities/event-link-href';
 
-  export let link: EventLink;
-  export let value = link.workflowEvent.workflowId;
-  export let label = translate('nexus.link');
-  export let href: string | undefined = undefined;
-
-  $: if (!href) {
-    href = getEventLinkHref(link);
-    value = href.split('workflows/')?.[1] || href;
+  interface Props {
+    link: EventLink;
+    value?: string;
+    label?: string;
+    href?: string;
+    class?: string;
+    linkClass?: string;
   }
+
+  let {
+    link,
+    value,
+    label = translate('nexus.link'),
+    href,
+    class: className = '',
+    linkClass = '',
+  }: Props = $props();
+
+  const resolvedHref = $derived(href ?? getEventLinkHref(link));
+  const resolvedValue = $derived(
+    value ??
+      (resolvedHref.split('workflows/')?.[1] || resolvedHref) ??
+      link.workflowEvent.workflowId,
+  );
 </script>
 
 <div
-  class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 {$$props.class}"
+  class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 {className}"
 >
   <p class="max-w-fit whitespace-nowrap text-right text-sm">
     {label}
   </p>
-  <div class="overflow-hidden {$$props.linkClass}">
-    <Link {href}>
-      {value}
+  <div class="overflow-hidden {linkClass}">
+    <Link href={resolvedHref}>
+      {resolvedValue}
     </Link>
   </div>
 </div>