Skip to content

Commit 25de38c

Browse files
dominikgdominikg
authored
chore: regenerate playground demo app with latest sveltekit (#279)
1 parent 9539daa commit 25de38c

21 files changed

+205
-164
lines changed

‎packages/playground/kit-demo-app/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
.DS_Store
22
node_modules
3+
/build
34
/.svelte-kit
45
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
.vercel
10+
.output

‎packages/playground/kit-demo-app/README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# create-svelte
22

3-
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
3+
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
44

55
## Creating a project
66

@@ -29,10 +29,12 @@ npm run dev -- --open
2929

3030
## Building
3131

32-
Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
32+
To create a production version of your app:
3333

3434
```bash
3535
npm run build
3636
```
3737

38-
> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
38+
You can preview the production build with `npm run preview`.
39+
40+
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

‎packages/playground/kit-demo-app/jsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"compilerOptions": {
33
"baseUrl": ".",
44
"paths": {
5+
"$lib": ["src/lib"],
56
"$lib/*": ["src/lib/*"]
67
}
78
},

‎packages/playground/kit-demo-app/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
"scripts": {
66
"dev": "svelte-kit dev",
77
"build": "svelte-kit build",
8+
"package": "svelte-kit package",
89
"preview": "svelte-kit preview"
910
},
1011
"devDependencies": {
11-
"@sveltejs/adapter-node": "^1.0.0-next.68",
12+
"@sveltejs/adapter-auto": "^1.0.0-next.28",
1213
"@sveltejs/kit": "^1.0.0-next.278",
1314
"svelte": "^3.46.4"
1415
},
@@ -17,5 +18,8 @@
1718
"@fontsource/fira-mono": "^4.5.3",
1819
"@lukeed/uuid": "^2.0.0",
1920
"cookie": "^0.4.2"
21+
},
22+
"engines": {
23+
"node": "^14.13.1 || >=16"
2024
}
2125
}

