From 54dcbd126e8dfdf00988ac773929935d290f7c79 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 20 Dec 2020 17:34:08 -0500
Subject: [PATCH 01/28] store user info in JWT. yeah, yeah, i know

---
 examples/realworld.svelte.dev/package.json    |  1 +
 .../src/routes/auth/_respond.js               | 15 ++++++++++
 .../src/routes/auth/login.js                  | 16 ++++++-----
 .../src/routes/auth/logout.js                 | 14 +++++++---
 .../src/routes/auth/register.js               | 18 ++++++------
 .../src/routes/auth/save.js                   | 28 ++++++++++++-------
 .../src/routes/auth/user.js                   |  5 ----
 .../realworld.svelte.dev/src/setup/index.js   | 26 +++++++++++++----
 pnpm-lock.yaml                                |  8 ++++++
 9 files changed, 90 insertions(+), 41 deletions(-)
 create mode 100644 examples/realworld.svelte.dev/src/routes/auth/_respond.js
 delete mode 100644 examples/realworld.svelte.dev/src/routes/auth/user.js

diff --git a/examples/realworld.svelte.dev/package.json b/examples/realworld.svelte.dev/package.json
index 55026c6a30aa..b6fa33501ff1 100644
--- a/examples/realworld.svelte.dev/package.json
+++ b/examples/realworld.svelte.dev/package.json
@@ -15,6 +15,7 @@
 		"svelte": "^3.29.0"
 	},
 	"dependencies": {
+		"cookie": "^0.4.1",
 		"node-fetch": "^2.6.1"
 	}
 }
