Skip to content

Commit 3680e12

Browse files
cibernoxcibernox
authored
Merge pull request #21 from cibernox/migrate-to-svelte-5
Migrate to svelte 5
2 parents 4d19fba + 82aa292 commit 3680e12

25 files changed

+2998
-7764
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

‎package-lock.json

Lines changed: 2801 additions & 7575 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,33 +11,33 @@
1111
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
1212
},
1313
"devDependencies": {
14-
"@sveltejs/adapter-netlify": "next",
15-
"@sveltejs/kit": "next",
16-
"@testing-library/svelte": "^3.2.2",
17-
"@types/cookie": "^0.5.1",
18-
"autoprefixer": "^10.4.13",
19-
"chai-dom": "^1.11.0",
20-
"cssnano": "^5.1.0",
21-
"jsdom": "^20.0.2",
22-
"postcss": "^8.4.19",
23-
"postcss-load-config": "^4.0.0",
24-
"svelte": "^3.55.0",
25-
"svelte-check": "^2.9.2",
26-
"svelte-preprocess": "^5.0.0",
27-
"tailwindcss": "^3.2.4",
28-
"tslib": "^2.5.0",
29-
"typescript": "^4.9.5",
30-
"vite": "^4.1.1",
31-
"vitest": "^0.28.0"
14+
"@sveltejs/adapter-netlify": "^4.0.0",
15+
"@sveltejs/kit": "^2.6.0",
16+
"@testing-library/jest-dom": "^6.6.3",
17+
"@testing-library/svelte": "^5.2.4",
18+
"autoprefixer": "^10.4.20",
19+
"cssnano": "^7.0.0",
20+
"jsdom": "^25.0.0",
21+
"postcss": "^8.4.47",
22+
"postcss-load-config": "^6.0.0",
23+
"svelte": "^5.1.9",
24+
"svelte-check": "^4.0.0",
25+
"svelte-highlight": "^7.7.0",
26+
"svelte-preprocess": "^6.0.0",
27+
"tailwindcss": "^3.4.0",
28+
"tslib": "^2.8.0",
29+
"typescript": "^5.6.0",
30+
"vite": "^5.4.0",
31+
"vitest": "^2.1.0"
3232
},
3333
"type": "module",
3434
"dependencies": {
35-
"cookie": "^0.5.0",
36-
"svelte-intl-precompile": "^0.12.1",
37-
"terser": "^5.16.0"
35+
"cookie": "^1.0.1",
36+
"svelte-intl-precompile": "^0.12.3",
37+
"terser": "^5.36.0"
3838
},
3939
"volta": {
40-
"node": "16.14.0",
41-
"npm": "8.1.2"
40+
"node": "22.11.0",
41+
"npm": "10.9.0"
4242
}
4343
}

‎src/app.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,7 @@
3636
html{
3737
scroll-behavior:smooth
3838
}
39+
40+
.bg-code code {
41+
background-color: rgb(246 250 253 / var(--tw-bg-opacity))
42+
}

‎src/app.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="/favicon.png" />
66
%sveltekit.head%
7-
<script async id="prism-script" src="/prism.js"></script>
8-
<link rel="stylesheet" href="/prism.css">
97
</head>
108
<body>
119
<div id="svelte" class="text-dark">%sveltekit.body%</div>

‎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/Codeblock.svelte

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎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/lib/Playground.svelte

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<script lang="ts">
2-
let translations = JSON.stringify({
2+
let translations = $state(JSON.stringify({
33
"header": "Svelte Intl Precompile is {adjective}",
44
"posted-on": "Posted on {postDate, date, long}",
55
"invite-friend": "{name} has joined Svelte! Give {gender, select, male {him} female {her} other {your friend}} a warm welcome!",
66
"friends-msg": "You have {count, plural, zero {no friend} one {just # friend} other {# friends}}",
77
"show-friend-profile": "Click to show {gender, select, male {his profile} female {her profile} other {the profile}}"
8-
}, null, 2);
9-
let transformedTranslations = "";
10-
let minifiedTranslations = "";
11-
let showMinified = false;
12-
$: output = showMinified ? minifiedTranslations : transformedTranslations;
8+
}, null, 2));
9+
let transformedTranslations = $state("");
10+
let minifiedTranslations = $state("");
11+
let showMinified = $state(false);
12+
let output = $derived(showMinified ? minifiedTranslations : transformedTranslations);
1313
let timer;
14+
1415
function transform(code) {
1516
fetch('/playground', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: code })
1617
.then(r => {
@@ -32,16 +33,17 @@
3233
timer = setTimeout(() => transform(code), 750);
3334
}
3435
35-
$: transformedTranslations === "" ? transform(translations) : debouncedTransform(translations)
36-
$: sizeChange = Math.round(output.length / translations.length * 100, 0) - 100;
36+
$effect(() => {
37+
transformedTranslations === "" ? transform(translations) : debouncedTransform(translations)
38+
})
39+
let sizeChange = $derived(Math.round(output.length / translations.length * 100) - 100);
3740
</script>
3841
<div>
3942
<label for="email" class="text-sm block mb-2">Translations</label>
4043
<pre
4144
contenteditable
42-
bind:textContent={translations}
45+
bind:innerText={translations}
4346
class="p-4 m-2 rounded bg-code overflow-x-auto text-sm border ">
44-
<code><div>{translations}</div></code>
4547
</pre>
4648
{translations.length} bytes
4749
</div>
@@ -59,5 +61,6 @@
5961
<pre class="p-4 mt-2 rounded bg-code overflow-x-auto text-sm">
6062
<code><div>{output}</div></code>
6163
</pre>
62-
{output.length} bytes ({Math.abs(sizeChange)}% {sizeChange > 0 ? 'bigger' : 'smaller' } than the source translations)
64+
{output.length} bytes ({Math.abs(sizeChange)}% {sizeChange > 0 ? 'bigger' : 'smaller' } than the source translations)
6365
</div>
66+

‎src/routes/+layout.svelte

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
<script lang="ts">
22
import "../app.css";
3+
import "svelte-highlight/styles/github.css";
4+
5+
interface Props {
6+
children?: import('svelte').Snippet;
7+
}
8+
9+
let { children }: Props = $props();
310
</script>
4-
<slot />
11+
{@render children?.()}

‎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>

0 commit comments

Comments
 (0)