Mae's website :3
maemoon.me
personal
website
svelte
sveltekit
migration to svelte 5
+12
-12
+7
-7
package.json
+7
-7
package.json
···
11
11
},
12
12
"devDependencies": {
13
13
"@sveltejs/adapter-auto": "^3.0.0",
14
-
"@sveltejs/kit": "^2.0.0",
15
-
"@sveltejs/vite-plugin-svelte": "^3.0.0",
14
+
"@sveltejs/kit": "^2.5.27",
15
+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
16
16
"@types/eslint": "^8.56.7",
17
17
"eslint": "^9.0.0",
18
18
"eslint-config-prettier": "^9.1.0",
19
-
"eslint-plugin-svelte": "^2.36.0",
19
+
"eslint-plugin-svelte": "^2.45.1",
20
20
"globals": "^15.0.0",
21
21
"mdsvex": "^0.11.2",
22
22
"prettier": "^3.1.1",
23
-
"prettier-plugin-svelte": "^3.1.2",
24
-
"svelte": "^4.2.7",
25
-
"svelte-preprocess": "^5.1.4",
26
-
"vite": "^5.0.3"
23
+
"prettier-plugin-svelte": "^3.2.6",
24
+
"svelte": "^5.0.0",
25
+
"svelte-preprocess": "^6.0.0",
26
+
"vite": "^5.4.4"
27
27
},
28
28
"type": "module",
29
29
"dependencies": {
+2
-2
src/routes/+layout.svelte
+2
-2
src/routes/+layout.svelte
···
1
1
<script>
2
2
import '$lib/global.css';
3
3
import { blur } from 'svelte/transition';
4
-
export let data;
5
4
6
5
import { dev } from '$app/environment';
7
6
import { inject } from '@vercel/analytics';
8
7
import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
8
+
let { data, children } = $props();
9
9
10
10
inject({ mode: dev ? 'development' : 'production' });
11
11
injectSpeedInsights();
···
17
17
18
18
{#key data.currentRoute}
19
19
<main in:blur={{ duration: 200, delay: 200 }} out:blur={{ duration: 200 }}>
20
-
<slot />
20
+
{@render children?.()}
21
21
</main>
22
22
{/key}
23
23
+1
-1
src/routes/+page.svelte
+1
-1
src/routes/+page.svelte
···
1
1
<script>
2
2
import { onMount } from 'svelte';
3
3
import { fade } from 'svelte/transition';
4
-
export let data;
4
+
let { data } = $props();
5
5
const date = new Date(data.posts[0].meta.date);
6
6
let dateString = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
7
7
let messages = [
+2
-2
src/routes/post/[slug]/+page.svelte
+2
-2
src/routes/post/[slug]/+page.svelte
···
1
1
<script>
2
-
export let data;
2
+
let { data } = $props();
3
3
let dateString = data.date.replaceAll('-', '/');
4
4
</script>
5
5
···
12
12
<h1>{data.title}</h1>
13
13
<h2>{dateString}</h2>
14
14
<br />
15
-
<svelte:component this={data.content} />
15
+
<data.content />
16
16
</article>
17
17
<a href="..">Back</a>
18
18
</main>