Codefreeze 05.01.26 to main

package.json

@@ -57,8 +57,8 @@
     "lint": "pnpm prettier; pnpm eslint; pnpm stylelint",
     "lint:ci": "pnpm prettier && pnpm eslint && pnpm stylelint",
     "format": "pnpm prettier:fix; pnpm eslint:fix; pnpm stylelint:fix",
-    "check": "VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-check --tsconfig ./tsconfig.json --tsgo --incremental",
+    "check:watch": "VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-check --tsconfig ./tsconfig.json --tsgo --incremental --watch",
     "prettier": "prettier --check --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss .",
     "prettier:fix": "prettier --write --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss .",
     "preview:local": "VITE_TEMPORAL_UI_BUILD_TARGET=local vite preview",
@@ -152,6 +152,7 @@
     "@types/node": "^18.15.3",
     "@types/tar-fs": "^2.0.4",
     "@types/yargs": "^17.0.24",
+    "@typescript/native-preview": "7.0.0-dev.20260506.1",
     "@vitest/coverage-v8": "^4.1.5",
     "@vitest/ui": "^3.1.1",
     "autoprefixer": "^10.4.13",
@@ -203,7 +204,7 @@
     "svelte2tsx": "^0.7.35",
     "tailwindcss": "^3.4.1",
     "tar-fs": "^3.1.2",
-    "typescript": "^5.2.2",
+    "typescript": "6.0.3",
     "typescript-eslint": "^8.54.0",
     "unist-util-visit": "^5.0.0",
     "vite": "^6.4.2",

src/lib/components/auto-refresh-workflow.svelte

@@ -4,9 +4,9 @@
   import { translate } from '$lib/i18n/translate';
   import { autoRefreshWorkflow } from '$lib/stores/event-view';
 
-  export let onChange: () => void;
+  let { onChange }: { onChange: () => void } = $props();
 
-  $: checked = $autoRefreshWorkflow === 'on';
+  const checked = $derived($autoRefreshWorkflow === 'on');
 </script>
 
 <Tooltip

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

@@ -3,7 +3,7 @@
   import { translate } from '$lib/i18n/translate';
   import type { BatchOperation } from '$lib/types/batch';
 
-  export let operation: BatchOperation;
+  let { operation }: { operation: BatchOperation } = $props();
 </script>
 
 <div class="flex flex-col gap-2">

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/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/bottom-nav-namespaces.svelte

@@ -4,16 +4,22 @@
   import type { NamespaceListItem } from '$lib/types/global';
   import { sortAlphabetically } from '$lib/utilities/sort-alphabetically';
 
-  export let open = false;
-  export let namespaceList: NamespaceListItem[] = [];
+  interface Props {
+    open?: boolean;
+    namespaceList?: NamespaceListItem[];
+  }
+
+  let { open = false, namespaceList = [] }: Props = $props();
 
-  let search = '';
+  let search = $state('');
 
-  $: namespaces = sortAlphabetically(
-    search
-      ? namespaceList.filter(({ namespace }) => namespace.includes(search))
-      : namespaceList,
-    (ns) => ns.namespace,
+  const namespaces = $derived(
+    sortAlphabetically(
+      search
+        ? namespaceList.filter(({ namespace }) => namespace.includes(search))
+        : namespaceList,
+      (ns) => ns.namespace,
+    ),
   );
 </script>
 
@@ -35,7 +41,11 @@
           <button
             class="namespace"
             class:selected={namespace === $lastUsedNamespace}
-            on:click|preventDefault|stopPropagation={() => onClick(namespace)}
+            onclick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onClick(namespace);
+            }}
           >
             {namespace}
           </button>

src/lib/components/codec-server-error-banner.svelte

@@ -4,12 +4,14 @@
   import { translate } from '$lib/i18n/translate';
   import { dataEncoder } from '$lib/stores/data-encoder';
 
