refactor(DT-3906): UI Svelte 5 Migrations medium

src/lib/components/batch-operations/header.svelte

@@ -8,7 +8,11 @@
   import { autoRefresh } from '$lib/stores/batch-operations';
   import type { BatchOperation, BatchOperationState } from '$lib/types/batch';
 
-  export let operation: BatchOperation;
+  interface Props {
+    operation: BatchOperation;
+  }
+
+  let { operation }: Props = $props();
 
   const dispatch = createEventDispatcher<{
     toggleAutoRefresh: { checked: boolean };

src/lib/components/data-encoder-status.svelte

@@ -13,13 +13,9 @@
     }
   };
 
-  let variant: 'primary' | 'ghost' = 'ghost';
-
-  const updateVariant = (open: boolean) => {
-    variant = open ? 'primary' : 'ghost';
-  };
-
-  $: updateVariant($viewDataEncoderSettings);
+  const variant = $derived<'primary' | 'ghost'>(
+    $viewDataEncoderSettings ? 'primary' : 'ghost',
+  );
 </script>
 
 <div class="mx-1 flex items-center">

src/lib/components/import/event-history-file-import.svelte

@@ -13,8 +13,9 @@
   import { parseWithBigInt } from '$lib/utilities/parse-with-big-int';
   import { routeForEventHistoryImport } from '$lib/utilities/route-for';
 
