Skip to content

Commit 4c01c08

Browse files
cibernoxcibernox
committed
Migrate more components to svelte5 syntax
1 parent cc8bdb2 commit 4c01c08

File tree

8 files changed

+80
-58
lines changed

8 files changed

+80
-58
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ node_modules
66
/package
77
/.idea
88
/.netlify
9+
/.velcel/output

‎src/lib/CodeInline.svelte

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
<code class="bg-code px-2"><slot/></code>
1+
<script>
2+
/**
3+
* @typedef {Object} Props
4+
* @property {import('svelte').Snippet} [children]
5+
*/
6+
7+
/** @type {Props} */
8+
let { children } = $props();
9+
</script>
10+
11+
<code class="bg-code px-2">{@render children?.()}</code>

‎src/lib/DefinitionEntry.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script>
2-
export let background;
2+
let { background, dt, dd } = $props();
33
</script>
44
<div
55
data-testid="definition-entry"
66
class="{background === 'gray' ? 'bg-gray-50' : 'bg-white'} px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
77
<dt class="text-sm font-medium text-gray-500" data-testid="dt">
8-
<slot name="dt"/>
8+
{@render dt?.()}
99
</dt>
1010
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" data-testid="dd">
11-
<slot name="dd"></slot>
11+
{@render dd?.()}
1212
</dd>
1313
</div>

‎src/lib/NavLink.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts">
22
import { page } from "$app/stores"
3-
export let href;
4-
$: isActive = $page.url.pathname === href
3+
let { href, children, submenu } = $props();
4+
let isActive = $derived($page.url.pathname === href)
55
</script>
66

77
<li class="p-0 mb-2">
8-
<a href={href} class="uppercase font-bold" class:underline={isActive}><slot/></a>
9-
<slot name="submenu"/>
8+
<a href={href} class="uppercase font-bold" class:underline={isActive}>{@render children?.()}</a>
9+
{@render submenu?.()}
1010
</li>

‎src/routes/[...lang]/docs/+layout.svelte

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<script>
22
import { t, locale } from 'svelte-intl-precompile';
33
import NavLink from '$lib/NavLink.svelte';
4+
/**
5+
* @typedef {Object} Props
6+
* @property {import('svelte').Snippet} [children]
7+
*/
8+
9+
/** @type {Props} */
10+
let { children } = $props();
411
</script>
512