-  $: message =
+  const message = $derived(
     $dataEncoder.customErrorMessage ||
-    translate('data-encoder.codec-server-error');
-  $: linkUrl =
+      translate('data-encoder.codec-server-error'),
+  );
+  const linkUrl = $derived(
     $dataEncoder.customErrorLink ||
-    'https://docs.temporal.io/production-deployment/data-encryption#set-your-codec-server-endpoints-with-web-ui-and-cli';
+      'https://docs.temporal.io/production-deployment/data-encryption#set-your-codec-server-endpoints-with-web-ui-and-cli',
+  );
 </script>
 
 {#if $dataEncoder.hasError}

src/lib/components/codec-server-form/codec-server-form.stories.svelte

@@ -1,4 +1,6 @@
-<script lang="ts" context="module">
+<svelte:options runes />
+
+<script lang="ts" module>
   import { action } from '@storybook/addon-actions';
   import { Story, Template } from '@storybook/addon-svelte-csf';
   import type { Meta } from '@storybook/svelte';

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/deployments/version-details.svelte

@@ -5,7 +5,7 @@
 
   import WorkflowDetail from '../lines-and-dots/workflow-detail.svelte';
 
-  export let version: WorkerDeploymentVersionInfo;
+  let { version }: { version: WorkerDeploymentVersionInfo } = $props();
 </script>
 
 <div class="flex w-full flex-col gap-2 lg:flex-row lg:gap-8 xl:gap-16">

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

@@ -157,7 +157,7 @@
 {/snippet}
 
 {#snippet eventLinks(links: ELink[])}
   {#each links as link}
     {@render eventLink(link)}
     {@render eventNamespaceLink(link)}
   {/each}
@@ -167,12 +167,10 @@
   <div class="flex items-start gap-4">
     <p class="min-w-56 text-sm text-secondary/80">Summary</p>
     <p class="whitespace-pre-line">
-      <MetadataDecoder
-        {value}
-        let:decodedValue
-        fallback={translate('events.decode-failed')}
-      >
-        {decodedValue}
+      <MetadataDecoder {value} fallback={translate('events.decode-failed')}>
+        {#snippet children(decodedValue)}
+          {decodedValue}
+        {/snippet}
       </MetadataDecoder>
     </p>
   </div>

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

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

src/lib/components/event/event-date-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,9 @@
   import { getDateFilterValue } from '$lib/utilities/event-formatting';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  export let compact: boolean;
+  let { compact }: { compact: boolean } = $props();
 
-  let sortOptions: EventSortOrderOptions = [
+  const sortOptions: EventSortOrderOptions = [
     { label: translate('events.sort-ascending'), option: 'ascending' },
     { label: translate('events.sort-descending'), option: 'descending' },
   ];
@@ -34,7 +34,7 @@
     updateQueryParameters({
       parameter: 'sort',
       value: option,
-      url: $page.url,
+      url: page.url,
     });
   };
 
@@ -46,11 +46,13 @@
     }
   };
 
-  $: value = getDateFilterValue({
-    compact,
-    sortOrder: $eventFilterSort,
-    showElapsed: $eventShowElapsed,
-  });
+  const value = $derived(
+    getDateFilterValue({
+      compact,
+      sortOrder: $eventFilterSort,
+      showElapsed: $eventShowElapsed,
+    }),
+  );
 </script>
 
 <MenuContainer>

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

@@ -4,9 +4,15 @@
   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');
+  let {
+    loading = false,
+    title = translate('events.empty-state-title'),
+    content = translate('events.empty-state-description'),
+  }: {
+    loading?: boolean;
+    title?: string;
+    content?: string;
+  } = $props();
 </script>
 
 <tr class="bg-primary">

src/lib/components/event/event-metadata-expanded.svelte

@@ -5,18 +5,16 @@
 
   import MetadataDecoder from './metadata-decoder.svelte';
 
-  export let value: Payload;
+  let { value }: { value: Payload } = $props();
 </script>
 
 <div class="block w-full select-all px-2 py-1 text-left">
   <p class="text-sm">Summary</p>
-  <MetadataDecoder
-    {value}
-    let:decodedValue
-    fallback={translate('events.decode-failed')}
-  >
-    <Badge type="secondary" class="inline-block whitespace-pre-wrap">
-      {decodedValue}
-    </Badge>
+  <MetadataDecoder {value} fallback={translate('events.decode-failed')}>
+    {#snippet children(decodedValue)}
+      <Badge type="secondary" class="inline-block whitespace-pre-wrap">
+        {decodedValue}
+      </Badge>
+    {/snippet}
   </MetadataDecoder>
 </div>

src/lib/components/event/event-shortcut-keys.svelte

@@ -5,9 +5,13 @@
   import Shortcut from '$lib/holocene/keyboard-shortcut/shortcut.svelte';
   import { translate } from '$lib/i18n/translate';
 
-  export let open = false;
-  export let onOpen: () => void;
-  export let onClose: () => void;
+  type Props = {
+    open?: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+  };
+
+  let { open = false, onOpen, onClose }: Props = $props();
 </script>
 
 <div class="shortcut-key-button">