From 84c6d4f0a4d3d8156088b156fd7c74971f305dd1 Mon Sep 17 00:00:00 2001 From: Alex Rock Date: Tue, 23 Jan 2024 14:32:22 +0100 Subject: [PATCH 1/8] Proposal tu summarize routing files' base behavior MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I had to coach a Svelte newcomer about this recently, and created this "chart" for him to better understand what file he *actually* needed to create and the differences between them, without him having to read the whole docs (he is not super proficient in English unfortunately). Turns out he understood it directly, so I think it can be a good addition 🙏 --- documentation/docs/20-core-concepts/10-routing.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index 66f9ce3a6091..766b9a97e156 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -12,6 +12,19 @@ At the heart of SvelteKit is a _filesystem-based router_. The routes of your app Each route directory contains one or more _route files_, which can be identified by their `+` prefix. +Summary of the routing files: + +| File name | Role | Propagates to sub-dirs | SSR | CSR | +|-------------------|---------------------------------------------------------------------|:----------------------:|:---:|:---:| +| +page.svelte | Create an HTML page | ❌ | ✅ | ✅ | +| +error.svelte | Create an HTML page to render HTTP errors | ✅ | ✅ | ✅ | +| +layout.svelte | Create an HTML layout | ✅ | ✅ | ✅ | +| +page.js | Provide data for the **page** via the `load()` function | ❌ | ✅ | ✅ | +| +page.server.js | API endpoint for this **page**, automatically called at page load | ❌ | ✅ | ❌ | +| +server.js | API endpoint for this **page**, to be manually called via `fetch()` | ❌ | ✅ | ❌ | +| +layout.js | Provide data for the **layout** via the `load()` function | ✅ | ✅ | ✅ | +| +layout.server.js | API endpoint for this **layout**, automatically called at page load | ✅ | ✅ | ❌ | + ## +page ### +page.svelte From aee61fb4522b9423e341495bba18cddb0a19b16f Mon Sep 17 00:00:00 2001 From: Alex Rock Date: Wed, 24 Jan 2024 21:25:41 +0100 Subject: [PATCH 2/8] Apply suggestions from code review Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- documentation/docs/20-core-concepts/10-routing.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index 766b9a97e156..9f8e3117da64 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -14,15 +14,15 @@ Each route directory contains one or more _route files_, which can be identified Summary of the routing files: -| File name | Role | Propagates to sub-dirs | SSR | CSR | +| File name | Role | Propagates to sub-dirs | Runs on server | Runs on client | |-------------------|---------------------------------------------------------------------|:----------------------:|:---:|:---:| -| +page.svelte | Create an HTML page | ❌ | ✅ | ✅ | -| +error.svelte | Create an HTML page to render HTTP errors | ✅ | ✅ | ✅ | -| +layout.svelte | Create an HTML layout | ✅ | ✅ | ✅ | -| +page.js | Provide data for the **page** via the `load()` function | ❌ | ✅ | ✅ | +| +page.svelte | Creates an HTML page | ❌ | ✅ | ✅ | +| +error.svelte | Creates an HTML page to render HTTP errors | ✅ | ✅ | ✅ | +| +layout.svelte | Creates an HTML layout | ✅ | ✅ | ✅ | +| +page.js | Provides data for the **page** via the `load()` function | ❌ | ✅ | ✅ | | +page.server.js | API endpoint for this **page**, automatically called at page load | ❌ | ✅ | ❌ | -| +server.js | API endpoint for this **page**, to be manually called via `fetch()` | ❌ | ✅ | ❌ | -| +layout.js | Provide data for the **layout** via the `load()` function | ✅ | ✅ | ✅ | +| +server.js | API endpoint | ❌ | ✅ | ❌ | +| +layout.js | Provides data for the **layout** via the `load()` function | ✅ | ✅ | ✅ | | +layout.server.js | API endpoint for this **layout**, automatically called at page load | ✅ | ✅ | ❌ | ## +page From 563bd4df1eeb5b2f32de6d2c346d0fda3be8754f Mon Sep 17 00:00:00 2001 From: Alex Rock Ancelet Date: Wed, 24 Jan 2024 21:26:42 +0100 Subject: [PATCH 3/8] Reformat table --- .../docs/20-core-concepts/10-routing.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index 9f8e3117da64..715f5a01c5f7 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -15,15 +15,15 @@ Each route directory contains one or more _route files_, which can be identified Summary of the routing files: | File name | Role | Propagates to sub-dirs | Runs on server | Runs on client | -|-------------------|---------------------------------------------------------------------|:----------------------:|:---:|:---:| -| +page.svelte | Creates an HTML page | ❌ | ✅ | ✅ | -| +error.svelte | Creates an HTML page to render HTTP errors | ✅ | ✅ | ✅ | -| +layout.svelte | Creates an HTML layout | ✅ | ✅ | ✅ | -| +page.js | Provides data for the **page** via the `load()` function | ❌ | ✅ | ✅ | -| +page.server.js | API endpoint for this **page**, automatically called at page load | ❌ | ✅ | ❌ | -| +server.js | API endpoint | ❌ | ✅ | ❌ | -| +layout.js | Provides data for the **layout** via the `load()` function | ✅ | ✅ | ✅ | -| +layout.server.js | API endpoint for this **layout**, automatically called at page load | ✅ | ✅ | ❌ | +|-------------------|---------------------------------------------------------------------|:----------------------:|:--------------:|:--------------:| +| +page.svelte | Creates an HTML page | ❌ | ✅ | ✅ | +| +error.svelte | Creates an HTML page to render HTTP errors | ✅ | ✅ | ✅ | +| +layout.svelte | Creates an HTML layout | ✅ | ✅ | ✅ | +| +page.js | Provides data for the **page** via the `load()` function | ❌ | ✅ | ✅ | +| +page.server.js | API endpoint for this **page**, automatically called at page load | ❌ | ✅ | ❌ | +| +server.js | API endpoint | ❌ | ✅ | ❌ | +| +layout.js | Provides data for the **layout** via the `load()` function | ✅ | ✅ | ✅ | +| +layout.server.js | API endpoint for this **layout**, automatically called at page load | ✅ | ✅ | ❌ | ## +page From f32b7add8c9457b60e6b35b011fd0cd03ed9cd10 Mon Sep 17 00:00:00 2001 From: Alex Rock Date: Sat, 27 Jan 2024 19:42:26 +0100 Subject: [PATCH 4/8] Apply suggestions from code review Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .../docs/20-core-concepts/10-routing.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index 715f5a01c5f7..bc205ea921d3 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -14,16 +14,16 @@ Each route directory contains one or more _route files_, which can be identified Summary of the routing files: -| File name | Role | Propagates to sub-dirs | Runs on server | Runs on client | -|-------------------|---------------------------------------------------------------------|:----------------------:|:--------------:|:--------------:| -| +page.svelte | Creates an HTML page | ❌ | ✅ | ✅ | -| +error.svelte | Creates an HTML page to render HTTP errors | ✅ | ✅ | ✅ | -| +layout.svelte | Creates an HTML layout | ✅ | ✅ | ✅ | -| +page.js | Provides data for the **page** via the `load()` function | ❌ | ✅ | ✅ | -| +page.server.js | API endpoint for this **page**, automatically called at page load | ❌ | ✅ | ❌ | -| +server.js | API endpoint | ❌ | ✅ | ❌ | -| +layout.js | Provides data for the **layout** via the `load()` function | ✅ | ✅ | ✅ | -| +layout.server.js | API endpoint for this **layout**, automatically called at page load | ✅ | ✅ | ❌ | +| File name | Role | Propagates to subdirectories | Runs on server | Runs on client | +|-------------------|-----------------------------------------------------------------|:----------------------------:|:--------------:|:--------------:| +| +page.svelte | Creates an HTML page | ❌ | ✅ | ✅ | +| +error.svelte | Creates an HTML page to render HTTP errors | ✅ | ✅ | ✅ | +| +layout.svelte | Creates an HTML layout | ✅ | ✅ | ✅ | +| +page.js | Provides data for the page via the `load()` function | ❌ | ✅ | ✅ | +| +page.server.js | API endpoint for this page, automatically called at page load | ❌ | ✅ | ❌ | +| +server.js | API endpoint | ❌ | ✅ | ❌ | +| +layout.js | Provides data for the layout via the `load()` function | ✅ | ✅ | ✅ | +| +layout.server.js | API endpoint for this layout, automatically called at page load | ✅ | ✅ | ❌ | ## +page From b58f90cb3fc8b78df4fe6fa73dc215e5a6fc63ca Mon Sep 17 00:00:00 2001 From: Alex Rock Ancelet Date: Wed, 19 Jun 2024 09:13:32 +0200 Subject: [PATCH 5/8] Replace table view with a smaller summary --- .../docs/20-core-concepts/10-routing.md | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index bc205ea921d3..2ed5c350fa8e 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -12,18 +12,11 @@ At the heart of SvelteKit is a _filesystem-based router_. The routes of your app Each route directory contains one or more _route files_, which can be identified by their `+` prefix. -Summary of the routing files: - -| File name | Role | Propagates to subdirectories | Runs on server | Runs on client | -|-------------------|-----------------------------------------------------------------|:----------------------------:|:--------------:|:--------------:| -| +page.svelte | Creates an HTML page | ❌ | ✅ | ✅ | -| +error.svelte | Creates an HTML page to render HTTP errors | ✅ | ✅ | ✅ | -| +layout.svelte | Creates an HTML layout | ✅ | ✅ | ✅ | -| +page.js | Provides data for the page via the `load()` function | ❌ | ✅ | ✅ | -| +page.server.js | API endpoint for this page, automatically called at page load | ❌ | ✅ | ❌ | -| +server.js | API endpoint | ❌ | ✅ | ❌ | -| +layout.js | Provides data for the layout via the `load()` function | ✅ | ✅ | ✅ | -| +layout.server.js | API endpoint for this layout, automatically called at page load | ✅ | ✅ | ❌ | +Here are a few simple rules to help you remember how SvelteKit's routing works: + +* All files can run on the **server** +* Files run on the **client**, except `+server` files +* `+layout` and `+error` files affect routes in subdirectories ## +page From 96fa0547688486199313be3e99dcc34af9bb5d29 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 19 Jun 2024 12:44:52 -0700 Subject: [PATCH 6/8] Update documentation/docs/20-core-concepts/10-routing.md --- documentation/docs/20-core-concepts/10-routing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index 2ed5c350fa8e..f55cc27c8434 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -14,9 +14,9 @@ Each route directory contains one or more _route files_, which can be identified Here are a few simple rules to help you remember how SvelteKit's routing works: -* All files can run on the **server** -* Files run on the **client**, except `+server` files -* `+layout` and `+error` files affect routes in subdirectories +* All files can run on the server +* All files run on the client except `+server` files +* `+layout` and `+error` files affect the rendering of routes in subdirectories ## +page From 36415e5b33426f887e98ae98825cce70cdb27cee Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 19 Jun 2024 12:45:22 -0700 Subject: [PATCH 7/8] Update documentation/docs/20-core-concepts/10-routing.md --- documentation/docs/20-core-concepts/10-routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index f55cc27c8434..9fe1282dfb0d 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -12,7 +12,7 @@ At the heart of SvelteKit is a _filesystem-based router_. The routes of your app Each route directory contains one or more _route files_, which can be identified by their `+` prefix. -Here are a few simple rules to help you remember how SvelteKit's routing works: +We'll introduce these files in a moment in more detail, but here are a few simple rules to help you remember how SvelteKit's routing works: * All files can run on the server * All files run on the client except `+server` files From 26123d435e5217d7cc37df94a76825182e30d1b3 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 19 Jun 2024 12:54:37 -0700 Subject: [PATCH 8/8] Update documentation/docs/20-core-concepts/10-routing.md --- documentation/docs/20-core-concepts/10-routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/20-core-concepts/10-routing.md b/documentation/docs/20-core-concepts/10-routing.md index 9fe1282dfb0d..2ba9db472d3f 100644 --- a/documentation/docs/20-core-concepts/10-routing.md +++ b/documentation/docs/20-core-concepts/10-routing.md @@ -16,7 +16,7 @@ We'll introduce these files in a moment in more detail, but here are a few simpl * All files can run on the server * All files run on the client except `+server` files -* `+layout` and `+error` files affect the rendering of routes in subdirectories +* `+layout` and `+error` files apply to subdirectories as well as the directory they live in ## +page