handle docs

Rich Harris · Rich Harris · commit e806416e481c · 2023-04-10T11:18:02.000-04:00
diff --git a/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md b/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md
@@ -4,4 +4,47 @@ title: handle
 
 SvelteKit provides several _hooks_ — ways to intercept and override the framework's default behaviour.
 
-> Coming soon
+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).
+
+`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.
+
+The default `handle` hook looks like this:
+
+```js
+/// file: src/hooks.server.js
+export async function handle({ event, resolve }) {
+	return await resolve(event);
+}
+```
+
+For pages (as opposed to [API routes](get-handlers)), you can modify the generated HTML with `transformPageChunk`:
+
+```js
+/// file: src/hooks.server.js
+export async function handle({ event, resolve }) {
+	return await resolve(event, {
++++		transformPageChunk: ({ html }) => html.replace(
+			'<body',
+			'<body style="color: purple"'
+		)+++
+	});
+}
+```
+
+You can also create entirely new routes:
+
+```js
+/// file: src/hooks.server.js
+export async function handle({ event, resolve }) {
++++	if (event.url.pathname === '/ping') {
+		return new Response('pong');
+	}+++
+
+	return await resolve(event, {
+		transformPageChunk: ({ html }) => html.replace(
+			'<body',
+			'<body style="color: purple"'
+		)
+	});
+}
+```
diff --git a/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/app-a/src/hooks.server.js b/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/app-a/src/hooks.server.js
@@ -0,0 +1,3 @@
+export async function handle({ event, resolve }) {
+	return await resolve(event);
+}
diff --git a/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/app-a/src/routes/+page.svelte b/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/app-a/src/routes/+page.svelte
@@ -0,0 +1,2 @@
+<h1>hello world</h1>
+<a href="/ping">ping</a>
diff --git a/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/app-b/src/hooks.server.js b/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/app-b/src/hooks.server.js
@@ -0,0 +1,12 @@
+export async function handle({ event, resolve }) {
+	if (event.url.pathname === '/ping') {
+		return new Response('pong');
+	}
+	
+	return await resolve(event, {
+		transformPageChunk: ({ html }) => html.replace(
+			'<body',
+			'<body style="color: hotpink"'
+		)
+	});
+}
diff --git a/content/tutorial/04-advanced-sveltekit/01-hooks/02-handlefetch/README.md b/content/tutorial/04-advanced-sveltekit/01-hooks/02-handlefetch/README.md
@@ -2,6 +2,4 @@
 title: handleFetch
 ---
 
-SvelteKit provides several _hooks_ — ways to intercept and override the framework's default behaviour.
-
 > Coming soon

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export async function handle({ event, resolve }) {`
	`2`	`+ return await resolve(event);`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<h1>hello world</h1>`
	`2`	`+<a href="/ping">ping</a>`