chore(web): migration svelte 5 syntax (#13883)

web/src/lib/components/i18n/__test__/format-tag-b.svelte

@@ -3,12 +3,18 @@
   import FormatMessage from '../format-message.svelte';
   import type { ComponentProps } from 'svelte';
 
-  export let key: Translations;
-  export let values: ComponentProps<FormatMessage>['values'];
+  interface Props {
+    key: Translations;
+    values: ComponentProps<typeof FormatMessage>['values'];
+  }
+
+  let { key, values }: Props = $props();
 </script>
 
-<FormatMessage {key} {values} let:tag let:message>
-  {#if tag === 'b'}
-    <strong>{message}</strong>
-  {/if}
+<FormatMessage {key} {values}>
+  {#snippet children({ tag, message })}
+    {#if tag === 'b'}
+      <strong>{message}</strong>
+    {/if}
+  {/snippet}
 </FormatMessage>

web/src/lib/components/i18n/format-bold-message.svelte

@@ -3,12 +3,18 @@
   import type { InterpolationValues } from '$lib/components/i18n/format-message.svelte';
   import type { Translations } from 'svelte-i18n';
 
-  export let key: Translations;
-  export let values: InterpolationValues = {};
+  interface Props {
+    key: Translations;
+    values?: InterpolationValues;
+  }
+
+  let { key, values = {} }: Props = $props();
 </script>
 
-<FormatMessage {key} {values} let:message let:tag>
-  {#if tag === 'b'}
-    <b>{message}</b>
-  {/if}
+<FormatMessage {key} {values}>
+  {#snippet children({ message, tag })}
+    {#if tag === 'b'}
+      <b>{message}</b>
+    {/if}
+  {/snippet}
 </FormatMessage>

web/src/lib/components/i18n/format-message.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat';
   export type InterpolationValues = Record<string, PrimitiveType | FormatXMLElementFn<unknown>>;
 </script>
@@ -18,8 +18,13 @@
     tag?: string;
   };
 
-  export let key: Translations;
-  export let values: InterpolationValues = {};
+  interface Props {
+    key: Translations;
+    values?: InterpolationValues;
+    children?: import('svelte').Snippet<[{ tag?: string; message?: string }]>;
+  }
+
+  let { key, values = {}, children }: Props = $props();
 
   const getLocale = (locale?: string | null) => {
     if (locale == null) {
@@ -96,9 +101,9 @@
     }
   };
 
-  $: message = ($json(key) as string) || key;
-  $: locale = getLocale($i18nLocale);
-  $: parts = getParts(message, locale);
+  let message = $derived(($json(key) as string) || key);
+  let locale = $derived(getLocale($i18nLocale));
+  let parts = $derived(getParts(message, locale));
 </script>
 
 <!--
@@ -130,7 +135,7 @@ Result: Visit <a href="">docs</a> <strong>now</strong>
 -->
 {#each parts as { tag, message }}
   {#if tag}
-    <slot {tag} {message}>{message}</slot>
+    {#if children}{@render children({ tag, message })}{:else}{message}{/if}
   {:else}
     {message}
   {/if}