613
<nav class="fixed w-76 h-screen shadow-xl bg-gray-500">
@@ -10,29 +17,33 @@
1017
<NavLink href="/{$locale}/docs/getting-started">{$t('getting-started.title')}</NavLink>
1118
<NavLink href="/{$locale}/docs/configuration">
1219
{$t('configuration.title')}
13-
<ul slot="submenu" class="pb-2 pl-4">
14-
<li><a href="/{$locale}/docs/configuration#sample-config">{$t('configuration.link.example')}</a></li>
15-
<li><a href="/{$locale}/docs/configuration#static-locales">{$t('configuration.subsection.static-locales')}</a></li>
16-
<li><a href="/{$locale}/docs/configuration#dynamic-locales">{$t('configuration.subsection.dynamic-locales')}</a></li>
17-
<li><a href="/{$locale}/docs/configuration#init">{$t('configuration.subsection.init')}</a></li>
18-
<li><a href="/{$locale}/docs/configuration#find-best-locale">{$t('configuration.subsection.find-locale')}</a></li>
19-
<li><a href="/{$locale}/docs/configuration#custom-formats">{$t('configuration.subsection.custom-formats')}</a></li>
20-
</ul>
20+
{#snippet submenu()}
21+
<ul class="pb-2 pl-4">
22+
<li><a href="/{$locale}/docs/configuration#sample-config">{$t('configuration.link.example')}</a></li>
23+
<li><a href="/{$locale}/docs/configuration#static-locales">{$t('configuration.subsection.static-locales')}</a></li>
24+
<li><a href="/{$locale}/docs/configuration#dynamic-locales">{$t('configuration.subsection.dynamic-locales')}</a></li>
25+
<li><a href="/{$locale}/docs/configuration#init">{$t('configuration.subsection.init')}</a></li>
26+
<li><a href="/{$locale}/docs/configuration#find-best-locale">{$t('configuration.subsection.find-locale')}</a></li>
27+
<li><a href="/{$locale}/docs/configuration#custom-formats">{$t('configuration.subsection.custom-formats')}</a></li>
28+
</ul>
29+
{/snippet}
2130
</NavLink>
2231
<NavLink href="/{$locale}/docs/usage">
2332
{$t('usage.title')}
24-
<ul slot="submenu" class="pb-2 pl-4">
25-
<li><a href="/{$locale}/docs/usage#basic-translation">{$t('usage.link.basic-translations')}</a></li>
26-
<li><a href="/{$locale}/docs/usage#passing-arguments">{$t('usage.subsection.passing-arguments')}</a></li>
27-
<li><a href="/{$locale}/docs/usage#formatting">{$t('usage.subsection.formatting')}</a></li>
28-
<li><a href="/{$locale}/docs/usage#other-stores">{$t('usage.subsection.other-stores')}</a></li>
29-
</ul>
33+
{#snippet submenu()}
34+
<ul class="pb-2 pl-4">
35+
<li><a href="/{$locale}/docs/usage#basic-translation">{$t('usage.link.basic-translations')}</a></li>
36+
<li><a href="/{$locale}/docs/usage#passing-arguments">{$t('usage.subsection.passing-arguments')}</a></li>
37+
<li><a href="/{$locale}/docs/usage#formatting">{$t('usage.subsection.formatting')}</a></li>
38+
<li><a href="/{$locale}/docs/usage#other-stores">{$t('usage.subsection.other-stores')}</a></li>
39+
</ul>
40+
{/snippet}
3041
</NavLink>
3142
<NavLink href="/docs/playground">{$t('playground.title')}</NavLink>
3243
</ul>
3344
</nav>
3445
<div class="ml-76">
3546
<article class="px-14 py-8 space-y-8">
36-
<slot/>
47+
{@render children?.()}
3748
</article>
3849
</div>

‎src/routes/[...lang]/docs/configuration/+page.svelte

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -117,28 +117,28 @@ init({
117117

118118
<dl>
119119
<DefinitionEntry background="gray">
120-
<svelte:fragment slot="dt"><pre>getLocaleFromNavigator()</svelte:fragment>
121-
<svelte:fragment slot="dd">{$t('configuration.definitions.navigator')}</svelte:fragment>
120+
{#snippet dt()}<pre>getLocaleFromNavigator()</pre>{/snippet}
121+
{#snippet dd()}{$t('configuration.definitions.navigator')}{/snippet}
122122
</DefinitionEntry>
123123
<DefinitionEntry background="white">
124-
<svelte:fragment slot="dt"><pre>getLocaleFromQueryString(key)</svelte:fragment>
125-
<svelte:fragment slot="dd">{@html $t('configuration.definitions.query')}</svelte:fragment>
124+
{#snippet dt()}<pre>getLocaleFromQueryString(key)</pre>{/snippet}
125+
{#snippet dd()}{@html $t('configuration.definitions.query')}{/snippet}
126126
</DefinitionEntry>
127127
<DefinitionEntry background="gray">
128-
<svelte:fragment slot="dt"><pre>getLocaleFromHash(key)</svelte:fragment>
129-
<svelte:fragment slot="dd">{@html $t('configuration.definitions.hash')}</svelte:fragment>
128+
{#snippet dt()}<pre>getLocaleFromHash(key)</pre>{/snippet}
129+
{#snippet dd()}{@html $t('configuration.definitions.hash')}{/snippet}
130130
</DefinitionEntry>
131131
<DefinitionEntry background="white">
132-
<svelte:fragment slot="dt"><pre>getLocaleFromPathname(regex)</svelte:fragment>
133-
<svelte:fragment slot="dd">{@html $t('configuration.definitions.path')}</svelte:fragment>
132+
{#snippet dt()}<pre>getLocaleFromPathname(regex)</pre>{/snippet}
133+
{#snippet dd()}{@html $t('configuration.definitions.path')}{/snippet}
134134
</DefinitionEntry>
135135
<DefinitionEntry background="gray">
136-
<svelte:fragment slot="dt"><pre>getLocaleFromHostname(regex)</svelte:fragment>
137-
<svelte:fragment slot="dd">{@html $t('configuration.definitions.host')}</svelte:fragment>
136+
{#snippet dt()}<pre>getLocaleFromHostname(regex)</pre>{/snippet}
137+
{#snippet dd()}{@html $t('configuration.definitions.host')}{/snippet}
138138
</DefinitionEntry>
139139
<DefinitionEntry background="gray">
140-
<svelte:fragment slot="dt"><pre>getLocaleFromAcceptLanguageHeader(header, availableLocales?)</pre></svelte:fragment>
141-
<svelte:fragment slot="dd">{@html $t('configuration.definitions.acceptLanguage')}</svelte:fragment>
140+
{#snippet dt()}<pre>getLocaleFromAcceptLanguageHeader(header, availableLocales?)</pre>{/snippet}
141+
{#snippet dd()}{@html $t('configuration.definitions.acceptLanguage')}{/snippet}
142142
</DefinitionEntry>
143143
</dl>
144144

‎src/routes/[...lang]/docs/icu-crash-course/+page.svelte

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<script lang="ts">
22
import { t } from 'svelte-intl-precompile';
3-
let interpolation = 'orange';
4-
let guest = 'John';
5-
let plural1 = 0;
6-
let plural2 = 0;
7-
let guestCount = 0;
8-
let childGender = "male";
9-
let holidaysStart = new Date();
10-
let appointment = new Date();
11-
let number = 0;
12-
let skeletonBalance = 0;
13-
let skeletonPercentageVal = 0;
14-
let skeletonMeasurementMeterVal = 0;
15-
let skeletonCompactVal = 5000;
16-
let skeletonScientificVal = 123456789;
3+
let interpolation = $state('orange');
4+
let guest = $state('John');
5+
let plural1 = $state(0);
6+
let plural2 = $state(0);
7+
let guestCount = $state(0);
8+
let childGender = $state("male");
9+
let holidaysStart = $state(new Date());
10+
let appointment = $state(new Date());
11+
let number = $state(0);
12+
let skeletonBalance = $state(0);
13+
let skeletonPercentageVal = $state(0);
14+
let skeletonMeasurementMeterVal = $state(0);
15+
let skeletonCompactVal = $state(5000);
16+
let skeletonScientificVal = $state(123456789);
1717
let interpolationKey = "Your favorite color is {chosen}";
1818
let simplePlural = "Your have {numCats, plural, one {one cat} other {# cats}}";
1919
let complexPlural = "Your have {numCats, plural, \n =0 {no cats at all} \n =1 {one single cat} \n =2 {a couple cats} \n =3 {a trio of cats} \n =12 {a dozen cats} \n other {exactly # cats}}";
@@ -183,7 +183,7 @@
183183
<pre><code>{select}</code></pre>
184184
</td>
185185
<td>
186-
<select value={childGender} on:change={(e) => childGender = e.target.value}>
186+
<select value={childGender} onchange={(e) => childGender = e.target.value}>
187187
<option selected={childGender === "male"} value="male">
188188
{$t('icu-crash-course.table-cells.select-value-male')}
189189
</option>
@@ -226,7 +226,7 @@
226226
<pre><code>{dateString}</code></pre>
227227
</td>
228228
<td>
229-
<input type="date" on:change={onDateChange}>
229+
<input type="date" onchange={onDateChange}>
230230
</td>
231231
<td>{$t('icu-crash-course.table-cells.date', { values: { holidaysStart } })}</td>
232232
</tr>
@@ -251,7 +251,7 @@
251251
<pre><code>{timeString}</code></pre>
252252
</td>
253253
<td>
254-
<input type="time" on:change={onTimeChange}>
254+
<input type="time" onchange={onTimeChange}>
255255
</td>
256256
<td>{$t('icu-crash-course.table-cells.time', { values: { appointment } })}</td>
257257
</tr>

‎src/routes/[...lang]/docs/usage/+page.svelte

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,16 @@
8383

8484
<dl>
8585
<DefinitionEntry background="gray">
86-
<svelte:fragment slot="dt"><pre>$locale</svelte:fragment>
87-
<svelte:fragment slot="dd">{@html $t('usage.definitions.other-stores-1')}</svelte:fragment>
86+
{#snippet dt()}<pre>$locale</pre>{/snippet}
87+
{#snippet dd()}{@html $t('usage.definitions.other-stores-1')}{/snippet}
8888
</DefinitionEntry>
8989
<DefinitionEntry background="white">
90-
<svelte:fragment slot="dt"><pre>$locales</svelte:fragment>
91-
<svelte:fragment slot="dd">{@html $t('usage.definitions.other-stores-2')}</svelte:fragment>
90+
{#snippet dt()}<pre>$locales</pre>{/snippet}
91+
{#snippet dd()}{@html $t('usage.definitions.other-stores-2')}{/snippet}
9292
</DefinitionEntry>
9393
<DefinitionEntry background="gray">
94-
<svelte:fragment slot="dt"><pre>$isLoading</svelte:fragment>
95-
<svelte:fragment slot="dd">{@html $t('usage.definitions.other-stores-3')}</svelte:fragment>
94+
{#snippet dt()}<pre>$isLoading</pre>{/snippet}
95+
{#snippet dd()}{@html $t('usage.definitions.other-stores-3')}{/snippet}
9696
</DefinitionEntry>
9797
</dl>
9898

0 commit comments

Comments
 (0)