refactor(DT-3906): Simple Svelte 5 migrations

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

@@ -13,8 +13,12 @@
   } from '$lib/types/batch';
   import { routeForBatchOperation } from '$lib/utilities/route-for';
 
-  export let namespace: string;
-  export let operations: BatchOperationInfo[];
+  interface Props {
+    namespace: string;
+    operations: BatchOperationInfo[];
+  }
+
+  let { namespace, operations }: Props = $props();
 
   const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
     Completed: 'success',
@@ -34,7 +38,7 @@
     <th class="max-sm:hidden lg:w-56">{translate('common.start-time')}</th>
     <th class="max-sm:hidden lg:w-56">{translate('common.close-time')}</th>
   </TableHeaderRow>
   {#each operations as { state, jobId, startTime, closeTime }}
     <TableRow>
       <td>
         <Badge type={jobStateToBadgeType[state]}>

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

@@ -7,11 +7,23 @@
 
   import TimelineGraph from './timeline-graph.svelte';
 
-  export let namespace: string;
-  export let workflowId: string;
-  export let runId = '';
-  export let viewportHeight = 360;
-  export let onLoad: () => void = () => {};
+  interface Props {
+    namespace: string;
+    workflowId: string;
+    runId?: string;
+    viewportHeight?: number;
+    onLoad?: () => void;
+    class?: string;
+  }
+
+  let {
+    namespace,
+    workflowId,
+    runId = '',
+    viewportHeight = 360,
+    onLoad = () => {},
+    class: className = '',
+  }: Props = $props();
 
   const getWorkflowAndEventHistory = async () => {
     const [workflow, history] = await Promise.all([
@@ -32,7 +44,7 @@
 </script>
 
 {#await getWorkflowAndEventHistory() then { workflow, history }}
-  <div class="cursor-pointer overflow-auto {$$restProps.class}">
+  <div class="cursor-pointer overflow-auto {className}">
     <TimelineGraph
       {viewportHeight}
       {workflow}

src/lib/components/lines-and-dots/svg/group-details-text.svelte

@@ -10,15 +10,19 @@
 
   import { DetailsConfig, staticCodeBlockHeight } from '../constants';
 
-  export let key: string;
-  export let value: string | Record<string, unknown>;
-  export let attributes: CombinedAttributes;
-  export let onDecode: (decodedValue: string) => void | undefined = undefined;
+  interface Props {
+    key: string;
+    value: string | Record<string, unknown>;
+    attributes: CombinedAttributes;
+    onDecode?: (decodedValue: string) => void | undefined;
+  }
+
+  let { key, value, attributes, onDecode = undefined }: Props = $props();
 
   const { fontSizeRatio } = DetailsConfig;
 
-  $: codeBlockValue = getCodeBlockValue(value);
-  $: linkType = displayLinkType(key, attributes);
+  const codeBlockValue = $derived(getCodeBlockValue(value));
+  const linkType = $derived(displayLinkType(key, attributes));
 </script>
 
 {#if typeof value === 'object'}

src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte

@@ -23,46 +23,52 @@
   import Dot from './dot.svelte';
   import Line from './line.svelte';
 
-  export let event: WorkflowEventWithPending;
-  export let group: EventGroup;
-  export let history: WorkflowEventWithPending[];
-  export let groups: EventGroups;
-  export let index: number;
-  export let canvasWidth: number;
+  interface Props {
+    event: WorkflowEventWithPending;
+    group: EventGroup;
+    history: WorkflowEventWithPending[];
+    groups: EventGroups;
+    index: number;
+    canvasWidth: number;
+  }
+
+  let { event, group, history, groups, index, canvasWidth }: Props = $props();
 
   const { height, radius } = HistoryConfig;
   const strokeWidth = radius / 2;
 
-  $: y = index * height + height / 2;
-  $: ({ nextDistance, offset } = getNextDistanceAndOffset(
-    history,
-    event,
-    groups,
-    height,
-    $eventFilterSort,
-  ));
+  const y = $derived(index * height + height / 2);
+  const distanceAndOffset = $derived(
+    getNextDistanceAndOffset(history, event, groups, height, $eventFilterSort),
+  );
+  const nextDistance = $derived(distanceAndOffset.nextDistance);
+  const offset = $derived(distanceAndOffset.offset);
 
-  $: zoomNextDistance = offset > 0 && nextDistance;
+  const zoomNextDistance = $derived(offset > 0 && nextDistance);
 
-  $: classification =
+  const classification = $derived(
     isPendingActivity(event) || isPendingNexusOperation(event)
       ? 'pending'
-      : event?.classification;
+      : event?.classification,
+  );
 
-  $: horizontalOffset = offset * 1.75 * radius;
-  $: nextIsPending =
-    isEvent(event) && group?.lastEvent.id === event?.id && group?.isPending;
-  $: connectLine =
+  const horizontalOffset = $derived(offset * 1.75 * radius);
+  const nextIsPending = $derived(
+    isEvent(event) && group?.lastEvent.id === event?.id && group?.isPending,
+  );
+  const connectLine = $derived(
     isPendingActivity(event) || isPendingNexusOperation(event) || offset === 0
       ? false
-      : !isMiddleEvent(event, groups);
-  $: category =
+      : !isMiddleEvent(event, groups),
+  );
+  const category = $derived(
     isPendingActivity(event) || isPendingNexusOperation(event)
       ? 'pending'
       : nextIsPending
         ? event?.category
-        : (undefined as EventTypeCategory | 'pending' | undefined);
-  $: reverseSort = $eventFilterSort === 'descending';
+        : (undefined as EventTypeCategory | 'pending' | undefined),
+  );
+  const reverseSort = $derived($eventFilterSort === 'descending');
 </script>
 
 <g role="button" tabindex="0" class="relative cursor-pointer">

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

@@ -11,40 +11,40 @@
   import HistoryGraphRowVisual from './history-graph-row-visual.svelte';
   import Line from './line.svelte';
 
-  export let groups: EventGroups;
-  export let history: WorkflowEventWithPending[];
+  interface Props {
+    groups: EventGroups;
+    history: WorkflowEventWithPending[];
+  }
 
-  $: workflowTaskGroups = groupWorkflowTaskEvents(
-    $filteredEventHistory,
-    $eventFilterSort,
+  let { groups, history }: Props = $props();
+
+  const workflowTaskGroups = $derived(
+    groupWorkflowTaskEvents($filteredEventHistory, $eventFilterSort),
   );
-  $: allGroups = [...workflowTaskGroups, ...groups];
+  const allGroups = $derived([...workflowTaskGroups, ...groups]);
 
   const { height, radius } = HistoryConfig;
 
   const nodeBuffer = 4 * radius;
   const maxWidth = 600;
 
-  let canvasWidth = nodeBuffer;
-  let visualWidth = 0;
-
-  $: canvasHeight = history.length * height;
-
-  $: getMaxWidth = (items: WorkflowEventWithPending[]) => {
-    items.forEach((event) => {
+  const canvasWidth = $derived.by(() => {
+    let width = nodeBuffer;
+    history.forEach((event) => {
       const { offset } = getNextDistanceAndOffset(
         history,
         event,
         groups,
         height,
         $eventFilterSort,
       );
-      canvasWidth = Math.max(canvasWidth, offset * 1.75 * radius + nodeBuffer);
-      visualWidth = Math.min(canvasWidth - 2 * radius, maxWidth);
+      width = Math.max(width, offset * 1.75 * radius + nodeBuffer);
     });
-  };
+    return width;
+  });
+  const visualWidth = $derived(Math.min(canvasWidth - 2 * radius, maxWidth));
 
-  $: getMaxWidth(history);
+  const canvasHeight = $derived(history.length * height);
 </script>
 
 <div

src/lib/components/lines-and-dots/svg/workflow-row.svelte

@@ -8,14 +8,18 @@
   import Dot from './dot.svelte';
   import Line from './line.svelte';
 
-  export let workflow: WorkflowExecution;
-  export let length: number;
-  export let y: number;
+  interface Props {
+    workflow: WorkflowExecution;
+    length: number;
+    y: number;
+  }
+
+  let { workflow, length, y }: Props = $props();
 
   const { radius, height, gutter } = TimelineConfig;
 
-  $: start = gutter;
-  $: end = start + length - 2 * gutter;
+  const start = $derived(gutter);
+  const end = $derived(start + length - 2 * gutter);
 </script>
 
 <g role="button" tabindex="0" class="relative cursor-pointer" {height}>

src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte

@@ -4,7 +4,13 @@
   import { translate } from '$lib/i18n/translate';
   import type { Failure } from '$lib/types';
 
-  export let failure: Failure | undefined = undefined;
+  import Self from './workflow-error-stack-trace.svelte';
+
+  interface Props {
+    failure?: Failure | undefined;
+  }
+
+  let { failure = undefined }: Props = $props();
 </script>
 
 {#if failure}
@@ -42,5 +48,5 @@
   </Accordion>
 {/if}
 {#if failure?.cause}
-  <svelte:self failure={failure.cause} />
+  <Self failure={failure.cause} />
 {/if}

src/lib/components/lines-and-dots/workflow-pending-task.svelte

@@ -5,7 +5,11 @@
   import { translate } from '$lib/i18n/translate';
   import type { PendingWorkflowTaskInfo } from '$lib/types';
 
-  export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined;
+  interface Props {
+    pendingTask?: PendingWorkflowTaskInfo | undefined;
+  }
+
+  let { pendingTask = undefined }: Props = $props();
 </script>
 
 <Accordion title={translate('workflows.pending-workflow-task')}>

src/lib/components/page-title.svelte

@@ -1,13 +1,20 @@
-<script>
+<script lang="ts">
   import apple from '$lib/vendor/apple-touch-icon.png';
   import banner from '$lib/vendor/banner.png';
   import favicon from '$lib/vendor/favicon.ico';
   import manifest from '$lib/vendor/site.webmanifest';
 
-  export let title = 'Temporal';
-  export let url = 'https://temporal.io';
+  interface Props {
+    title?: string;
+    url?: string;
+    image?: string;
+  }
 
-  export let image = banner;
+  let {
+    title = 'Temporal',
+    url = 'https://temporal.io',
+    image = banner,
+  }: Props = $props();
 </script>
 
 <svelte:head>

src/lib/components/panel.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
-  export let error = false;
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    error?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { error = false, class: className = '', children }: Props = $props();
 </script>
 
-<div class="panel surface-primary {$$props.class}" class:error>
-  <slot />
+<div class="panel surface-primary {className}" class:error>
+  {@render children?.()}
 </div>
 
 <style lang="postcss">

src/lib/components/payload-input.svelte

@@ -7,15 +7,25 @@
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
 
-  export let id: string = crypto.randomUUID();
-  export let error = false;
-  export let input: string;
-  export let label = translate('workflows.signal-payload-input-label');
-  export let loading = false;
-  export let hintText = translate('workflows.signal-payload-input-label-hint');
-  export let editing = true;
+  interface Props {
+    id?: string;
+    error?: boolean;
+    input: string;
+    label?: string;
+    loading?: boolean;
+    hintText?: string;
+    editing?: boolean;
+  }
 
-  $: error = !isValidInput(input);
+  let {
+    id = crypto.randomUUID(),
+    error = $bindable(false),
+    input = $bindable(),
+    label = translate('workflows.signal-payload-input-label'),
+    loading = $bindable(false),
+    hintText = translate('workflows.signal-payload-input-label-hint'),
+    editing = true,
+  }: Props = $props();
 
   const isValidInput = (value: string) => {
     if (!input) return true;
@@ -27,6 +37,12 @@
     }
   };
 
+  const computedError = $derived(!isValidInput(input));
+
+  $effect(() => {
+    error = computedError;
+  });
+
   const handleInputChange = (text: string): void => {
     if (text !== input) {
       input = text;

src/lib/components/workflow-status.stories.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   import { Story, Template } from '@storybook/addon-svelte-csf';
   import type { Meta } from '@storybook/svelte';
+  import type { ComponentProps } from 'svelte';
 
   import WorkflowStatus from './workflow-status.svelte';
 
@@ -27,7 +28,7 @@
       },
       delayed: { name: 'Delayed', control: 'boolean' },
     },
-  } satisfies Meta<WorkflowStatus>;
+  } satisfies Meta<ComponentProps<typeof WorkflowStatus>>;
 
   const withCount = { count: 100 };
   const withNewCount = { ...withCount, newCount: 999 };