chore: regenerate playground demo app with latest sveltekit (#279)

dominikg · web-flow · commit 25de38c42c40 · 2022-02-26T11:12:07.000+08:00
diff --git a/packages/playground/kit-demo-app/.gitignore b/packages/playground/kit-demo-app/.gitignore
@@ -1,4 +1,10 @@
 .DS_Store
 node_modules
+/build
 /.svelte-kit
 /package
+.env
+.env.*
+!.env.example
+.vercel
+.output
diff --git a/packages/playground/kit-demo-app/README.md b/packages/playground/kit-demo-app/README.md
@@ -1,6 +1,6 @@
 # create-svelte
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
 ## Creating a project
 
@@ -29,10 +29,12 @@ npm run dev -- --open
 
 ## Building
 
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+To create a production version of your app:
 
 ```bash
 npm run build
 ```
 
-> 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.
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/packages/playground/kit-demo-app/jsconfig.json b/packages/playground/kit-demo-app/jsconfig.json
@@ -2,6 +2,7 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"paths": {
+			"$lib": ["src/lib"],
 			"$lib/*": ["src/lib/*"]
 		}
 	},
diff --git a/packages/playground/kit-demo-app/package.json b/packages/playground/kit-demo-app/package.json
@@ -5,10 +5,11 @@
   "scripts": {
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
+    "package": "svelte-kit package",
     "preview": "svelte-kit preview"
   },
   "devDependencies": {
-    "@sveltejs/adapter-node": "^1.0.0-next.68",
+    "@sveltejs/adapter-auto": "^1.0.0-next.28",
     "@sveltejs/kit": "^1.0.0-next.278",
     "svelte": "^3.46.4"
   },
@@ -17,5 +18,8 @@
     "@fontsource/fira-mono": "^4.5.3",
     "@lukeed/uuid": "^2.0.0",
     "cookie": "^0.4.2"
+  },
+  "engines": {
+    "node": "^14.13.1 || >=16"
   }
 }