‎packages/playground/kit-demo-app/src/app.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ a:hover {
7272

7373
h1 {
7474
font-size: 2rem;
75-
margin-bottom: 0 0 1em 0;
7675
text-align: center;
7776
}
7877

‎packages/playground/kit-demo-app/src/app.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="/favicon.png" />
5+
<meta name="description" content="Svelte demo app" />
6+
<link rel="icon" href="%svelte.assets%/favicon.png" />
67
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
88
%svelte.head%
99
</head>
1010
<body>
11-
<div id="svelte">%svelte.body%</div>
11+
<div>%svelte.body%</div>
1212
</body>
1313
</html>

‎packages/playground/kit-demo-app/src/global.d.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/playground/kit-demo-app/src/hooks.js

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import cookie from 'cookie';
22
import { v4 as uuid } from '@lukeed/uuid';
33

4-
export const handle = async ({ request, resolve }) => {
5-
const cookies = cookie.parse(request.headers.cookie || '');
6-
request.locals.userid = cookies.userid || uuid();
4+
export const handle = async ({ event, resolve }) => {
5+
const cookies = cookie.parse(event.request.headers.get('cookie') || '');
6+
event.locals.userid = cookies.userid || uuid();
77

8-
// TODO https://github.com/sveltejs/kit/issues/1046
9-
if (request.query.has('_method')) {
10-
request.method = request.query.get('_method').toUpperCase();
11-
}
12-
13-
const response = await resolve(request);
8+
const response = await resolve(event);
149

1510
if (!cookies.userid) {
1611
// if this is the first time the user has visited this app,
1712
// set a cookie so that we recognise them when they return
18-
response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
13+
response.headers.set(
14+
'set-cookie',
15+
cookie.serialize('userid', event.locals.userid, {
16+
path: '/',
17+
httpOnly: true
18+
})
19+
);
1920
}
2021

2122
return response;

‎packages/playground/kit-demo-app/src/lib/Counter/index.svelte renamed to ‎packages/playground/kit-demo-app/src/lib/Counter.svelte

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<div class="counter-viewport">
2424
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
25-
<strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
25+
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
2626
<strong>{Math.floor($displayed_count)}</strong>
2727
</div>
2828
</div>
@@ -79,13 +79,12 @@
7979
8080
.counter-viewport strong {
8181
position: absolute;
82-
display: block;
82+
display: flex;
8383
width: 100%;
8484
height: 100%;
8585
font-weight: 400;
8686
color: var(--accent-color);
8787
font-size: 4rem;
88-
display: flex;
8988
align-items: center;
9089
justify-content: center;
9190
}
@@ -95,4 +94,9 @@
9594
width: 100%;
9695
height: 100%;
9796
}
97+
98+
.hidden {
99+
top: -100%;
100+
user-select: none;
101+
}
98102
</style>

‎packages/playground/kit-demo-app/src/lib/form.js

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,44 @@
1+
import { invalidate } from '$app/navigation';
2+
13
// this action (https://svelte.dev/tutorial/actions) allows us to
24
// progressively enhance a <form> that already works without JS
3-
export function enhance(form, { pending, error, result }) {
5+
export function enhance(form, { pending, error, result } = {}) {
46
let current_token;
57

68
async function handle_submit(e) {
79
const token = (current_token = {});
810

911
e.preventDefault();
1012

11-
const body = new FormData(form);
13+
const data = new FormData(form);
1214

13-
if (pending) pending(body, form);
15+
if (pending) pending({ data, form });
1416

1517
try {
16-
const res = await fetch(form.action, {
18+
const response = await fetch(form.action, {
1719
method: form.method,
1820
headers: {
1921
accept: 'application/json'
2022
},
21-
body
23+
body: data
2224
});
2325

2426
if (token !== current_token) return;
2527

26-
if (res.ok) {
27-
result(res, form);
28+
if (response.ok) {
29+
if (result) result({ data, form, response });
30+
31+
const url = new URL(form.action);
32+
url.search = url.hash = '';
33+
invalidate(url.href);
2834
} else if (error) {
29-
error(res, null, form);
35+
error({ data, form, error: null, response });
3036
} else {
31-
console.error(await res.text());
37+
console.error(await response.text());
3238
}
3339
} catch (e) {
3440
if (error) {
35-
error(null, e, form);
41+
error({ data, form, error: e, response: null });
3642
} else {
3743
throw e;
3844
}

‎packages/playground/kit-demo-app/src/lib/Header/index.svelte renamed to ‎packages/playground/kit-demo-app/src/lib/header/Header.svelte

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,13 @@
1515
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
1616
</svg>
1717
<ul>
18-
<li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
19-
<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
20-
<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
18+
<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
19+
<li class:active={$page.url.pathname === '/about'}>
20+
<a sveltekit:prefetch href="/about">About</a>
21+
</li>
22+
<li class:active={$page.url.pathname === '/todos'}>
23+
<a sveltekit:prefetch href="/todos">Todos</a>
24+
</li>
2125
</ul>
2226
<svg viewBox="0 0 2 3" aria-hidden="true">
2327
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
@@ -109,7 +113,7 @@
109113
font-weight: 700;
110114
font-size: 0.8rem;
111115
text-transform: uppercase;
112-
letter-spacing: 10%;
116+
letter-spacing: 0.1em;
113117
text-decoration: none;
114118
transition: color 0.2s linear;
115119
}

‎packages/playground/kit-demo-app/src/lib/Header/svelte-logo.svg renamed to ‎packages/playground/kit-demo-app/src/lib/header/svelte-logo.svg

File renamed without changes.

‎packages/playground/kit-demo-app/src/routes/__layout.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import Header from '$lib/Header/index.svelte';
2+
import Header from '$lib/header/Header.svelte';
33
import '../app.css';
44
</script>
55

‎packages/playground/kit-demo-app/src/routes/index.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</script>
44

55
<script>
6-
import Counter from '$lib/Counter/index.svelte';
6+
import Counter from '$lib/Counter.svelte';
77
</script>
88

99
<svelte:head>

‎packages/playground/kit-demo-app/src/routes/todos/[uid].json.js

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

‎packages/playground/kit-demo-app/src/routes/todos/_api.js

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
2-
This module is used by the /todos.json and /todos/[uid].json
3-
endpoints to make calls to api.svelte.dev, which stores todos
2+
This module is used by the /todos endpoint to
3+
make calls to api.svelte.dev, which stores todos
44
for each user. The leading underscore indicates that this is
55
a private module, _not_ an endpoint — visiting /todos/_api
66
will net you a 404 response.
@@ -11,35 +11,12 @@
1111

1212
const base = 'https://api.svelte.dev';
1313

14-
export async function api(request, resource, data) {
15-
// user must have a cookie set
16-
if (!request.locals.userid) {
17-
return { status: 401 };
18-
}
19-
20-
const res = await fetch(`${base}/${resource}`, {
21-
method: request.method,
14+
export function api(method, resource, data) {
15+
return fetch(`${base}/${resource}`, {
16+
method,
2217
headers: {
2318
'content-type': 'application/json'
2419
},
2520
body: data && JSON.stringify(data)
2621
});
27-
28-
// if the request came from a <form> submission, the browser's default
29-
// behaviour is to show the URL corresponding to the form's "action"
30-
// attribute. in those cases, we want to redirect them back to the
31-
// /todos page, rather than showing the response
32-
if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') {
33-
return {
34-
status: 303,
35-
headers: {
36-
location: '/todos'
37-
}
38-
};
39-
}
40-
41-
return {
42-
status: res.status,
43-
body: await res.json()
44-
};
4522
}

‎packages/playground/kit-demo-app/src/routes/todos/index.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { api } from './_api';
2+
3+
export const get = async ({ locals }) => {
4+
// locals.userid comes from src/hooks.js
5+
const response = await api('get', `todos/${locals.userid}`);
6+
7+
if (response.status === 404) {
8+
// user hasn't created a todo list.
9+
// start with an empty array
10+
return {
11+
body: {
12+
todos: []
13+
}
14+
};
15+
}
16+
17+
if (response.status === 200) {
18+
return {
19+
body: {
20+
todos: await response.json()
21+
}
22+
};
23+
}
24+
25+
return {
26+
status: response.status
27+
};
28+
};
29+
30+
export const post = async ({ request, locals }) => {
31+
const form = await request.formData();
32+
33+
await api('post', `todos/${locals.userid}`, {
34+
text: form.get('text')
35+
});
36+
37+
return {};
38+
};
39+
40+
// If the user has JavaScript disabled, the URL will change to
41+
// include the method override unless we redirect back to /todos
42+
const redirect = {
43+
status: 303,
44+
headers: {
45+
location: '/todos'
46+
}
47+
};
48+
49+
export const patch = async ({ request, locals }) => {
50+
const form = await request.formData();
51+
52+
await api('patch', `todos/${locals.userid}/${form.get('uid')}`, {
53+
text: form.has('text') ? form.get('text') : undefined,
54+
done: form.has('done') ? !!form.get('done') : undefined
55+
});
56+
57+
return redirect;
58+
};
59+
60+
export const del = async ({ request, locals }) => {
61+
const form = await request.formData();
62+
63+
await api('delete', `todos/${locals.userid}/${form.get('uid')}`);
64+
65+
return redirect;
66+
};

0 commit comments

Comments
 (0)