Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Aug 5, 2025. It is now read-only.

Commitd5b80c5

Browse files
Rich-HarrisRich Harris
and
Rich Harris
authored
Tweaks (#265)
* better highlight* fix light mode diagnostic styling* always open external URLs in a new tab* tweak each block exercise* more* tidy up await block exercise* more---------Co-authored-by: Rich Harris <git@rich-harris.dev>
1 parentec0fa01 commitd5b80c5

File tree

16 files changed

+106
-100
lines changed

16 files changed

+106
-100
lines changed

‎content/tutorial/01-svelte/04-logic/04-each-blocks/README.md‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ If you need to loop over lists of data, use an `each` block:
66

77
```svelte
88
<ul>
9-
{#each cats as cat}
10-
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
11-
{cat.name}
12-
</a></li>
13-
{/each}
9+
+++{#each cats as cat}+++
10+
<li>
11+
<a href="https://www.youtube.com/watch?v={cat.id}">
12+
{cat.name}
13+
</a>
14+
</li>
15+
+++{/each}+++
1416
</ul>
1517
```
1618

@@ -19,10 +21,12 @@ If you need to loop over lists of data, use an `each` block:
1921
You can get the current_index_ as a second argument, like so:
2022

2123
```svelte
22-
{#each cats as cat, i}
23-
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
24-
{i + 1}: {cat.name}
25-
</a></li>
24+
{#each cats as cat+++, i}+++
25+
<li>
26+
<a href="https://www.youtube.com/watch?v={cat.id}">
27+
+++{i + 1}:+++ {cat.name}
28+
</a>
29+
</li>
2630
{/each}
2731
```
2832

‎content/tutorial/01-svelte/04-logic/04-each-blocks/app-a/src/lib/App.svelte‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,10 @@
1919

2020
<ul>
2121
<!-- open each block -->
22-
<li>
23-
<a
24-
target="_blank"
25-
href="https://www.youtube.com/watch?v={cat.id}"
26-
>
27-
{cat.name}
28-
</a>
29-
</li>
22+
<li>
23+
<ahref="https://www.youtube.com/watch?v={cat.id}">
24+
{cat.name}
25+
</a>
26+
</li>
3027
<!-- close each block -->
3128
</ul>

‎content/tutorial/01-svelte/04-logic/04-each-blocks/app-b/src/lib/App.svelte‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@
2020
<ul>
2121
{#eachcatsas { id, name },i}
2222
<li>
23-
<a
24-
target="_blank"
25-
href="https://www.youtube.com/watch?v={id}"
26-
>
23+
<ahref="https://www.youtube.com/watch?v={id}">
2724
{i+1}: {name}
2825
</a>
2926
</li>

‎content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ title: Keyed each blocks
44

55
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.
66

7-
It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first`<Thing>` component, but the_last_ DOM node. Then it updates the`name` value in the remaining DOM nodes, but not the emoji.
7+
It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first`<Thing>` component, but the_last_ DOM node. Then it updates the`name` value in the remaining DOM nodes, but not the emoji, which in`Thing.svelte` is fixed when the component is created.
88

99
Instead, we'd like to remove only the first`<Thing>` component and its DOM node, and leave the others unaffected.
1010

1111
To do that, we specify a unique identifier (or "key") for the`each` block:
1212

1313
```svelte
14-
{#each things as thing (thing.id)}
14+
{#each things as thing (+++thing.id+++)}
1515
<Thing name={thing.name}/>
1616
{/each}
1717
```

‎content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-a/src/lib/Thing.svelte‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script>
2-
import {onDestroy }from'svelte';
3-
42
constemojis= {
53
apple:'🍎',
64
banana:'🍌',
@@ -12,13 +10,9 @@
1210
// the name is updated whenever the prop value changes...
1311
exportlet name;
1412
15-
// ...but the "emoji" variable is fixed upon initialisation of the component
13+
// ...but the "emoji" variable is fixed upon initialisation
14+
// of the component because it uses `const` instead of `$:`
1615
constemoji= emojis[name];
17-
18-
// observe in the console which entry is removed
19-
onDestroy(()=> {
20-
console.log('thing destroyed:'+ name);
21-
});
2216
</script>
2317

2418
<p>

‎content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte‎

Lines changed: 0 additions & 45 deletions
This file was deleted.
Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script>
22
asyncfunctiongetRandomNumber() {
3-
constres=awaitfetch(
4-
`https://svelte.dev/tutorial/random-number`
5-
);
6-
consttext=awaitres.text();
3+
// Fetch a random number between 0 and 100
4+
// (with a delay, so that we can see it)
5+
constres=awaitfetch('/random-number');
76
87
if (res.ok) {
9-
return text;
8+
returnawaitres.text();
109
}else {
11-
thrownewError(text);
10+
// Sometimes the API will fail!
11+
thrownewError('Request failed');
1212
}
1313
}
1414
@@ -19,7 +19,9 @@
1919
}
2020
</script>
2121

22-
<buttonon:click={handleClick}> generate random number </button>
22+
<buttonon:click={handleClick}>
23+
generate random number
24+
</button>
2325

2426
<!-- replace this element -->
2527
<p>{promise}</p>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
exportasyncfunctionGET(req){
2+
constquery=req.url.searchParams;
3+
letmin=query.get('min')||'0';
4+
letmax=query.get('max')||'100';
5+
min=+min;
6+
max=+max;
7+
8+
// simulate a long delay
9+
awaitnewPromise((res)=>setTimeout(res,1000));
10+
11+
// fail sometimes
12+
if(Math.random()<0.333){
13+
returnnewResponse(`Failed to generate random number. Please try again`,{
14+
status:400,
15+
headers:{'Access-Control-Allow-Origin':'*'}
16+
});
17+
}
18+
19+
constnum=min+Math.round(Math.random()*(max-min));
20+
returnnewResponse(String(num),{
21+
headers:{'Access-Control-Allow-Origin':'*'}
22+
});
23+
}

‎content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script>
22
asyncfunctiongetRandomNumber() {
3-
constres=awaitfetch(
4-
`https://svelte.dev/tutorial/random-number`
5-
);
6-
consttext=awaitres.text();
3+
// Fetch a random number between 0 and 100
4+
// (with a delay, so that we can see it)
5+
constres=awaitfetch('/random-number');
76
87
if (res.ok) {
9-
return text;
8+
returnawaitres.text();
109
}else {
11-
thrownewError(text);
10+
// Sometimes the API will fail!
11+
thrownewError('Request failed');
1212
}
1313
}
1414
@@ -19,7 +19,9 @@
1919
}
2020
</script>
2121

22-
<buttonon:click={handleClick}> generate random number </button>
22+
<buttonon:click={handleClick}>
23+
generate random number
24+
</button>
2325

2426
{#awaitpromise}
2527
<p>...waiting</p>

‎content/tutorial/01-svelte/05-events/01-dom-events/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: DOM events
55
As we've briefly seen already, you can listen to any event on an element with the`on:` directive:
66

77
```svelte
8-
<div on:mousemove={handleMousemove}>
8+
<div+++on:mousemove={handleMousemove}+++>
99
The mouse position is {m.x} x {m.y}
1010
</div>
1111
```

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp