tutorial

content/tutorial/02-sveltekit/02-routing/01-pages/README.md

@@ -4,6 +4,8 @@ title: Pages
 
 SvelteKit uses filesystem-based routing, which means that the _routes_ of your app — in other words, what the app should do when a user navigates to a particular URL — are defined by the directories in your codebase.
 
+The routes are located within `src/routes`. Every directory within which contains a `+page.svelte` file creates a route in your app.
+
 In this app we have two routes — `src/routes/+page.svelte`, which maps to `/`, and `src/routes/about/+page.svelte`, which maps to `/about`. Clicking the `about` link will take you from the home page to the about page.
 
 > Unlike traditional multi-page apps, navigating to `/about` updates the contents of the current page, like a single-page app. This gives us the best of both worlds — fast server-rendered startup, then instant navigation.

content/tutorial/02-sveltekit/02-routing/02-layouts/README.md

@@ -0,0 +1,32 @@
+---
+title: Layouts
+---
+
+Sections of your app often share a common UI. To not repeat that code, we can use layouts.
+
+In this app we have two routes — `src/routes/+page.svelte`, and `src/routes/about/+page.svelte`. Both contain the same header which enables us to navigate around.
+
+We can deduplicate this code by moving the common UI into a `+layout.svelte` file. All pages in the same folder or below this file will share that UI. The layout itself needs a `<slot />` at minimum to define where the content is projected.
+
+Let's move the duplicate content from `src/routes/+page.svelte` and `src/routes/about/+page.svelte` into `src/routes/+layout.svelte`:
+
+```svelte
++++<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
++++
+<slot />
++++
+<style>
+	nav {
+		display: flex;
+		justify-content: space-between;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>
++++
+```
+
+> Layouts can also be nested

content/tutorial/02-sveltekit/02-routing/02-layouts/app-a/src/routes/+layout.svelte

@@ -0,0 +1 @@
+<slot />

content/tutorial/02-sveltekit/02-routing/02-layouts/app-a/src/routes/+page.svelte

