From 066af53fc7538bfa136cd6d64e61436aa5f12325 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 30 May 2023 17:46:23 -0400 Subject: [PATCH 01/92] avoid webcontainer support detection - closes #306 (#395) Co-authored-by: Rich Harris --- src/lib/client/adapters/webcontainer/index.js | 5 - src/lib/client/adapters/webcontainer/utils.js | 30 ----- src/routes/tutorial/[slug]/Loading.svelte | 106 +++++++++--------- 3 files changed, 56 insertions(+), 85 deletions(-) delete mode 100644 src/lib/client/adapters/webcontainer/utils.js diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js index 3b98cd5ca..274ef154d 100644 --- a/src/lib/client/adapters/webcontainer/index.js +++ b/src/lib/client/adapters/webcontainer/index.js @@ -4,7 +4,6 @@ import AnsiToHtml from 'ansi-to-html'; import * as yootils from 'yootils'; import { escape_html, get_depth } from '../../../utils.js'; import { ready } from '../common/index.js'; -import { isWebContainerSupported } from './utils.js'; /** * @typedef {import("../../../../routes/tutorial/[slug]/state.js").CompilerWarning} CompilerWarning @@ -26,10 +25,6 @@ let vm; * @returns {Promise} */ export async function create(base, error, progress, logs, warnings) { - if (!isWebContainerSupported()) { - throw new Error('WebContainers are not supported by Safari 16.3 or earlier'); - } - progress.set({ value: 0, text: 'loading files' }); const q = yootils.queue(1); diff --git a/src/lib/client/adapters/webcontainer/utils.js b/src/lib/client/adapters/webcontainer/utils.js deleted file mode 100644 index 1d6c6a569..000000000 --- a/src/lib/client/adapters/webcontainer/utils.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Checks if WebContainer is supported on the current browser. - * This function is borrowed from [stackblitz/webcontainer-docs](https://github.com/stackblitz/webcontainer-docs/blob/369dd58b2749b085ed7642f22108a9bcbcd68fc4/docs/.vitepress/theme/components/Examples/WCEmbed/utils.ts#L4-L29) - */ -export function isWebContainerSupported() { - const hasSharedArrayBuffer = 'SharedArrayBuffer' in window; - const looksLikeChrome = navigator.userAgent.toLowerCase().includes('chrome'); - const looksLikeFirefox = navigator.userAgent.includes('Firefox'); - const looksLikeSafari = navigator.userAgent.includes('Safari'); - - if (hasSharedArrayBuffer && (looksLikeChrome || looksLikeFirefox)) { - return true; - } - - if (hasSharedArrayBuffer && looksLikeSafari) { - // we only support Safari 16.4 and up so we check for the version here - const match = navigator.userAgent.match(/Version\/(\d+)\.(\d+) (?:Mobile\/.*?)?Safari/); - const majorVersion = match ? Number(match?.[1]) : 0; - const minorVersion = match ? Number(match?.[2]) : 0; - - return majorVersion > 16 || (majorVersion === 16 && minorVersion >= 4); - } - - // Allow overriding the support check with localStorage.webcontainer_any_ua = 1 - try { - return Boolean(localStorage.getItem('webcontainer_any_ua')); - } catch { - return false; - } -} diff --git a/src/routes/tutorial/[slug]/Loading.svelte b/src/routes/tutorial/[slug]/Loading.svelte index 7563a6514..264af6f74 100644 --- a/src/routes/tutorial/[slug]/Loading.svelte +++ b/src/routes/tutorial/[slug]/Loading.svelte @@ -1,6 +1,4 @@ -
+
{#if error} - {#if !isWebContainerSupported()} -

This app requires modern web platform features. Please use a browser other than Safari.

- {:else} +
+
+

Yikes!

+ {#if error.message === 'Your browser does not support all necessary features'} +

+ This app requires modern web platform features. Please use a browser other than Safari. +

+ {:else if /firefox/i.test(navigator.userAgent)} +

+ We couldn't start the app. Please ensure + + third party cookies + are enabled for this site, and disable Enhanced Tracking Protection. +

+

+ If you have 'Delete cookies and site data when Firefox is closed' enabled in + about:preferences#privacy, make sure learn.svelte.dev is included + as an exception. +

+ {:else if /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent)} +

+ We couldn't start the app. Please ensure third party cookies are enabled for this site — + click the + + eye + + + icon in the URL bar or go to + chrome://settings/cookies and add learn.svelte.dev to 'Sites that + can always use cookies'. +

+ {:else} +

+ We couldn't start the app. Please ensure third party cookies are enabled for this site. +

+ {/if} +
+ {error.message} -

Yikes!

- {#if /firefox/i.test(navigator.userAgent)} -

- We couldn't start the app. Please ensure - - third party cookies - are enabled for this site, and disable Enhanced Tracking Protection. -

-

- If you have 'Delete cookies and site data when Firefox is closed' enabled in - about:preferences#privacy, make sure learn.svelte.dev is included - as an exception. -

- {:else if /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent)} -

- We couldn't start the app. Please ensure third party cookies are enabled for this site — - click the - - eye - - - icon in the URL bar or go to - chrome://settings/cookies and add learn.svelte.dev to 'Sites that - can always use cookies'. -

- {:else} -

- We couldn't start the app. Please ensure third party cookies are enabled for this site. -

- {/if} - {/if} +
{:else} Date: Wed, 31 May 2023 06:48:33 +0900 Subject: [PATCH 02/92] Typo of a file path (#396) --- .../05-advanced-loading/03-await-parent/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/README.md b/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/README.md index f622d5a1e..d1b7e39f0 100644 --- a/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/README.md +++ b/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/README.md @@ -30,7 +30,7 @@ export async function load(+++{ parent }+++) { Finally, in `src/routes/sum/+page.js`, get parent data from both `load` functions: ```js -/// file: src/sum/+page.js +/// file: src/routes/sum/+page.js export async function load(+++{ parent }+++) { +++const { a, b } = await parent();+++ return { +++c: a + b+++ }; From 127ffcebe39f333a3c1e11bf569650d50540ddc0 Mon Sep 17 00:00:00 2001 From: tomoam <29677552+tomoam@users.noreply.github.com> Date: Wed, 31 May 2023 06:57:29 +0900 Subject: [PATCH 03/92] fix: handling of a link to redirect URL (#393) --- content/tutorial/common/src/__client.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/content/tutorial/common/src/__client.js b/content/tutorial/common/src/__client.js index 06d49d7b4..2aba31a3c 100644 --- a/content/tutorial/common/src/__client.js +++ b/content/tutorial/common/src/__client.js @@ -49,6 +49,8 @@ window.addEventListener('focusin', (e) => { post({ type: 'iframe_took_focus' }); }); +let previous_href = location.href; + window.addEventListener('click', (e) => { let node = e.target; while (node) { @@ -60,7 +62,10 @@ window.addEventListener('click', (e) => { e.preventDefault(); window.open(url, '_blank'); } else { - update_path(url.pathname + url.search + url.hash); + if (location.href !== url.href) { + previous_href = url.href; + update_path(url.pathname + url.search + url.hash); + } } } node = node.parent; @@ -75,8 +80,6 @@ window.addEventListener('visibilitychange', () => { } }); -let previous_href = location.href; - const url_observer = new MutationObserver(() => { if (location.href !== previous_href) { previous_href = location.href; From 9882419a614ecf0c9a3b40c8b49d1162ebf2c4a1 Mon Sep 17 00:00:00 2001 From: Matthew Farley Date: Tue, 30 May 2023 18:08:46 -0400 Subject: [PATCH 04/92] Fix typo in SvelteKit $lib lesson (#373) --- .../tutorial/03-sveltekit/05-shared-modules/01-lib/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tutorial/03-sveltekit/05-shared-modules/01-lib/README.md b/content/tutorial/03-sveltekit/05-shared-modules/01-lib/README.md index 9b9b20520..d5c082d5f 100644 --- a/content/tutorial/03-sveltekit/05-shared-modules/01-lib/README.md +++ b/content/tutorial/03-sveltekit/05-shared-modules/01-lib/README.md @@ -4,7 +4,7 @@ title: The $lib alias Because SvelteKit uses directory-based routing, it's easy to place modules and components alongside the routes that use them. A good rule of thumb is 'put code close to where it's used'. -Sometimes, code is used in multiple places. When this happens, it's useful to have a place to put them that can be access by all routes without needing to prefix imports with `../../../../`. In SvelteKit, that place is the `src/lib` directory. Anything inside this directory can be accessed by any module in `src` via the `$lib` alias. +Sometimes, code is used in multiple places. When this happens, it's useful to have a place to put them that can be accessed by all routes without needing to prefix imports with `../../../../`. In SvelteKit, that place is the `src/lib` directory. Anything inside this directory can be accessed by any module in `src` via the `$lib` alias. Both `+page.svelte` files in this exercise import `src/lib/message.js`. But if you navigate to `/a/deeply/nested/route`, the app breaks, because we got the prefix wrong. Update it to use `$lib/message.js` instead: @@ -28,4 +28,4 @@ Do the same for `src/routes/+page.svelte`:

home

{message}

-``` \ No newline at end of file +``` From 865c28fd1a16489ab808628b620d56dc46578b85 Mon Sep 17 00:00:00 2001 From: Hyeyeon Seo <42148741+skojphy@users.noreply.github.com> Date: Wed, 31 May 2023 07:09:56 +0900 Subject: [PATCH 05/92] Update tutorial (#371) Updated the example in the tutorial to match the answer in the exercise. --- .../tutorial/01-svelte/04-logic/04-each-blocks/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md index 9c9e7ffc3..3011cbb8f 100644 --- a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md @@ -11,7 +11,7 @@ Instead of laboriously copying, pasting and editing, we can get rid of all but t
+++{#each colors as color}+++ + - - ``` From 3fe7f041ab9cf2a3ff7ba7ee9fb4771a5621d264 Mon Sep 17 00:00:00 2001 From: Johannes Bader Date: Fri, 11 Aug 2023 11:24:10 +0200 Subject: [PATCH 31/92] 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 32/92] 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 33/92] 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 34/92] 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 35/92] 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 36/92] 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 75/92] 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 76/92] 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:
- +
+++