diff --git a/examples/realworld.svelte.dev/src/routes/auth/_respond.js b/examples/realworld.svelte.dev/src/routes/auth/_respond.js
new file mode 100644
index 000000000000..7fc8702a4a4c
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/auth/_respond.js
@@ -0,0 +1,15 @@
+export function respond(body) {
+	if (body.errors) {
+		return { status: 401, body };
+	}
+
+	const json = JSON.stringify(body.user);
+	const value = Buffer(json).toString('base64');
+
+	return {
+		headers: {
+			'set-cookie': `jwt=${value}; Path=/; HttpOnly`
+		},
+		body
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/auth/login.js b/examples/realworld.svelte.dev/src/routes/auth/login.js
index 025e9afa3777..b924db56471a 100644
--- a/examples/realworld.svelte.dev/src/routes/auth/login.js
+++ b/examples/realworld.svelte.dev/src/routes/auth/login.js
@@ -1,11 +1,13 @@
 import * as api from '$common/api.js';
+import { respond } from './_respond';
 
-export async function post({ body }) {
-	const response = await api.post('users/login', {
-		user: body
+export async function post(request) {
+	const body = await api.post('users/login', {
+		user: {
+			email: request.body.email,
+			password: request.body.password
+		}
 	});
 
-	return {
-		body: response
-	};
-}
\ No newline at end of file
+	return respond(body);
+}
diff --git a/examples/realworld.svelte.dev/src/routes/auth/logout.js b/examples/realworld.svelte.dev/src/routes/auth/logout.js
index 9285627c4b8c..f1c3b2fb9ae8 100644
--- a/examples/realworld.svelte.dev/src/routes/auth/logout.js
+++ b/examples/realworld.svelte.dev/src/routes/auth/logout.js
@@ -1,4 +1,10 @@
-export function post(req, res) {
-	delete req.session.user;
-	res.end(JSON.stringify({ ok: true }));
-}
\ No newline at end of file
+export function post() {
+	return {
+		headers: {
+			'set-cookie': 'jwt=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
+		},
+		body: {
+			ok: true
+		}
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/auth/register.js b/examples/realworld.svelte.dev/src/routes/auth/register.js
index 9774dd81a256..a6df6659043d 100644
--- a/examples/realworld.svelte.dev/src/routes/auth/register.js
+++ b/examples/realworld.svelte.dev/src/routes/auth/register.js
@@ -1,15 +1,13 @@
 import * as api from '$common/api.js';
+import { respond } from './_respond';
 
-export function post(req, res) {
-	const user = req.body;
+export async function post(request) {
+	const user = request.body;
 
-	api.post('users', { user }).then(response => {
-		if (response.user) {
-			req.session.user = response.user;
-		}
+	// TODO individual properties
+	console.log('user', user);
 
-		res.setHeader('Content-Type', 'application/json');
+	const body = await api.post('users', { user });
 
-		res.end(JSON.stringify(response));
-	});
-}
\ No newline at end of file
+	return respond(body);
+}
diff --git a/examples/realworld.svelte.dev/src/routes/auth/save.js b/examples/realworld.svelte.dev/src/routes/auth/save.js
index 51fe7eb4bea4..3fc529b5df49 100644
--- a/examples/realworld.svelte.dev/src/routes/auth/save.js
+++ b/examples/realworld.svelte.dev/src/routes/auth/save.js
@@ -1,15 +1,23 @@
 import * as api from '$common/api.js';
+import { respond } from './_respond';
 
-export function post(req, res) {
-	const user = req.body;
+export async function post(request, context) {
+	const user = request.body;
 
-	api.put('user', { user }, req.session.user && req.session.user.token).then(response => {
-		if (response.user) {
-			req.session.user = response.user;
-		}
+	if (!context.user) {
+		return {
+			status: 401
+		};
+	}
 
-		res.setHeader('Content-Type', 'application/json');
+	const { token } = context.user;
+	const body = await api.put(
+		'user',
+		{
+			user // TODO individual properties
+		},
+		token
+	);
 
-		res.end(JSON.stringify(response));
-	});
-}
\ No newline at end of file
+	return respond(body);
+}
diff --git a/examples/realworld.svelte.dev/src/routes/auth/user.js b/examples/realworld.svelte.dev/src/routes/auth/user.js
deleted file mode 100644
index dcbe9cbcb79b..000000000000
--- a/examples/realworld.svelte.dev/src/routes/auth/user.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export function get(req, res) {
-	res.setHeader('Content-Type', 'application/json');
-
-	res.end(JSON.stringify({ user: req.session.user || null }));
-}
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/setup/index.js b/examples/realworld.svelte.dev/src/setup/index.js
index e0b5412cbcaf..32c83810c1dd 100644
--- a/examples/realworld.svelte.dev/src/setup/index.js
+++ b/examples/realworld.svelte.dev/src/setup/index.js
@@ -1,12 +1,28 @@
+import * as cookie from 'cookie';
+
 export function prepare(headers) {
-	// TODO
+	const cookies = cookie.parse(headers.cookie);
+	const jwt = cookies.jwt && Buffer(cookies.jwt, 'base64').toString('utf-8');
+
 	return {
-		context: {},
+		context: {
+			user: jwt && JSON.parse(jwt)
+		},
 		headers: {}
 	};
 }
 
 export function getSession(context) {
-	// TODO
-	return context;
-}
\ No newline at end of file
+	if (context.user) {
+		const { email, username, bio, image } = context.user;
+
+		return {
+			user: {
+				email,
+				username,
+				bio,
+				image
+			}
+		};
+	}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b09f38f26c9..654236953123 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,6 +45,7 @@ importers:
       svelte: ^3.29.0
   examples/realworld.svelte.dev:
     dependencies:
+      cookie: 0.4.1
       node-fetch: 2.6.1
     devDependencies:
       '@sveltejs/adapter-node': 'link:../../packages/adapter-node'
@@ -56,6 +57,7 @@ importers:
       '@sveltejs/adapter-node': 'workspace:*'
       '@sveltejs/kit': 'workspace:*'
       '@sveltejs/snowpack-config': 'workspace:*'
+      cookie: ^0.4.1
       marked: ^1.2.2
       node-fetch: ^2.6.1
       svelte: ^3.29.0
@@ -1468,6 +1470,12 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
+  /cookie/0.4.1:
+    dev: false
+    engines:
+      node: '>= 0.6'
+    resolution:
+      integrity: sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
   /cosmiconfig/7.0.0:
     dependencies:
       '@types/parse-json': 4.0.0

From f99169b9b4b3deaab28a67c4b6ff520a968aeadf Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 10:55:18 -0500
Subject: [PATCH 02/28] use prefetching promise if available, reload on query
 change

---
 packages/kit/src/runtime/internal/renderer/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/kit/src/runtime/internal/renderer/index.js b/packages/kit/src/runtime/internal/renderer/index.js
index 49757de62fae..1c42d84a8f0b 100644
--- a/packages/kit/src/runtime/internal/renderer/index.js
+++ b/packages/kit/src/runtime/internal/renderer/index.js
@@ -135,7 +135,10 @@ export class Renderer {
 
 		this.stores.navigating.set(true);
 
-		const hydrated = await this.hydrate(selected);
+		const hydrated =
+			this.prefetching.href === selected.href
+				? await this.prefetching.promise
+				: await this.hydrate(selected);
 
 		if (this.token === token) {
 			// check render wasn't aborted
@@ -332,7 +335,7 @@ export class Renderer {
 				}
 			});
 
-			if (!this.current || state.path !== this.current.path) {
+			if (!this.current || changed.query || state.path !== this.current.path) {
 				props.page = page;
 			}
 		} catch (error) {

From c7efcb7f521cc906ebe03fa040a8fc489190156d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 10:55:40 -0500
Subject: [PATCH 03/28] inject credentials in server-side fetch

---
 packages/kit/package.json             |  1 +
 packages/kit/src/renderer/endpoint.js | 12 ++-----
 packages/kit/src/renderer/index.js    |  8 +++--
 packages/kit/src/renderer/page.js     | 47 +++++++++++++++++++++++++--
 packages/kit/src/renderer/utils.js    |  7 ++++
 5 files changed, 60 insertions(+), 15 deletions(-)
 create mode 100644 packages/kit/src/renderer/utils.js

diff --git a/packages/kit/package.json b/packages/kit/package.json
index a99a679d107d..51437328f9b1 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -18,6 +18,7 @@
 		"@types/rimraf": "^3.0.0",
 		"@types/sade": "^1.7.2",
 		"amphtml-validator": "^1.0.33",
+		"cookie": "^0.4.1",
 		"eslint": "^7.14.0",
 		"esm": "^3.2.25",
 		"estree-walker": "^2.0.1",
diff --git a/packages/kit/src/renderer/endpoint.js b/packages/kit/src/renderer/endpoint.js
index 088ec399e645..73f2efb3daf2 100644
--- a/packages/kit/src/renderer/endpoint.js
+++ b/packages/kit/src/renderer/endpoint.js
@@ -1,3 +1,5 @@
+import { normalize_headers } from './utils';
+
 export default function render_route(request, context, options) {
 	const route = options.manifest.endpoints.find((route) => route.pattern.test(request.path));
 	if (!route) return null;
@@ -36,7 +38,7 @@ export default function render_route(request, context, options) {
 
 				let { status = 200, body, headers = {} } = response;
 
-				headers = lowercase_keys(headers);
+				headers = normalize_headers(headers);
 
 				if (
 					(typeof body === 'object' && !('content-type' in headers)) ||
@@ -63,11 +65,3 @@ export default function render_route(request, context, options) {
 		}
 	});
 }
-
-function lowercase_keys(obj) {
-	const clone = {};
-	for (const key in obj) {
-		clone[key.toLowerCase()] = obj[key];
-	}
-	return clone;
-}
diff --git a/packages/kit/src/renderer/index.js b/packages/kit/src/renderer/index.js
index a0bf22df0d2b..95261eb2c3c0 100644
--- a/packages/kit/src/renderer/index.js
+++ b/packages/kit/src/renderer/index.js
@@ -1,6 +1,7 @@
 import { createHash } from 'crypto';
 import render_page from './page';
 import render_endpoint from './endpoint';
+import { normalize_headers } from './utils';
 
 function md5(body) {
 	return createHash('md5').update(body).digest('hex');
@@ -18,12 +19,13 @@ export async function render(request, options) {
 		};
 	}
 
-	const { context, headers = {} } =
-		(await (options.setup.prepare && options.setup.prepare(request.headers))) || {};
+	const prepared = (await (options.setup.prepare && options.setup.prepare(request.headers))) || {};
+	const context = prepared.context;
+	const headers = normalize_headers(prepared.headers);
 
 	try {
 		const response = await (render_endpoint(request, context, options) ||
-			render_page(request, context, options));
+			render_page(request, context, options, headers));
 
 		if (response) {
 			// inject ETags for 200 responses
diff --git a/packages/kit/src/renderer/page.js b/packages/kit/src/renderer/page.js
index b1ce8193b3c6..62eb82a9095d 100644
--- a/packages/kit/src/renderer/page.js
+++ b/packages/kit/src/renderer/page.js
@@ -1,10 +1,19 @@
 import devalue from 'devalue';
 import fetch, { Response } from 'node-fetch';
 import { writable } from 'svelte/store';
+import * as cookie from 'cookie';
 import { parse, resolve, URLSearchParams } from 'url';
 import { render } from './index';
 
-async function get_response({ request, options, $session, route, status = 200, error }) {
+async function get_response({
+	request,
+	options,
+	response_headers,
+	$session,
+	route,
+	status = 200,
+	error
+}) {
 	const host = options.host || request.headers[options.host_header];
 
 	const dependencies = {};
@@ -64,11 +73,41 @@ async function get_response({ request, options, $session, route, status = 200, e
 			}
 
 			if (!response) {
+				const headers = opts.headers ? { ...opts.headers } : {};
+
+				if (opts.credentials !== 'omit') {
+					const cookies = Object.assign(
+						{},
+						cookie.parse(request.headers.cookie || ''),
+						cookie.parse(headers.cookie || '')
+					);
+
+					// In some cases, a cookie might be set in `src/setup.js`, in which
+					// case we need to honour it if a credentialled fetch is made immediately
+					const set_cookie = response_headers['set-cookie'];
+					if (set_cookie) {
+						set_cookie.split(', ').forEach((s) => {
+							const m = /([^=]+)=([^;]+)/.exec(s);
+							if (m) cookies[m[1]] = m[2];
+						});
+					}
+
+					const str = Object.keys(cookies)
+						.map((key) => `${key}=${cookies[key]}`)
+						.join('; ');
+
+					headers.cookie = str;
+
+					if (!headers.authorization && request.headers.authorization) {
+						headers.authorization = request.headers.authorization;
+					}
+				}
+
 				const rendered = await render(
 					{
 						host: request.host,
 						method: opts.method || 'GET',
-						headers: opts.headers || {}, // TODO inject credentials...
+						headers,
 						path: resolved,
 						body: opts.body,
 						query: new URLSearchParams(parsed.query || '')
@@ -262,7 +301,7 @@ async function get_response({ request, options, $session, route, status = 200, e
 	};
 }
 
-export default async function render_page(request, context, options) {
+export default async function render_page(request, context, options, response_headers) {
 	const route = options.manifest.pages.find((route) => route.pattern.test(request.path));
 
 	const $session = await (options.setup.getSession && options.setup.getSession(context));
@@ -277,6 +316,7 @@ export default async function render_page(request, context, options) {
 		return await get_response({
 			request,
 			options,
+			response_headers,
 			$session,
 			route,
 			status: 200,
@@ -291,6 +331,7 @@ export default async function render_page(request, context, options) {
 			return await get_response({
 				request,
 				options,
+				response_headers,
 				$session,
 				route,
 				status,
diff --git a/packages/kit/src/renderer/utils.js b/packages/kit/src/renderer/utils.js
new file mode 100644
index 000000000000..a908a89d381d
--- /dev/null
+++ b/packages/kit/src/renderer/utils.js
@@ -0,0 +1,7 @@
+export function normalize_headers(headers) {
+	const normalized = {};
+	for (const key in headers) {
+		normalized[key.toLowerCase()] = headers[key];
+	}
+	return normalized;
+}

From e003e75c9f631ab4dcaeb63217db4981bc336e51 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 10:56:14 -0500
Subject: [PATCH 04/28] start updating realworld example

---
 .../realworld.svelte.dev/src/common/api.js    |  13 +--
 .../src/common/constants.js                   |   1 +
 .../ArticleList/ListPagination.svelte         |  26 -----
 .../src/components/ArticleList/index.svelte   |  57 ++--------
 .../src/components/Home.svelte                |  47 --------
 .../src/components/MainView/index.svelte      |  54 ----------
 .../src/components/Nav.svelte                 |  28 +++--
 .../src/components/Pagination.svelte          |  24 +++++
 .../src/components/Tags.svelte                |  18 ----
 .../src/routes/articles.json.js               |  31 ++++++
 .../src/routes/auth/_respond.js               |   2 +-
 .../src/routes/index.svelte                   | 100 +++++++++++++++++-
 .../src/routes/profile/[user]/$layout.svelte  |  97 +++++++++++++++++
 .../src/routes/profile/[user]/[view].svelte   |  23 ----
 .../src/routes/profile/[user]/_Profile.svelte |  74 -------------
 .../src/routes/profile/[user]/_load.js        |  22 ++++
 .../routes/profile/[user]/favorites.svelte    |  13 +++
 .../src/routes/profile/[user]/index.svelte    |  23 ++--
 .../src/routes/profile/index.svelte           |   2 +-
 .../src/routes/settings/_SettingsForm.svelte  |  48 ++++++---
 .../src/routes/settings/index.svelte          |  20 ++--
 .../src/routes/tags.json.js                   |  19 ++++
 .../realworld.svelte.dev/src/setup/index.js   |   4 +-
 pnpm-lock.yaml                                |   6 +-
 24 files changed, 397 insertions(+), 355 deletions(-)
 create mode 100644 examples/realworld.svelte.dev/src/common/constants.js
 delete mode 100644 examples/realworld.svelte.dev/src/components/ArticleList/ListPagination.svelte
 delete mode 100644 examples/realworld.svelte.dev/src/components/Home.svelte
 delete mode 100644 examples/realworld.svelte.dev/src/components/MainView/index.svelte
 create mode 100644 examples/realworld.svelte.dev/src/components/Pagination.svelte
 delete mode 100644 examples/realworld.svelte.dev/src/components/Tags.svelte
 create mode 100644 examples/realworld.svelte.dev/src/routes/articles.json.js
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/[user]/$layout.svelte
 delete mode 100644 examples/realworld.svelte.dev/src/routes/profile/[user]/[view].svelte
 delete mode 100644 examples/realworld.svelte.dev/src/routes/profile/[user]/_Profile.svelte
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/[user]/_load.js
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/[user]/favorites.svelte
 create mode 100644 examples/realworld.svelte.dev/src/routes/tags.json.js

diff --git a/examples/realworld.svelte.dev/src/common/api.js b/examples/realworld.svelte.dev/src/common/api.js
index 610aaa4e4ec9..58b93be8dbd1 100644
--- a/examples/realworld.svelte.dev/src/common/api.js
+++ b/examples/realworld.svelte.dev/src/common/api.js
@@ -12,13 +12,14 @@ async function send({ method, path, data, token }) {
 		opts.headers['Authorization'] = `Token ${token}`;
 	}
 
-	const fetch = typeof window !== 'undefined'
-		? window.fetch
-		: await import('node-fetch').then(mod => mod.default)
+	const fetch =
+		typeof window !== 'undefined'
+			? window.fetch
+			: await import('node-fetch').then((mod) => mod.default);
 
 	return fetch(`${base}/${path}`, opts)
-		.then(r => r.text())
-		.then(json => {
+		.then((r) => r.text())
+		.then((json) => {
 			try {
 				return JSON.parse(json);
 			} catch (err) {
@@ -41,4 +42,4 @@ export function post(path, data, token) {
 
 export function put(path, data, token) {
 	return send({ method: 'PUT', path, data, token });
-}
\ No newline at end of file
+}
diff --git a/examples/realworld.svelte.dev/src/common/constants.js b/examples/realworld.svelte.dev/src/common/constants.js
new file mode 100644
index 000000000000..a666ee388147
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/common/constants.js
@@ -0,0 +1 @@
+export const page_size = 10;
diff --git a/examples/realworld.svelte.dev/src/components/ArticleList/ListPagination.svelte b/examples/realworld.svelte.dev/src/components/ArticleList/ListPagination.svelte
deleted file mode 100644
index 76a6b3bd7ef8..000000000000
--- a/examples/realworld.svelte.dev/src/components/ArticleList/ListPagination.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-	export let articlesCount;
-	export let page;
-
-	let range;
-
-	$: {
-		range = [];
-		for (let i = 0; i < Math.ceil(articlesCount / 10); ++i) {
-			range.push(i);
-		}
-	}
-</script>
-
-{#if articlesCount > 10}
-	<nav>
-		<ul class="pagination">
-
-			{#each range as v}
-				<li class='page-item {v === page ? "active": ""}'>
-					<a class="page-link" href="/{v ? v + 1 : ''}">{v + 1}</a>
-				</li>
-			{/each}
-		</ul>
-	</nav>
-{/if}
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/components/ArticleList/index.svelte b/examples/realworld.svelte.dev/src/components/ArticleList/index.svelte
index d76ddc5d0855..aca1e097520f 100644
--- a/examples/realworld.svelte.dev/src/components/ArticleList/index.svelte
+++ b/examples/realworld.svelte.dev/src/components/ArticleList/index.svelte
@@ -1,53 +1,16 @@
 <script>
-	import { session, page } from '$app/stores';
-	import * as api from '$common/api.js';
+	import { session } from '$app/stores';
 	import ArticlePreview from './ArticlePreview.svelte';
-	import ListPagination from './ListPagination.svelte';
 
-	export let tab, username = false;
-	export let favorites = false;
-	export let tag;
-	export let p;
-
-	let query;
-	let articles;
-	let articlesCount;
-
-	$: {
-		const endpoint = tab === 'feed' ? 'articles/feed' : 'articles';
-		const page_size = tab === 'feed' ? 5 : 10;
-
-		let params = `limit=${page_size}&offset=${(p - 1) * page_size}`;
-		if (tab === 'tag') params += `&tag=${tag}`;
-		if (tab === 'profile') params += `&${favorites ? 'favorited' : 'author'}=${encodeURIComponent(username)}`;
-
-		query = `${endpoint}?${params}`;
-	}
-
-	$: query && getData();
-
-	async function getData() {
-		articles = null;
-
-		// TODO do we need some error handling here?
-		({ articles, articlesCount } = await api.get(query, $session.user && $session.user.token));
-	}
+	export let articles;
 </script>
 
-{#if articles}
-	{#if articles.length === 0}
-		<div class="article-preview">
-			No articles are here... yet.
-		</div>
-	{:else}
-		<div>
-			{#each articles as article (article.slug)}
-				<ArticlePreview {article} user={$session.user}/>
-			{/each}
-
-			<ListPagination {articlesCount} page={parseInt($page.params.user, 10)}  />
-		</div>
-	{/if}
+{#if articles.length === 0}
+	<div class="article-preview">No articles are here... yet.</div>
 {:else}
-	<div class="article-preview">Loading...</div>
-{/if}
\ No newline at end of file
+	<div>
+		{#each articles as article (article.slug)}
+			<ArticlePreview {article} user={$session.user} />
+		{/each}
+	</div>
+{/if}
diff --git a/examples/realworld.svelte.dev/src/components/Home.svelte b/examples/realworld.svelte.dev/src/components/Home.svelte
deleted file mode 100644
index 2b4f14a4bb11..000000000000
--- a/examples/realworld.svelte.dev/src/components/Home.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import MainView from './MainView/index.svelte';
-	import Tags from './Tags.svelte';
-	import * as api from '$common/api.js';
-
-	export let p = 1;
-
-	let tab;
-	let tag;
-	let tags;
-
-	function setTags({ detail }) {
-		tag = detail.tag;
-		tab = "tag";
-	}
-
-	onMount(async () => {
-		({ tags } = await api.get('tags'));
-	});
-</script>
-
-<svelte:head>
-	<title>Conduit</title>
-</svelte:head>
-
-<div class="home-page">
-	<div class="banner">
-		<div class="container">
-			<h1 class="logo-font">conduit</h1>
-			<p>A place to share your knowledge.</p>
-		</div>
-	</div>
-
-	<div class="container page">
-		<div class="row">
-			<MainView {p} {tag} bind:tab />
-
-			<div class="col-md-3">
-				<div class="sidebar">
-					<p>Popular Tags</p>
-					<Tags {tags} on:select='{setTags}' />
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/components/MainView/index.svelte b/examples/realworld.svelte.dev/src/components/MainView/index.svelte
deleted file mode 100644
index df1ed7191155..000000000000
--- a/examples/realworld.svelte.dev/src/components/MainView/index.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-	import { session } from '$app/stores';
-	import ArticleList from '../ArticleList/index.svelte';
-
-	export let tab = 'all';
-	export let tag = null;
-	export let p;
-
-	function your_feed() {
-		tab = "feed";
-		tag = null;
-	}
-
-	function global_feed() {
-		tab = "all";
-		tag = null;
-	}
-</script>
-
-<div class="col-md-9">
-	<div class="feed-toggle">
-		<ul class="nav nav-pills outline-active">
-			{#if $session.user}
-				<li class="nav-item">
-					<a href="." class='nav-link {tab === "feed" ? "active" : "" }' on:click={your_feed}>
-						Your Feed
-					</a>
-				</li>
-			{:else}
-				<li class="nav-item">
-					<a href="/login" class='nav-link'>
-						Your Feed
-					</a>
-				</li>
-			{/if}
-
-			<li class="nav-item">
-				<a href="." class='nav-link {tab === "all" ? "active" : "" }' on:click={global_feed}>
-					Global Feed
-				</a>
-			</li>
-
-			{#if tag}
-				<li class="nav-item">
-					<a href="." class='nav-link {tab === "tag" ? "active" : "" }' on:click='{() => tab = "tag"}'>
-						<i class="ion-pound"></i> {tag}
-					</a>
-				</li>
-			{/if}
-		</ul>
-	</div>
-
-	<ArticleList {p} {tab} {tag}/>
-</div>
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/components/Nav.svelte b/examples/realworld.svelte.dev/src/components/Nav.svelte
index 2b74d7c184b4..b7e614a8d6da 100644
--- a/examples/realworld.svelte.dev/src/components/Nav.svelte
+++ b/examples/realworld.svelte.dev/src/components/Nav.svelte
@@ -4,44 +4,52 @@
 
 <nav class="navbar navbar-light">
 	<div class="container">
-		<a rel='prefetch' class="navbar-brand" href=".">conduit</a>
+		<a rel="prefetch" class="navbar-brand" href="/">conduit</a>
 		<ul class="nav navbar-nav pull-xs-right">
 			<li class="nav-item">
-				<a rel='prefetch' class="nav-link" class:active="{$page.path === '/'}" href="/">Home</a>
+				<a rel="prefetch" class="nav-link" class:active={$page.path === '/'} href="/">Home</a>
 			</li>
 
 			{#if $session.user}
 				<li class="nav-item">
-					<a rel='prefetch' href="/editor" class="nav-link" class:active="{$page.path === '/editor'}">
-						<i class="ion-compose"></i>&nbsp;New Post
+					<a rel="prefetch" href="/editor" class="nav-link" class:active={$page.path === '/editor'}>
+						<i class="ion-compose" />&nbsp;New Post
 					</a>
 				</li>
 
 				<li class="nav-item">
-					<a rel='prefetch' href="/settings" class="nav-link" class:active="{$page.path === '/settings'}">
-						<i class="ion-gear-a"></i>&nbsp;Settings
+					<a
+						rel="prefetch"
+						href="/settings"
+						class="nav-link"
+						class:active={$page.path === '/settings'}>
+						<i class="ion-gear-a" />&nbsp;Settings
 					</a>
 				</li>
 
 				<li class="nav-item">
-					<a rel='prefetch' href='/profile/@{$session.user.username}' class="nav-link">
+					<a rel="prefetch" href="/profile/@{$session.user.username}" class="nav-link">
 						<!-- <img src={$user.image} class="user-pic" alt={$user.username}> -->
 						{$session.user.username}
 					</a>
 				</li>
 			{:else}
 				<li class="nav-item">
-					<a rel='prefetch' href="/login" class="nav-link" class:active="{$page.path === '/login'}">
+					<a rel="prefetch" href="/login" class="nav-link" class:active={$page.path === '/login'}>
 						Sign in
 					</a>
 				</li>
 
 				<li class="nav-item">
-					<a rel='prefetch' href="/register" class="nav-link" class:active="{$page.path === '/register'}">
+					<a
+						rel="prefetch"
+						href="/register"
+						class="nav-link"
+						class:active={$page.path === '/register'}>
 						Sign up
 					</a>
 				</li>
 			{/if}
 		</ul>
 	</div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/examples/realworld.svelte.dev/src/components/Pagination.svelte b/examples/realworld.svelte.dev/src/components/Pagination.svelte
new file mode 100644
index 000000000000..87992c84e4a7
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/components/Pagination.svelte
@@ -0,0 +1,24 @@
+<script>
+	export let pages;
+	export let p;
+	export let href;
+
+	let range;
+
+	$: {
+		range = [];
+		for (let i = 1; i <= pages; ++i) {
+			range.push(i);
+		}
+	}
+</script>
+
+{#if pages > 1}
+	<nav>
+		<ul class="pagination">
+			{#each range as n}
+				<li class="page-item" class:active={n == p}><a class="page-link" href={href(n)}>{n}</a></li>
+			{/each}
+		</ul>
+	</nav>
+{/if}
diff --git a/examples/realworld.svelte.dev/src/components/Tags.svelte b/examples/realworld.svelte.dev/src/components/Tags.svelte
deleted file mode 100644
index ca165aa85427..000000000000
--- a/examples/realworld.svelte.dev/src/components/Tags.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let tags;
-	const dispatch = createEventDispatcher();
-</script>
-
-{#if tags}
-	<div className="tag-list">
-		{#each tags as tag}
-			<a href="." class="tag-default tag-pill" on:click='{() => dispatch("select", { tag })}'>
-				{tag}
-			</a>
-		{/each}
-	</div>
-{:else}
-	<div>Loading Tags...</div>
-{/if}
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/routes/articles.json.js b/examples/realworld.svelte.dev/src/routes/articles.json.js
new file mode 100644
index 000000000000..09dba5ed48fa
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/articles.json.js
@@ -0,0 +1,31 @@
+import * as api from '$common/api';
+import { page_size } from '$common/constants';
+
+export async function get(request, context) {
+	const tab = request.query.get('tab') || 'all';
+	const tag = request.query.get('tag');
+	const page = +request.query.get('page') || 1;
+
+	const endpoint = tab === 'feed' ? 'articles/feed' : 'articles';
+
+	const q = new URLSearchParams();
+
+	q.set('limit', page_size);
+	q.set('offset', (page - 1) * page_size);
+
+	if (tag) {
+		q.set('tag', tag);
+	}
+
+	const { articles, articlesCount } = await api.get(
+		`${endpoint}?${q}`,
+		context.user && context.user.token
+	);
+
+	return {
+		body: {
+			articles,
+			pages: Math.ceil(articlesCount / page_size)
+		}
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/auth/_respond.js b/examples/realworld.svelte.dev/src/routes/auth/_respond.js
index 7fc8702a4a4c..cf3e8187a7a0 100644
--- a/examples/realworld.svelte.dev/src/routes/auth/_respond.js
+++ b/examples/realworld.svelte.dev/src/routes/auth/_respond.js
@@ -4,7 +4,7 @@ export function respond(body) {
 	}
 
 	const json = JSON.stringify(body.user);
-	const value = Buffer(json).toString('base64');
+	const value = Buffer.from(json).toString('base64');
 
 	return {
 		headers: {
diff --git a/examples/realworld.svelte.dev/src/routes/index.svelte b/examples/realworld.svelte.dev/src/routes/index.svelte
index b4aa70cc9985..f5f83b5a43bb 100644
--- a/examples/realworld.svelte.dev/src/routes/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/index.svelte
@@ -1,5 +1,101 @@
+<script context="module">
+	export async function load({ page, fetch }) {
+		const [{ articles, pages }, { tags }] = await Promise.all([
+			fetch(`/articles.json?${page.query}`, { credentials: 'include' }).then((r) => r.json()),
+			fetch('/tags.json').then((r) => r.json())
+		]);
+
+		return {
+			props: {
+				articles,
+				pages,
+				tags
+			}
+		};
+	}
+</script>
+
 <script>
-	import Home from '$components/Home.svelte';
+	import { page, session } from '$app/stores';
+	import ArticleList from '$components/ArticleList/index.svelte';
+	import Pagination from '$components/Pagination.svelte';
+
+	export let articles;
+	export let pages;
+	export let tags;
+
+	$: p = +$page.query.get('p') || 1;
+	$: tag = $page.query.get('tag');
+	$: tab = $page.query.get('tab') || 'all';
+	$: page_link_base = tag ? `tag=${tag}` : `tab=${tab}`;
 </script>
 
-<Home p={1}/>
\ No newline at end of file
+<svelte:head>
+	<title>Conduit</title>
+</svelte:head>
+
+<div class="home-page">
+	{#if !$session.user}
+		<div class="banner">
+			<div class="container">
+				<h1 class="logo-font">conduit</h1>
+				<p>A place to share your knowledge.</p>
+			</div>
+		</div>
+	{/if}
+
+	<div class="container page">
+		<div class="row">
+			<div class="col-md-9">
+				<div class="feed-toggle">
+					<ul class="nav nav-pills outline-active">
+						{#if $session.user}
+							<li class="nav-item">
+								<a href="/?tab=feed" rel="prefetch" class="nav-link" class:active={tab === 'feed'}>
+									Your Feed
+								</a>
+							</li>
+						{:else}
+							<li class="nav-item">
+								<a href="/login" rel="prefetch" class="nav-link"> Log in to see your Feed </a>
+							</li>
+						{/if}
+
+						<li class="nav-item">
+							<a
+								href="/?tab=all"
+								rel="prefetch"
+								class="nav-link"
+								class:active={tab === 'all' && !tag}>
+								Global Feed
+							</a>
+						</li>
+
+						{#if tag}
+							<li class="nav-item">
+								<a href="/?tag={tag}" rel="prefetch" class="nav-link active">
+									<i class="ion-pound" />
+									{tag}
+								</a>
+							</li>
+						{/if}
+					</ul>
+				</div>
+
+				<ArticleList {articles} />
+				<Pagination {pages} {p} href={(p) => `/?${page_link_base}&page=${p}`} />
+			</div>
+
+			<div class="col-md-3">
+				<div class="sidebar">
+					<p>Popular Tags</p>
+					<div className="tag-list">
+						{#each tags as tag}
+							<a href="/?tag={tag}" rel="prefetch" class="tag-default tag-pill"> {tag} </a>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/$layout.svelte b/examples/realworld.svelte.dev/src/routes/profile/[user]/$layout.svelte
new file mode 100644
index 000000000000..40c8338835c7
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/[user]/$layout.svelte
@@ -0,0 +1,97 @@
+<script context="module">
+	import * as api from '$common/api.js';
+
+	export async function load({ page, session: { user } }) {
+		const username = page.params.user.slice(1); // TODO is the @ necessary?
+
+		// TODO create an endpoint for this
+		const { profile } = await api.get(`profiles/${username}`);
+
+		return {
+			props: { profile }
+		};
+	}
+</script>
+
+<script>
+	import { goto } from '$app/navigation';
+	import { page, session } from '$app/stores';
+
+	export let profile;
+
+	$: segments = $page.path.split('/');
+	$: is_favorites = segments.length === 4 && segments[3] === 'favorites';
+	$: is_user = $session.user && profile.username === $session.user.username;
+
+	async function toggle_following() {
+		if (!user) return goto('/login');
+
+		// optimistic UI
+		profile.following = !profile.following;
+
+		({ profile } = await (profile.following
+			? api.post(`profiles/${profile.username}/follow`, null, session.user && session.user.token)
+			: api.del(`profiles/${profile.username}/follow`, session.user && session.user.token)));
+	}
+</script>
+
+<svelte:head>
+	<title>{profile.username} • Conduit</title>
+</svelte:head>
+
+<div class="profile-page">
+	<div class="user-info">
+		<div class="container">
+			<div class="row">
+				<div class="col-xs-12 col-md-10 offset-md-1">
+					<img src={profile.image} class="user-img" alt={profile.username} />
+					<h4>{profile.username}</h4>
+					<p>{profile.bio}</p>
+
+					{#if is_user}
+						<a href="/settings" class="btn btn-sm btn-outline-secondary action-btn">
+							<i class="ion-gear-a" />
+							Edit Profile Settings
+						</a>
+					{:else}
+						<button
+							class="btn btn-sm action-btn {profile.following ? 'btn-secondary' : 'btn-outline-secondary'}"
+							on:click={toggle_following}>
+							<i class="ion-plus-round" />
+							{profile.following ? 'Unfollow' : 'Follow'}
+							{profile.username}
+						</button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="container">
+		<div class="row">
+			<div class="col-xs-12 col-md-10 offset-md-1">
+				<div class="articles-toggle">
+					<ul class="nav nav-pills outline-active">
+						<li class="nav-item">
+							<a
+								href="/profile/@{profile.username}"
+								class="nav-link"
+								rel="prefetch"
+								class:active={!is_favorites}>My Articles</a>
+						</li>
+
+						<li class="nav-item">
+							<a
+								href="/profile/@{profile.username}/favorites"
+								class="nav-link"
+								rel="prefetch"
+								class:active={is_favorites}>Favorited Articles</a>
+						</li>
+					</ul>
+				</div>
+
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/[view].svelte b/examples/realworld.svelte.dev/src/routes/profile/[user]/[view].svelte
deleted file mode 100644
index 13d3cea66b47..000000000000
--- a/examples/realworld.svelte.dev/src/routes/profile/[user]/[view].svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script context="module">
-	import * as api from '$common/api.js';
-
-	export async function load({ page, session: { user } }) {
-		const username = page.params.user.slice(1);
-
-		const { profile } = await api.get(`profiles/${username}`, user && user.token);
-		return { profile, favorites: params.view === 'favorites' };
-	}
-</script>
-
-<script>
-	import { session } from '$app/stores';
-	import Profile from './_Profile.svelte';
-
-	export let profile, favorites;
-</script>
-
-<svelte:head>
-	<title>{profile.username} • Conduit</title>
-</svelte:head>
-
-<Profile {profile} {favorites} user={$session.user}/>
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/_Profile.svelte b/examples/realworld.svelte.dev/src/routes/profile/[user]/_Profile.svelte
deleted file mode 100644
index ca372f3bc638..000000000000
--- a/examples/realworld.svelte.dev/src/routes/profile/[user]/_Profile.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script>
-	import { goto } from '$app/navigation';
-	import ArticleList from '$components/ArticleList/index.svelte';
-	import * as api from '$common/api.js';
-
-	export let profile;
-	export let favorites;
-	export let user;
-
-	$: isUser = user && (profile.username === user.username);
-
-	async function toggle_following() {
-		if (!user) return goto('/login');
-
-		// optimistic UI
-		profile.following = !profile.following;
-
-		({ profile, favorites } = await (profile.following
-			? api.post(`profiles/${profile.username}/follow`, null, user && user.token)
-			: api.del(`profiles/${profile.username}/follow`, user && user.token)));
-	}
-</script>
-
-<svelte:head>
-	<title>{profile.username} • Conduit</title>
-</svelte:head>
-
-<div class="profile-page">
-	<div class="user-info">
-		<div class="container">
-			<div class="row">
-				<div class="col-xs-12 col-md-10 offset-md-1">
-					<img src={profile.image} class="user-img" alt={profile.username} />
-					<h4>{profile.username}</h4>
-					<p>{profile.bio}</p>
-
-					{#if isUser}
-						<a href="/settings" class="btn btn-sm btn-outline-secondary action-btn">
-							<i class="ion-gear-a"></i> Edit Profile Settings
-						</a>
-					{:else}
-						<button
-							class='btn btn-sm action-btn {profile.following ? "btn-secondary" : "btn-outline-secondary"}'
-							on:click={toggle_following}
-						>
-							<i class="ion-plus-round"></i>
-							{profile.following ? 'Unfollow' : 'Follow'} {profile.username}
-						</button>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="container">
-		<div class="row">
-			<div class="col-xs-12 col-md-10 offset-md-1">
-				<div class="articles-toggle">
-					<ul class="nav nav-pills outline-active">
-						<li class="nav-item">
-							<a href='/profile/@{profile.username}' class="nav-link {favorites ? '' : 'active'}">My Articles</a>
-						</li>
-
-						<li class="nav-item">
-							<a class="nav-link {favorites ? 'active' : ''}" href='/profile/@{profile.username}/favorites'>Favorited Articles</a>
-						</li>
-					</ul>
-				</div>
-
-				<ArticleList tab='profile' username='{profile.username}' {favorites}/>
-			</div>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/_load.js b/examples/realworld.svelte.dev/src/routes/profile/[user]/_load.js
new file mode 100644
index 000000000000..be0890310616
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/[user]/_load.js
@@ -0,0 +1,22 @@
+import * as api from '$common/api.js';
+
+const page_size = 10;
+
+export function create_load(type) {
+	return async ({ page }) => {
+		const username = page.params.user.slice(1);
+		const p = +page.query.get('p') || 1;
+
+		const q = new URLSearchParams([
+			['limit', page_size],
+			['offset', (p - 1) * page_size],
+			[type, encodeURIComponent(username)]
+		]);
+
+		const { articles, articlesCount } = await api.get(`articles?${q}`);
+
+		return {
+			props: { articles, articlesCount }
+		};
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/favorites.svelte b/examples/realworld.svelte.dev/src/routes/profile/[user]/favorites.svelte
new file mode 100644
index 000000000000..b61aed8e93f9
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/[user]/favorites.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+	import { create_load } from './_load.js';
+	export const load = create_load('favorited');
+</script>
+
+<script>
+	import ArticleList from '$components/ArticleList/index.svelte';
+
+	export let articles;
+	export let articlesCount;
+</script>
+
+<ArticleList {articles} {articlesCount} />
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte b/examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte
index 9474f2085655..311ee98b79d2 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte
@@ -1,24 +1,13 @@
 <script context="module">
-	import * as api from '$common/api.js';
-
-	export async function load({ page, session: { user } }) {
-		const username = page.params.user.slice(1);
-
-		const { profile } = await api.get(`profiles/${username}`, user && user.token);
-		return { profile, favorites: params.view === 'favorites' };
-	}
+	import { create_load } from './_load.js';
+	export const load = create_load('author');
 </script>
 
 <script>
-	import { session } from '$app/stores';
-	import Profile from './_Profile.svelte';
+	import ArticleList from '$components/ArticleList/index.svelte';
 
-	export let profile;
-	export let favorites;
+	export let articles;
+	export let articlesCount;
 </script>
 
-<svelte:head>
-	<title>{profile.username} • Conduit</title>
-</svelte:head>
-
-<Profile {profile} {favorites} user={$session.user}/>
\ No newline at end of file
+<ArticleList {articles} {articlesCount} />
diff --git a/examples/realworld.svelte.dev/src/routes/profile/index.svelte b/examples/realworld.svelte.dev/src/routes/profile/index.svelte
index 3d38f9467809..bf61ede95fb2 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/index.svelte
@@ -2,7 +2,7 @@
 	export function load({ session }) {
 		return {
 			redirect: {
-				to: session.user ? `/profile/@${user.username}` : '/login',
+				to: session.user ? `/profile/@${session.user.username}` : '/login',
 				status: 302
 			}
 		};
diff --git a/examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte b/examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte
index 6a98a1c1a108..216752a5018a 100644
--- a/examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte
+++ b/examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte
@@ -1,38 +1,60 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 
-	export let inProgress, image, username, bio, email, password = '';
-	const dispatch = createEventDispatcher();
+	export let in_progress;
+	export let image;
+	export let username;
+	export let bio;
+	export let email;
+	export let password = '';
 
-	function submit(event) {
-		dispatch('save', { image, username, bio, email, password });
-	}
+	const dispatch = createEventDispatcher();
 </script>
 
-<form on:submit|preventDefault='{submit}'>
+<form on:submit|preventDefault={() => dispatch('save', { image, username, bio, email, password })}>
 	<fieldset>
 		<fieldset class="form-group">
-			<input class="form-control" type="text" placeholder="URL of profile picture" bind:value={image}>
+			<input
+				class="form-control"
+				type="text"
+				placeholder="URL of profile picture"
+				bind:value={image} />
 		</fieldset>
 
 		<fieldset class="form-group">
-			<input class="form-control form-control-lg" type="text" placeholder="Username" bind:value={username}>
+			<input
+				class="form-control form-control-lg"
+				type="text"
+				placeholder="Username"
+				bind:value={username} />
 		</fieldset>
 
 		<fieldset class="form-group">
-			<textarea class="form-control form-control-lg" rows="8" placeholder="Short bio about you" bind:value={bio}/>
+			<textarea
+				class="form-control form-control-lg"
+				rows="8"
+				placeholder="Short bio about you"
+				bind:value={bio} />
 		</fieldset>
 
 		<fieldset class="form-group">
-			<input class="form-control form-control-lg" type="email" placeholder="Email" bind:value={email}>
+			<input
+				class="form-control form-control-lg"
+				type="email"
+				placeholder="Email"
+				bind:value={email} />
 		</fieldset>
 
 		<fieldset class="form-group">
-			<input class="form-control form-control-lg" type="password" placeholder="New Password" bind:value={password}>
+			<input
+				class="form-control form-control-lg"
+				type="password"
+				placeholder="New Password"
+				bind:value={password} />
 		</fieldset>
 
-		<button class="btn btn-lg btn-primary pull-xs-right" type="submit" disabled={inProgress}>
+		<button class="btn btn-lg btn-primary pull-xs-right" type="submit" disabled={in_progress}>
 			Update Settings
 		</button>
 	</fieldset>
-</form>
\ No newline at end of file
+</form>
diff --git a/examples/realworld.svelte.dev/src/routes/settings/index.svelte b/examples/realworld.svelte.dev/src/routes/settings/index.svelte
index d9fd78e88fad..d3a31fbfed81 100644
--- a/examples/realworld.svelte.dev/src/routes/settings/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/settings/index.svelte
@@ -9,16 +9,15 @@
 </script>
 
 <script>
+	import { session } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import ListErrors from '$components/ListErrors.svelte';
 	import SettingsForm from './_SettingsForm.svelte';
 	import { post } from '$common/utils.js';
 
-	let inProgress;
+	let in_progress;
 	let errors;
 
-	const { session } = stores();
-
 	async function logout() {
 		await post(`auth/logout`);
 		$session.user = null;
@@ -26,14 +25,14 @@
 	}
 
 	async function save(event) {
-		inProgress = true;
+		in_progress = true;
 
 		const response = await post(`auth/save`, event.detail);
 
 		errors = response.errors;
 		if (response.user) $session.user = response.user;
 
-		inProgress = false;
+		in_progress = false;
 	}
 </script>
 
@@ -45,19 +44,16 @@
 	<div class="container page">
 		<div class="row">
 			<div class="col-md-6 offset-md-3 col-xs-12">
-
 				<h1 class="text-xs-center">Your Settings</h1>
 
-				<ListErrors {errors}/>
+				<ListErrors {errors} />
 
-				<SettingsForm on:save={save} {...$session.user} {inProgress}/>
+				<SettingsForm on:save={save} {...$session.user} {in_progress} />
 
 				<hr />
 
-				<button class="btn btn-outline-danger" on:click={logout}>
-					Or click here to logout.
-				</button>
+				<button class="btn btn-outline-danger" on:click={logout}> Or click here to logout. </button>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/examples/realworld.svelte.dev/src/routes/tags.json.js b/examples/realworld.svelte.dev/src/routes/tags.json.js
new file mode 100644
index 000000000000..9e5fdad936f2
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/tags.json.js
@@ -0,0 +1,19 @@
+import * as api from '$common/api';
+
+export async function get() {
+	const { tags } = await api.get('tags');
+
+	// The Conduit API doesn't set a cache-control header on
+	// this resource, but it doesn't change frequently enough
+	// that it's worth revalidating on every request. Instead,
+	// we cache it at the CDN level (`public`) for five
+	// minutes (`max-age=300`) to improve performance
+	return {
+		headers: {
+			'cache-control': 'public, max-age=300'
+		},
+		body: {
+			tags: tags.filter((tag) => /^[a-z]+$/i.test(tag))
+		}
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/setup/index.js b/examples/realworld.svelte.dev/src/setup/index.js
index 32c83810c1dd..6707cdb3c54c 100644
--- a/examples/realworld.svelte.dev/src/setup/index.js
+++ b/examples/realworld.svelte.dev/src/setup/index.js
@@ -1,8 +1,8 @@
 import * as cookie from 'cookie';
 
 export function prepare(headers) {
-	const cookies = cookie.parse(headers.cookie);
-	const jwt = cookies.jwt && Buffer(cookies.jwt, 'base64').toString('utf-8');
+	const cookies = cookie.parse(headers.cookie || '');
+	const jwt = cookies.jwt && Buffer.from(cookies.jwt, 'base64').toString('utf-8');
 
 	return {
 		context: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 654236953123..b8e7dc0340b6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,12 +45,12 @@ importers:
       svelte: ^3.29.0
   examples/realworld.svelte.dev:
     dependencies:
-      cookie: 0.4.1
       node-fetch: 2.6.1
     devDependencies:
       '@sveltejs/adapter-node': 'link:../../packages/adapter-node'
       '@sveltejs/kit': 'link:../../packages/kit'
       '@sveltejs/snowpack-config': 'link:../../packages/snowpack-config'
+      cookie: 0.4.1
       marked: 1.2.5
       svelte: 3.29.0
     specifiers:
@@ -182,6 +182,7 @@ importers:
       '@types/rimraf': 3.0.0
       '@types/sade': 1.7.2
       amphtml-validator: 1.0.33
+      cookie: 0.4.1
       eslint: 7.14.0
       esm: 3.2.25
       estree-walker: 2.0.1
@@ -205,6 +206,7 @@ importers:
       '@types/sade': ^1.7.2
       amphtml-validator: ^1.0.33
       cheap-watch: ^1.0.2
+      cookie: ^0.4.1
       eslint: ^7.14.0
       esm: ^3.2.25
       estree-walker: ^2.0.1
@@ -1471,7 +1473,7 @@ packages:
     resolution:
       integrity: sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
   /cookie/0.4.1:
-    dev: false
+    dev: true
     engines:
       node: '>= 0.6'
     resolution:

From 6db72d63fc4567f19b270431f2955177badd4d9d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 11:50:06 -0500
Subject: [PATCH 05/28] always supply a body when posting

---
 examples/realworld.svelte.dev/src/common/utils.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/common/utils.js b/examples/realworld.svelte.dev/src/common/utils.js
index 328d0505fff1..85316d5eae6c 100644
--- a/examples/realworld.svelte.dev/src/common/utils.js
+++ b/examples/realworld.svelte.dev/src/common/utils.js
@@ -2,9 +2,9 @@ export function post(endpoint, data) {
 	return fetch(endpoint, {
 		method: 'POST',
 		credentials: 'include',
-		body: JSON.stringify(data),
+		body: JSON.stringify(data || {}),
 		headers: {
 			'Content-Type': 'application/json'
 		}
-	}).then(r => r.json());
-}
\ No newline at end of file
+	}).then((r) => r.json());
+}

From cc58597e4f3b612243a7ec16177bad3d6b1f7726 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 11:50:18 -0500
Subject: [PATCH 06/28] swap tabs

---
 .../src/routes/index.svelte                   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/routes/index.svelte b/examples/realworld.svelte.dev/src/routes/index.svelte
index f5f83b5a43bb..d4d4e1224507 100644
--- a/examples/realworld.svelte.dev/src/routes/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/index.svelte
@@ -49,6 +49,16 @@
 			<div class="col-md-9">
 				<div class="feed-toggle">
 					<ul class="nav nav-pills outline-active">
+						<li class="nav-item">
+							<a
+								href="/?tab=all"
+								rel="prefetch"
+								class="nav-link"
+								class:active={tab === 'all' && !tag}>
+								Global Feed
+							</a>
+						</li>
+
 						{#if $session.user}
 							<li class="nav-item">
 								<a href="/?tab=feed" rel="prefetch" class="nav-link" class:active={tab === 'feed'}>
@@ -61,16 +71,6 @@
 							</li>
 						{/if}
 
-						<li class="nav-item">
-							<a
-								href="/?tab=all"
-								rel="prefetch"
-								class="nav-link"
-								class:active={tab === 'all' && !tag}>
-								Global Feed
-							</a>
-						</li>
-
 						{#if tag}
 							<li class="nav-item">
 								<a href="/?tag={tag}" rel="prefetch" class="nav-link active">

From 3f0fe81a672778908d37e635ec98dc6e8e701a00 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 11:55:54 -0500
Subject: [PATCH 07/28] simplify setup

---
 .../realworld.svelte.dev/src/setup/index.js   | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/setup/index.js b/examples/realworld.svelte.dev/src/setup/index.js
index 6707cdb3c54c..859cb1fe7bc7 100644
--- a/examples/realworld.svelte.dev/src/setup/index.js
+++ b/examples/realworld.svelte.dev/src/setup/index.js
@@ -6,23 +6,19 @@ export function prepare(headers) {
 
 	return {
 		context: {
-			user: jwt && JSON.parse(jwt)
+			user: jwt ? JSON.parse(jwt) : null
 		},
 		headers: {}
 	};
 }
 
 export function getSession(context) {
-	if (context.user) {
-		const { email, username, bio, image } = context.user;
-
-		return {
-			user: {
-				email,
-				username,
-				bio,
-				image
-			}
-		};
-	}
+	return {
+		user: context.user && {
+			username: context.user.username,
+			email: context.user.email,
+			image: context.user.image,
+			bio: context.user.bio
+		}
+	};
 }

From 6363b2f3db8befc24f3a5d5732f616b98d5c146c Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 11:56:05 -0500
Subject: [PATCH 08/28] simplify settings page

---
 .../src/routes/settings/_SettingsForm.svelte  | 60 ----------------
 .../src/routes/settings/index.svelte          | 72 +++++++++++++++++--
 2 files changed, 66 insertions(+), 66 deletions(-)
 delete mode 100644 examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte

diff --git a/examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte b/examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte
deleted file mode 100644
index 216752a5018a..000000000000
--- a/examples/realworld.svelte.dev/src/routes/settings/_SettingsForm.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let in_progress;
-	export let image;
-	export let username;
-	export let bio;
-	export let email;
-	export let password = '';
-
-	const dispatch = createEventDispatcher();
-</script>
-
-<form on:submit|preventDefault={() => dispatch('save', { image, username, bio, email, password })}>
-	<fieldset>
-		<fieldset class="form-group">
-			<input
-				class="form-control"
-				type="text"
-				placeholder="URL of profile picture"
-				bind:value={image} />
-		</fieldset>
-
-		<fieldset class="form-group">
-			<input
-				class="form-control form-control-lg"
-				type="text"
-				placeholder="Username"
-				bind:value={username} />
-		</fieldset>
-
-		<fieldset class="form-group">
-			<textarea
-				class="form-control form-control-lg"
-				rows="8"
-				placeholder="Short bio about you"
-				bind:value={bio} />
-		</fieldset>
-
-		<fieldset class="form-group">
-			<input
-				class="form-control form-control-lg"
-				type="email"
-				placeholder="Email"
-				bind:value={email} />
-		</fieldset>
-
-		<fieldset class="form-group">
-			<input
-				class="form-control form-control-lg"
-				type="password"
-				placeholder="New Password"
-				bind:value={password} />
-		</fieldset>
-
-		<button class="btn btn-lg btn-primary pull-xs-right" type="submit" disabled={in_progress}>
-			Update Settings
-		</button>
-	</fieldset>
-</form>
diff --git a/examples/realworld.svelte.dev/src/routes/settings/index.svelte b/examples/realworld.svelte.dev/src/routes/settings/index.svelte
index d3a31fbfed81..2b0085cc5400 100644
--- a/examples/realworld.svelte.dev/src/routes/settings/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/settings/index.svelte
@@ -1,33 +1,42 @@
 <script context="module">
 	export function load({ session }) {
-		if (!session.user) {
+		const { user } = session;
+
+		if (!user) {
 			return {
 				redirect: { to: '/login', status: 302 }
 			};
 		}
+
+		return {
+			props: { user }
+		};
 	}
 </script>
 
 <script>
 	import { session } from '$app/stores';
-	import { goto } from '$app/navigation';
 	import ListErrors from '$components/ListErrors.svelte';
 	import SettingsForm from './_SettingsForm.svelte';
 	import { post } from '$common/utils.js';
 
+	export let user;
+
 	let in_progress;
 	let errors;
 
 	async function logout() {
 		await post(`auth/logout`);
+
+		// this will trigger a redirect, because it
+		// causes the `load` function to run again
 		$session.user = null;
-		goto('/');
 	}
 
-	async function save(event) {
+	async function save() {
 		in_progress = true;
 
-		const response = await post(`auth/save`, event.detail);
+		const response = await post(`auth/save`, user);
 
 		errors = response.errors;
 		if (response.user) $session.user = response.user;
@@ -48,7 +57,58 @@
 
 				<ListErrors {errors} />
 
-				<SettingsForm on:save={save} {...$session.user} {in_progress} />
+				<SettingsForm on:save={save} {...user} {in_progress} />
+
+				<form on:submit|preventDefault={save}>
+					<fieldset>
+						<fieldset class="form-group">
+							<input
+								class="form-control"
+								type="text"
+								placeholder="URL of profile picture"
+								bind:value={user.image} />
+						</fieldset>
+
+						<fieldset class="form-group">
+							<input
+								class="form-control form-control-lg"
+								type="text"
+								placeholder="Username"
+								bind:value={user.username} />
+						</fieldset>
+
+						<fieldset class="form-group">
+							<textarea
+								class="form-control form-control-lg"
+								rows="8"
+								placeholder="Short bio about you"
+								bind:value={user.bio} />
+						</fieldset>
+
+						<fieldset class="form-group">
+							<input
+								class="form-control form-control-lg"
+								type="email"
+								placeholder="Email"
+								bind:value={user.email} />
+						</fieldset>
+
+						<fieldset class="form-group">
+							<input
+								class="form-control form-control-lg"
+								type="password"
+								placeholder="New Password"
+								bind:value={user.password} />
+						</fieldset>
+
+						<button
+							class="btn btn-lg btn-primary pull-xs-right"
+							type="submit"
+							disabled={in_progress}>
+							Update Settings
+						</button>
+					</fieldset>
+				</form>
 
 				<hr />
 

From 6b59ee8e4dc976c615c018db4ac219c7f0cd9d58 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 11:57:07 -0500
Subject: [PATCH 09/28] replace/pushState on goto

---
 packages/kit/src/runtime/internal/router/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/kit/src/runtime/internal/router/index.js b/packages/kit/src/runtime/internal/router/index.js
index e8f156abba37..76e5260f2807 100644
--- a/packages/kit/src/runtime/internal/router/index.js
+++ b/packages/kit/src/runtime/internal/router/index.js
@@ -55,10 +55,10 @@ export class Router {
 				// Store the scroll location in the history
 				// This will persist even if we navigate away from the site and come back
 				const new_state = {
-					...(history.state || {}),
+					...(this.history.state || {}),
 					scroll: scroll_state()
 				};
-				history.replaceState(new_state, document.title, window.location);
+				this.history.replaceState(new_state, document.title, window.location);
 			}, 50);
 		});
 
@@ -159,6 +159,7 @@ export class Router {
 
 		if (selected) {
 			// TODO shouldn't need to pass the hash here
+			this.history[replaceState ? 'replaceState' : 'pushState']({}, '', url.href);
 			return this.navigate(selected, noscroll ? scroll_state() : false, url.hash);
 		}
 

From 8f492893d56464e4cfffa6423ff5749b4646cad1 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 11:57:17 -0500
Subject: [PATCH 10/28] handle redirects

---
 packages/kit/src/runtime/internal/renderer/index.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/kit/src/runtime/internal/renderer/index.js b/packages/kit/src/runtime/internal/renderer/index.js
index 1c42d84a8f0b..40e0029e50c0 100644
--- a/packages/kit/src/runtime/internal/renderer/index.js
+++ b/packages/kit/src/runtime/internal/renderer/index.js
@@ -140,9 +140,15 @@ export class Renderer {
 				? await this.prefetching.promise
 				: await this.hydrate(selected);
 
+		if (hydrated.redirect) {
+			return this.router.goto(hydrated.redirect.to);
+		}
+
+		// if the render wasn't aborted...
 		if (this.token === token) {
-			// check render wasn't aborted
+			// ...update props
 			this.current = hydrated.state;
+			this.prefetching = { href: null, promise: null };
 
 			this.root.$set(hydrated.props);
 			this.stores.navigating.set(false);

From 8d1569f2af57d5477dd6c43ee0fb4a7ce2832e05 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 11:57:26 -0500
Subject: [PATCH 11/28] update lockfile

---
 pnpm-lock.yaml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8e7dc0340b6..42d189591886 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,12 +45,12 @@ importers:
       svelte: ^3.29.0
   examples/realworld.svelte.dev:
     dependencies:
+      cookie: 0.4.1
       node-fetch: 2.6.1
     devDependencies:
       '@sveltejs/adapter-node': 'link:../../packages/adapter-node'
       '@sveltejs/kit': 'link:../../packages/kit'
       '@sveltejs/snowpack-config': 'link:../../packages/snowpack-config'
-      cookie: 0.4.1
       marked: 1.2.5
       svelte: 3.29.0
     specifiers:
@@ -1473,7 +1473,6 @@ packages:
     resolution:
       integrity: sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
   /cookie/0.4.1:
-    dev: true
     engines:
       node: '>= 0.6'
     resolution:

From 1a088b27007321d9e9e790b81c05364d4cbdb3a9 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 12:04:03 -0500
Subject: [PATCH 12/28] add preloading indicator

---
 .../src/components/PreloadingIndicator.svelte | 36 +++++-----
 .../src/components/PreloadingIndicator.svelte | 67 +++++++++++++++++++
 .../src/routes/$layout.svelte                 | 12 +++-
 3 files changed, 96 insertions(+), 19 deletions(-)
 create mode 100644 examples/realworld.svelte.dev/src/components/PreloadingIndicator.svelte

diff --git a/examples/hn.svelte.dev/src/components/PreloadingIndicator.svelte b/examples/hn.svelte.dev/src/components/PreloadingIndicator.svelte
index 0e2a029915e5..42b273355aeb 100644
--- a/examples/hn.svelte.dev/src/components/PreloadingIndicator.svelte
+++ b/examples/hn.svelte.dev/src/components/PreloadingIndicator.svelte
@@ -3,8 +3,8 @@
 	let p = 0;
 	let visible = false;
 	onMount(() => {
+		visible = true;
 		function next() {
-			visible = true;
 			p += 0.1;
 			const remaining = 1 - p;
 			if (remaining > 0.15) setTimeout(next, 500 / remaining);
@@ -13,16 +13,6 @@
 	});
 </script>
 
-{#if visible}
-	<div class="progress-container">
-		<div class="progress" style="width: {p * 100}%"></div>
-	</div>
-{/if}
-
-{#if p >= 0.4}
-	<div class="fade"></div>
-{/if}
-
 <style>
 	.progress-container {
 		position: absolute;
@@ -46,18 +36,32 @@
 		position: fixed;
 		width: 100%;
 		height: 100%;
-		background-color: rgba(255,255,255,0.3);
+		background-color: rgba(255, 255, 255, 0.3);
 		pointer-events: none;
 		z-index: 998;
 		animation: fade 0.4s;
 	}
 
 	:global(html).dark .fade {
-		background-color: rgba(0,0,0,0.3);
+		background-color: rgba(0, 0, 0, 0.3);
 	}
 
 	@keyframes fade {
-		from { opacity: 0 }
-		to { opacity: 1 }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
-</style>
\ No newline at end of file
+</style>
+
+{#if visible}
+	<div class="progress-container">
+		<div class="progress" style="width: {p * 100}%" />
+	</div>
+{/if}
+
+{#if p >= 0.4}
+	<div class="fade" />
+{/if}
diff --git a/examples/realworld.svelte.dev/src/components/PreloadingIndicator.svelte b/examples/realworld.svelte.dev/src/components/PreloadingIndicator.svelte
new file mode 100644
index 000000000000..b869b6054aaa
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/components/PreloadingIndicator.svelte
@@ -0,0 +1,67 @@
+<script>
+	import { onMount } from 'svelte';
+	let p = 0;
+	let visible = false;
+	onMount(() => {
+		visible = true;
+		function next() {
+			p += 0.1;
+			const remaining = 1 - p;
+			if (remaining > 0.15) setTimeout(next, 500 / remaining);
+		}
+		setTimeout(next, 250);
+	});
+</script>
+
+<style>
+	.progress-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 4px;
+		z-index: 999;
+	}
+
+	.progress {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		background-color: #5cb85c;
+		transition: width 0.4s;
+	}
+
+	.fade {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(255, 255, 255, 0.3);
+		pointer-events: none;
+		z-index: 998;
+		animation: fade 0.4s;
+	}
+
+	:global(html).dark .fade {
+		background-color: rgba(0, 0, 0, 0.3);
+	}
+
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>
+
+{#if visible}
+	<div class="progress-container">
+		<div class="progress" style="width: {p * 100}%" />
+	</div>
+{/if}
+
+{#if p >= 0.4}
+	<div class="fade" />
+{/if}
diff --git a/examples/realworld.svelte.dev/src/routes/$layout.svelte b/examples/realworld.svelte.dev/src/routes/$layout.svelte
index aa8ae65c6446..68c987069d63 100644
--- a/examples/realworld.svelte.dev/src/routes/$layout.svelte
+++ b/examples/realworld.svelte.dev/src/routes/$layout.svelte
@@ -1,11 +1,17 @@
 <script>
+	import { navigating } from '$app/stores';
 	import Nav from '$components/Nav.svelte';
+	import PreloadingIndicator from '$components/PreloadingIndicator.svelte';
 
 	export let segment;
 </script>
 
-<Nav {segment}/>
+{#if $navigating}
+	<PreloadingIndicator />
+{/if}
+
+<Nav {segment} />
 
 <main>
-	<slot></slot>
-</main>
\ No newline at end of file
+	<slot />
+</main>

From d1d9f26e0e1c451456a3641bf20e3bb839f4081a Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 12:17:03 -0500
Subject: [PATCH 13/28] fix prettier config

---
 .prettierrc | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.prettierrc b/.prettierrc
index ff2677efde55..30f3b752517b 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,7 @@
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",
-	"printWidth": 100
+	"printWidth": 100,
+	"svelteSortOrder": "scripts-markup-styles",
+	"svelteBracketNewLine": true
 }

From 40010eedf3d9227348a71e4291ebec4ae7d83786 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 12:17:42 -0500
Subject: [PATCH 14/28] remove double layout

---
 .../src/routes/$error.svelte                  | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/routes/$error.svelte b/examples/realworld.svelte.dev/src/routes/$error.svelte
index 9602d36d356e..5ceea5d59f44 100644
--- a/examples/realworld.svelte.dev/src/routes/$error.svelte
+++ b/examples/realworld.svelte.dev/src/routes/$error.svelte
@@ -1,6 +1,4 @@
 <script>
-	import Layout from './$layout.svelte';
-
 	export let error, status;
 
 	let dev = import.meta.env.MODE === 'development';
@@ -10,17 +8,15 @@
 	<title>{status}</title>
 </svelte:head>
 
-<Layout>
-	<div class="col-md-9">
-		<h1>{status}</h1>
+<div class="col-md-9">
+	<h1>{status}</h1>
 
-		<p>{error.message}</p>
+	<p>{error.message}</p>
 
-		{#if dev && error.stack}
-			<pre>{error.stack}</pre>
-		{/if}
-	</div>
-</Layout>
+	{#if dev && error.stack}
+		<pre>{error.stack}</pre>
+	{/if}
+</div>
 
 <style>
 	h1,
@@ -43,4 +39,4 @@
 			font-size: 4em;
 		}
 	}
-</style>
\ No newline at end of file
+</style>

From 1e7e67a63b6ee78a1093de34363331a56d1c2b50 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 12:18:11 -0500
Subject: [PATCH 15/28] update manifest/logo

---
 .../realworld.svelte.dev/static/logo-256.png    | Bin 0 -> 23467 bytes
 .../realworld.svelte.dev/static/manifest.json   |  11 +++--------
 2 files changed, 3 insertions(+), 8 deletions(-)
 create mode 100644 examples/realworld.svelte.dev/static/logo-256.png

diff --git a/examples/realworld.svelte.dev/static/logo-256.png b/examples/realworld.svelte.dev/static/logo-256.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9bdc637287ad6bdc84b8f86d89d6938931ad882
GIT binary patch
literal 23467
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

literal 0
HcmV?d00001

diff --git a/examples/realworld.svelte.dev/static/manifest.json b/examples/realworld.svelte.dev/static/manifest.json
index fc5de0b53ff6..08d8d61800d2 100644
--- a/examples/realworld.svelte.dev/static/manifest.json
+++ b/examples/realworld.svelte.dev/static/manifest.json
@@ -1,19 +1,14 @@
 {
 	"background_color": "#ffffff",
-	"theme_color": "#aa1e1e",
+	"theme_color": "#5cb85c",
 	"name": "Svelte RealWorld",
 	"short_name": "RealWorld",
 	"display": "minimal-ui",
 	"start_url": "/",
 	"icons": [
 		{
-			"src": "svelte-logo-192.png",
-			"sizes": "192x192",
-			"type": "image/png"
-		},
-		{
-			"src": "svelte-logo-512.png",
-			"sizes": "512x512",
+			"src": "logo-256.png",
+			"sizes": "256x256",
 			"type": "image/png"
 		}
 	]

From 23ad4b5859d2653e9b0eb1b04bb3cda357b9b7fa Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 12:18:20 -0500
Subject: [PATCH 16/28] remove unwanted segment

---
 examples/realworld.svelte.dev/src/routes/$layout.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/routes/$layout.svelte b/examples/realworld.svelte.dev/src/routes/$layout.svelte
index 68c987069d63..16640463eb7a 100644
--- a/examples/realworld.svelte.dev/src/routes/$layout.svelte
+++ b/examples/realworld.svelte.dev/src/routes/$layout.svelte
@@ -2,15 +2,13 @@
 	import { navigating } from '$app/stores';
 	import Nav from '$components/Nav.svelte';
 	import PreloadingIndicator from '$components/PreloadingIndicator.svelte';
-
-	export let segment;
 </script>
 
 {#if $navigating}
 	<PreloadingIndicator />
 {/if}
 
-<Nav {segment} />
+<Nav />
 
 <main>
 	<slot />

From 08180a45e4f1e9b49b203fd465a973fa2d119248 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 13:48:03 -0500
Subject: [PATCH 17/28] fix settings page

---
 .../src/routes/settings/index.svelte          | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/routes/settings/index.svelte b/examples/realworld.svelte.dev/src/routes/settings/index.svelte
index 2b0085cc5400..e9755918bc92 100644
--- a/examples/realworld.svelte.dev/src/routes/settings/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/settings/index.svelte
@@ -17,7 +17,6 @@
 <script>
 	import { session } from '$app/stores';
 	import ListErrors from '$components/ListErrors.svelte';
-	import SettingsForm from './_SettingsForm.svelte';
 	import { post } from '$common/utils.js';
 
 	export let user;
@@ -57,8 +56,6 @@
 
 				<ListErrors {errors} />
 
-				<SettingsForm on:save={save} {...user} {in_progress} />
-
 				<form on:submit|preventDefault={save}>
 					<fieldset>
 						<fieldset class="form-group">
@@ -66,7 +63,8 @@
 								class="form-control"
 								type="text"
 								placeholder="URL of profile picture"
-								bind:value={user.image} />
+								bind:value={user.image}
+							/>
 						</fieldset>
 
 						<fieldset class="form-group">
@@ -74,7 +72,8 @@
 								class="form-control form-control-lg"
 								type="text"
 								placeholder="Username"
-								bind:value={user.username} />
+								bind:value={user.username}
+							/>
 						</fieldset>
 
 						<fieldset class="form-group">
@@ -82,7 +81,8 @@
 								class="form-control form-control-lg"
 								rows="8"
 								placeholder="Short bio about you"
-								bind:value={user.bio} />
+								bind:value={user.bio}
+							/>
 						</fieldset>
 
 						<fieldset class="form-group">
@@ -90,7 +90,8 @@
 								class="form-control form-control-lg"
 								type="email"
 								placeholder="Email"
-								bind:value={user.email} />
+								bind:value={user.email}
+							/>
 						</fieldset>
 
 						<fieldset class="form-group">
@@ -98,13 +99,15 @@
 								class="form-control form-control-lg"
 								type="password"
 								placeholder="New Password"
-								bind:value={user.password} />
+								bind:value={user.password}
+							/>
 						</fieldset>
 
 						<button
 							class="btn btn-lg btn-primary pull-xs-right"
 							type="submit"
-							disabled={in_progress}>
+							disabled={in_progress}
+						>
 							Update Settings
 						</button>
 					</fieldset>

From 5744e5b0d60c8fd337c8809a5dd95315b5e4cbf7 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 21 Dec 2020 14:27:01 -0500
Subject: [PATCH 18/28] fix following logic

---
 .../ArticleList/ArticlePreview.svelte         | 25 +++++-----
 .../src/routes/index.svelte                   |  5 +-
 .../{[user] => @[user]}/$layout.svelte        | 49 ++++++++++++-------
 .../profile/{[user] => @[user]}/_load.js      |  3 +-
 .../{[user] => @[user]}/favorites.svelte      |  3 +-
 .../src/routes/profile/@[user]/follow.js      | 13 +++++
 .../src/routes/profile/@[user]/index.json.js  | 12 +++++
 .../profile/{[user] => @[user]}/index.svelte  |  3 +-
 8 files changed, 74 insertions(+), 39 deletions(-)
 rename examples/realworld.svelte.dev/src/routes/profile/{[user] => @[user]}/$layout.svelte (64%)
 rename examples/realworld.svelte.dev/src/routes/profile/{[user] => @[user]}/_load.js (82%)
 rename examples/realworld.svelte.dev/src/routes/profile/{[user] => @[user]}/favorites.svelte (77%)
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js
 rename examples/realworld.svelte.dev/src/routes/profile/{[user] => @[user]}/index.svelte (76%)

diff --git a/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte b/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte
index e89a79bc8ce4..ef831e6e814e 100644
--- a/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte
+++ b/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte
@@ -22,37 +22,36 @@
 
 <div class="article-preview">
 	<div class="article-meta">
-		<a href='/profile/@{article.author.username}'>
+		<a href="/profile/@{article.author.username}">
 			<img src={article.author.image} alt={article.author.username} />
 		</a>
 
 		<div class="info">
-			<a class="author" href='/profile/@{article.author.username}'> {article.author.username}
-			</a>
-			<span class="date">
-				{new Date(article.createdAt).toDateString()}
-			</span>
+			<a class="author" href="/profile/@{article.author.username}"> {article.author.username} </a>
+			<span class="date"> {new Date(article.createdAt).toDateString()} </span>
 		</div>
 
 		{#if user}
 			<div class="pull-xs-right">
-				<button class='btn btn-sm {article.favorited ? "btn-primary" : "btn-outline-primary"}' on:click={toggleFavorite}>
-					<i class="ion-heart"></i> {article.favoritesCount}
+				<button
+					class="btn btn-sm {article.favorited ? 'btn-primary' : 'btn-outline-primary'}"
+					on:click={toggleFavorite}
+				>
+					<i class="ion-heart" />
+					{article.favoritesCount}
 				</button>
 			</div>
 		{/if}
 	</div>
 
-	<a href='/article/{article.slug}' rel='prefetch' class="preview-link">
+	<a href="/article/{article.slug}" rel="prefetch" class="preview-link">
 		<h1>{article.title}</h1>
 		<p>{article.description}</p>
 		<span>Read more...</span>
 		<ul class="tag-list">
 			{#each article.tagList as tag}
-				<li class="tag-default tag-pill tag-outline">
-					{tag}
-				</li>
+				<li class="tag-default tag-pill tag-outline"><a href="/?tag={tag}">{tag}</a></li>
 			{/each}
 		</ul>
 	</a>
-</div>
\ No newline at end of file
+</div>
diff --git a/examples/realworld.svelte.dev/src/routes/index.svelte b/examples/realworld.svelte.dev/src/routes/index.svelte
index d4d4e1224507..9bc1f3839115 100644
--- a/examples/realworld.svelte.dev/src/routes/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/index.svelte
@@ -54,7 +54,8 @@
 								href="/?tab=all"
 								rel="prefetch"
 								class="nav-link"
-								class:active={tab === 'all' && !tag}>
+								class:active={tab === 'all' && !tag}
+							>
 								Global Feed
 							</a>
 						</li>
@@ -67,7 +68,7 @@
 							</li>
 						{:else}
 							<li class="nav-item">
-								<a href="/login" rel="prefetch" class="nav-link"> Log in to see your Feed </a>
+								<a href="/login" rel="prefetch" class="nav-link">Sign in to see your Feed </a>
 							</li>
 						{/if}
 
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/$layout.svelte b/examples/realworld.svelte.dev/src/routes/profile/@[user]/$layout.svelte
similarity index 64%
rename from examples/realworld.svelte.dev/src/routes/profile/[user]/$layout.svelte
rename to examples/realworld.svelte.dev/src/routes/profile/@[user]/$layout.svelte
index 40c8338835c7..8aedca3afcfd 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/[user]/$layout.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/$layout.svelte
@@ -1,37 +1,47 @@
 <script context="module">
-	import * as api from '$common/api.js';
-
-	export async function load({ page, session: { user } }) {
-		const username = page.params.user.slice(1); // TODO is the @ necessary?
-
-		// TODO create an endpoint for this
-		const { profile } = await api.get(`profiles/${username}`);
+	export async function load({ page, fetch }) {
+		const res = await fetch(`/profile/@${page.params.user}.json`);
 
 		return {
-			props: { profile }
+			props: {
+				profile: await res.json()
+			}
 		};
 	}
 </script>
 
 <script>
-	import { goto } from '$app/navigation';
 	import { page, session } from '$app/stores';
 
 	export let profile;
 
+	// TODO would be nice to have a more idiomatic solution to this —
+	// https://github.com/sveltejs/kit/issues/269
 	$: segments = $page.path.split('/');
 	$: is_favorites = segments.length === 4 && segments[3] === 'favorites';
 	$: is_user = $session.user && profile.username === $session.user.username;
 
+	let current_token;
 	async function toggle_following() {
-		if (!user) return goto('/login');
+		const token = (current_token = {});
+
+		const { following, username } = profile;
 
 		// optimistic UI
 		profile.following = !profile.following;
 
-		({ profile } = await (profile.following
-			? api.post(`profiles/${profile.username}/follow`, null, session.user && session.user.token)
-			: api.del(`profiles/${profile.username}/follow`, session.user && session.user.token)));
+		const res = await fetch(`/profile/@${username}/follow`, {
+			method: following ? 'delete' : 'post'
+		});
+
+		const result = await res.json();
+
+		// synchronise with the server, in case it disagrees
+		// with our optimistic UI for some reason — but only
+		// if the button wasn't re-toggled in the meantime
+		if (token === current_token) {
+			profile = result.profile;
+		}
 	}
 </script>
 
@@ -53,15 +63,16 @@
 							<i class="ion-gear-a" />
 							Edit Profile Settings
 						</a>
-					{:else}
+					{:else if $session.user}
 						<button
 							class="btn btn-sm action-btn {profile.following ? 'btn-secondary' : 'btn-outline-secondary'}"
-							on:click={toggle_following}>
+							on:click={toggle_following}
+						>
 							<i class="ion-plus-round" />
 							{profile.following ? 'Unfollow' : 'Follow'}
 							{profile.username}
 						</button>
-					{/if}
+					{:else}<a href="/login">Sign in to follow</a>{/if}
 				</div>
 			</div>
 		</div>
@@ -77,7 +88,8 @@
 								href="/profile/@{profile.username}"
 								class="nav-link"
 								rel="prefetch"
-								class:active={!is_favorites}>My Articles</a>
+								class:active={!is_favorites}
+							>Articles</a>
 						</li>
 
 						<li class="nav-item">
@@ -85,7 +97,8 @@
 								href="/profile/@{profile.username}/favorites"
 								class="nav-link"
 								rel="prefetch"
-								class:active={is_favorites}>Favorited Articles</a>
+								class:active={is_favorites}
+							>Favorites</a>
 						</li>
 					</ul>
 				</div>
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/_load.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_load.js
similarity index 82%
rename from examples/realworld.svelte.dev/src/routes/profile/[user]/_load.js
rename to examples/realworld.svelte.dev/src/routes/profile/@[user]/_load.js
index be0890310616..f48b462d3dfe 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/[user]/_load.js
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_load.js
@@ -4,13 +4,12 @@ const page_size = 10;
 
 export function create_load(type) {
 	return async ({ page }) => {
-		const username = page.params.user.slice(1);
 		const p = +page.query.get('p') || 1;
 
 		const q = new URLSearchParams([
 			['limit', page_size],
 			['offset', (p - 1) * page_size],
-			[type, encodeURIComponent(username)]
+			[type, encodeURIComponent(page.params.user)]
 		]);
 
 		const { articles, articlesCount } = await api.get(`articles?${q}`);
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/favorites.svelte b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
similarity index 77%
rename from examples/realworld.svelte.dev/src/routes/profile/[user]/favorites.svelte
rename to examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
index b61aed8e93f9..d8a542fc573e 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/[user]/favorites.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
@@ -7,7 +7,6 @@
 	import ArticleList from '$components/ArticleList/index.svelte';
 
 	export let articles;
-	export let articlesCount;
 </script>
 
-<ArticleList {articles} {articlesCount} />
+<ArticleList {articles} />
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js
new file mode 100644
index 000000000000..e1a6d0f26c98
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js
@@ -0,0 +1,13 @@
+import * as api from '$common/api.js';
+
+export async function post(request, context) {
+	return {
+		body: await api.post(`profiles/${request.params.user}/follow`, null, context.user.token)
+	};
+}
+
+export async function del(request, context) {
+	return {
+		body: await api.del(`profiles/${request.params.user}/follow`, context.user.token)
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js
new file mode 100644
index 000000000000..c59a94ebf884
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js
@@ -0,0 +1,12 @@
+import * as api from '$common/api.js';
+
+export async function get(request, context) {
+	const { profile } = await api.get(
+		`profiles/${request.params.user}`,
+		context.user && context.user.token
+	);
+
+	return {
+		body: profile
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
similarity index 76%
rename from examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte
rename to examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
index 311ee98b79d2..0acf5e6dd10c 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
@@ -7,7 +7,6 @@
 	import ArticleList from '$components/ArticleList/index.svelte';
 
 	export let articles;
-	export let articlesCount;
 </script>
 
-<ArticleList {articles} {articlesCount} />
+<ArticleList {articles} />

From 298518b895b28c4133e0c14e1857fd3dbe8b91a5 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 22 Dec 2020 20:32:15 -0500
Subject: [PATCH 19/28] various

---
 .../ArticleList/ArticlePreview.svelte         |  4 ++--
 .../src/routes/[p].svelte                     |  6 -----
 .../{[slug].svelte => [slug]/index.svelte}    |  0
 .../routes/profile/@[user]/_get_articles.js   | 24 +++++++++++++++++++
 .../src/routes/profile/@[user]/_load.js       | 20 ++++------------
 .../routes/profile/@[user]/articles.json.js   |  5 ++++
 .../routes/profile/@[user]/favorites.json.js  |  5 ++++
 .../routes/profile/@[user]/favorites.svelte   |  2 +-
 .../src/routes/profile/@[user]/index.svelte   |  2 +-
 9 files changed, 42 insertions(+), 26 deletions(-)
 delete mode 100644 examples/realworld.svelte.dev/src/routes/[p].svelte
 rename examples/realworld.svelte.dev/src/routes/article/{[slug].svelte => [slug]/index.svelte} (100%)
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/@[user]/articles.json.js
 create mode 100644 examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.json.js

diff --git a/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte b/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte
index ef831e6e814e..2e11dc9cc896 100644
--- a/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte
+++ b/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte
@@ -4,7 +4,7 @@
 	export let article;
 	export let user;
 
-	async function toggleFavorite() {
+	async function toggle_favorite() {
 		// optimistic UI
 		if (article.favorited) {
 			article.favoritesCount -= 1;
@@ -35,7 +35,7 @@
 			<div class="pull-xs-right">
 				<button
 					class="btn btn-sm {article.favorited ? 'btn-primary' : 'btn-outline-primary'}"
-					on:click={toggleFavorite}
+					on:click={toggle_favorite}
 				>
 					<i class="ion-heart" />
 					{article.favoritesCount}
diff --git a/examples/realworld.svelte.dev/src/routes/[p].svelte b/examples/realworld.svelte.dev/src/routes/[p].svelte
deleted file mode 100644
index 77b2157dac8e..000000000000
--- a/examples/realworld.svelte.dev/src/routes/[p].svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	import { page } from '$app/stores';
-	import Home from '$components/Home.svelte';
-</script>
-
-<Home p={+$page.params.p}/>
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug].svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.svelte
similarity index 100%
rename from examples/realworld.svelte.dev/src/routes/article/[slug].svelte
rename to examples/realworld.svelte.dev/src/routes/article/[slug]/index.svelte
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js
new file mode 100644
index 000000000000..2a7ca46a3a20
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js
@@ -0,0 +1,24 @@
+import * as api from '$common/api.js';
+import { page_size } from '$common/constants.js';
+
+export async function get_articles(request, context, type) {
+	const p = +request.query.get('page') || 1;
+
+	const q = new URLSearchParams([
+		['limit', page_size],
+		['offset', (p - 1) * page_size],
+		[type, encodeURIComponent(request.params.user)]
+	]);
+
+	const { articles, articlesCount } = await api.get(
+		`articles?${q}`,
+		context.user && context.user.token
+	);
+
+	return {
+		body: {
+			articles,
+			pages: Math.ceil(articlesCount / page_size)
+		}
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/_load.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_load.js
index f48b462d3dfe..855c22e0822e 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/_load.js
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_load.js
@@ -1,21 +1,9 @@
-import * as api from '$common/api.js';
-
-const page_size = 10;
-
-export function create_load(type) {
-	return async ({ page }) => {
-		const p = +page.query.get('p') || 1;
-
-		const q = new URLSearchParams([
-			['limit', page_size],
-			['offset', (p - 1) * page_size],
-			[type, encodeURIComponent(page.params.user)]
-		]);
-
-		const { articles, articlesCount } = await api.get(`articles?${q}`);
+export function create_load(endpoint) {
+	return async ({ page, fetch }) => {
+		const res = await fetch(`/profile/@${page.params.user}/${endpoint}.json`);
 
 		return {
-			props: { articles, articlesCount }
+			props: await res.json()
 		};
 	};
 }
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/articles.json.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/articles.json.js
new file mode 100644
index 000000000000..11d0f33cace0
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/articles.json.js
@@ -0,0 +1,5 @@
+import { get_articles } from './_get_articles';
+
+export async function get(request, context) {
+	return get_articles(request, context, 'author');
+}
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.json.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.json.js
new file mode 100644
index 000000000000..d4c0b4f99951
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.json.js
@@ -0,0 +1,5 @@
+import { get_articles } from './_get_articles';
+
+export async function get(request, context) {
+	return get_articles(request, context, 'favorited');
+}
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
index d8a542fc573e..1be1d220558e 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
@@ -1,6 +1,6 @@
 <script context="module">
 	import { create_load } from './_load.js';
-	export const load = create_load('favorited');
+	export const load = create_load('favorites');
 </script>
 
 <script>
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
index 0acf5e6dd10c..0c375ee1c5ca 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
@@ -1,6 +1,6 @@
 <script context="module">
 	import { create_load } from './_load.js';
-	export const load = create_load('author');
+	export const load = create_load('articles');
 </script>
 
 <script>

From fd37ff363a8ae928706290acfca705efa8ba4fb4 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 23 Dec 2020 06:31:35 -0500
Subject: [PATCH 20/28] only insist on a body for GET requests

---
 packages/kit/src/renderer/endpoint.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/kit/src/renderer/endpoint.js b/packages/kit/src/renderer/endpoint.js
index 73f2efb3daf2..b92b98f472d4 100644
--- a/packages/kit/src/renderer/endpoint.js
+++ b/packages/kit/src/renderer/endpoint.js
@@ -5,7 +5,8 @@ export default function render_route(request, context, options) {
 	if (!route) return null;
 
 	return route.load().then(async (mod) => {
-		const handler = mod[request.method.toLowerCase().replace('delete', 'del')]; // 'delete' is a reserved word
+		const method = request.method.toLowerCase();
+		const handler = mod[method.replace('delete', 'del')]; // 'delete' is a reserved word
 
 		if (handler) {
 			const match = route.pattern.exec(request.path);
@@ -24,11 +25,11 @@ export default function render_route(request, context, options) {
 					context
 				);
 
-				if (typeof response !== 'object' || response.body == null) {
+				if (method === 'get' && (typeof response !== 'object' || response.body == null)) {
 					return {
 						status: 500,
 						body: `Invalid response from route ${request.path}; ${
-							response.body == null
+							response && response.body == null
 								? 'body is missing'
 								: `expected an object, got ${typeof response}`
 						}`,

From 096e19b849649ee917c69fc65e0666f95ade64c8 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 23 Dec 2020 07:20:30 -0500
Subject: [PATCH 21/28] only attempt 304s for get requests

---
 packages/kit/src/renderer/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kit/src/renderer/index.js b/packages/kit/src/renderer/index.js
index 95261eb2c3c0..78cd42bfd349 100644
--- a/packages/kit/src/renderer/index.js
+++ b/packages/kit/src/renderer/index.js
@@ -29,7 +29,7 @@ export async function render(request, options) {
 
 		if (response) {
 			// inject ETags for 200 responses
-			if (response.status === 200) {
+			if (/get/i.test(request.method) && response.status === 200) {
 				if (!/(no-store|immutable)/.test(response.headers['cache-control'])) {
 					const etag = `"${md5(response.body)}"`;
 

From 36bea7b36d9e752bce81846b3c9400b5c73c3d89 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 23 Dec 2020 07:21:19 -0500
Subject: [PATCH 22/28] allow empty responses for non-GET requests

---
 packages/kit/src/renderer/endpoint.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kit/src/renderer/endpoint.js b/packages/kit/src/renderer/endpoint.js
index b92b98f472d4..ea569ae70788 100644
--- a/packages/kit/src/renderer/endpoint.js
+++ b/packages/kit/src/renderer/endpoint.js
@@ -37,7 +37,7 @@ export default function render_route(request, context, options) {
 					};
 				}
 
-				let { status = 200, body, headers = {} } = response;
+				let { status = 200, body, headers = {} } = response || {};
 
 				headers = normalize_headers(headers);
 

From 48d7a38ba127b6af4b5e1a4eb492792415715902 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 23 Dec 2020 07:21:38 -0500
Subject: [PATCH 23/28] allow forms to override method with ?_method=delete etc

---
 packages/kit/src/renderer/endpoint.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/kit/src/renderer/endpoint.js b/packages/kit/src/renderer/endpoint.js
index ea569ae70788..2ebc007ad531 100644
--- a/packages/kit/src/renderer/endpoint.js
+++ b/packages/kit/src/renderer/endpoint.js
@@ -5,7 +5,9 @@ export default function render_route(request, context, options) {
 	if (!route) return null;
 
 	return route.load().then(async (mod) => {
-		const method = request.method.toLowerCase();
+		// TODO make method override (?_method=delete) configurable
+		const method = (request.query.get('_method') || request.method).toLowerCase();
+
 		const handler = mod[method.replace('delete', 'del')]; // 'delete' is a reserved word
 
 		if (handler) {

From bcbb033c59b3d2cc6213640b1e92c2d780e0eb29 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 23 Dec 2020 07:22:46 -0500
Subject: [PATCH 24/28] fix comment submission/deleting, including progressive
 enhancement

---
 .../src/common/actions.js                     | 28 +++++++++
 .../src/common/constants.js                   |  1 +
 .../article/{ => [slug]}/_ArticleMeta.svelte  |  0
 .../src/routes/article/[slug]/_Comment.svelte | 60 +++++++++++++++++++
 .../article/[slug]/_CommentContainer.svelte   | 36 +++++++++++
 .../article/[slug]/_CommentInput.svelte       | 52 ++++++++++++++++
 .../article/[slug]/comments/[id].json.js      | 14 +++++
 .../article/[slug]/comments/index.json.js     | 46 ++++++++++++++
 .../src/routes/article/[slug]/index.json.js   | 10 ++++
 .../src/routes/article/[slug]/index.svelte    | 36 +++++------
 .../src/routes/article/_Comment.svelte        | 39 ------------
 .../routes/article/_CommentContainer.svelte   | 27 ---------
 .../src/routes/article/_CommentInput.svelte   | 31 ----------
 13 files changed, 262 insertions(+), 118 deletions(-)
 create mode 100644 examples/realworld.svelte.dev/src/common/actions.js
 rename examples/realworld.svelte.dev/src/routes/article/{ => [slug]}/_ArticleMeta.svelte (100%)
 create mode 100644 examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte
 create mode 100644 examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentContainer.svelte
 create mode 100644 examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte
 create mode 100644 examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js
 create mode 100644 examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js
 create mode 100644 examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
 delete mode 100644 examples/realworld.svelte.dev/src/routes/article/_Comment.svelte
 delete mode 100644 examples/realworld.svelte.dev/src/routes/article/_CommentContainer.svelte
 delete mode 100644 examples/realworld.svelte.dev/src/routes/article/_CommentInput.svelte

diff --git a/examples/realworld.svelte.dev/src/common/actions.js b/examples/realworld.svelte.dev/src/common/actions.js
new file mode 100644
index 000000000000..7d22f8362189
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/common/actions.js
@@ -0,0 +1,28 @@
+const noop = () => {};
+
+export function ajax(node, { onsubmit = noop, onresponse = noop } = {}) {
+	const handler = async (event) => {
+		event.preventDefault();
+		const body = node.method === 'post' || node.method === 'put' ? new FormData(node) : null;
+
+		onsubmit(body);
+
+		const response = await fetch(node.action, {
+			method: node.method,
+			body,
+			headers: {
+				accept: 'application/json'
+			}
+		});
+
+		onresponse(response);
+	};
+
+	node.addEventListener('submit', handler);
+
+	return {
+		destroy() {
+			node.removeEventListener('submit', handler);
+		}
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/common/constants.js b/examples/realworld.svelte.dev/src/common/constants.js
index a666ee388147..c126f48df643 100644
--- a/examples/realworld.svelte.dev/src/common/constants.js
+++ b/examples/realworld.svelte.dev/src/common/constants.js
@@ -1 +1,2 @@
 export const page_size = 10;
+export const placeholder = 'https://static.productionready.io/images/smiley-cyrus.jpg';
diff --git a/examples/realworld.svelte.dev/src/routes/article/_ArticleMeta.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/_ArticleMeta.svelte
similarity index 100%
rename from examples/realworld.svelte.dev/src/routes/article/_ArticleMeta.svelte
rename to examples/realworld.svelte.dev/src/routes/article/[slug]/_ArticleMeta.svelte
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte
new file mode 100644
index 000000000000..a322b1da7778
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte
@@ -0,0 +1,60 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { ajax } from '$common/actions.js';
+
+	export let comment;
+	export let slug;
+	export let user;
+
+	const dispatch = createEventDispatcher();
+	const onresponse = (res) => {
+		if (res.ok) {
+			// check the comment was deleted (e.g. we didn't
+			// double-click and submit twice)
+			dispatch('deleted');
+		}
+	};
+</script>
+
+<div class="card">
+	<div class="card-block">
+		<p class="card-text">{comment.body}</p>
+	</div>
+
+	<div class="card-footer">
+		<a href="/profile/@{comment.author.username}" class="comment-author">
+			<img src={comment.author.image} class="comment-author-img" alt={comment.author.username} />
+		</a>
+
+		<a
+			href="/profile/@{comment.author.username}"
+			class="comment-author"
+		>{comment.author.username}</a>
+
+		<span class="date-posted"> {new Date(comment.createdAt).toDateString()} </span>
+
+		{#if user && comment.author.username === user.username}
+			<form
+				action="/article/{slug}/comments/{comment.id}.json?_method=delete"
+				method="post"
+				class="mod-options"
+				use:ajax={{ onresponse }}
+			>
+				<button class="ion-trash-a" />
+			</form>
+		{/if}
+	</div>
+</div>
+
+<style>
+	button {
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font-size: inherit;
+		margin-left: 5px;
+		opacity: 0.6;
+		cursor: pointer;
+	}
+</style>
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentContainer.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentContainer.svelte
new file mode 100644
index 000000000000..19d809400092
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentContainer.svelte
@@ -0,0 +1,36 @@
+<script>
+	import CommentInput from './_CommentInput.svelte';
+	import Comment from './_Comment.svelte';
+
+	export let comments;
+	export let slug;
+	export let user;
+</script>
+
+<div class="col-xs-12 col-md-8 offset-md-2">
+	{#if user}
+		<div>
+			<CommentInput
+				{slug}
+				{user}
+				on:commented={({ detail }) => (comments = [detail.comment, ...comments])}
+			/>
+		</div>
+	{:else}
+		<p>
+			<a href="/login">Sign in</a>
+			or
+			<a href="/register">sign up</a>
+			to add comments on this article.
+		</p>
+	{/if}
+
+	{#each comments as comment, i (comment.id)}
+		<Comment
+			{comment}
+			{slug}
+			{user}
+			on:deleted={() => (comments = [...comments.slice(0, i), ...comments.slice(i + 1)])}
+		/>
+	{/each}
+</div>
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte
new file mode 100644
index 000000000000..bf46a5cd3473
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { placeholder } from '$common/constants.js';
+	import { ajax } from '$common/actions.js';
+
+	export let slug;
+	export let user;
+
+	const dispatch = createEventDispatcher();
+
+	let body = '';
+	let submitting = false;
+
+	const onsubmit = () => {
+		submitting = true;
+	};
+
+	const onresponse = async (res) => {
+		if (res.ok) {
+			const comment = await res.json();
+			dispatch('commented', { comment });
+			body = '';
+		} else {
+			// TODO error handling
+		}
+
+		submitting = false;
+	};
+</script>
+
+<form
+	action="/article/{slug}/comments.json"
+	method="post"
+	class="card comment-form"
+	use:ajax={{ onsubmit, onresponse }}
+>
+	<div class="card-block">
+		<textarea
+			disabled={submitting}
+			class="form-control"
+			name="comment"
+			placeholder="Write a comment..."
+			bind:value={body}
+			rows="3"
+		/>
+	</div>
+
+	<div class="card-footer">
+		<img src={user.image || placeholder} class="comment-author-img" alt={user.username} />
+		<button disabled={submitting} class="btn btn-sm btn-primary" type="submit">Post Comment</button>
+	</div>
+</form>
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js
new file mode 100644
index 000000000000..28098bedc0b9
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js
@@ -0,0 +1,14 @@
+import * as api from '$common/api.js';
+
+export async function del(request, context) {
+	if (!context.user) {
+		return { status: 401 };
+	}
+
+	const { slug, id } = request.params;
+	const { status, error } = await api.del(`articles/${slug}/comments/${id}`, context.user.token);
+
+	if (error) {
+		return { status, body: { error } };
+	}
+}
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js
new file mode 100644
index 000000000000..79bc85adf367
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js
@@ -0,0 +1,46 @@
+import * as api from '$common/api.js';
+
+export async function get(request, context) {
+	const { slug } = request.params;
+	const { comments } = await api.get(
+		`articles/${slug}/comments`,
+		context.user && context.user.token
+	);
+
+	return {
+		body: comments
+	};
+}
+
+export async function post(request, context) {
+	if (!context.user) {
+		return { status: 401 };
+	}
+
+	const { slug } = request.params;
+	const body = request.body.get('comment');
+
+	const { comment } = await api.post(
+		`articles/${slug}/comments`,
+		{ comment: { body } },
+		context.user.token
+	);
+
+	// for AJAX requests, return the newly created comment
+	if (request.headers.accept === 'application/json') {
+		return {
+			status: 201, // created
+			body: comment
+		};
+	}
+
+	// for traditional (no-JS) form submissions, redirect
+	// back to the article page
+	console.log(`redirecting to /article/${slug}`);
+	return {
+		status: 303, // see other
+		headers: {
+			location: `/article/${slug}`
+		}
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
new file mode 100644
index 000000000000..c4a44c0de96a
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
@@ -0,0 +1,10 @@
+import * as api from '$common/api.js';
+
+export async function get(request, context) {
+	const { slug } = request.params;
+	const { article } = await api.get(`articles/${slug}`, context.user && context.user.token);
+
+	return {
+		body: article
+	};
+}
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/index.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.svelte
index 967d40cb44b5..5665d04d3a0f 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.svelte
@@ -1,18 +1,18 @@
 <script context="module">
-	import * as api from '$common/api.js';
-
-	export async function load({ page }) {
+	export async function load({ page, fetch }) {
 		const { slug } = page.params;
-		const { article } = await api.get(`articles/${slug}`, null);
+		const [article, comments] = await Promise.all([
+			fetch(`/article/${slug}.json`).then((r) => r.json()),
+			fetch(`/article/${slug}/comments.json`).then((r) => r.json())
+		]);
 
 		return {
-			props: { article, slug }
+			props: { article, comments, slug }
 		};
 	}
 </script>
 
 <script>
-	import { onMount } from 'svelte';
 	import { session } from '$app/stores';
 	import marked from 'marked';
 
@@ -20,16 +20,10 @@
 	import CommentContainer from './_CommentContainer.svelte';
 
 	export let article;
+	export let comments;
 	export let slug;
 
-	let commentErrors, comments = []; // we'll lazy-load these in onMount
 	$: markup = marked(article.body);
-
-	onMount(() => {
-		api.get(`articles/${slug}/comments`).then((res) => {
-			comments = res.comments;
-		});
-	});
 </script>
 
 <svelte:head>
@@ -40,20 +34,20 @@
 	<div class="banner">
 		<div class="container">
 			<h1>{article.title}</h1>
-			<ArticleMeta {article} user={$session.user}/>
+			<ArticleMeta {article} user={$session.user} />
 		</div>
 	</div>
 
 	<div class="container page">
 		<div class="row article-content">
 			<div class="col-xs-12">
-				<div>{@html markup}</div>
+				<div>
+					{@html markup}
+				</div>
 
 				<ul class="tag-list">
 					{#each article.tagList as tag}
-						<li class="tag-default tag-pill tag-outline">
-							{tag}
-						</li>
+						<li class="tag-default tag-pill tag-outline">{tag}</li>
 					{/each}
 				</ul>
 			</div>
@@ -61,10 +55,10 @@
 
 		<hr />
 
-		<div class="article-actions"></div>
+		<div class="article-actions" />
 
 		<div class="row">
-			<CommentContainer {slug} {comments} user={$session.user} errors={commentErrors}/>
+			<CommentContainer {slug} {comments} user={$session.user} errors={[]} />
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/examples/realworld.svelte.dev/src/routes/article/_Comment.svelte b/examples/realworld.svelte.dev/src/routes/article/_Comment.svelte
deleted file mode 100644
index e373ff376d7e..000000000000
--- a/examples/realworld.svelte.dev/src/routes/article/_Comment.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-	import * as api from '$common/api.js';
-
-	export let comment;
-	export let slug;
-	export let user;
-
-	const dispatch = createEventDispatcher();
-
-	async function remove() {
-		await api.del(`articles/${slug}/comments/${comment.id}`, user && user.token);
-		dispatch("deleted");
-	}
-</script>
-
-<div class="card">
-	<div class="card-block">
-		<p class="card-text">{comment.body}</p>
-	</div>
-
-	<div class="card-footer">
-		<a href='/profile/@{comment.author.username}' class="comment-author">
-			<img src={comment.author.image} class="comment-author-img" alt={comment.author.username} />
-		</a>
-
-		<a href='/profile/@{comment.author.username}' class="comment-author">{comment.author.username}</a>
-
-		<span class="date-posted">
-			{new Date(comment.createdAt).toDateString()}
-		</span>
-
-		{#if user && comment.author.username === user.username}
-			<span class="mod-options">
-				<i class="ion-trash-a" on:click='{remove}'></i>
-			</span>
-		{/if}
-	</div>
-</div>
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/routes/article/_CommentContainer.svelte b/examples/realworld.svelte.dev/src/routes/article/_CommentContainer.svelte
deleted file mode 100644
index ab2a64595044..000000000000
--- a/examples/realworld.svelte.dev/src/routes/article/_CommentContainer.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-	import ListErrors from '$components/ListErrors.svelte';
-	import CommentInput from './_CommentInput.svelte';
-	import Comment from './_Comment.svelte';
-
-	export let comments;
-	export let errors;
-	export let slug;
-	export let user;
-</script>
-
-<div class="col-xs-12 col-md-8 offset-md-2">
-	{#if user}
-		<div>
-			<ListErrors {errors}/>
-			<CommentInput {slug} {user} on:commented='{({ detail }) => comments = [detail.comment, ...comments] }'/>
-		</div>
-	{:else}
-		<p>
-			<a href="/login">Sign in</a> or <a href="/register">sign up</a> to add comments on this article.
-		</p>
-	{/if}
-
-	{#each comments as comment, i (comment.id)}
-		<Comment {comment} {slug} {user} on:deleted='{() => comments = comments.filter((_, index) => i !== index)}'/>
-	{/each}
-</div>
\ No newline at end of file
diff --git a/examples/realworld.svelte.dev/src/routes/article/_CommentInput.svelte b/examples/realworld.svelte.dev/src/routes/article/_CommentInput.svelte
deleted file mode 100644
index 0379ebe6570e..000000000000
--- a/examples/realworld.svelte.dev/src/routes/article/_CommentInput.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-	import * as api from '$common/api.js';
-
-	export let slug;
-	export let user;
-
-	const dispatch = createEventDispatcher();
-
-	let body = '';
-
-	async function submit(event) {
-		const response = await api.post(`articles/${slug}/comments`, { comment: { body } }, user && user.token);
-
-		if (response.comment) {
-			dispatch('commented', response);
-			body = '';
-		}
-	}
-</script>
-
-<form class="card comment-form" on:submit|preventDefault='{submit}'>
-	<div class="card-block">
-		<textarea class="form-control" placeholder="Write a comment..." bind:value={body} rows="3"/>
-	</div>
-
-	<div class="card-footer">
-		<img src={user.image} class="comment-author-img" alt={user.username} >
-		<button class="btn btn-sm btn-primary" type="submit">Post Comment</button>
-	</div>
-</form>
\ No newline at end of file

From 39a6aa00fd06e5842de78c460f4c9e792406952f Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 4 Jan 2021 12:05:47 -0500
Subject: [PATCH 25/28] some changes i apparently made before christmas

---
 .../src/routes/article/[slug]/index.json.js   |  4 ++
 .../src/routes/article/index.json.js          |  1 +
 .../src/routes/editor/_Editor.svelte          | 65 ++++++++++++-------
 3 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 examples/realworld.svelte.dev/src/routes/article/index.json.js

diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
index c4a44c0de96a..33014a6076d0 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
@@ -8,3 +8,7 @@ export async function get(request, context) {
 		body: article
 	};
 }
+
+export async function put(request, context) {
+	console.log('put', request);
+}
diff --git a/examples/realworld.svelte.dev/src/routes/article/index.json.js b/examples/realworld.svelte.dev/src/routes/article/index.json.js
new file mode 100644
index 000000000000..e4fe52e7d6c6
--- /dev/null
+++ b/examples/realworld.svelte.dev/src/routes/article/index.json.js
@@ -0,0 +1 @@
+export async function post(request, context) {}
diff --git a/examples/realworld.svelte.dev/src/routes/editor/_Editor.svelte b/examples/realworld.svelte.dev/src/routes/editor/_Editor.svelte
index 63ebad58d73a..e69855dab211 100644
--- a/examples/realworld.svelte.dev/src/routes/editor/_Editor.svelte
+++ b/examples/realworld.svelte.dev/src/routes/editor/_Editor.svelte
@@ -3,14 +3,15 @@
 	import { session } from '$app/stores';
 	import ListErrors from '$components/ListErrors.svelte';
 	import * as api from '$common/api.js';
+	import { ajax } from '$common/actions.js';
 
 	export let article;
 	export let slug;
 
-	let inProgress = false;
+	let publishing = false;
 	let errors;
 
-	function addTag(input) {
+	function add_tag(input) {
 		article.tagList = [...article.tagList, input.value];
 		input.value = '';
 	}
@@ -19,19 +20,15 @@
 		article.tagList = [...article.tagList.slice(0, index), ...article.tagList.slice(index + 1)];
 	}
 
-	async function publish() {
-		inProgress = true;
+	const onsubmit = () => {
+		publishing = true;
+	};
 
-		const response = await (slug
-			? api.put(`articles/${slug}`, { article }, $session.user && $session.user.token)
-			: api.post('articles', { article }, $session.user && $session.user.token));
-
-		if (response.article) {
-			goto(`/article/${response.article.slug}`);
+	const onresponse = async (res) => {
+		if (res.ok) {
+			goto(res.headers.get('location'));
 		}
-
-		inProgress = false;
-	}
+	};
 
 	function enter(node, callback) {
 		function onkeydown(event) {
@@ -52,36 +49,60 @@
 	<div class="container page">
 		<div class="row">
 			<div class="col-md-10 offset-md-1 col-xs-12">
-				<ListErrors {errors}/>
+				<ListErrors {errors} />
 
-				<form>
+				<form
+					action={slug ? `/article/${slug}.json?_method=put` : `/article.json`}
+					method="post"
+					use:ajax={{ onsubmit, onresponse }}
+				>
 					<fieldset>
 						<fieldset class="form-group">
-							<input class="form-control form-control-lg" type="text" placeholder="Article Title" bind:value={article.title}>
+							<input
+								class="form-control form-control-lg"
+								type="text"
+								placeholder="Article Title"
+								bind:value={article.title}
+							/>
 						</fieldset>
 
 						<fieldset class="form-group">
-							<input class="form-control" type="text" placeholder="What's this article about?" bind:value={article.description}>
+							<input
+								class="form-control"
+								type="text"
+								placeholder="What's this article about?"
+								bind:value={article.description}
+							/>
 						</fieldset>
 
 						<fieldset class="form-group">
-							<textarea class="form-control" rows="8" placeholder="Write your article (in markdown)" bind:value={article.body}/>
+							<textarea
+								class="form-control"
+								rows="8"
+								placeholder="Write your article (in markdown)"
+								bind:value={article.body}
+							/>
 						</fieldset>
 
 						<fieldset class="form-group">
-							<input class="form-control" type="text" placeholder="Enter tags" use:enter={addTag}>
+							<input
+								class="form-control"
+								type="text"
+								placeholder="Enter tags"
+								use:enter={add_tag}
+							/>
 
 							<div class="tag-list">
 								{#each article.tagList as tag, i}
 									<span class="tag-default tag-pill">
-										<i class="ion-close-round" on:click='{() => remove(i)}'/>
+										<i class="ion-close-round" on:click={() => remove(i)} />
 										{tag}
 									</span>
 								{/each}
 							</div>
 						</fieldset>
 
-						<button class="btn btn-lg pull-xs-right btn-primary" type="button" disabled={inProgress} on:click={publish}>
+						<button class="btn btn-lg pull-xs-right btn-primary" disabled={publishing}>
 							Publish Article
 						</button>
 					</fieldset>
@@ -89,4 +110,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>

From d4d9b43737787297377dd7393c08dd94d160c3b6 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 23 Mar 2021 20:05:31 -0400
Subject: [PATCH 26/28] update imports

---
 .../src/routes/article/[slug]/_Comment.svelte              | 2 +-
 .../src/routes/article/[slug]/_CommentInput.svelte         | 4 ++--
 .../src/routes/article/[slug]/comments/[id].json.js        | 2 +-
 .../src/routes/article/[slug]/comments/index.json.js       | 2 +-
 .../src/routes/article/[slug]/index.json.js                | 2 +-
 examples/realworld.svelte.dev/src/routes/articles.json.js  | 4 ++--
 .../realworld.svelte.dev/src/routes/login/index.svelte     | 7 ++++++-
 .../src/routes/profile/@[user]/_get_articles.js            | 4 ++--
 .../src/routes/profile/@[user]/follow.js                   | 2 +-
 .../src/routes/profile/@[user]/index.json.js               | 2 +-
 examples/realworld.svelte.dev/src/routes/tags.json.js      | 2 +-
 11 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte
index a322b1da7778..f135152ebed9 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import { ajax } from '$common/actions.js';
+	import { ajax } from '$lib/actions.js';
 
 	export let comment;
 	export let slug;
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte
index bf46a5cd3473..7b78034b13cc 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import { placeholder } from '$common/constants.js';
-	import { ajax } from '$common/actions.js';
+	import { placeholder } from '$lib/constants.js';
+	import { ajax } from '$lib/actions.js';
 
 	export let slug;
 	export let user;
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js
index 28098bedc0b9..7ab0ba68db5e 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js
@@ -1,4 +1,4 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export async function del(request, context) {
 	if (!context.user) {
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js
index 79bc85adf367..f9162f60d59f 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js
@@ -1,4 +1,4 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export async function get(request, context) {
 	const { slug } = request.params;
diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
index 33014a6076d0..3ba84107bc69 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js
@@ -1,4 +1,4 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export async function get(request, context) {
 	const { slug } = request.params;
diff --git a/examples/realworld.svelte.dev/src/routes/articles.json.js b/examples/realworld.svelte.dev/src/routes/articles.json.js
index 09dba5ed48fa..1ccc7f0e8029 100644
--- a/examples/realworld.svelte.dev/src/routes/articles.json.js
+++ b/examples/realworld.svelte.dev/src/routes/articles.json.js
@@ -1,5 +1,5 @@
-import * as api from '$common/api';
-import { page_size } from '$common/constants';
+import * as api from '$lib/api';
+import { page_size } from '$lib/constants';
 
 export async function get(request, context) {
 	const tab = request.query.get('tab') || 'all';
diff --git a/examples/realworld.svelte.dev/src/routes/login/index.svelte b/examples/realworld.svelte.dev/src/routes/login/index.svelte
index c04ab2819922..d1f58a32605b 100644
--- a/examples/realworld.svelte.dev/src/routes/login/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/login/index.svelte
@@ -1,8 +1,13 @@
 <script context="module">
 	export async function load({ session }) {
 		if (session.user) {
-			return { redirect: '/', status: 302 };
+			return {
+				status: 302,
+				redirect: '/'
+			};
 		}
+
+		return {};
 	}
 </script>
 
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js
index 2a7ca46a3a20..770e3c48078a 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/_get_articles.js
@@ -1,5 +1,5 @@
-import * as api from '$common/api.js';
-import { page_size } from '$common/constants.js';
+import * as api from '$lib/api.js';
+import { page_size } from '$lib/constants.js';
 
 export async function get_articles(request, context, type) {
 	const p = +request.query.get('page') || 1;
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js
index e1a6d0f26c98..2dea1be015f5 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/follow.js
@@ -1,4 +1,4 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export async function post(request, context) {
 	return {
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js
index c59a94ebf884..6384fa7ea069 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.json.js
@@ -1,4 +1,4 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export async function get(request, context) {
 	const { profile } = await api.get(
diff --git a/examples/realworld.svelte.dev/src/routes/tags.json.js b/examples/realworld.svelte.dev/src/routes/tags.json.js
index 9e5fdad936f2..6a4f8d345ced 100644
--- a/examples/realworld.svelte.dev/src/routes/tags.json.js
+++ b/examples/realworld.svelte.dev/src/routes/tags.json.js
@@ -1,4 +1,4 @@
-import * as api from '$common/api';
+import * as api from '$lib/api';
 
 export async function get() {
 	const { tags } = await api.get('tags');

From 20c59c603136902ab88225262ad67b7f182e8389 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 23 Mar 2021 20:29:38 -0400
Subject: [PATCH 27/28] minor fixes

---
 .../src/routes/article/[slug]/_ArticleMeta.svelte          | 4 ++--
 .../realworld.svelte.dev/src/routes/editor/index.svelte    | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug]/_ArticleMeta.svelte b/examples/realworld.svelte.dev/src/routes/article/[slug]/_ArticleMeta.svelte
index edd0c34cdd0b..63fb17f09cae 100644
--- a/examples/realworld.svelte.dev/src/routes/article/[slug]/_ArticleMeta.svelte
+++ b/examples/realworld.svelte.dev/src/routes/article/[slug]/_ArticleMeta.svelte
@@ -5,7 +5,7 @@
 	export let article;
 	export let user;
 
-	$: canModify = user && article.author.username === user.username;
+	$: can_modify = user && article.author.username === user.username;
 
 	async function remove() {
 		await api.del(`articles/${article.slug}`, user && user.token);
@@ -25,7 +25,7 @@
 		</span>
 	</div>
 
-	{#if canModify}
+	{#if can_modify}
 		<span>
 			<a href='/editor/{article.slug}' class="btn btn-outline-secondary btn-sm">
 				<i class="ion-edit"/> Edit Article
diff --git a/examples/realworld.svelte.dev/src/routes/editor/index.svelte b/examples/realworld.svelte.dev/src/routes/editor/index.svelte
index 946b4b344912..9ce9f986fd80 100644
--- a/examples/realworld.svelte.dev/src/routes/editor/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/editor/index.svelte
@@ -1,8 +1,13 @@
 <script context="module">
 	export function load({ session }) {
 		if (!session.user) {
-			return { redirect: `/login`, status: 302 };
+			return {
+				status: 302,
+				redirect: `/login`
+			};
 		}
+
+		return {};
 	}
 </script>
 

From fb582871b036f7f395f1c9d022956e6a9d7e6a83 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 24 Mar 2021 22:26:31 -0400
Subject: [PATCH 28/28] fix imports

---
 .../src/routes/profile/@[user]/favorites.svelte                 | 2 +-
 .../src/routes/profile/@[user]/index.svelte                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
index 1be1d220558e..065761c641d2 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/favorites.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <script>
-	import ArticleList from '$components/ArticleList/index.svelte';
+	import ArticleList from '$lib/ArticleList/index.svelte';
 
 	export let articles;
 </script>
diff --git a/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
index 0c375ee1c5ca..3903dda342f1 100644
--- a/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
+++ b/examples/realworld.svelte.dev/src/routes/profile/@[user]/index.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <script>
-	import ArticleList from '$components/ArticleList/index.svelte';
+	import ArticleList from '$lib/ArticleList/index.svelte';
 
 	export let articles;
 </script>