-  let rawEvents: HistoryEvent[] | { events: HistoryEvent[] };
-  let fileLoaded = false;
+  let rawEvents: HistoryEvent[] | { events: HistoryEvent[] } | undefined =
+    $state(undefined);
+  let fileLoaded = $state(false);
 
   const onFileSelect = async (e: Event) => {
     const target = e.target as HTMLInputElement;
@@ -70,7 +71,7 @@
     class="import-input block border border-slate-200 p-2"
     type="file"
     accept=".json"
-    on:change={onFileSelect}
+    onchange={onFileSelect}
   />
   <Button leadingIcon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
     >{translate('common.import')}</Button

src/lib/components/is-oss-guard.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import type { Snippet } from 'svelte';
 
-  export let isCloud = false;
+  import { page } from '$app/state';
+
+  let {
+    isCloud = false,
+    children,
+    fallback,
+  }: { isCloud?: boolean; children?: Snippet; fallback?: Snippet } = $props();
 </script>
 
-{#if isCloud || $page.data?.settings?.runtimeEnvironment?.isCloud}
-  <slot />
+{#if isCloud || page.data?.settings?.runtimeEnvironment?.isCloud}
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}

src/lib/components/is-temporal-server-version-guard.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import { isCloud } from '$lib/stores/advanced-visibility';
   import { temporalVersion } from '$lib/stores/versions';
   import { minimumVersionRequired } from '$lib/utilities/version-check';
 
-  export let minimumVersion: string;
+  let {
+    minimumVersion,
+    children,
+    fallback,
+  }: {
+    minimumVersion: string;
+    children?: Snippet;
+    fallback?: Snippet;
+  } = $props();
 </script>
 
 {#if $isCloud || minimumVersionRequired(minimumVersion, $temporalVersion)}
-  <slot />
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}

src/lib/components/lines-and-dots/event-sort-filter.svelte

@@ -1,9 +1,9 @@
-<script context="module">
+<script module>
   export const dateParameter = 'time-format';
 </script>
 
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import {
@@ -22,9 +22,13 @@
   import { getDateFilterValue } from '$lib/utilities/event-formatting';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  export let compact: boolean;
+  interface Props {
+    compact: boolean;
+  }
 
-  let sortOptions: EventSortOrderOptions = [
+  let { compact }: Props = $props();
+
+  const sortOptions: EventSortOrderOptions = [
     { label: translate('events.sort-ascending'), option: 'ascending' },
     { label: translate('events.sort-descending'), option: 'descending' },
   ];
@@ -34,7 +38,7 @@
     updateQueryParameters({
       parameter: 'sort',
       value: option,
-      url: $page.url,
+      url: page.url,
     });
   };
 
@@ -46,11 +50,13 @@
     }
   };
 
-  $: value = getDateFilterValue({
-    compact,
-    sortOrder: $eventFilterSort,
-    showElapsed: $eventShowElapsed,
-  });
+  const value = $derived(
+    getDateFilterValue({
+      compact,
+      sortOrder: $eventFilterSort,
+      showElapsed: $eventShowElapsed,
+    }),
+  );
 </script>
 
 <MenuContainer>

src/lib/components/lines-and-dots/svg/timeline-graph.svelte

@@ -17,38 +17,64 @@
   import TimelineGraphRow from './timeline-graph-row.svelte';
   import WorkflowRow from './workflow-row.svelte';
 
-  export let x = 0;
-  export let y = 0;
-  export let workflow: WorkflowExecution;
-  export let groups: EventGroups;
-  export let viewportHeight: number | undefined;
-  export let readOnly = false;
-  export let error: boolean = false;
+  interface Props {
+    x?: number;
+    y?: number;
+    workflow: WorkflowExecution;
+    groups: EventGroups;
+    viewportHeight: number | undefined;
+    readOnly?: boolean;
+    error?: boolean;
+  }
+
+  let {
+    x = 0,
+    y = 0,
+    workflow,
+    groups,
+    viewportHeight,
+    readOnly = false,
+    error = false,
+  }: Props = $props();
 
   const { height, gutter, radius } = TimelineConfig;
 
-  let canvasWidth = 0;
-  let scrollY = 0;
+  let canvasWidth = $state(0);
+  let scrollY = $state(0);
+
+  const expandedGroupHeight = $derived(readOnly ? 0 : $activeGroupHeight);
+  const filteredGroups = $derived(
+    getFailedOrPendingGroups(groups, $eventStatusFilter),
+  );
+  const firstStartTime = $derived.by(() => {
+    const firstEventTime = $fullEventHistory[0]?.eventTime;
 
-  $: expandedGroupHeight = readOnly ? 0 : $activeGroupHeight;
-  $: filteredGroups = getFailedOrPendingGroups(groups, $eventStatusFilter);
-  $: firstStartTime =
-    $fullEventHistory[0]?.eventTime < workflow.executionTime
-      ? $fullEventHistory[0]?.eventTime
+    if (!firstEventTime) {
+      return workflow.executionTime;
+    }
+
+    return firstEventTime < workflow.executionTime
+      ? firstEventTime
       : workflow.executionTime;
-  $: startTime =
-    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime;
-  $: timelineHeight =
-    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight;
-  $: canvasHeight = timelineHeight + 120;
+  });
+
+  const startTime = $derived(
+    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime,
+  );
+  const timelineHeight = $derived(
+    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight,
+  );
+  const canvasHeight = $derived(timelineHeight + 120);
 
-  const handleScroll = (e) => {
-    scrollY = e?.target?.scrollTop;
+  const handleScroll = (e: Event) => {
+    scrollY = (e?.target as HTMLElement)?.scrollTop;
   };
 
-  $: groupIndexMap = new Map(filteredGroups.map((g, i) => [g.id, i]));
+  const groupIndexMap = $derived(
+    new Map(filteredGroups.map((g, i) => [g.id, i])),
+  );
 
-  $: activeGroupsHeightAboveGroup = (groupIndex: number) => {
+  const activeGroupsHeightAboveGroup = (groupIndex: number) => {
     const hasActiveAbove = $activeGroups?.some((id) => {
       const activeIndex = groupIndexMap.get(id);
       return activeIndex !== undefined && activeIndex < groupIndex;
@@ -62,7 +88,7 @@
   class="relative h-auto overflow-auto border border-t-0 border-subtle bg-primary"
   bind:clientWidth={canvasWidth}
   style={viewportHeight ? `max-height: ${viewportHeight}px;` : ''}
-  on:scroll={handleScroll}
+  onscroll={handleScroll}
 >
   <EndTimeInterval
     {workflow}
@@ -108,7 +134,7 @@
         x2={canvasWidth - gutter + radius / 4}
         {timelineHeight}
         {startTime}
-        {duration}
+        duration={duration ?? 0}
       />
       <WorkflowRow {workflow} y={height} length={canvasWidth} />
       {#each filteredGroups as group, index (group.id)}

src/lib/components/search-attribute-filter/close-filter-button.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import { getContext } from 'svelte';
 

src/lib/components/search-attribute-filter/duration-filter.svelte

@@ -10,10 +10,8 @@
 
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
-  $: ({ value } = $filter);
-  $: _value = value;
-
-  let isValid = true;
+  let _value = $derived($filter.value);
+  let isValid = $state(true);
 
   const handleKeydown = (e: KeyboardEvent) => {
     const newValue = _value.trim();
@@ -24,12 +22,12 @@
     }
   };
 
-  const validateDuration = (event: Event & { target: HTMLInputElement }) => {
-    if (isValidDurationQuery(event.target.value.trim())) {
-      isValid = true;
-    } else {
-      isValid = false;
+  const validateDuration = (event: Event) => {
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return;
     }
+
+    isValid = isValidDurationQuery(event.currentTarget.value.trim());
   };
 </script>
 

src/lib/components/search-attribute-filter/filter-list.svelte

@@ -3,7 +3,7 @@
 
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Timestamp from '$lib/components/timestamp.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
@@ -24,15 +24,19 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+  }
+
+  let { filters = $bindable() }: Props = $props();
 
   const { filter, activeQueryIndex } =
     getContext<FilterContext>(FILTER_CONTEXT);
 
   const removeQuery = (index: number) => {
     filters.splice(index, 1);
     filters = filters;
-    updateQueryParamsFromFilter($page.url, filters);
+    updateQueryParamsFromFilter(page.url, filters);
 
     if (index === filters.length) {
       const previousQuery = filters[filters.length - 1];
@@ -49,10 +53,10 @@
     }
   };
 
-  let totalFiltersInView = 5;
+  let totalFiltersInView = $state(5);
 
-  $: visibleFilters = filters.slice(0, totalFiltersInView);
-  $: hasMoreFilters = totalFiltersInView < filters.length;
+  const visibleFilters = $derived(filters.slice(0, totalFiltersInView));
+  const hasMoreFilters = $derived(totalFiltersInView < filters.length);
 
   const viewMoreFilters = () => {
     if (hasMoreFilters) {