diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 9acc6de3f..cb004fcf5 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -16,7 +16,7 @@ jobs:
strategy:
matrix:
- node-version: [18.x]
+ node-version: [20.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
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
-
+
```
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`.
diff --git a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md
index 9f8688a0e..a87e34367 100644
--- a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md
+++ b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md
@@ -2,13 +2,18 @@
title: Keyed each blocks
---
-By default, when you modify the value of an `each` block, it will add and remove items at the _end_ of the block, and update any values that have changed. That might not be what you want.
+By default, when you modify the value of an `each` block, it will add and remove DOM nodes at the _end_ of the block, and update any values that have changed. That might not be what you want.
-It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: it does not remove the first `` component, but rather the _last_ DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji, which is fixed when each `` is created.
+It's easier to show why than to explain. The `` component sets the emoji as a constant on initialization, but the name is passed in via a prop.
+
+Click the 'Remove first thing' button a few times, and notice what happens:
+
+1. It removes the last component.
+2. It then updates the `name` value in the remaining DOM nodes, but not the emoji, which is fixed when each `` is created.
Instead, we'd like to remove only the first `` component and its DOM node, and leave the others unaffected.
-To do that, we specify a unique identifier (or "key") for the `each` block:
+To do that, we specify a unique identifier (or "key") for each iteration of the `each` block:
```svelte
/// file: App.svelte
@@ -17,6 +22,6 @@ To do that, we specify a unique identifier (or "key") for the `each` block:
{/each}
```
-Here, `(thing.id)` is the _key_, which tells Svelte how to figure out which DOM node to change when the component updates.
+Here, `(thing.id)` is the _key_, which tells Svelte how to figure out what to update when the values (`name` in this example) change.
> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
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}
```
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();
}
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..4195b5c69 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 `