From dae8e4bb7fe0dd03a08837613a5f5cd5f7d48c24 Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Wed, 19 Jul 2023 22:22:31 +0200 Subject: [PATCH 01/70] docs: add double quotes to type attribute (#444) --- .../tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md b/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md index 8df2be7c2..dc79573de 100644 --- a/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md +++ b/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md @@ -6,5 +6,5 @@ Checkboxes are used for toggling between states. Instead of binding to `input.va ```svelte /// file: App.svelte - + ``` From 51b54dd0a0d4c4a2a16fa4275dac7e88563b2531 Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Thu, 20 Jul 2023 10:45:58 +0200 Subject: [PATCH 02/70] docs: add missing verb for cookies.set() explanation (#437) --- .../03-sveltekit/04-headers-and-cookies/02-cookies/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 790192dbd..252008899 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 @@ -17,7 +17,7 @@ export function load(+++{ cookies }+++) { } ``` -To set a cookie, you `cookies.set(name, value, options)`. It's strongly recommended that you explicitly configure the `path` when setting a cookie, since browsers' default behaviour — somewhat uselessly — is to set the cookie on the parent of the current path. +To set a cookie, use `cookies.set(name, value, options)`. It's strongly recommended that you explicitly configure the `path` when setting a cookie, since browsers' default behaviour — somewhat uselessly — is to set the cookie on the parent of the current path. ```js /// file: src/routes/+page.server.js From dadb11c152a6cc9b2738ac1b23f9858b6b5390bb Mon Sep 17 00:00:00 2001 From: Dawit Mekonnen <56738450+Dave-lab12@users.noreply.github.com> Date: Thu, 20 Jul 2023 11:53:18 +0300 Subject: [PATCH 03/70] fix: make the background opaque (#440) fixes #439 --- src/routes/tutorial/[slug]/filetree/ContextMenu.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte b/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte index 04de654ac..d06288a65 100644 --- a/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte +++ b/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte @@ -55,6 +55,8 @@ ul { margin: 0; padding: 0; + background-color: var(--sk-back-3); + border: 1px solid hsl(var(--sk-theme-1-hsl)); } li { @@ -62,6 +64,9 @@ list-style-type: none; width: 1fr; } + li:hover { + background-color: var(--sk-theme-1-variant); + } button { color: var(--sk-text-2); From 4afebdcb02b4af35be7530b2abafd26ba428c1aa Mon Sep 17 00:00:00 2001 From: Eddie Antonio Santos Date: Thu, 27 Jul 2023 22:00:02 +0100 Subject: [PATCH 04/70] docs: correct name of `updated` from $app/stores (#450) There was a typo in the tutorial for the `updated` store from `$app/stores`. See https://kit.svelte.dev/docs/modules#$app-stores-updated --- .../tutorial/03-sveltekit/08-stores/01-page-store/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md b/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md index 116d13531..bfac69ec8 100644 --- a/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md +++ b/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md @@ -4,7 +4,7 @@ title: page As we learned [earlier](writable-stores), Svelte stores are a place to put data that doesn't belong to an individual component. -SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updating`. The one you'll use most often is [`page`](https://kit.svelte.dev/docs/types#public-types-page), which provides information about the current page: +SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](https://kit.svelte.dev/docs/types#public-types-page), which provides information about the current page: * `url` — the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page * `params` — the current page's [parameters](params) @@ -33,4 +33,4 @@ As with any other store, you can reference its value in a component by prefixing -``` \ No newline at end of file +``` From 9549b6aa5ac9b287787739552b9a6906d9544c89 Mon Sep 17 00:00:00 2001 From: Mateus Abelli Date: Fri, 11 Aug 2023 06:12:29 -0300 Subject: [PATCH 05/70] fix: unavailable `--prime` css variable (#478) --- src/routes/tutorial/[slug]/Menu.svelte | 2 +- src/routes/tutorial/[slug]/Sidebar.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/tutorial/[slug]/Menu.svelte b/src/routes/tutorial/[slug]/Menu.svelte index 3d5731c5e..20b54c34b 100644 --- a/src/routes/tutorial/[slug]/Menu.svelte +++ b/src/routes/tutorial/[slug]/Menu.svelte @@ -310,7 +310,7 @@ li[aria-current='page'] a, li[aria-current='step']:not(.expanded) > button { - color: var(--prime); + color: var(--sk-theme-1); } li img { diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte index 21f70752c..8b8a69176 100644 --- a/src/routes/tutorial/[slug]/Sidebar.svelte +++ b/src/routes/tutorial/[slug]/Sidebar.svelte @@ -208,7 +208,7 @@ .modal-contents button { display: block; - background: var(--prime); + background-color: var(--sk-theme-1); color: white; padding: 1rem; width: 10em; From dc3bf66008685b107339bbe006e26634f1b406b6 Mon Sep 17 00:00:00 2001 From: Mateus Abelli Date: Fri, 11 Aug 2023 06:13:39 -0300 Subject: [PATCH 06/70] chore: add license (#479) --- LICENSE.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 LICENSE.md diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 000000000..0598ad131 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,9 @@ +MIT License + +Copyright (c) 2023 [these people](https://github.com/sveltejs/learn.svelte.dev/graphs/contributors) + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. From 39d90f1cfd974392568f4db145ef92c94a5fca9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Paquim?= Date: Fri, 11 Aug 2023 10:21:34 +0100 Subject: [PATCH 07/70] docs: access store value in context example (#471) --- .../02-advanced-svelte/08-context/01-context-api/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/02-advanced-svelte/08-context/01-context-api/README.md b/content/tutorial/02-advanced-svelte/08-context/01-context-api/README.md index d88c5b015..208cf5798 100644 --- a/content/tutorial/02-advanced-svelte/08-context/01-context-api/README.md +++ b/content/tutorial/02-advanced-svelte/08-context/01-context-api/README.md @@ -86,5 +86,5 @@ import { getContext } from 'svelte'; const { count } = getContext('my-context'); -$: console.log({ count }); +$: console.log({ count: $count }); ``` From 00637a40bfc6219b14e372fd33890d0b90296584 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Paquim?= Date: Fri, 11 Aug 2023 10:22:46 +0100 Subject: [PATCH 08/70] docs: update route-groups doc to match target (#475) --- .../04-advanced-routing/04-route-groups/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md index 9dff6e8b9..4733237b8 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md @@ -27,9 +27,9 @@ We can also add some UI to these two routes by adding a `src/routes/(authed)/+la ```svelte /// file: src/routes/(authed)/+layout.svelte + +
- +
- - ``` From 3fe7f041ab9cf2a3ff7ba7ee9fb4771a5621d264 Mon Sep 17 00:00:00 2001 From: Johannes Bader Date: Fri, 11 Aug 2023 11:24:10 +0200 Subject: [PATCH 09/70] docs: replace `background` with `background-color` for consistency (#467) Fixes potential confusion by the tutorial using `background-color` to overwrite `background` and referencing `background-color` instead of the shorthand `background` used by the app. --- .../06-classes-and-styles/04-component-styles/README.md | 4 ++-- .../04-component-styles/app-a/src/lib/Box.svelte | 4 ++-- .../04-component-styles/app-b/src/lib/Box.svelte | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/README.md b/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/README.md index 7e4f7c4f0..c272846c3 100644 --- a/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/README.md +++ b/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/README.md @@ -37,7 +37,7 @@ Inside `Box.svelte`, change `background-color` so that it is determined by a [CS height: 5em; border-radius: 0.5em; margin: 0 0 1em 0; - background: +++var(--color, #ddd)+++; + background-color: +++var(--color, #ddd)+++; } ``` @@ -55,4 +55,4 @@ Any parent element (such as `
`) can set the value of `--color The values can be dynamic, like any other attribute. -This feature works by wrapping each component in a `
`, where needed, and applying the custom properties to it. \ No newline at end of file +This feature works by wrapping each component in a `
`, where needed, and applying the custom properties to it. diff --git a/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-a/src/lib/Box.svelte b/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-a/src/lib/Box.svelte index 5b700e91d..523b40a79 100644 --- a/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-a/src/lib/Box.svelte +++ b/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-a/src/lib/Box.svelte @@ -6,6 +6,6 @@ height: 5em; border-radius: 0.5em; margin: 0 0 1em 0; - background: #ddd; + background-color: #ddd; } - \ No newline at end of file + diff --git a/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-b/src/lib/Box.svelte b/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-b/src/lib/Box.svelte index ab5da5e35..40c4aa7dc 100644 --- a/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-b/src/lib/Box.svelte +++ b/content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-b/src/lib/Box.svelte @@ -6,6 +6,6 @@ height: 5em; border-radius: 0.5em; margin: 0 0 1em 0; - background: var(--color, #ddd); + background-color: var(--color, #ddd); } - \ No newline at end of file + From 10bdf8d1db67fda81d78f331f2d243d35c494a64 Mon Sep 17 00:00:00 2001 From: Kyutae Lee Date: Fri, 11 Aug 2023 18:25:41 +0900 Subject: [PATCH 10/70] docs: fix sample code in tutorial text to match the exercise solution (#463) This commit fix sample code in the-form-element tutorial text, which is `01-the-form-element /README.md`, to match the exercise solution, which is `01-the-form-element/app-b/src/routes/+page.svelte`. --- .../03-sveltekit/06-forms/01-the-form-element/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 e0eb996df..1a4a59557 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 @@ -8,7 +8,7 @@ Let's build a todo app. We've already got an in-memory database set up in `src/l ```svelte /// file: src/routes/+page.svelte -

Todos

+

todos

+++
+++ -{#each data.todos as todo} +
    ``` If we type something into the `` and hit Enter, the browser makes a POST request (because of the `method="POST"` attribute) to the current page. But that results in an error, because we haven't created a server-side _action_ to handle the POST request. Let's do that now: From 7b01aef47bf35d431624fcefb99ab42dbd28ebbe Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Tue, 22 Aug 2023 01:36:41 +0900 Subject: [PATCH 11/70] chore: remove `experimental` from inspector option (#481) Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- svelte.config.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/svelte.config.js b/svelte.config.js index 83e7b17cb..819cf63b7 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -9,14 +9,6 @@ const config = { version: { name: child_process.execSync('git rev-parse HEAD').toString().trim() } - }, - - vitePlugin: { - experimental: { - inspector: { - holdMode: true - } - } } }; From 996dcd283457d280aa1938484c66172db5f1a16a Mon Sep 17 00:00:00 2001 From: Yoon Han Date: Thu, 24 Aug 2023 03:33:47 +0900 Subject: [PATCH 12/70] docs: clarify the meaning of content (#485) * fix mismatched content * admit suggestion Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> --------- Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> --- .../02-advanced-svelte/07-composition/02-named-slots/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/README.md b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/README.md index 7918e0423..609166d9b 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/README.md +++ b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/README.md @@ -4,7 +4,7 @@ title: Named slots The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named slots_. -Inside the `` component, we've got `` and others for `company` and `address`. Let's add the corresponding named slots in `Card.svelte`: +Inside `App.svelte`, we're rendering a `` component that contains `` and others for `company` and `address`. Let's add the corresponding named slots in `Card.svelte`: ```svelte /// file: Card.svelte From 6584bed964d7a6c52ba52e13df23f1ebcd55c25e Mon Sep 17 00:00:00 2001 From: Ben Tomlin <57016008+bent101@users.noreply.github.com> Date: Thu, 24 Aug 2023 08:11:17 -0700 Subject: [PATCH 13/70] docs: fix link to cookies API (#489) --- .../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 1a4a59557..2bccee00f 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 @@ -4,7 +4,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. -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-and-headers) API so that we can have a per-user todo list, but we need to add a `` to create new todos: +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: ```svelte /// file: src/routes/+page.svelte From 6373fc608f5dd91616db30c64fc1018d286b7c98 Mon Sep 17 00:00:00 2001 From: Gordon Liang Date: Thu, 24 Aug 2023 19:39:18 -0400 Subject: [PATCH 14/70] docs: edit instruction for Store Bindings (#488) Edited instruction to 'add button' to 'add event handler', to reflect the true diff in the code. (The button already exists; the highlighted part is the event handler) --- .../tutorial/01-svelte/08-stores/06-store-bindings/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md b/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md index 20bba5bc8..f0fdcde9b 100644 --- a/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md +++ b/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md @@ -13,7 +13,7 @@ In this example we're exporting a writable store `name` and a derived store `gre Changing the input value will now update `name` and all its dependents. -We can also assign directly to store values inside a component. Add a ` -

    -{/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 53/70] 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 54/70] 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:
- +
+++