@@ -0,0 +1,17 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<h1>Home</h1>
+
+<p>This is the home page.</p>
+
+<style>
+	nav {
+		display: flex;
+		justify-content: space-between;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>

content/tutorial/02-sveltekit/02-routing/02-layouts/app-a/src/routes/about/+page.svelte

@@ -0,0 +1,17 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<h1>About</h1>
+
+<p>This is the about page.</p>
+
+<style>
+	nav {
+		display: flex;
+		justify-content: space-between;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>

content/tutorial/02-sveltekit/02-routing/02-layouts/app-b/src/routes/+layout.svelte

@@ -0,0 +1,15 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<slot />
+
+<style>
+	nav {
+		display: flex;
+		justify-content: space-between;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>

content/tutorial/02-sveltekit/02-routing/02-layouts/app-b/src/routes/+page.svelte

@@ -0,0 +1,3 @@
+<h1>Home</h1>
+
+<p>This is the home page.</p>

content/tutorial/02-sveltekit/02-routing/02-endpoints/app-a/src/routes/about/+page.svelte → content/tutorial/02-sveltekit/02-routing/02-layouts/app-b/src/routes/about/+page.svelte

@@ -1,4 +1,3 @@
 <h1>About</h1>
 
 <p>This is the about page.</p>
-<p>Go to the home page</p>

content/tutorial/02-sveltekit/02-routing/03-loading-data/README.md

@@ -0,0 +1,36 @@
+---
+title: Loading Data
+---
+
+So far, we have seen how to create pages and layouts with static UI data. Most of your apps need to load some kind of data however. You could do this with a regular `fetch` inside `onMount`. That doesn't work with server-side-rendering or prerendering though, and you'd have half-finished pages loading data only after they are rendered.
+
+SvelteKit provides a better way to do this through `load` functions.
+
+This `load` function can appear in several places. Let's start with the `load` function inside `+page.js`.
+
+This `load` function runs on the server when the user visits your page initially, and on the client for all further navigations - it's isomorphic. We call it a "shared `load` function". To harmonize the differences between client and server, use the `fetch` function passed to `load` to load data. The return type of the `load` function needs to be an object at the top level, below that everything is allowed. If we return a promise, it's awaited. The result is passed to the `data` prop inside `+page.svelte`, so we can access it through `export let data`.
+
+Let's move the call inside `src/routes/+page.svelte` into `+page.js`:
+
+```svelte
+<script>
+---	import { onMount } from 'svelte';
+
+	let greeting;
+	onMount(async () => {
+		greeting = await fetch('/api').then((r) =>
+			r.text()
+		);
+	});---
++++ export let data;+++
+</script>
+
+<p>{+++data.+++greeting}</p>
+```
+
+```js
++++export async function load({ fetch }) {
+	const greeting = await fetch('/api').then((r) => r.text());
+	return { greeting };
+}+++
+```

content/tutorial/02-sveltekit/02-routing/03-loading-data/app-a/src/routes/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let greeting;
+	onMount(async () => {
+		greeting = await fetch('/api').then((r) =>
+			r.text()
+		);
+	});
+</script>
+
+<p>{greeting}</p>

content/tutorial/02-sveltekit/02-routing/03-loading-data/app-a/src/routes/api/+server.js

@@ -0,0 +1,5 @@
+// We'll get to +server.js in a later chapter
+
+export function GET() {
+	return new Response('Hello from your API');
+}

content/tutorial/02-sveltekit/02-routing/03-loading-data/app-b/src/routes/+page.js

@@ -0,0 +1,4 @@
+export async function load({ fetch }) {
+	const greeting = await fetch('/api').then((r) => r.text());
+	return { greeting };
+}

content/tutorial/02-sveltekit/02-routing/03-loading-data/app-b/src/routes/+page.svelte

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

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/README.md

@@ -0,0 +1,28 @@
+---
+title: Loading Layout Data
+---
+
+Layouts can provide common UI across pages. They can also provide common data across pages.
+
+Providing this data is similar to the `load` function in `+page.js`, only that we place it inside `+layout.js` - notice the symmetry?
+
+Like in `+page.js`, this `load` function runs on the server when the user visits your page initially, and on the client for all further navigations - it's isomorphic. We call it a "shared `load` function". To harmonize the differences between client and server, use the `fetch` function passed to `load` to load data. The return type of the `load` function needs to be an object at the top level, below that everything is allowed. If we return a promise, it's awaited. The result is passed to the `data` prop inside `+layout.svelte`, so we can access it through `export let data`.
+
+Let's make the same call inside `src/routes/+layout.js` as we are already doing in `src/routes/+page.js`, switch the search param from `page` to `layout`:
+
+```svelte
++++<script>
+	export let data;
+</script>
++++
+<h1>---TODO---+++{data.greeting}+++</h1>
+```
+
+```js
++++export async function load({ fetch }) {
+	const greeting = await fetch('/api?layout').then((r) => r.text());
+	return { greeting };
+}+++
+```
+
+> The data for `+page.js` and `+layout.js` will be loaded in parallel, so your UI renders faster

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/+layout.svelte

@@ -0,0 +1,8 @@
+<h1>TODO</h1>
+
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<slot />

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/+page.js

@@ -0,0 +1,4 @@
+export async function load({ fetch }) {
+	const greeting = await fetch('/api?page').then((r) => r.text());
+	return { greeting };
+}

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/+page.svelte

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

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/about/+page.svelte

@@ -0,0 +1 @@
+About page

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/api/+server.js

@@ -0,0 +1,5 @@
+// We'll get to +server.js in a later chapter
+
+export function GET({ url }) {
+	return new Response('Hello ' + url.search);
+}

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-b/src/routes/+layout.js

@@ -0,0 +1,4 @@
+export async function load({ fetch }) {
+	const greeting = await fetch('/api?layout').then((r) => r.text());
+	return { greeting };
+}

content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-b/src/routes/+layout.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let data;
+</script>
+
+<h1>{data.greeting}</h1>
+
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<slot />

content/tutorial/02-sveltekit/02-routing/05-loading-server-data/README.md

@@ -0,0 +1,28 @@
+---
+title: Loading Data on the Server
+---
+
+We have seen how to load data for pages and layouts through `load` functions in `+page.js` and `+layout.js`. These functions run on both the server and the client. This has some advantages but also some drawbacks, for example you can't directly query your database, you have to use `fetch`.
+
+Luckily, SvelteKit provides a way to run a `load` _only_ on the server so you can access all your server-related data directly, by placing it inside `+page.server.js`. We call it a "server-only `load` function". The return type of the `load` function needs to be an object at the top level, and it needs to be serializable with `devalue`, which means JSON-objects and some JavaScript objects like `Date`s are allowed, but not custom classes for example. If we return a promise, it's awaited. The result is passed to the `data` prop inside `+page.svelte`, so we can access it through `export let data`.
+
+Let's make a call to our fake database inside `src/routes/+page.server.js` and show the result in `src/routes/+page.svelte`:
+
+```svelte
++++<script>
+	export let data
+</script>
++++
+<p>---TODO---+++{data.greeting}+++</p>
+```
+
+```js
+import { db } from './fake-db.js';
+
++++export async function load() {
+	const greeting = await db.getGreeting();
+	return { greeting };
+}+++
+```
+
+> Noticed how we can place `fake-db.js` right next to our page and layout files without risking to accidentally creating another route? This is one of several advantages of our "`+X` creates a route-related file"-convention

content/tutorial/02-sveltekit/02-routing/05-loading-server-data/app-a/src/routes/+page.server.js

@@ -0,0 +1 @@
+import { db } from './fake-db';

content/tutorial/02-sveltekit/02-routing/05-loading-server-data/app-a/src/routes/+page.svelte

@@ -0,0 +1 @@
+<p>TODO</p>

content/tutorial/02-sveltekit/02-routing/05-loading-server-data/app-a/src/routes/fake-db.js

@@ -0,0 +1,3 @@
+export const db = {
+	getGreeting: () => Promise.resolve('Hello from your fake data base')
+};

content/tutorial/02-sveltekit/02-routing/05-loading-server-data/app-b/src/routes/+page.server.js

@@ -0,0 +1,6 @@
+import { db } from './fake-db';
+
+export async function load() {
+	const greeting = await db.getGreeting();
+	return { greeting };
+}

content/tutorial/02-sveltekit/02-routing/05-loading-server-data/app-b/src/routes/+page.svelte

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

content/tutorial/02-sveltekit/02-routing/05-loading-server-data/app-b/src/routes/fake-db.js

@@ -0,0 +1,3 @@
+export const db = {
+	getGreeting: () => Promise.resolve('Hello from your fake data base')
+};

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/README.md

@@ -0,0 +1,33 @@
+---
+title: Loading Layout Data on the Server
+---
+
+Layouts can provide common UI across pages. They can also provide common data across pages. Like pages, they can do so from a shared `load` function or a server-only `load` function.
+
+If you have worked through the previous tutorial chapters in order, you may notice a pattern by now:
+
+- Load data for a page inside `+page.js` or `+page.server.js`
+- Load data for a layout inside `+layout.js` or `+layout.server.js`
+
+In this chapter, we look at the last of those four possibilities by placing the `load` function inside `+layout.server.js`. We call it a "server-only `load` function". The return type of the `load` function needs to be an object at the top level, and it needs to be serializable with `devalue`, which means JSON-objects and some JavaScript objects like `Date`s are allowed, but not custom classes for example. If we return a promise, it's awaited. The result is passed to the `data` prop inside `+layout.svelte`, so we can access it through `export let data`.
+
+Let's make a call to our fake database inside `src/routes/+layout.server.js` and show the result in `src/routes/+layout.svelte`:
+
+```svelte
++++<script>
+	export let data
+</script>
++++
+<p>---TODO---+++{data.greeting}+++</p>
+```
+
+```js
+import { db } from './fake-db.js';
+
++++export async function load() {
+	const greeting = await db.getGreeting('layout');
+	return { greeting };
+}+++
+```
+
+> The data for `+page.server.js` and `+layout.server.js` will be loaded in parallel, so your UI renders faster

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/app-a/src/routes/+layout.server.js

@@ -0,0 +1 @@
+import { db } from './fake-db';

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/app-a/src/routes/+layout.svelte

@@ -0,0 +1,8 @@
+<h1>TODO</h1>
+
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<slot />

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/app-a/src/routes/+page.server.js

@@ -0,0 +1,6 @@
+import { db } from './fake-db';
+
+export async function load() {
+	const greeting = await db.getGreeting('page');
+	return { greeting };
+}

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/app-a/src/routes/+page.svelte

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

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/app-a/src/routes/about/+page.svelte

@@ -0,0 +1 @@
+About page

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/app-a/src/routes/fake-db.js

@@ -0,0 +1,3 @@
+export const db = {
+	getGreeting: (toGreet) => Promise.resolve('Hello ' + toGreet)
+};

content/tutorial/02-sveltekit/02-routing/06-loading-layout-server-data/app-b/src/routes/+layout.server.js

@@ -0,0 +1,6 @@
+import { db } from './fake-db';
+
+export async function load() {
+	const greeting = await db.getGreeting('layout');
+	return { greeting };
+}