refactor(DT-3906): More trivial migrations

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/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,57 @@
   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);
 
-  $: expandedGroupHeight = readOnly ? 0 : $activeGroupHeight;
-  $: filteredGroups = getFailedOrPendingGroups(groups, $eventStatusFilter);
-  $: firstStartTime =
+  const expandedGroupHeight = $derived(readOnly ? 0 : $activeGroupHeight);
+  const filteredGroups = $derived(
+    getFailedOrPendingGroups(groups, $eventStatusFilter),
+  );
+  const firstStartTime = $derived(
     $fullEventHistory[0]?.eventTime < workflow.executionTime
       ? $fullEventHistory[0]?.eventTime
-      : workflow.executionTime;
-  $: startTime =
-    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime;
-  $: timelineHeight =
-    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight;
-  $: canvasHeight = timelineHeight + 120;
+      : workflow.executionTime,
+  );
+  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 +81,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}

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/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) {

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

@@ -3,7 +3,7 @@
 
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Checkbox from '$lib/holocene/checkbox.svelte';
@@ -22,16 +22,22 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+  }
+
+  let { filters = $bindable() }: Props = $props();
 
   const { filter, resetFilter } = getContext<FilterContext>(FILTER_CONTEXT);
   const open = writable(true);
-  $: _filters = [...filters];
-  $: statusFilters = _filters.filter((filter) => isStatusFilter(filter));
+  let _filters: SearchAttributeFilter[] = $derived([...filters]);
+  const statusFilters = $derived(
+    _filters.filter((filter) => isStatusFilter(filter)),
+  );
 
   function apply() {
     filters = _filters;
-    updateQueryParamsFromFilter($page.url, filters);
+    updateQueryParamsFromFilter(page.url, filters);
   }
 
   function mapStatusToFilter(value: string) {

src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import FilterBar from '$lib/components/shared-search-attribute-filter/filter-bar.svelte';
   import { activitiesQuery, activityRefresh } from '$lib/stores/activities';

src/lib/components/workflow/configurable-table-headers-drawer/index.svelte

@@ -13,11 +13,21 @@
 
   import OrderableList from './orderable-list.svelte';
 
-  export let availableColumns: Readable<ConfigurableTableHeader[]>;
-  export let open: boolean;
-  export let table: ConfigurableTableType = TABLE_TYPE.WORKFLOWS;
-  export let type: string;
-  export let title: string;
+  interface Props {
+    availableColumns: Readable<ConfigurableTableHeader[]>;
+    open: boolean;
+    table?: ConfigurableTableType;
+    type: string;
+    title: string;
+  }
+
+  let {
+    availableColumns,
+    open = $bindable(),
+    table = TABLE_TYPE.WORKFLOWS,
+    type,
+    title,
+  }: Props = $props();
 
   const closeCustomizationDrawer = () => {
     open = false;

src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Readable } from 'svelte/store';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import OrderableListItem from '$lib/holocene/orderable-list/orderable-list-item.svelte';
   import OrderableList from '$lib/holocene/orderable-list/orderable-list.svelte';
@@ -16,15 +16,21 @@
     removeColumn,
   } from '$lib/stores/configurable-table-columns';
 
-  export let table: ConfigurableTableType;
-  export let availableColumns: Readable<ConfigurableTableHeader[]>;
-  export let type: string;
+  interface Props {
+    table: ConfigurableTableType;
+    availableColumns: Readable<ConfigurableTableHeader[]>;
+    type: string;
+  }
 
-  $: namespace = $page.params.namespace;
-  $: columnsInUse = $configurableTableColumns?.[namespace]?.[table] ?? [];
-  $: availableCustomColumns = availableCustomSearchAttributeColumns(
-    namespace,
-    table,
+  let { table, availableColumns, type }: Props = $props();
+
+  const namespace = $derived(page.params.namespace);
+  const columnsInUse = $derived(
+    $configurableTableColumns?.[namespace]?.[table] ?? [],
+  );
+
+  const availableCustomColumns = $derived(
+    availableCustomSearchAttributeColumns(namespace, table),
   );
 </script>
 
@@ -65,7 +71,7 @@
     <svelte:fragment slot="heading">
       Available Columns <span class="font-normal">(not in view)</span>
     </svelte:fragment>
-    {#each $availableColumns as { label }}
+    {#each $availableColumns as { label } (label)}
       <OrderableListItem
         static
         on:addItem={() => addColumn(label, namespace, table)}
@@ -86,7 +92,7 @@
       {translate('events.custom-search-attributes')}
       <span class="font-normal">(not in view)</span>
     </svelte:fragment>
-    {#each $availableCustomColumns as { label }}
+    {#each $availableCustomColumns as { label } (label)}
       <OrderableListItem
         static
         on:addItem={() => addColumn(label, namespace, table)}

src/lib/components/workflow/dropdown-filter/conditional.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-  export let conditional = '=';
+  interface Props {
+    conditional?: string;
+  }
+
+  let { conditional = $bindable('=') }: Props = $props();
 </script>
 
 <div class="mt-2 transition-all hover:cursor-pointer">
-  <button class="flex items-center" on:click={() => (conditional = '=')}>
+  <button class="flex items-center" onclick={() => (conditional = '=')}>
     <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '='}>
       Is
     </div>
   </button>
-  <button class="flex items-center" on:click={() => (conditional = '!=')}>
+  <button class="flex items-center" onclick={() => (conditional = '!=')}>
     <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '!='}>
       Is Not
     </div>