selected = 'red'}
+ aria-label="red"
+ aria-current={selected === 'red'}
+ onclick={() => selected = 'red'}
>
selected = 'orange'}
+ aria-label="orange"
+ aria-current={selected === 'orange'}
+ onclick={() => selected = 'orange'}
>
selected = 'yellow'}
+ aria-label="yellow"
+ aria-current={selected === 'yellow'}
+ onclick={() => selected = 'yellow'}
>
@@ -60,4 +60,4 @@
filter: none;
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
}
-
\ No newline at end of file
+
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte
index 468d57b501..b9db99609c 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte
@@ -1,6 +1,6 @@
Pick a colour
@@ -8,10 +8,10 @@
{#each colors as color, i}
selected = color}
+ aria-label="{color}"
+ aria-current={selected === color}
+ onclick={() => selected = color}
>{i + 1}
{/each}
@@ -42,4 +42,4 @@
filter: none;
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
}
-
\ No newline at end of file
+
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
index 3011cbb8f5..d8d5b92a84 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
@@ -11,16 +11,16 @@ Instead of laboriously copying, pasting and editing, we can get rid of all but t
+++{#each colors as color}+++
selected = 'red'}
>
+++{/each}+++
```
-> The expression (`colors`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
+> The expression (`colors`, in this case) can be any iterable or array-like object — in other words, anything that works with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
Now we need to use the `color` variable in place of `"red"`:
@@ -29,9 +29,9 @@ Now we need to use the `color` variable in place of `"red"`:
{#each colors as color}
selected = +++color+++}
>
{/each}
@@ -45,9 +45,9 @@ You can get the current _index_ as a second argument, like so:
{#each colors as color, +++i}+++
selected = color}
>+++{i + 1}+++
{/each}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/App.svelte
index 718eb59cab..396ce1b86e 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/App.svelte
@@ -1,20 +1,16 @@
-
+ things.shift()}>
Remove first thing
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/Thing.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/Thing.svelte
index 96f48a8d2b..f1088b5b09 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/Thing.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-a/src/lib/Thing.svelte
@@ -7,12 +7,11 @@
egg: '🥚'
};
- // the name is updated whenever the prop value changes...
- export let name;
+ // `name` is updated whenever the prop value changes...
+ let { name } = $props();
- // ...but the "emoji" variable is fixed upon initialisation
- // of the component because it uses `const` instead of `$:`
+ // ...but `emoji` is fixed upon initialisation
const emoji = emojis[name];
-{emoji} = {name}
\ No newline at end of file
+{emoji} = {name}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-b/src/lib/App.svelte
index 8eaeb9a6f9..d33962dc12 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/+assets/app-b/src/lib/App.svelte
@@ -1,20 +1,16 @@
-
+ things.shift()}>
Remove first thing
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
index a87e34367c..eb219ea593 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
@@ -4,16 +4,18 @@ title: Keyed each blocks
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. The `` component sets the emoji as a constant on initialization, but the name is passed in via a prop.
+It's easier to show why than to explain. Inside `Thing.svelte`, `name` is a dynamic prop but `emoji` is a constant.
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.
+2. It then updates the `name` value in the remaining DOM nodes, but not the emoji.
-Instead, we'd like to remove only the first `` component and its DOM node, and leave the others unaffected.
+> If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
-To do that, we specify a unique identifier (or "key") for each iteration of the `each` block:
+One way to fix it would be to make `emoji` a [`$derived`](derived-state) value. But it makes more sense to remove the first `` component altogether than to remove the _last_ one and update all the others.
+
+To do that, we specify a unique _key_ for each iteration of the `each` block:
```svelte
/// file: App.svelte
@@ -22,6 +24,4 @@ To do that, we specify a unique identifier (or "key") for each iteration of the
{/each}
```
-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/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/App.svelte
index a3030a8b34..c22595a531 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/App.svelte
@@ -1,15 +1,11 @@
-
- generate random number
+ promise = roll()}>
+ roll the dice
-...waiting
+...rolling
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
index 5964cb852d..0bc02b4934 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js
@@ -1,12 +1,15 @@
-export async function getRandomNumber() {
- // Fetch a random number between 0 and 100
- // (with a delay, so that we can see it)
- const res = await fetch('/random-number');
+export async function roll() {
+ // Fetch a random number between 0 and 6
+ // (with a delay, so that we can see it)
+ return new Promise((fulfil, reject) => {
+ setTimeout(() => {
+ // simulate a flaky network
+ if (Math.random() < 0.3) {
+ reject(new Error('Request failed'));
+ return;
+ }
- if (res.ok) {
- return await res.text();
- } else {
- // Sometimes the API will fail!
- throw new Error('Request failed');
- }
-}
\ No newline at end of file
+ fulfil(Math.ceil(Math.random() * 6));
+ }, 1000);
+ });
+}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/routes/random-number/+server.js b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/routes/random-number/+server.js
deleted file mode 100644
index e051d80bdf..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/routes/random-number/+server.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export async function GET(req) {
- const query = req.url.searchParams;
- let min = query.get('min') || '0';
- let max = query.get('max') || '100';
- min = +min;
- max = +max;
-
- // simulate a long delay
- await new Promise((res) => setTimeout(res, 1000));
-
- // fail sometimes
- if (Math.random() < 0.333) {
- return new Response(`Failed to generate random number. Please try again`, {
- status: 400,
- headers: { 'Access-Control-Allow-Origin': '*' }
- });
- }
-
- const num = min + Math.round(Math.random() * (max - min));
- return new Response(String(num), {
- headers: { 'Access-Control-Allow-Origin': '*' }
- });
-}
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-b/src/lib/App.svelte
index c538f17a3b..e74efbe2c8 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-b/src/lib/App.svelte
@@ -1,21 +1,17 @@
-
- generate random number
+ promise = roll()}>
+ roll the dice
{#await promise}
- ...waiting
+ ...rolling
{:then number}
- The number is {number}
+ you rolled a {number}!
{:catch error}
{error.message}
{/await}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
index 37f5871b89..2ac78a3d6d 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
@@ -7,9 +7,9 @@ Most web applications have to deal with asynchronous data at some point. Svelte
```svelte
/// file: App.svelte
+++{#await promise}+++
- ...waiting
+ ...rolling
+++{:then number}
- The number is {number}
+ you rolled a {number}!
{:catch error}
{error.message}
{/await}+++
@@ -22,6 +22,6 @@ If you know that your promise can't reject, you can omit the `catch` block. You
```svelte
/// no-file
{#await promise then number}
- The number is {number}
+ you rolled a {number}!
{/await}
```
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte
index e7ebb525c0..5ba72bd22e 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte
@@ -1,14 +1,14 @@
- The pointer is at {m.x} x {m.y}
+ The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/01-onmount/+assets/app-a/src/lib/gradient.js b/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/01-onmount/+assets/app-a/src/lib/gradient.js
deleted file mode 100644
index f0d28f3519..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/01-onmount/+assets/app-a/src/lib/gradient.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export function paint(context, t) {
- const { width, height } = context.canvas;
- const imageData = context.getImageData(0, 0, width, height);
-
- for (let p = 0; p < imageData.data.length; p += 4) {
- const i = p / 4;
- const x = i % width;
- const y = (i / width) >>> 0;
-
- const red = 64 + (128 * x) / width + 64 * Math.sin(t / 1000);
- const green = 64 + (128 * y) / height + 64 * Math.cos(t / 1000);
- const blue = 128;
-
- imageData.data[p + 0] = red;
- imageData.data[p + 1] = green;
- imageData.data[p + 2] = blue;
- imageData.data[p + 3] = 255;
- }
-
- context.putImageData(imageData, 0, 0);
-}
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/01-onmount/+assets/app-a/src/lib/svelte-logo-mask.svg b/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/01-onmount/+assets/app-a/src/lib/svelte-logo-mask.svg
deleted file mode 100644
index 8572d3da6c..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/01-onmount/+assets/app-a/src/lib/svelte-logo-mask.svg
+++ /dev/null
@@ -1 +0,0 @@
-` 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
-
-```
-
-Then, add a callback that runs when the component mounts:
-
-```svelte
-/// file: App.svelte
-
-```
-
-> In a [later exercise](bind-this), we'll learn how to get an element reference without using `document.querySelector`.
-
-So far so good — you should see gently undulating colours in the shape of the Svelte logo. But there's one problem — the loop will continue even after the component has been destroyed. To fix that, we need to return a cleanup function from `onMount`:
-
-```js
-/// file: App.svelte
-onMount(() => {
- const canvas = document.querySelector('canvas');
- const context = canvas.getContext('2d');
-
- +++let frame =+++ requestAnimationFrame(function loop(t) {
- +++frame =+++ requestAnimationFrame(loop);
- paint(context, t);
- });
-
-+++ return () => {
- cancelAnimationFrame(frame);
- };+++
-});
-```
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/package-lock.json b/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/package-lock.json
deleted file mode 100644
index 7a7aadbb57..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/package-lock.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "name": "~TODO~",
- "version": "0.0.1",
- "lockfileVersion": 2,
- "requires": true,
- "packages": {
- "": {
- "name": "~TODO~",
- "version": "0.0.1",
- "dependencies": {
- "elizabot": "^0.0.3"
- }
- },
- "node_modules/elizabot": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/elizabot/-/elizabot-0.0.3.tgz",
- "integrity": "sha512-giwweEawiOHLS8eMPNtpLJaYxWZIHxtJcoq0NyvtEqVx2pxZ8XX1AXHHx84hUK3Scl8vk4U4lEatG54nsMZo+Q=="
- }
- },
- "dependencies": {
- "elizabot": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/elizabot/-/elizabot-0.0.3.tgz",
- "integrity": "sha512-giwweEawiOHLS8eMPNtpLJaYxWZIHxtJcoq0NyvtEqVx2pxZ8XX1AXHHx84hUK3Scl8vk4U4lEatG54nsMZo+Q=="
- }
- }
-}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/package.json b/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/package.json
deleted file mode 100644
index ff635f4a7c..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "name": "~TODO~",
- "version": "0.0.1",
- "scripts": {
- "dev": "./node_modules/vite/bin/vite.js dev",
- "build": "./node_modules/vite/bin/vite.js build",
- "preview": "./node_modules/vite/bin/vite.js preview"
- },
- "dependencies": {
- "elizabot": "^0.0.3"
- },
- "type": "module"
-}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/src/lib/App.svelte
deleted file mode 100644
index 03d237aca3..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-lifecycle/02-update/+assets/app-a/src/lib/App.svelte
+++ /dev/null
@@ -1,169 +0,0 @@
-
-
-
-
-
-
- Eliza
-
-
- {eliza.getInitial()}
-
-
-
- {#each comments as comment}
-
- {/each}
-
-
-
-
-
-
-
-
- Eliza
-
-
- {eliza.getInitial()}
-
-
-
- {#each comments as comment}
-
- {/each}
-
-
-
-
-