Skip to content

Commit 2ab9dba

Browse files
dummdidummtanhauhaugeoffrichRich-Harrisbenmccann
authored
tutorial (sveltejs#105)
* start of routing tutorial * more chapters * slots * chapter skeletons * mutating data section * Apply suggestions from code review Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com> * errors and redirects chapter * invalidation chapter * render options section * add missing meta.json files * advanced routing wip * fix link * matching, groups * use new capabilities to adjust tutorials * remove duplicate layout from page * more sections * tweaks * remove log * disable csrf for tutorial * more content * fix interval * leverage adding files functionality for error tutorial * simplify * tweak tutorials so people have to create the files * tweaks * tweaks and fixes * Update content/tutorial/02-sveltekit/03-mutating-data/04-progressive-enhancement/README.md Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> * switch example, because alert will prevent the ping events, resulting in an endless alert loop because of constant iframe reloads * labels for inputs * tweaks and fixes * fix * environment variables tutorial * fixes * Update content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/01-concepts/04-server-side-rendering/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/01-concepts/04-server-side-rendering/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/01-concepts/05-prerendering/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/01-concepts/05-prerendering/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/01-concepts/05-prerendering/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/02-layouts/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/02-layouts/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/02-layouts/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/02-layouts/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/02-layouts/app-a/src/routes/+page.svelte Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/02-layouts/app-a/src/routes/about/+page.svelte Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/02-layouts/app-b/src/routes/+layout.svelte Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/03-loading-data/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/02-routing/07-params/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/03-mutating-data/02-form-validation/app-b/src/routes/+page.server.js Co-authored-by: Rich Harris <hello@rich-harris.dev> * lowercase Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/06-rendering-options/02-ssr/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/02-sveltekit/06-rendering-options/03-csr/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/04-advanced-sveltekit/01-advanced-routing/01-optional-params/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/04-advanced-sveltekit/01-advanced-routing/02-rest-params/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/04-advanced-sveltekit/01-advanced-routing/03-param-matchers/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * Update content/tutorial/04-advanced-sveltekit/01-advanced-routing/04-layout-groups/README.md Co-authored-by: Rich Harris <hello@rich-harris.dev> * move explanatory content from concepts into render options chapter * remove backticks * Update content/tutorial/02-sveltekit/02-routing/05-loading-server-data/README.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * Update content/tutorial/02-sveltekit/02-routing/03-loading-data/README.md * Loading (sveltejs#115) * shuffle sections around * update error page * update params section * rename * update some content * HN example * update API route docs * fix script * tweaks * typo * fixes * fix * tweaks * use __delete * add some css * allow files to be marked for deletion * [chore] bump deps * [chore] robustify create-middleware Co-authored-by: Rich Harris <hello@rich-harris.dev> * [chore] handle offline case in +error.svelte Co-authored-by: Rich Harris <hello@rich-harris.dev> * [fix] style "/// file: .." pragmas in code blocks Co-authored-by: Rich Harris <hello@rich-harris.dev> * [feat] __delete inside file means delete that file Co-authored-by: Rich Harris <hello@rich-harris.dev> * next * fix lockfile * tweaks * [feat] __hidden file to mark folders as hidden * use hidden API instead * Update content/tutorial/02-sveltekit/02-routing/07-api-routes/README.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com> Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * fix casing * note configurability * remove mention of vite * fix solve button styles * only add data-file attribute to files * separate routing and loading into separate sections, etc * remove $types, for now * move stuff * use a todo list example - better showcases PE, avoids complexity around user/session management * swap exercise order * flesh out form examples * move invalidation to advanced section * tweak page options docs * move * flesh out example to show use of page store etc * small tweaks * better redirects tutorial * move $page.X usage into second chapter * await parent * tweaks * better private env tutorials * get rid of VITE_ prefix * fix gitignore * remove logging * fix * fixes * invalid -> fail * robustify * rename section to the less-ambiguous "exercise" for my own sanity * allow an exercise to inherit files from previous exercises to reduce duplication * remove some now-unnecessary files * delete file * hide error customisation exercise for now - not ready to talk about hooks * update errors and redirects section * more detail * tweaks * add inspector * formatting * make "next" links more sensible * fix chaining logic * update optional params example * rest params example * different param matcher example * tidy up * move some content around * add placeholder chapters on hooks and stores * env var stuff * oops, didnt mean to add these * tweak * style tweaks * move filetree components to separate folder to ease future refactoring * tweaks * remove warning spiel * update deps * use a regex * Revert "use a regex" This reverts commit ac9f872. * try this instead * use +layout.server.js instead of tutorial.json * make typescript a bit less complainy * show current exercise in menu * refactor filetree stuff a bit * remove unused import * simplify file creation, always select newly created file * move icons * oops * derive depth at point of use * simplify renaming * simplify * refactor filetree * remove unused import * make editing constraints visible - is more accessible etc * use a store for filesystem state * make constraints more granular * DRY things out a bit * more DRYing out * insertion order * various fixes * a11y fix * fix * context menu styling * fixes * DRY out actions * fix * fix * fix * DRY out some more * refactor * split up env var exercises * fix * put <img> inside <button> * remove some unnecessary files * add route group example that includes a load function * shuffle things around a bit * make breakout example more visual * oops * bump kit * add way to relax file tree constraints * fix complete/reset state toggle * pretty sure we actually want to check in the lockfile * tweak * remove TODO * tweak example * demonstrate returning non-serializable data from load function * rename exercise to invalidation * show a case where one load is invalidated and one isnt * follow previous exercise, use generic data:blah key * follow previous exercise * add coming soon messages to get us off the hook for now * remove old TODO * work around hotlinking limitation * remove __hidden mechanism, its way too confusing. comment out this exercise until we can investigate truncated bodies * add some default styles etc * more tidying up * explain CSRF stuff Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com> Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> Co-authored-by: Rich Harris <hello@rich-harris.dev> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
1 parent 726013c commit 2ab9dba

File tree

277 files changed

+6395
-2082
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

277 files changed

+6395
-2082
lines changed

‎.gitignore

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
.env
77
.env.*
88
!.env.example
9+
!/content/tutorial/04-advanced-sveltekit/06-environment-variables/**/.env
910
.apps
1011
.vercel
1112
/content/tutorial/common/.svelte-kit
12-
/content/tutorial/common/node_modules
13-
/content/tutorial/common/package-lock.json
13+
/content/tutorial/common/node_modules

‎.prettierrc

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,15 @@
77
{
88
"files": ["content/**/*.svelte"],
99
"options": {
10-
"printWidth": 50,
10+
"printWidth": 70,
1111
"requirePragma": true
1212
}
13+
},
14+
{
15+
"files": ["content/**/*.js"],
16+
"options": {
17+
"printWidth": 70
18+
}
1319
}
1420
]
1521
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,4 @@ The next steps depend on whether you want to run this locally in filesystem mode
2424

2525
## Creating new tutorials
2626

27-
Tutorials live inside `content`. Each tutorial consists of a `README.md`, which is the text to the left, and `app-a` and `app-b` folders, which represent the initial and solved state. Files that stay the same can be omitted from `app-b`. Files are marked as deleted in `app-b` if they start with `__delete`. Folders that are marked as deleted in `app-b` if they contain a file named `__delete`. Folders that contain a file named `__hidden` are not visible in the file tree.
27+
Tutorials live inside `content`. Each tutorial consists of a `README.md`, which is the text to the left, and `app-a` and `app-b` folders, which represent the initial and solved state. Files that stay the same can be omitted from `app-b`. Files are marked as deleted in `app-b` if they start with `__delete`. Folders that are marked as deleted in `app-b` if they contain a file named `__delete`.

‎content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
title: Welcome to Svelte
33
---
44

5-
> WARNING: this content is a work in progress and may be out of date. If you are learning Svelte, please refer to the [tutorial on svelte.dev](https://svelte.dev/tutorial) for now. If you are learning SvelteKit, refer to the [SvelteKit docs](https://kit.svelte.dev/docs).
6-
75
Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build fast, small web applications.
86

97
You can also consult the [API docs](https://svelte.dev/docs) and the [examples](https://svelte.dev/examples), or — if you're impatient to start hacking on your machine locally — create a project with `npm init svelte`.
@@ -25,8 +23,8 @@ This tutorial is split into four main parts:
2523
- [Welcome to Svelte](/tutorial/welcome-to-svelte) (you are here)
2624
- [Introduction to SvelteKit](/tutorial/introducing-sveltekit)
2725
- [Advanced Svelte](/tutorial/tweens)
28-
- [Advanced SvelteKit](/tutorial/sandbox)
26+
- [Advanced SvelteKit](/tutorial/optional-params)
2927

30-
Each section will present an exercise designed to illustrate a feature. Later sections build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
28+
Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
3129

3230
If you get stuck, you can click the `solve` button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.

‎content/tutorial/02-sveltekit/01-concepts/01-introducing-sveltekit/README.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
title: What is SvelteKit?
33
---
44

5-
> WARNING: this content is a work in progress and is not up to date with breaking changes in the latest version of SvelteKit. For the latest information, refer to the [SvelteKit docs](https://kit.svelte.dev/docs).
6-
75
So far, we've been working on individual components, or groups of components, in isolation. But to build a complete app, you need more than just components.
86

97
That's where SvelteKit comes in. Whereas Svelte is a _component framework_, SvelteKit is an _app framework_ (or 'metaframework', depending on who you ask) that solves the tricky problems of building something production-ready:
@@ -20,6 +18,6 @@ That's where SvelteKit comes in. Whereas Svelte is a _component framework_, Svel
2018
- Deploying to different hosting providers
2119
- ...and so on
2220

23-
It also provides a world-class development experience powered by [Vite](https://vitejs.dev). SvelteKit apps are server-rendered by default (like traditional 'multi-page apps' or MPAs) for excellent first load performance and SEO characteristics, but can then transition to client-side navigation (like modern 'single-page apps' or SPAs) to avoid jankily reloading everything (including things like third-party analytics code) when the user navigates. They can run anywhere JavaScript runs, though — as we'll see — your users may not need to run any JavaScript at all.
21+
SvelteKit apps are server-rendered by default (like traditional 'multi-page apps' or MPAs) for excellent first load performance and SEO characteristics, but can then transition to client-side navigation (like modern 'single-page apps' or SPAs) to avoid jankily reloading everything (including things like third-party analytics code) when the user navigates. They can run anywhere JavaScript runs, though — as we'll see — your users may not need to run any JavaScript at all.
2422

2523
If that sounds complicated, worry not: you've been using SvelteKit this whole time!

‎content/tutorial/02-sveltekit/01-concepts/02-project-structure/app-a/src/routes/+page.svelte

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,6 @@ A SvelteKit app can be thought of as two distinct entities working in tandem —
88

99
'Client' refers to the JavaScript that loads in the browser.
1010

11-
TODO
11+
SvelteKit makes the two communicate with each other seamlessly. On the initial page load, the server renders the HTML, meaning content is visible as quickly as possible. The client then takes over in a process called 'hydration', so that subsequent navigations happen without full page reloads. It will request additional code and data from the server as needed.
12+
13+
> You can [adjust this behavior](https://kit.svelte.dev/docs/page-options) as needed. SvelteKit is very versatile!

‎content/tutorial/02-sveltekit/01-concepts/03-server-and-client/app-a/src/routes/+page.svelte

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎content/tutorial/02-sveltekit/01-concepts/04-server-side-rendering/README.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎content/tutorial/02-sveltekit/01-concepts/04-server-side-rendering/app-a/src/routes/+page.svelte

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)