Skip to content

Commit aea3da2

Browse files
metonymmetonym
authored
Upgrade SvelteKit and resolve breaking changes (#5)
* Remove deprecated "target" option from svelte.config.js * Update hooks signature to use event instead of request
1 parent 90645c1 commit aea3da2

File tree

10 files changed

+77
-56
lines changed

10 files changed

+77
-56
lines changed

‎package-lock.json

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

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

‎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.url.searchParams.has('_method')) {
10-
request.method = request.url.searchParams.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;

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

‎src/lib/header/Header.svelte

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@
1616
</svg>
1717
<ul>
1818
<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
19-
<li class:active={$page.url.pathname === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
20-
<li class:active={$page.url.pathname === '/todos'}><a sveltekit:prefetch href="/todos">Todos</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
}

‎src/routes/todos/[uid].json.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { api } from './_api';
22

33
// PATCH /todos/:uid.json
4-
export const patch = async (request) => {
5-
return api(request, `todos/${request.locals.userid}/${request.params.uid}`, {
6-
text: request.body.get('text'),
7-
done: request.body.has('done') ? !!request.body.get('done') : undefined
4+
export const patch = async (event) => {
5+
const data = await event.request.formData();
6+
7+
return api(event, `todos/${event.locals.userid}/${event.params.uid}`, {
8+
text: data.get('text'),
9+
done: data.has('done') ? !!data.get('done') : undefined
810
});
911
};
1012

1113
// DELETE /todos/:uid.json
12-
export const del = async (request) => {
13-
return api(request, `todos/${request.locals.userid}/${request.params.uid}`);
14+
export const del = async (event) => {
15+
return api(event, `todos/${event.locals.userid}/${event.params.uid}`);
1416
};

‎src/routes/todos/_api.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111

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

14-
export async function api(request, resource, data) {
14+
export async function api(event, resource, data) {
1515
// user must have a cookie set
16-
if (!request.locals.userid) {
16+
if (!event.locals.userid) {
1717
return { status: 401 };
1818
}
1919

2020
const res = await fetch(`${base}/${resource}`, {
21-
method: request.method,
21+
method: event.request.method,
2222
headers: {
2323
'content-type': 'application/json'
2424
},
@@ -29,7 +29,11 @@ export async function api(request, resource, data) {
2929
// behaviour is to show the URL corresponding to the form's "action"
3030
// attribute. in those cases, we want to redirect them back to the
3131
// /todos page, rather than showing the response
32-
if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') {
32+
if (
33+
res.ok &&
34+
event.request.method !== 'GET' &&
35+
event.request.headers.get('accept') !== 'application/json'
36+
) {
3337
return {
3438
status: 303,
3539
headers: {

‎src/routes/todos/index.json.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { api } from './_api';
22

33
// GET /todos.json
4-
export const get = async (request) => {
5-
// request.locals.userid comes from src/hooks.js
6-
const response = await api(request, `todos/${request.locals.userid}`);
4+
export const get = async (event) => {
5+
// event.locals.userid comes from src/hooks.js
6+
const response = await api(event, `todos/${event.locals.userid}`);
77

88
if (response.status === 404) {
99
// user hasn't created a todo list.
@@ -15,13 +15,15 @@ export const get = async (request) => {
1515
};
1616

1717
// POST /todos.json
18-
export const post = async (request) => {
19-
const response = await api(request, `todos/${request.locals.userid}`, {
18+
export const post = async (event) => {
19+
const data = await event.request.formData();
20+
21+
const response = await api(event, `todos/${event.locals.userid}`, {
2022
// because index.svelte posts a FormData object,
2123
// request.body is _also_ a (readonly) FormData
2224
// object, which allows us to get form data
2325
// with the `body.get(key)` method
24-
text: request.body.get('text')
26+
text: data.get('text')
2527
});
2628

2729
return response;

‎src/routes/todos/index.svelte

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
animate:flip={{ duration: 200 }}
6969
>
7070
<form
71-
action="/todos/{todo.uid}.json?_method=patch"
71+
action="/todos/{todo.uid}.json?_method=PATCH"
7272
method="post"
7373
use:enhance={{
7474
pending: (data) => {
@@ -83,7 +83,7 @@
8383

8484
<form
8585
class="text"
86-
action="/todos/{todo.uid}.json?_method=patch"
86+
action="/todos/{todo.uid}.json?_method=PATCH"
8787
method="post"
8888
use:enhance={{
8989
result: patch
@@ -94,15 +94,16 @@
9494
</form>
9595

9696
<form
97-
action="/todos/{todo.uid}.json?_method=delete"
97+
action="/todos/{todo.uid}.json?_method=DELETE"
9898
method="post"
9999
use:enhance={{
100+
pending: () => (todo.pending_delete = true),
100101
result: () => {
101102
todos = todos.filter((t) => t.uid !== todo.uid);
102103
}
103104
}}
104105
>
105-
<button class="delete" aria-label="Delete todo" />
106+
<button class="delete" aria-label="Delete todo" disabled={todo.pending_delete} />
106107
</form>
107108
</div>
108109
{/each}

‎svelte.config.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ import node from '@sveltejs/adapter-node';
44

55
const config = {
66
kit: {
7-
// hydrate the <div id="svelte"> element in src/app.html
8-
target: '#svelte',
9-
adapter: node()
7+
adapter: node(),
8+
9+
// Override http methods in the Todo forms
10+
methodOverride: {
11+
allowed: ['PATCH', 'DELETE']
12+
}
1013
}
1114
};
1215

0 commit comments

Comments
 (0)