add event exercise

Author: Rich Harris

content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md

@@ -4,7 +4,7 @@ title: handle
 
 SvelteKit provides several _hooks_ — ways to intercept and override the framework's default behaviour.
 
-The most elementary hook is `handle`, which lives in `src/hooks.server.js`. It receives an `event` — an instance of [`RequestEvent`](https://kit.svelte.dev/docs/types#public-types-requestevent) — along with a `resolve` function, and returns a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response).
+The most elementary hook is `handle`, which lives in `src/hooks.server.js`. It receives an `event` object along with a `resolve` function, and returns a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response).
 
 `resolve` is where the magic happens: SvelteKit matches the incoming request URL to a route of your app, imports the relevant code (`+page.server.js` and `+page.svelte` files and so on), loads the data needed by the route, and generates the response.
 

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/README.md

@@ -0,0 +1,38 @@
+---
+title: The RequestEvent object
+---
+
+The `event` object passed into `handle` is the same object — an instance of a [`RequestEvent`](https://kit.svelte.dev/docs/types#public-types-requestevent) — that is passed into [API routes](get-handlers) in `+server.js` files, [form actions](the-form-element) in `+page.server.js` files, and `load` functions in `+page.server.js` and `+layout.server.js`.
+
+It contains a number of useful properties and methods, some of which we've already encountered:
+
+* `cookies` — the [cookies API](cookies)
+* `fetch` — the standard [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), with additional powers
+* `getClientAddress()` — a function to get the client's IP address
+* `isDataRequest` — `true` if the browser is requesting data for a page during client-side navigation, `false` if a page/route is being requested directly
+* `locals` — a place to put arbitrary data
+* `params` — the route parameters
+* `request` — the [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object
+* `route` — an object with an `id` property representing the route that was matched
+* `setHeaders(...)` — a function for [setting HTTP headers](headers) on the response
+* `url` — a [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object representing the current request
+
+A useful pattern is to add some data to `event.locals` in `handle` so that it can be read in subsequent `load` functions:
+
+```js
+/// file: src/hooks.server.js
+export async function handle({ event, resolve }) {
+	+++event.locals.answer = 42;+++
+	return await resolve(event);
+}
+```
+
+```js
+/// file: src/routes/+page.server.js
+export function load(+++event+++) {
+	return {
+		message: `the answer is ${+++event.locals.answer+++}`
+	};
+}
+```
+

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/app-a/src/hooks.server.js

@@ -0,0 +1,3 @@
+export async function handle({ event, resolve }) {
+	return await resolve(event);
+}

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/app-a/src/routes/+page.server.js

@@ -0,0 +1,5 @@
+export function load() {
+	return {
+		message: `the answer is ???`
+	};
+}

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/app-a/src/routes/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let data;
+</script>
+
+<h1>{data.message}</h1>

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/app-b/src/hooks.server.js

@@ -0,0 +1,4 @@
+export async function handle({ event, resolve }) {
+	event.locals.answer = 42;
+	return await resolve(event);
+}

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/app-b/src/routes/+page.server.js

@@ -0,0 +1,5 @@
+export function load(event) {
+	return {
+		message: `the answer is ${event.locals.answer}`
+	};
+}

content/tutorial/04-advanced-sveltekit/01-hooks/02-handlefetch/README.md renamed to content/tutorial/04-advanced-sveltekit/01-hooks/03-handle-fetch/README.md

@@ -0,0 +1,7 @@
+export async function load({ fetch }) {
+	const response = await fetch('/a');
+
+	return {
+		message: await response.text()
+	};
+}

content/tutorial/04-advanced-sveltekit/01-hooks/03-handle-fetch/app-a/src/routes/+page.server.js

@@ -0,0 +1,5 @@
+<script>
+	export let data;
+</script>
+
+<h1>{data.message}</h1>

content/tutorial/04-advanced-sveltekit/01-hooks/03-handle-fetch/app-a/src/routes/+page.svelte

@@ -0,0 +1,3 @@
+export function GET() {
+	return new Response('hello from a');
+}

content/tutorial/04-advanced-sveltekit/01-hooks/03-handle-fetch/app-a/src/routes/a/+server.js

@@ -0,0 +1,3 @@
+export function GET() {
+	return new Response('hello from b');
+}