From 531bf37446fae17e60d14370321880849a764ec9 Mon Sep 17 00:00:00 2001 From: Chris <845152+LWChris@users.noreply.github.com> Date: Thu, 12 Oct 2023 08:47:14 +0200 Subject: [PATCH 01/53] docs: update README.md (#516) Adjust source code snippet according to modifications from previous step. --- .../01-svelte/01-introduction/03-dynamic-attributes/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md b/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md index e03524b1a..6c325239f 100644 --- a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md +++ b/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md @@ -32,5 +32,5 @@ It's not uncommon to have an attribute where the name and value are the same, li ```svelte /// file: App.svelte -A man dances. +{name} dances. ``` From 0c9e5584bb97cc4e0cdb39eea1045b3d6dc5280f Mon Sep 17 00:00:00 2001 From: MacFJA Date: Mon, 16 Oct 2023 23:23:45 +0200 Subject: [PATCH 02/53] Fix diff syntax color in dark mode (#521) --- src/app.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app.css b/src/app.css index ad8d0b41e..f2bbb57d1 100644 --- a/src/app.css +++ b/src/app.css @@ -23,6 +23,9 @@ button:focus-visible { pre.language-diff code { color: rgba(0, 0, 0, 0.4); } +.dark pre.language-diff code { + color: rgba(255, 255, 255, 0.4); +} .language-diff .inserted, .language-diff .deleted { From 9379080aea9f678467bf6e0c29412667a991d531 Mon Sep 17 00:00:00 2001 From: Michael Baker Date: Wed, 13 Dec 2023 04:21:21 -0500 Subject: [PATCH 03/53] docs: minor grammar cleanup (#538) --- .../tutorial/03-sveltekit/08-stores/03-updated-store/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md b/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md index 23f034492..e910c4dc7 100644 --- a/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md +++ b/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md @@ -4,7 +4,7 @@ title: updated The `updated` store contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`. -Version changes only happens in production, not during development. For that reason, `$updated` will always be `false` in this tutorial. +Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial. You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`. From f0cf7ad93007ddccaf7ce9bd95318d95ebabb212 Mon Sep 17 00:00:00 2001 From: fubar1337 <133132398+fubar1337@users.noreply.github.com> Date: Thu, 14 Dec 2023 20:45:46 +0100 Subject: [PATCH 04/53] Updating status code references (#388) * Update README.md * Update +error.svelte * Update +error.svelte * Update README.md --- content/tutorial/01-svelte/common/src/routes/+error.svelte | 2 +- .../tutorial/02-advanced-svelte/common/src/routes/+error.svelte | 2 +- .../03-sveltekit/07-api-routes/02-post-handlers/README.md | 2 +- .../03-sveltekit/07-api-routes/03-other-handlers/README.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/tutorial/01-svelte/common/src/routes/+error.svelte b/content/tutorial/01-svelte/common/src/routes/+error.svelte index 064ed23cb..7e25aa26e 100644 --- a/content/tutorial/01-svelte/common/src/routes/+error.svelte +++ b/content/tutorial/01-svelte/common/src/routes/+error.svelte @@ -11,7 +11,7 @@ code {$page.status}

diff --git a/content/tutorial/02-advanced-svelte/common/src/routes/+error.svelte b/content/tutorial/02-advanced-svelte/common/src/routes/+error.svelte index 930ccfd10..fb5551052 100644 --- a/content/tutorial/02-advanced-svelte/common/src/routes/+error.svelte +++ b/content/tutorial/02-advanced-svelte/common/src/routes/+error.svelte @@ -11,7 +11,7 @@ code {$page.status}

diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md index d85a3f2f2..8df0f2de9 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md +++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md @@ -51,7 +51,7 @@ export async function POST({ request, cookies }) { As with `load` functions and form actions, the `request` is a standard [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object; `await request.json()` returns the data that we posted from the event handler. -We're returning a response with a [201 Created](https://httpstatusdogs.com/201-created) status and the `id` of the newly generated todo in our database. Back in the event handler, we can use this to update the page: +We're returning a response with a [201 Created](https://http.dog/201) status and the `id` of the newly generated todo in our database. Back in the event handler, we can use this to update the page: ```svelte /// file: src/routes/+page.svelte diff --git a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md index b27606b61..24357d492 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md +++ b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md @@ -24,7 +24,7 @@ export async function DELETE({ params, cookies }) { } ``` -Since we don't need to return any actual data to the browser, we're returning an empty [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) with a [204 No Content](https://httpstatusdogs.com/204-no-content) status. +Since we don't need to return any actual data to the browser, we're returning an empty [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) with a [204 No Content](https://http.dog/204) status. We can now interact with this endpoint inside our event handlers: From 76a1389e76bb9e7eb7a2d93042dd3ec2ca2272e1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 14 Dec 2023 14:55:48 -0500 Subject: [PATCH 05/53] make visited a boolean (#539) Co-authored-by: Rich Harris --- .../03-sveltekit/04-headers-and-cookies/02-cookies/README.md | 4 ++-- .../02-cookies/app-a/src/routes/+page.server.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/README.md b/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/README.md index 252008899..156b748f6 100644 --- a/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/README.md +++ b/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/README.md @@ -12,7 +12,7 @@ export function load(+++{ cookies }+++) { +++const visited = cookies.get('visited');+++ return { - visited + visited: visited === 'true' }; } ``` @@ -27,7 +27,7 @@ export function load({ cookies }) { +++cookies.set('visited', 'true', { path: '/' });+++ return { - visited + visited: visited === 'true' }; } ``` diff --git a/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-a/src/routes/+page.server.js b/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-a/src/routes/+page.server.js index 4be89201b..19467be55 100644 --- a/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-a/src/routes/+page.server.js +++ b/content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-a/src/routes/+page.server.js @@ -1,7 +1,7 @@ export function load() { - const visited = false; + const visited = 'false'; return { - visited + visited: visited === 'true' }; } From 8cc995f6dd3911a02189efe4b98bd60794d677b0 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 14 Dec 2023 15:05:52 -0500 Subject: [PATCH 06/53] tweak (#540) Co-authored-by: Rich Harris --- .../tutorial/02-advanced-svelte/01-motion/01-tweens/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/02-advanced-svelte/01-motion/01-tweens/README.md b/content/tutorial/02-advanced-svelte/01-motion/01-tweens/README.md index 9f494068e..68f96f811 100644 --- a/content/tutorial/02-advanced-svelte/01-motion/01-tweens/README.md +++ b/content/tutorial/02-advanced-svelte/01-motion/01-tweens/README.md @@ -6,7 +6,7 @@ Now that we've covered the basics, it's time to learn some advanced Svelte techn Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes. -Let's start by changing the `progress` store to a `tweened` value: +Let's start by changing the `progress` store to a `tweened` store: ```svelte /// file: App.svelte From ee29e32baf772669f3d9c06db4b617db8b15b73f Mon Sep 17 00:00:00 2001 From: Paul-Sebastian Manole Date: Thu, 14 Dec 2023 22:06:30 +0200 Subject: [PATCH 07/53] docs: change grammar to help reduce confusion (#431) It was not clear which page below the layout inherits the data, because in fact it could be any page. The confusion can arise from the way the previous sentence was expressed, as **visually**, there is nothing `below` the layout in the project tree. There are siblings though, like `+page.svelte` but for a Svelte beginner it is **not** immediately obvious that this page also falls `under` the same layout. --- .../03-sveltekit/03-loading-data/02-layout-data/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md index 3b25ecf82..0ea2b69c5 100644 --- a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md +++ b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md @@ -45,6 +45,6 @@ Now, add a sidebar in the layout for the post page: ``` -The layout (and the page below it) inherits `data.summaries` from the parent `+layout.server.js`. +The layout (and any page below it) inherits `data.summaries` from the parent `+layout.server.js`. When we navigate from one post to another, we only need to load the data for the post itself — the layout data is still valid. See the documentation on [invalidation](https://kit.svelte.dev/docs/load#rerunning-load-functions) to learn more. From 787c1a24d2a19b5fa22a58f47ef622986167d9a7 Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Thu, 14 Dec 2023 21:07:23 +0100 Subject: [PATCH 08/53] docs: make loading data link consistent with the chapter title (#438) --- .../03-sveltekit/06-forms/01-the-form-element/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/03-sveltekit/06-forms/01-the-form-element/README.md b/content/tutorial/03-sveltekit/06-forms/01-the-form-element/README.md index 2bccee00f..7532c768e 100644 --- a/content/tutorial/03-sveltekit/06-forms/01-the-form-element/README.md +++ b/content/tutorial/03-sveltekit/06-forms/01-the-form-element/README.md @@ -2,7 +2,7 @@ title: The
element --- -In the [chapter on loading](page-data), we saw how to get data from the server to the browser. Sometimes you need to send data in the opposite direction, and that's where `` — the web platform's way of submitting data — comes in. +In the chapter on [loading data](page-data), we saw how to get data from the server to the browser. Sometimes you need to send data in the opposite direction, and that's where `` — the web platform's way of submitting data — comes in. Let's build a todo app. We've already got an in-memory database set up in `src/lib/server/database.js`, and our `load` function in `src/routes/+page.server.js` uses the [`cookies`](https://kit.svelte.dev/docs/load#cookies) API so that we can have a per-user todo list, but we need to add a `` to create new todos: From 9581a34bee9cf5de4ade604ad5375bbf94016101 Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Thu, 14 Dec 2023 21:25:46 +0100 Subject: [PATCH 09/53] Use fail fast for keydown handler instead of having an additional level (#443) * docs: apply fail fast for keydown function handler * style: apply fail fast for if condition --- .../app-a/src/lib/App.svelte | 8 +-- .../07-api-routes/02-post-handlers/README.md | 70 +++++++++---------- .../app-a/src/routes/+page.svelte | 14 ++-- .../app-b/src/routes/+page.svelte | 36 +++++----- .../app-b/src/routes/+page.svelte | 36 +++++----- src/routes/tutorial/[slug]/Chrome.svelte | 8 +-- 6 files changed, 86 insertions(+), 86 deletions(-) diff --git a/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte index 1203bc69c..318366066 100644 --- a/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte @@ -16,10 +16,10 @@ { - if (e.key === 'Enter') { - todos.add(e.currentTarget.value); - e.currentTarget.value = ''; - } + if (e.key !== 'Enter') return; + + todos.add(e.currentTarget.value); + e.currentTarget.value = ''; }} /> diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md index 8df0f2de9..7be2a7929 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md +++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md @@ -12,20 +12,20 @@ Inside the `keydown` event handler of the 'add a todo' ``, let's post som type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - -+++ const response = await fetch('http://github.com/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - });+++ - - input.value = ''; - } + if (e.key !== 'Enter') return; + + const input = e.currentTarget; + const description = input.value; + ++++ const response = await fetch('http://github.com/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + });+++ + + input.value = ''; }} /> ``` @@ -59,27 +59,27 @@ We're returning a response with a [201 Created](https://http.dog/201) status and type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - const response = await fetch('http://github.com/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - }); - -+++ const { id } = await response.json(); - - data.todos = [...data.todos, { - id, - description - }];+++ - - input.value = ''; - } + if (e.key !== 'Enter') return; + + const input = e.currentTarget; + const description = input.value; + + const response = await fetch('http://github.com/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + }); + ++++ const { id } = await response.json(); + + data.todos = [...data.todos, { + id, + description + }];+++ + + input.value = ''; }} /> ``` diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte index d2a9e1c83..76c6e3156 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte +++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte @@ -11,14 +11,14 @@ type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - // TODO handle submit + if (e.key !== 'Enter') return; - input.value = ''; - } + const input = e.currentTarget; + const description = input.value; + + // TODO handle submit + + input.value = ''; }} /> diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte index 901216e14..58a6ad1e6 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte +++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte @@ -11,27 +11,27 @@ type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - const response = await fetch('http://github.com/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - }); + if (e.key !== 'Enter') return; - const { id } = await response.json(); + const input = e.currentTarget; + const description = input.value; + + const response = await fetch('http://github.com/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + }); - data.todos = [...data.todos, { - id, - description - }]; + const { id } = await response.json(); - input.value = ''; - } + data.todos = [...data.todos, { + id, + description + }]; + + input.value = ''; }} /> diff --git a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte index 009d8bcfd..3d4a5929a 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte +++ b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte @@ -11,27 +11,27 @@ type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - const response = await fetch('http://github.com/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - }); + if (e.key !== 'Enter') return; - const { id } = await response.json(); + const input = e.currentTarget; + const description = input.value; + + const response = await fetch('http://github.com/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + }); - data.todos = [...data.todos, { - id, - description - }]; + const { id } = await response.json(); - input.value = ''; - } + data.todos = [...data.todos, { + id, + description + }]; + + input.value = ''; }} /> diff --git a/src/routes/tutorial/[slug]/Chrome.svelte b/src/routes/tutorial/[slug]/Chrome.svelte index 166b5c3ac..da76278ec 100644 --- a/src/routes/tutorial/[slug]/Chrome.svelte +++ b/src/routes/tutorial/[slug]/Chrome.svelte @@ -24,10 +24,10 @@ dispatch('change', { value: e.currentTarget.value }); }} on:keydown={(e) => { - if (e.key === 'Enter') { - dispatch('change', { value: e.currentTarget.value }); - e.currentTarget.blur(); - } + if (e.key !== 'Enter') return; + + dispatch('change', { value: e.currentTarget.value }); + e.currentTarget.blur(); }} /> From 0aa2f9ecd3353db148914487b2721df0cd450060 Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Thu, 14 Dec 2023 21:27:33 +0100 Subject: [PATCH 10/53] docs: minor addition to onMount usage (#445) * docs: minor addition to onMount usage * Update content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md * Update content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md --------- Co-authored-by: Rich Harris --- content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md index e4dfde99a..23013d3a8 100644 --- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md +++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md @@ -4,7 +4,7 @@ title: onMount Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle. The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. -In this exercise, we have a `` that we'd like to animate, using the `paint` function in `gradient.js`. Begin by importing the function from `svelte`: +In this exercise, we have a `` that we'd like to animate, using the `paint` function in `gradient.js`. Begin by importing the `onMount` function from `svelte`: ```svelte /// file: App.svelte @@ -14,7 +14,7 @@ In this exercise, we have a `` that we'd like to animate, using the `pai ``` -Then, add a function that runs when the component mounts: +Then, add a callback that runs when the component mounts: ```svelte /// file: App.svelte From 5de34c7805ef0f1f22b712fdc02203afcb90b528 Mon Sep 17 00:00:00 2001 From: Shawn Gestupa Date: Fri, 15 Dec 2023 04:38:17 +0800 Subject: [PATCH 11/53] fix inconsistency of CSS styles between initial and solved state in Part 3 / Forms / Progressive enhancement (#461) * include entire css styles from unsolved code to solved code * slight nitpick; use em dash instead of hyphen for consistency --- .../03-sveltekit/03-loading-data/01-page-data/README.md | 2 +- .../app-b/src/routes/+page.svelte | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/content/tutorial/03-sveltekit/03-loading-data/01-page-data/README.md b/content/tutorial/03-sveltekit/03-loading-data/01-page-data/README.md index f23ff32c3..8d9b4049b 100644 --- a/content/tutorial/03-sveltekit/03-loading-data/01-page-data/README.md +++ b/content/tutorial/03-sveltekit/03-loading-data/01-page-data/README.md @@ -7,7 +7,7 @@ At its core, SvelteKit's job boils down to three things: 1. **Routing** — figure out which route matches an incoming request 2. **Loading** — get the data needed by the route -3. **Rendering** - generate some HTML (on the server) or update the DOM (in the browser) +3. **Rendering** — generate some HTML (on the server) or update the DOM (in the browser) We've seen how routing and rendering work. Let's talk about the middle part — loading. diff --git a/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte index 02f648ab4..f45a7a244 100644 --- a/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte +++ b/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte @@ -66,4 +66,12 @@ opacity: 0.5; transition: opacity 0.2s; } + + button:hover { + opacity: 1; + } + + .saving { + opacity: 0.5; + } From 080f717cd71c0d9d5825cdee53ba25ee4af8ac7d Mon Sep 17 00:00:00 2001 From: Shahar <39126169+shahar-cohen@users.noreply.github.com> Date: Fri, 15 Dec 2023 01:37:56 +0200 Subject: [PATCH 12/53] Update README.md to match solution (#494) The readme is missing the line:
as well as the indentation that are present in the code editor solution. this can cause a slight confusion while following the tutorial --- .../06-forms/03-form-validation/README.md | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/content/tutorial/03-sveltekit/06-forms/03-form-validation/README.md b/content/tutorial/03-sveltekit/06-forms/03-form-validation/README.md index 1b6130282..4b7431efc 100644 --- a/content/tutorial/03-sveltekit/06-forms/03-form-validation/README.md +++ b/content/tutorial/03-sveltekit/06-forms/03-form-validation/README.md @@ -82,23 +82,24 @@ In `src/routes/+page.svelte`, we can access the returned value via the `form` pr +++export let form;+++ -

todos

- -+++{#if form?.error} -

{form.error}

-{/if}+++ - - - - +
+

todos

+ + +++{#if form?.error} +

{form.error}

+ {/if}+++ + +
+ +
``` > You can also return data from an action _without_ wrapping it in `fail` — for example to show a 'success!' message when data was saved — and it will be available via the `form` prop. From 6fb655263fc0ccc94a9df0125c85a0de7e351378 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Fri, 15 Dec 2023 08:38:32 +0900 Subject: [PATCH 13/53] Update inline handlers doc to match text to code (#480) --- .../tutorial/01-svelte/05-events/02-inline-handlers/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md b/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md index 7b59d9e56..b0aa0f9bf 100644 --- a/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md +++ b/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md @@ -20,7 +20,7 @@ You can also declare event handlers inline: m = { x: e.clientX, y: e.clientY }; }+++} > - The mouse position is {m.x} x {m.y} + The pointer is at {m.x} x {m.y}
``` From 6ba1de3024b645964e8381d1605431a3dd2bb86e Mon Sep 17 00:00:00 2001 From: Joel Inman <80455401+joelinman-nxp@users.noreply.github.com> Date: Thu, 14 Dec 2023 23:45:06 +0000 Subject: [PATCH 14/53] Update paper.svg fill attr (#502) in the tutorial excercise 'named slots', the 'paper.svg' has fill="none". The exercise is to build something that looks like a 'business card' on a table it seems, however you cannot see the card, so it looks more like words etched into wood! screenshot : https://prnt.sc/kpg6vljbZT-T --- .../07-composition/02-named-slots/app-a/src/lib/paper.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/paper.svg b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/paper.svg index f8f704fdf..5dba50c15 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/paper.svg +++ b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/paper.svg @@ -6,5 +6,5 @@ - - \ No newline at end of file + + From 0d79c26d753ef52936e1be685f2a5e348a233882 Mon Sep 17 00:00:00 2001 From: Robert Dickert Date: Fri, 15 Dec 2023 10:15:53 -0700 Subject: [PATCH 15/53] let inputs and textareas follow theme coloring (#499) Fixes bad contrast in dark mode at, e.g., /numeric-inputs --- content/tutorial/common/src/app.html | 1 + 1 file changed, 1 insertion(+) diff --git a/content/tutorial/common/src/app.html b/content/tutorial/common/src/app.html index e279a76a2..4dba4f2d1 100644 --- a/content/tutorial/common/src/app.html +++ b/content/tutorial/common/src/app.html @@ -121,6 +121,7 @@ input, textarea { background: var(--bg-1); + color: inherit; } select:not([multiple]) { From ab57f4efb5a49f152350d1aa909838242857a199 Mon Sep 17 00:00:00 2001 From: Elias Papavasileiou Date: Fri, 15 Dec 2023 22:18:15 +0200 Subject: [PATCH 16/53] fix: restart audio playback on repeated button pushes (#504) --- .../05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte index b47a06f1e..33d318c91 100644 --- a/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte @@ -6,6 +6,7 @@ audio.src = horn; function handleClick() { + audio.load(); audio.play(); } From 511d1b2fbfe15a93ed85814652db3b468bd53914 Mon Sep 17 00:00:00 2001 From: Maciej Kasprzyk Date: Fri, 15 Dec 2023 21:25:10 +0100 Subject: [PATCH 17/53] fix: smaller sidebar footer horizontal padding (#492) * fix: smaller sidebar footer horizontal padding * fix: fine tune it --- src/routes/tutorial/[slug]/Sidebar.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte index 3bdd73d6c..643e5beee 100644 --- a/src/routes/tutorial/[slug]/Sidebar.svelte +++ b/src/routes/tutorial/[slug]/Sidebar.svelte @@ -193,7 +193,7 @@ } footer { - padding: 1rem 3rem; + padding: 1rem 2.9rem; display: flex; justify-content: space-between; background: var(--sk-back-3); From da3e5393c62bc00690faad13145e54bd7213fa2e Mon Sep 17 00:00:00 2001 From: Mateusz Zaremba Date: Fri, 15 Dec 2023 20:35:22 +0000 Subject: [PATCH 18/53] docs: Update README.md (#520) * Update README.md docs: 04-updating-arrays-and-objects, add `let obj = { foo: { bar: 'old' } };` for more clarity * Apply suggestions from code review --------- Co-authored-by: Rich Harris --- .../02-reactivity/04-updating-arrays-and-objects/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md index 74e3a581f..49e0654ab 100644 --- a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md +++ b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md @@ -38,8 +38,9 @@ A simple rule of thumb: the name of the updated variable must appear on the left ```js /// no-file +const obj = { foo: { bar: 1 } }; const foo = obj.foo; -foo.bar = 'baz'; +foo.bar = 2; ``` ...won't trigger reactivity on `obj.foo.bar`, unless you follow it up with `obj = obj`. From 19a6d164b7fae76e39ccfa2b5d164f03e6f75c3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8rgen=20Kalsnes=20Hagen?= <43886029+Snailedlt@users.noreply.github.com> Date: Fri, 15 Dec 2023 21:38:55 +0100 Subject: [PATCH 19/53] add aria-role:none to get rid of warning (#522) * add aria-role:none to get rid of warning * Apply suggestions from code review --------- Co-authored-by: Rich Harris --- .../01-motion/02-springs/app-a/src/lib/App.svelte | 1 + .../01-motion/02-springs/app-b/src/lib/App.svelte | 1 + 2 files changed, 2 insertions(+) diff --git a/content/tutorial/02-advanced-svelte/01-motion/02-springs/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/01-motion/02-springs/app-a/src/lib/App.svelte index 38515f359..92805f88c 100644 --- a/content/tutorial/02-advanced-svelte/01-motion/02-springs/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/01-motion/02-springs/app-a/src/lib/App.svelte @@ -11,6 +11,7 @@ }} on:mousedown={() => size.set(30)} on:mouseup={() => size.set(10)} + role="presentation" > size.set(30)} on:mouseup={() => size.set(10)} + role="presentation" > Date: Fri, 15 Dec 2023 21:43:06 +0100 Subject: [PATCH 20/53] fix: sidebar scrolls to top after navigate (#530) * fix: sidebar scrolls to top after navigate * fix: sidebar scrolls to top after navigate --- src/routes/tutorial/[slug]/Sidebar.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte index 643e5beee..9c16fb68d 100644 --- a/src/routes/tutorial/[slug]/Sidebar.svelte +++ b/src/routes/tutorial/[slug]/Sidebar.svelte @@ -30,9 +30,8 @@ -
+
{ if (sessionStorage[copy_enabled]) return; From baca1cdb97b82a946cb06dfd4af85b2e70ee7e91 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Dec 2023 15:58:38 -0500 Subject: [PATCH 21/53] persist scroll state (#542) Co-authored-by: Rich Harris --- src/routes/tutorial/[slug]/+page.svelte | 16 ++++++++++++++++ src/routes/tutorial/[slug]/Sidebar.svelte | 14 +++----------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index 1c660f572..144581bff 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -123,6 +123,21 @@ history.pushState({}, '', `?${q}`); } } + + /** @type {HTMLElement} */ + let sidebar; + + /** @type {import('./$types').Snapshot} */ + export const snapshot = { + capture: () => { + const scroll = sidebar.scrollTop; + sidebar.scrollTop = 0; + return scroll; + }, + restore: (scroll) => { + sidebar.scrollTop = scroll; + } + }; @@ -164,6 +179,7 @@
{ diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte index 9c16fb68d..63fbb2838 100644 --- a/src/routes/tutorial/[slug]/Sidebar.svelte +++ b/src/routes/tutorial/[slug]/Sidebar.svelte @@ -1,6 +1,5 @@ From 4bbafc401fd9986a65da60e75efae1ff6f40a504 Mon Sep 17 00:00:00 2001 From: Levi Bucsis Date: Fri, 15 Dec 2023 12:59:53 -0800 Subject: [PATCH 22/53] Update hyphen to emdash for consistency with other list items (#526) From 70588600a5c50c33367fca540b9d8e214c4d1b13 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Dec 2023 16:16:01 -0500 Subject: [PATCH 23/53] fix form actions chapter (#543) Co-authored-by: Rich Harris --- .../01-the-form-element/app-a/src/routes/+page.server.js | 5 +++-- .../01-the-form-element/app-b/src/routes/+page.server.js | 5 +++-- .../02-named-form-actions/app-b/src/routes/+page.server.js | 5 +++-- .../03-form-validation/app-b/src/routes/+page.server.js | 5 +++-- .../app-b/src/routes/+page.server.js | 5 +++-- 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-a/src/routes/+page.server.js b/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-a/src/routes/+page.server.js index d6e0c46da..6a0a78d8f 100644 --- a/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-a/src/routes/+page.server.js +++ b/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-a/src/routes/+page.server.js @@ -4,10 +4,11 @@ export function load({ cookies }) { const id = cookies.get('userid'); if (!id) { - cookies.set('userid', crypto.randomUUID(), { path: '/' }); + id = crypto.randomUUID(); + cookies.set('userid', id, { path: '/' }); } return { - todos: db.getTodos(id) ?? [] + todos: db.getTodos(id) }; } diff --git a/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-b/src/routes/+page.server.js b/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-b/src/routes/+page.server.js index d2627e926..e36055d78 100644 --- a/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-b/src/routes/+page.server.js +++ b/content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-b/src/routes/+page.server.js @@ -4,11 +4,12 @@ export function load({ cookies }) { const id = cookies.get('userid'); if (!id) { - cookies.set('userid', crypto.randomUUID(), { path: '/' }); + id = crypto.randomUUID(); + cookies.set('userid', id, { path: '/' }); } return { - todos: db.getTodos(id) ?? [] + todos: db.getTodos(id) }; } diff --git a/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.server.js b/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.server.js index 40015d591..abf15a387 100644 --- a/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.server.js +++ b/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.server.js @@ -4,11 +4,12 @@ export function load({ cookies }) { const id = cookies.get('userid'); if (!id) { - cookies.set('userid', crypto.randomUUID(), { path: '/' }); + id = crypto.randomUUID(); + cookies.set('userid', id, { path: '/' }); } return { - todos: db.getTodos(id) ?? [] + todos: db.getTodos(id) }; } diff --git a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js index c91d6fd60..e6157b7c1 100644 --- a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js +++ b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js @@ -5,11 +5,12 @@ export function load({ cookies }) { const id = cookies.get('userid'); if (!id) { - cookies.set('userid', crypto.randomUUID(), { path: '/' }); + id = crypto.randomUUID(); + cookies.set('userid', id, { path: '/' }); } return { - todos: db.getTodos(id) ?? [] + todos: db.getTodos(id) }; } diff --git a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js index 334b79ddd..e58ce6b70 100644 --- a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js +++ b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js @@ -5,11 +5,12 @@ export function load({ cookies }) { const id = cookies.get('userid'); if (!id) { - cookies.set('userid', crypto.randomUUID(), { path: '/' }); + id = crypto.randomUUID(); + cookies.set('userid', id, { path: '/' }); } return { - todos: db.getTodos(id) ?? [] + todos: db.getTodos(id) }; } From 7eac90f7a7a9842473c2b8c5fc8a57d0c18b168f Mon Sep 17 00:00:00 2001 From: Brett Sargeant Date: Sat, 16 Dec 2023 08:29:10 +1100 Subject: [PATCH 24/53] fix: env_file playwright tests failing due to animations (#505) --- tests/env_file.spec.ts | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/tests/env_file.spec.ts b/tests/env_file.spec.ts index 7177e40cf..7a546b29c 100644 --- a/tests/env_file.spec.ts +++ b/tests/env_file.spec.ts @@ -1,7 +1,18 @@ -import { expect, test } from '@playwright/test'; +import { expect, test, type Page } from '@playwright/test'; const iframe_selector = 'iframe[src*="webcontainer.io/"]'; +async function disableAnimations(page: Page) { + await page.addStyleTag({ + content: ` + *, *::before, *::after { + animation-duration: 0s !important; + transition-duration: 0s !important; + } + ` + }); +} + test.describe.configure({ mode: 'parallel' }); test('.env file: no timeout error occurs when switching a tutorials without a .env file to one with it', async ({ @@ -11,15 +22,18 @@ test('.env file: no timeout error occurs when switching a tutorials without a .e await page.goto('/tutorial/welcome-to-svelte'); + // disable animations to prevent flakiness + await disableAnimations(page); + const iframe_locator = page.frameLocator(iframe_selector); // wait for the iframe to load await iframe_locator.getByText('Welcome!').waitFor(); // switch to another tutorial with a .env file - await page.click('header > h1', { delay: 200 }); - await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 }); - await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200 }); + await page.click('header > button > h1', { delay: 200 }); + await page.getByRole('button', { name: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 }); + await page.getByRole('button', { name: 'Environment variables' }).click({ delay: 200 }); await page.locator('a', { hasText: '$env/static/private' }).click({ delay: 200 }); // wait for the iframe to load @@ -41,15 +55,18 @@ test('.env file: environment variables are available when switching a tutorial w await page.goto('/tutorial/welcome-to-svelte'); + // disable animations to prevent flakiness + await disableAnimations(page); + const iframe_locator = page.frameLocator(iframe_selector); // wait for the iframe to load await iframe_locator.getByText('Welcome!').waitFor(); // switch to another tutorial with a .env file - await page.click('header > h1', { delay: 200 }); - await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 }); - await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200 }); + await page.click('header > button > h1', { delay: 200 }); + await page.getByRole('button', { name: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 }); + await page.getByRole('button', { name: 'Environment variables' }).click({ delay: 200 }); await page.locator('a', { hasText: '$env/dynamic/private' }).click({ delay: 200 }); // wait for the iframe to load From 3c3af894d8e1b6e0fd6af04468cdb1d4942eab0c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Dec 2023 16:57:40 -0500 Subject: [PATCH 25/53] add something to do on updated-store tutorial (#544) Co-authored-by: Rich Harris --- .../08-stores/03-updated-store/README.md | 43 ++++++--------- .../app-a/src/routes/+layout.svelte | 31 +++++++++-- .../app-b/src/routes/+layout.svelte | 54 +++++++++++++++++++ 3 files changed, 98 insertions(+), 30 deletions(-) create mode 100644 content/tutorial/03-sveltekit/08-stores/03-updated-store/app-b/src/routes/+layout.svelte diff --git a/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md b/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md index e910c4dc7..967284576 100644 --- a/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md +++ b/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md @@ -4,38 +4,29 @@ title: updated The `updated` store contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`. -Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial. - -You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`. - ```svelte /// file: src/routes/+layout.svelte +``` - +Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial. - +You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`. -+++{#if $updated} -

- A new version of the app is available +```svelte +/// file: src/routes/+layout.svelte - -

-{/if}+++ ++++{#if $updated}+++ +
+

+ A new version of the app is available + + +

+
++++{/if}+++ +``` diff --git a/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte b/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte index a00cb3018..6932ab024 100644 --- a/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte +++ b/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte @@ -1,5 +1,5 @@ -``` \ No newline at end of file +``` From 01f871846d70a74500f51e4e38720369e6554489 Mon Sep 17 00:00:00 2001 From: Emmy Lim Date: Sun, 3 Mar 2024 00:09:27 +0800 Subject: [PATCH 36/53] fix: add missing semicolon (#594) --- content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md index 23013d3a8..4195b5c69 100644 --- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md +++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md @@ -41,7 +41,7 @@ So far so good — you should see gently undulating colours in the shape of the ```js /// file: App.svelte onMount(() => { - const canvas = document.querySelector('canvas') + const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); +++let frame =+++ requestAnimationFrame(function loop(t) { From 9b19caf5eb29fc6342fdd0ac48612b8f9ec5f895 Mon Sep 17 00:00:00 2001 From: Tee Ming Date: Sun, 3 Mar 2024 01:53:09 +0800 Subject: [PATCH 37/53] fix: prevent ios from loading webcontainers (#584) --- src/routes/tutorial/[slug]/Loading.svelte | 32 +++++++++++++++++++++-- src/routes/tutorial/[slug]/adapter.js | 13 +++++++++ 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/src/routes/tutorial/[slug]/Loading.svelte b/src/routes/tutorial/[slug]/Loading.svelte index fb813058d..576835016 100644 --- a/src/routes/tutorial/[slug]/Loading.svelte +++ b/src/routes/tutorial/[slug]/Loading.svelte @@ -1,7 +1,8 @@ - + {/each} diff --git a/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-b/src/lib/TodoList.svelte b/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-b/src/lib/TodoList.svelte index 6d826d435..680de1fd9 100644 --- a/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-b/src/lib/TodoList.svelte +++ b/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-b/src/lib/TodoList.svelte @@ -21,7 +21,7 @@ {todo.description} - {/each} diff --git a/content/tutorial/02-advanced-svelte/03-animations/01-animate/app-b/src/lib/TodoList.svelte b/content/tutorial/02-advanced-svelte/03-animations/01-animate/app-b/src/lib/TodoList.svelte index 8ccddb80b..7d62582a2 100644 --- a/content/tutorial/02-advanced-svelte/03-animations/01-animate/app-b/src/lib/TodoList.svelte +++ b/content/tutorial/02-advanced-svelte/03-animations/01-animate/app-b/src/lib/TodoList.svelte @@ -23,7 +23,7 @@ {todo.description} - {/each} diff --git a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/App.svelte index f13598a4f..ceacc6d80 100644 --- a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/App.svelte @@ -30,7 +30,7 @@ on:click={() => { selected = color; }} - /> + > {/each}
diff --git a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/Canvas.svelte b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/Canvas.svelte index 9bdad0400..e723693d9 100644 --- a/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/Canvas.svelte +++ b/content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/Canvas.svelte @@ -66,13 +66,13 @@ previous = coords; }} -/> +> {#if previous}
+ >
{/if} - \ No newline at end of file + diff --git a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte index 2a2a9d89e..fcfbc28ce 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte @@ -27,13 +27,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -69,7 +69,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte index de10e6465..582abc630 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte @@ -20,7 +20,7 @@ +> -``` \ No newline at end of file +``` diff --git a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md index 896528c17..c8dbd89a4 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md +++ b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md @@ -12,7 +12,7 @@ Open `FilterableList.svelte`. The `` is being rendered for each filtered i /// file: FilterableList.svelte
{#each data.filter(matches) as item} - + {/each}
``` diff --git a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte index 9757ff15d..1a7c9c9d5 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte @@ -10,7 +10,7 @@ field="name" >
- + name hex rgb @@ -18,7 +18,7 @@
- + {row.name} {row.hex} {row.rgb} diff --git a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte index a21b37016..34c173fff 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte @@ -9,7 +9,7 @@ let:item={row} >
- + name hex rgb @@ -17,7 +17,7 @@
- + {row.name} {row.hex} {row.rgb} diff --git a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md index 7f1d3d859..c9c219f69 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md +++ b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md @@ -7,7 +7,7 @@ In some cases, you may want to control parts of your component based on whether ```svelte /// file: App.svelte ---
- + name hex rgb @@ -31,7 +31,7 @@ We can fix that by using the special `$$slots` variable in `FilterableList.svelt /// file: FilterableList.svelte +++{#if $$slots.header}+++
- +
+++{/if}+++ ``` diff --git a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte index de5be5138..0dde93327 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte @@ -9,7 +9,7 @@ let:item={row} >
- + {row.name} {row.hex} {row.rgb} diff --git a/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md b/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md index c117ad4ce..ea4e6a572 100644 --- a/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md +++ b/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md @@ -20,8 +20,8 @@ It's useful for things like this folder tree view, where folders can contain _ot ```svelte /// file: Folder.svelte {#if file.files} - ++++++ + ++++++ {:else} - + {/if} ``` diff --git a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte index 1cc7d1737..85be476d6 100644 --- a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte @@ -26,13 +26,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -68,7 +68,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte index acafe1bbc..ffdb485d8 100644 --- a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte @@ -38,13 +38,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -80,7 +80,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte index 0eaa4a16e..323286b79 100644 --- a/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte @@ -42,13 +42,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -84,7 +84,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md b/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md index e7812fead..79898d168 100644 --- a/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md +++ b/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md @@ -14,7 +14,7 @@ src/routes/ └ +page.svelte ``` -...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `` element is where the page content will be rendered: +...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `` element is where the page content will be rendered: ```svelte /// file: src/routes/+layout.svelte @@ -23,7 +23,7 @@ src/routes/ about - + ``` A `+layout.svelte` file applies to every child route, including the sibling `+page.svelte` (if it exists). You can nest layouts to arbitrary depth. diff --git a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md index 0ea2b69c5..a96aab1ad 100644 --- a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md +++ b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md @@ -19,7 +19,7 @@ Now, add a sidebar in the layout for the post page:
- +
+++