diff --git a/packages/playground/kit-demo-app/src/app.css b/packages/playground/kit-demo-app/src/app.css
@@ -72,7 +72,6 @@ a:hover {
 
 h1 {
 	font-size: 2rem;
-	margin-bottom: 0 0 1em 0;
 	text-align: center;
 }
 
diff --git a/packages/playground/kit-demo-app/src/app.html b/packages/playground/kit-demo-app/src/app.html
@@ -2,12 +2,12 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
+		<meta name="description" content="Svelte demo app" />
+		<link rel="icon" href="%svelte.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-
 		%svelte.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div>%svelte.body%</div>
 	</body>
 </html>
diff --git a/packages/playground/kit-demo-app/src/global.d.ts b/packages/playground/kit-demo-app/src/global.d.ts
diff --git a/packages/playground/kit-demo-app/src/hooks.js b/packages/playground/kit-demo-app/src/hooks.js
@@ -1,21 +1,22 @@
 import cookie from 'cookie';
 import { v4 as uuid } from '@lukeed/uuid';
 
-export const handle = async ({ request, resolve }) => {
-	const cookies = cookie.parse(request.headers.cookie || '');
-	request.locals.userid = cookies.userid || uuid();
+export const handle = async ({ event, resolve }) => {
+	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
+	event.locals.userid = cookies.userid || uuid();
 
-	// TODO https://github.com/sveltejs/kit/issues/1046
-	if (request.query.has('_method')) {
-		request.method = request.query.get('_method').toUpperCase();
-	}
-
-	const response = await resolve(request);
+	const response = await resolve(event);
 
 	if (!cookies.userid) {
 		// if this is the first time the user has visited this app,
 		// set a cookie so that we recognise them when they return
-		response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
+		response.headers.set(
+			'set-cookie',
+			cookie.serialize('userid', event.locals.userid, {
+				path: '/',
+				httpOnly: true
+			})
+		);
 	}
 
 	return response;
diff --git a/packages/playground/kit-demo-app/src/lib/Counter.svelte b/packages/playground/kit-demo-app/src/lib/Counter.svelte
@@ -22,7 +22,7 @@
 
 	<div class="counter-viewport">
 		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
+			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
 			<strong>{Math.floor($displayed_count)}</strong>
 		</div>
 	</div>
@@ -79,13 +79,12 @@
 
 	.counter-viewport strong {
 		position: absolute;
-		display: block;
+		display: flex;
 		width: 100%;
 		height: 100%;
 		font-weight: 400;
 		color: var(--accent-color);
 		font-size: 4rem;
-		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
@@ -95,4 +94,9 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	.hidden {
+		top: -100%;
+		user-select: none;
+	}
 </style>
diff --git a/packages/playground/kit-demo-app/src/lib/form.js b/packages/playground/kit-demo-app/src/lib/form.js
@@ -1,38 +1,44 @@
+import { invalidate } from '$app/navigation';
+
 // this action (https://svelte.dev/tutorial/actions) allows us to
 // progressively enhance a <form> that already works without JS
-export function enhance(form, { pending, error, result }) {
+export function enhance(form, { pending, error, result } = {}) {
 	let current_token;
 
 	async function handle_submit(e) {
 		const token = (current_token = {});
 
 		e.preventDefault();
 
-		const body = new FormData(form);
+		const data = new FormData(form);
 
-		if (pending) pending(body, form);
+		if (pending) pending({ data, form });
 
 		try {
-			const res = await fetch(form.action, {
+			const response = await fetch(form.action, {
 				method: form.method,
 				headers: {
 					accept: 'application/json'
 				},
-				body
+				body: data
 			});
 
 			if (token !== current_token) return;
 
-			if (res.ok) {
-				result(res, form);
+			if (response.ok) {
+				if (result) result({ data, form, response });
+
+				const url = new URL(form.action);
+				url.search = url.hash = '';
+				invalidate(url.href);
 			} else if (error) {
-				error(res, null, form);
+				error({ data, form, error: null, response });
 			} else {
-				console.error(await res.text());
+				console.error(await response.text());
 			}
 		} catch (e) {
 			if (error) {
-				error(null, e, form);
+				error({ data, form, error: e, response: null });
 			} else {
 				throw e;
 			}
diff --git a/packages/playground/kit-demo-app/src/lib/header/Header.svelte b/packages/playground/kit-demo-app/src/lib/header/Header.svelte
@@ -15,9 +15,13 @@
 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
-			<li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-			<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
-			<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
+			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
+			<li class:active={$page.url.pathname === '/about'}>
+				<a sveltekit:prefetch href="/about">About</a>
+			</li>
+			<li class:active={$page.url.pathname === '/todos'}>
+				<a sveltekit:prefetch href="/todos">Todos</a>
+			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
@@ -109,7 +113,7 @@
 		font-weight: 700;
 		font-size: 0.8rem;
 		text-transform: uppercase;
-		letter-spacing: 10%;
+		letter-spacing: 0.1em;
 		text-decoration: none;
 		transition: color 0.2s linear;
 	}
diff --git a/packages/playground/kit-demo-app/src/lib/header/svelte-logo.svg b/packages/playground/kit-demo-app/src/lib/header/svelte-logo.svg
diff --git a/packages/playground/kit-demo-app/src/routes/__layout.svelte b/packages/playground/kit-demo-app/src/routes/__layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Header from '$lib/Header/index.svelte';
+	import Header from '$lib/header/Header.svelte';
 	import '../app.css';
 </script>
 
diff --git a/packages/playground/kit-demo-app/src/routes/index.svelte b/packages/playground/kit-demo-app/src/routes/index.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script>
-	import Counter from '$lib/Counter/index.svelte';
+	import Counter from '$lib/Counter.svelte';
 </script>
 
 <svelte:head>
diff --git a/packages/playground/kit-demo-app/src/routes/todos/[uid].json.js b/packages/playground/kit-demo-app/src/routes/todos/[uid].json.js
diff --git a/packages/playground/kit-demo-app/src/routes/todos/_api.js b/packages/playground/kit-demo-app/src/routes/todos/_api.js
@@ -1,6 +1,6 @@
 /*
-	This module is used by the /todos.json and /todos/[uid].json
-	endpoints to make calls to api.svelte.dev, which stores todos
+	This module is used by the /todos endpoint to
+	make calls to api.svelte.dev, which stores todos
 	for each user. The leading underscore indicates that this is
 	a private module, _not_ an endpoint — visiting /todos/_api
 	will net you a 404 response.
@@ -11,35 +11,12 @@
 
 const base = 'https://api.svelte.dev';
 
-export async function api(request, resource, data) {
-	// user must have a cookie set
-	if (!request.locals.userid) {
-		return { status: 401 };
-	}
-
-	const res = await fetch(`${base}/${resource}`, {
-		method: request.method,
+export function api(method, resource, data) {
+	return fetch(`${base}/${resource}`, {
+		method,
 		headers: {
 			'content-type': 'application/json'
 		},
 		body: data && JSON.stringify(data)
 	});
-
-	// if the request came from a <form> submission, the browser's default
-	// behaviour is to show the URL corresponding to the form's "action"
-	// attribute. in those cases, we want to redirect them back to the
-	// /todos page, rather than showing the response
-	if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') {
-		return {
-			status: 303,
-			headers: {
-				location: '/todos'
-			}
-		};
-	}
-
-	return {
-		status: res.status,
-		body: await res.json()
-	};
 }
diff --git a/packages/playground/kit-demo-app/src/routes/todos/index.js b/packages/playground/kit-demo-app/src/routes/todos/index.js
@@ -0,0 +1,66 @@
+import { api } from './_api';
+
+export const get = async ({ locals }) => {
+	// locals.userid comes from src/hooks.js
+	const response = await api('get', `todos/${locals.userid}`);
+
+	if (response.status === 404) {
+		// user hasn't created a todo list.
+		// start with an empty array
+		return {
+			body: {
+				todos: []
+			}
+		};
+	}
+
+	if (response.status === 200) {
+		return {
+			body: {
+				todos: await response.json()
+			}
+		};
+	}
+
+	return {
+		status: response.status
+	};
+};
+
+export const post = async ({ request, locals }) => {
+	const form = await request.formData();
+
+	await api('post', `todos/${locals.userid}`, {
+		text: form.get('text')
+	});
+
+	return {};
+};
+
+// If the user has JavaScript disabled, the URL will change to
+// include the method override unless we redirect back to /todos
+const redirect = {
+	status: 303,
+	headers: {
+		location: '/todos'
+	}
+};
+
+export const patch = async ({ request, locals }) => {
+	const form = await request.formData();
+
+	await api('patch', `todos/${locals.userid}/${form.get('uid')}`, {
+		text: form.has('text') ? form.get('text') : undefined,
+		done: form.has('done') ? !!form.get('done') : undefined
+	});
+
+	return redirect;
+};
+
+export const del = async ({ request, locals }) => {
+	const form = await request.formData();
+
+	await api('delete', `todos/${locals.userid}/${form.get('uid')}`);
+
+	return redirect;
+};
diff --git a/packages/playground/kit-demo-app/src/routes/todos/index.json.js b/packages/playground/kit-demo-app/src/routes/todos/index.json.js
diff --git a/packages/playground/kit-demo-app/src/routes/todos/index.svelte b/packages/playground/kit-demo-app/src/routes/todos/index.svelte
diff --git a/packages/playground/kit-demo-app/svelte.config.js b/packages/playground/kit-demo-app/svelte.config.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`"compilerOptions": {`
`3`	`3`	`"baseUrl": ".",`
`4`	`4`	`"paths": {`
	`5`	`+ "$lib": ["src/lib"],`
`5`	`6`	`"$lib/": ["src/lib/"]`
`6`	`7`	`}`
`7`	`8`	`},`
Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,6 @@ a:hover {`
`72`	`72`
`73`	`73`	`h1 {`
`74`	`74`	`font-size: 2rem;`
`75`		`- margin-bottom: 0 0 1em 0;`
`76`	`75`	`text-align: center;`
`77`	`76`	`}`
`78`	`77`