Skip to content

Commit 8ccacf4

Browse files
reosabloreosablo
committed
feat: add svelte-5 app demo
1 parent 8967cf5 commit 8ccacf4

File tree

5 files changed

+168
-0
lines changed

5 files changed

+168
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ steps.
88
* [Hono 4](./hono-4/)
99
* [Preact 10](./preact-10/)
1010
* [Solid 1](./solid-1/)
11+
* [Svelte 5](./svelte-5/)
1112
* [Vue 3](./vue-3/)

‎deno.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"./hono-*",
55
"./preact-*",
66
"./solid-*",
7+
"./svelte-*",
78
"./vue-*"
89
],
910
"imports": {

‎svelte-5/App.svelte‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<script lang="ts">
2+
import type { User } from "jsonplaceholder-types/types/user";
3+
import type { Post } from "jsonplaceholder-types/types/post";
4+
5+
const urlBase = "https://jsonplaceholder.typicode.com";
6+
7+
let selectedUserId = $state<number | undefined>(undefined);
8+
const users = $state<{ value: User[] | undefined; loading: boolean }>({
9+
value: undefined,
10+
loading: false,
11+
});
12+
const posts = $state<{ value: Post[] | undefined; loading: boolean }>({
13+
value: undefined,
14+
loading: false,
15+
});
16+
17+
$effect(() => {
18+
users.loading = true;
19+
const controller = new AbortController();
20+
21+
fetch(`${urlBase}/users`, { signal: controller.signal })
22+
.then(async (response) => {
23+
users.value = await response.json();
24+
})
25+
.catch((error) => {
26+
if (!(error instanceof DOMException && error.name === "AbortError")) {
27+
throw error;
28+
}
29+
})
30+
.finally(() => {
31+
users.loading = false;
32+
});
33+
34+
return () => controller.abort();
35+
});
36+
37+
$effect(() => {
38+
if (selectedUserId === undefined) {
39+
posts.value = undefined;
40+
return;
41+
}
42+
posts.loading = true;
43+
const controller = new AbortController();
44+
45+
fetch(`${urlBase}/posts?userId=${selectedUserId}`, {
46+
signal: controller.signal,
47+
})
48+
.then(async (response) => {
49+
posts.value = await response.json();
50+
})
51+
.catch((error) => {
52+
if (!(error instanceof DOMException && error.name === "AbortError")) {
53+
throw error;
54+
}
55+
})
56+
.finally(() => {
57+
posts.loading = false;
58+
});
59+
60+
return () => controller.abort();
61+
});
62+
</script>
63+
64+
<h1>Buildless Svelte 5 app</h1>
65+
66+
{#if users.value}
67+
<label>
68+
Select User:
69+
<select bind:value={selectedUserId}>
70+
<option hidden selected value={undefined}></option>
71+
{#each users.value as user (user.id)}
72+
<option value={user.id}>
73+
@{user.username}: {user.name}
74+
</option>
75+
{/each}
76+
</select>
77+
</label>
78+
{:else if users.loading}
79+
<p>Loading Users...</p>
80+
{/if}
81+
82+
{#if posts.value}
83+
<ul>
84+
{#each posts.value as post (post.id)}
85+
<li>{post.title}</li>
86+
{/each}
87+
</ul>
88+
{:else if posts.loading}
89+
<p>Loading Posts...</p>
90+
{:else if users.value}
91+
<p>Select User to view posts</p>
92+
{/if}
93+
94+
<p>
95+
Data Source:
96+
<a href="https://jsonplaceholder.typicode.com/" target="_blank">
97+
JSONPlaceholder
98+
</a>
99+
</p>

‎svelte-5/deno.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"imports": {
3+
"@jridgewell/gen-mapping": "https://esm.sh/*@jridgewell/gen-mapping@0.3.13?dev",
4+
"@jridgewell/remapping": "https://esm.sh/*@jridgewell/remapping@2.3.5?dev",
5+
"@jridgewell/resolve-uri": "https://esm.sh/*@jridgewell/resolve-uri@3.1.2?dev",
6+
"@jridgewell/sourcemap-codec": "https://esm.sh/*@jridgewell/sourcemap-codec@1.5.5?dev",
7+
"@jridgewell/trace-mapping": "https://esm.sh/*@jridgewell/trace-mapping@0.3.31?dev",
8+
"@sveltejs/acorn-typescript": "https://esm.sh/*@sveltejs/acorn-typescript@1.0.6?dev",
9+
"acorn": "https://esm.sh/*acorn@8.15.0?dev",
10+
"aria-query": "https://esm.sh/*aria-query@5.3.2?dev",
11+
"axobject-query": "https://esm.sh/*axobject-query@4.1.0?dev",
12+
"clsx": "https://esm.sh/*clsx@2.1.1?dev",
13+
"esrap": "https://esm.sh/*esrap@2.1.2?dev",
14+
"esrap/": "https://esm.sh/*esrap@2.1.2&dev/",
15+
"is-reference": "https://esm.sh/*is-reference@3.0.3?dev",
16+
"locate-character": "https://esm.sh/*locate-character@3.0.0?dev",
17+
"magic-string": "https://esm.sh/*magic-string@0.30.21?dev",
18+
"svelte": "https://esm.sh/*svelte@5.43.6?dev",
19+
"svelte/": "https://esm.sh/*svelte@5.43.6&dev/",
20+
"zimmerframe": "https://esm.sh/*zimmerframe@1.1.4?dev"
21+
}
22+
}

‎svelte-5/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Buildless Svelte 5 app</title>
6+
<script type="importmap">
7+
{
8+
"imports": {
9+
"@jridgewell/gen-mapping": "https://esm.sh/*@jridgewell/gen-mapping@0.3.13?dev",
10+
"@jridgewell/remapping": "https://esm.sh/*@jridgewell/remapping@2.3.5?dev",
11+
"@jridgewell/resolve-uri": "https://esm.sh/*@jridgewell/resolve-uri@3.1.2?dev",
12+
"@jridgewell/sourcemap-codec": "https://esm.sh/*@jridgewell/sourcemap-codec@1.5.5?dev",
13+
"@jridgewell/trace-mapping": "https://esm.sh/*@jridgewell/trace-mapping@0.3.31?dev",
14+
"@sveltejs/acorn-typescript": "https://esm.sh/*@sveltejs/acorn-typescript@1.0.6?dev",
15+
"acorn": "https://esm.sh/*acorn@8.15.0?dev",
16+
"aria-query": "https://esm.sh/*aria-query@5.3.2?dev",
17+
"axobject-query": "https://esm.sh/*axobject-query@4.1.0?dev",
18+
"clsx": "https://esm.sh/*clsx@2.1.1?dev",
19+
"esrap": "https://esm.sh/*esrap@2.1.2?dev",
20+
"esrap/": "https://esm.sh/*esrap@2.1.2&dev/",
21+
"is-reference": "https://esm.sh/*is-reference@3.0.3?dev",
22+
"locate-character": "https://esm.sh/*locate-character@3.0.0?dev",
23+
"magic-string": "https://esm.sh/*magic-string@0.30.21?dev",
24+
"svelte": "https://esm.sh/*svelte@5.43.6?dev",
25+
"svelte/": "https://esm.sh/*svelte@5.43.6&dev/",
26+
"zimmerframe": "https://esm.sh/*zimmerframe@1.1.4?dev"
27+
}
28+
}
29+
</script>
30+
<script type="module">
31+
import { mount } from "svelte";
32+
import { compile } from "svelte/compiler";
33+
34+
const source = await fetch("./App.svelte").then((res) => res.text());
35+
const result = compile(source, { generate: "client" });
36+
const { default: App } = await import(
37+
URL.createObjectURL(
38+
new Blob([result.js.code], { type: "text/javascript" }),
39+
)
40+
);
41+
mount(App, { target: document.body });
42+
</script>
43+
</head>
44+
<body></body>
45+
</html>

0 commit comments

Comments
 (0)