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

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/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: InputEvent) => {
-    if (isValidDurationQuery((event.target as HTMLInputElement).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/number-filter.svelte

@@ -11,8 +11,7 @@
     getContext<FilterContext>(FILTER_CONTEXT);
   const min = 0;
 
-  $: ({ value } = $filter);
-  $: _value = value ? Number(value) : null;
+  let _value = $derived($filter.value ? Number($filter.value) : null);
 
   const handleKeydown = (e: KeyboardEvent) => {
     $focusedElementId = '';

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Input from '$lib/holocene/input/input.svelte';
@@ -24,8 +24,12 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
-  export let options: SearchAttributeOption[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+    options: SearchAttributeOption[];
+  }
+
+  let { filters, options }: Props = $props();
 
   const { filter, activeQueryIndex, focusedElementId } =
     getContext<FilterContext>(FILTER_CONTEXT);
@@ -45,22 +49,26 @@
     $focusedElementId = getFocusedElementId($filter);
   }
 
-  let searchAttributeValue = '';
+  let searchAttributeValue = $state('');
 
-  $: filteredOptions = !searchAttributeValue
-    ? options
-    : options.filter((option) =>
-        option.value.toLowerCase().includes(searchAttributeValue.toLowerCase()),
-      );
+  const filteredOptions = $derived(
+    !searchAttributeValue
+      ? options
+      : options.filter((option) =>
+          option.value
+            .toLowerCase()
+            .includes(searchAttributeValue.toLowerCase()),
+        ),
+  );
 
-  $: query = $page.url.searchParams.get('query');
+  const query = $derived(page.url.searchParams.get('query') ?? '');
 </script>
 
 <MenuContainer>
   <MenuButton
     id="search-attribute-filter-button"
     controls="search-attribute-menu"
-    disabled={$activeQueryIndex !== null || query?.length >= MAX_QUERY_LENGTH}
+    disabled={$activeQueryIndex !== null || query.length >= MAX_QUERY_LENGTH}
     onclick={() => (searchAttributeValue = '')}
     class="text-nowrap"
   >

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

@@ -11,8 +11,7 @@
 
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
-  $: ({ value } = $filter);
-  $: _value = value;
+  let _value = $derived($filter.value);
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter' && _value !== '') {
@@ -22,13 +21,13 @@
     }
   }
 
-  $: options = [
+  const options = $derived([
     { value: '=', label: translate('common.equal-to') },
     { value: '!=', label: translate('common.not-equal-to') },
     ...($prefixSearchEnabled && $filter.type === SEARCH_ATTRIBUTE_TYPE.KEYWORD
       ? [{ value: 'STARTS_WITH', label: translate('common.starts-with') }]
       : []),
-  ];
+  ]);
 </script>
 
 <ConditionalMenu {options} inputId="text-filter" noBorderLeft>

src/lib/holocene/accordion/accordion-group.svelte

@@ -1,3 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
 <div class="*:border-t-0 [&>*:first-child]:border-t">
-  <slot />
+  {@render children?.()}
 </div>

src/lib/holocene/error-boundary.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Error from './error.svelte';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <svelte:boundary>
-  <slot />
+  {@render children?.()}
   {#snippet failed(error, reset)}
     <Error {reset} {error} />
   {/snippet}

src/lib/holocene/page-transition.svelte

@@ -1,10 +1,14 @@
-<script>
+<script lang="ts">
   import { fly } from 'svelte/transition';
+
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <div
   in:fly={{ y: -50, duration: 150, delay: 50 }}
   out:fly={{ y: -50, duration: 150 }}
 >
-  <slot />
+  {@render children?.()}
 </div>

src/lib/pages/import-events-view.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import HistoryImport from '$lib/components/import/event-history-file-import.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
   import { translate } from '$lib/i18n/translate';
   import { lastUsedNamespace } from '$lib/stores/namespaces';
   import { routeForEventHistoryImport } from '$lib/utilities/route-for';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <section id="event-history">
@@ -43,5 +47,5 @@
       </ToggleButtons>
     </div>
   </nav>
-  <slot />
+  {@render children?.()}
 </section>

src/lib/utilities/dark-mode/dark-mode.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import { darkMode } from './dark-mode';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <svelte:body use:darkMode />
-<slot />
+{@render children?.()}