Skip to content

Commit d5b80c5

Browse files
Rich-HarrisRich Harris
Rich-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 parent ec0fa01 commit d5b80c5

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

+13-9
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

+5-8
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+
<a href="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

+1-4
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@
2020
<ul>
2121
{#each cats as { id, name }, i}
2222
<li>
23-
<a
24-
target="_blank"
25-
href="https://www.youtube.com/watch?v={id}"
26-
>
23+
<a href="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

+2-2
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

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script>
2-
import { onDestroy } from 'svelte';
3-
42
const emojis = {
53
apple: '🍎',
64
banana: '🍌',
@@ -12,13 +10,9 @@
1210
// the name is updated whenever the prop value changes...
1311
export let 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
const emoji = 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

-45
This file was deleted.

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

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script>
22
async function getRandomNumber() {
3-
const res = await fetch(
4-
`https://svelte.dev/tutorial/random-number`
5-
);
6-
const text = await res.text();
3+
// Fetch a random number between 0 and 100
4+
// (with a delay, so that we can see it)
5+
const res = await fetch('/random-number');
76
87
if (res.ok) {
9-
return text;
8+
return await res.text();
109
} else {
11-
throw new Error(text);
10+
// Sometimes the API will fail!
11+
throw new Error('Request failed');
1212
}
1313
}
1414
@@ -19,7 +19,9 @@
1919
}
2020
</script>
2121

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

2426
<!-- replace this element -->
2527
<p>{promise}</p>

‎content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/routes/random-number/+server.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export async function GET(req) {
2+
const query = req.url.searchParams;
3+
let min = query.get('min') || '0';
4+
let max = query.get('max') || '100';
5+
min = +min;
6+
max = +max;
7+
8+
// simulate a long delay
9+
await new Promise((res) => setTimeout(res, 1000));
10+
11+
// fail sometimes
12+
if (Math.random() < 0.333) {
13+
return new Response(`Failed to generate random number. Please try again`, {
14+
status: 400,
15+
headers: { 'Access-Control-Allow-Origin': '*' }
16+
});
17+
}
18+
19+
const num = min + Math.round(Math.random() * (max - min));
20+
return new Response(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

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script>
22
async function getRandomNumber() {
3-
const res = await fetch(
4-
`https://svelte.dev/tutorial/random-number`
5-
);
6-
const text = await res.text();
3+
// Fetch a random number between 0 and 100
4+
// (with a delay, so that we can see it)
5+
const res = await fetch('/random-number');
76
87
if (res.ok) {
9-
return text;
8+
return await res.text();
109
} else {
11-
throw new Error(text);
10+
// Sometimes the API will fail!
11+
throw new Error('Request failed');
1212
}
1313
}
1414
@@ -19,7 +19,9 @@
1919
}
2020
</script>
2121

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

2426
{#await promise}
2527
<p>...waiting</p>

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

+1-1
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
```

‎content/tutorial/01-svelte/05-events/02-inline-handlers/README.md

+14-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,22 @@ title: Inline handlers
55
You can also declare event handlers inline:
66

77
```svelte
8-
<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
8+
<script>
9+
let m = { x: 0, y: 0 };
10+
11+
---function handleMousemove(event) {
12+
m.x = event.clientX;
13+
m.y = event.clientY;
14+
}---
15+
</script>
16+
17+
<div
18+
+++on:mousemove={(e) => {
19+
m = { x: e.clientX, y: e.clientY };
20+
}}+++
21+
>
922
The mouse position is {m.x} x {m.y}
1023
</div>
1124
```
1225

13-
The quote marks are optional, but they're helpful for syntax highlighting in some environments.
14-
1526
> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.

‎content/tutorial/01-svelte/05-events/03-event-modifiers/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ DOM event handlers can have _modifiers_ that alter their behaviour. For example,
77
```svelte
88
<script>
99
function handleClick() {
10-
alert('no more alerts')
10+
alert(+++'no more alerts'+++)
1111
}
1212
</script>
1313
14-
<button on:click|once={handleClick}>
14+
<button on:click+++|once+++={handleClick}>
1515
Click me
1616
</button>
1717
```

‎content/tutorial/01-svelte/05-events/03-event-modifiers/app-a/src/lib/App.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@
44
}
55
</script>
66

7-
<button on:click={handleClick}> Click me </button>
7+
<button on:click={handleClick}>
8+
Click me
9+
</button>

‎content/tutorial/common/src/__client.js

+16
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,22 @@ window.addEventListener('focusin', (e) => {
9393
}
9494
});
9595

96+
window.addEventListener('click', (e) => {
97+
let node = e.target;
98+
while (node) {
99+
if (node.nodeName === 'A') {
100+
const href = node.href;
101+
const url = new URL(href);
102+
103+
if (url.origin !== location.origin) {
104+
e.preventDefault();
105+
window.open(url, '_blank');
106+
}
107+
}
108+
node = node.parent;
109+
}
110+
});
111+
96112
function ping() {
97113
parent.postMessage(
98114
{

‎src/routes/tutorial/[slug]/Sidebar.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
}
131131
132132
.text :global(pre) :global(.highlight.add) {
133-
--color: rgba(0, 255, 0, 0.1);
133+
--color: rgba(0, 255, 0, 0.18);
134134
}
135135
136136
.text :global(pre) :global(.highlight.remove) {

‎src/routes/tutorial/[slug]/codemirror.css

+5-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,7 @@
6969
padding: 0.2rem 0.8rem;
7070
}
7171
.cm-editor .cm-diagnostic-warning {
72-
/* background: hsl(36, 100%, 32%); */
73-
background: hsl(39, 100%, 10%);
72+
background: hsl(39, 100%, 70%);
7473
}
7574
.cm-editor .cm-diagnosticText {}
7675

@@ -87,4 +86,8 @@
8786
.cm-editor .cm-diagnostic-warning {
8887
background: hsl(39, 100%, 20%);
8988
}
89+
90+
.cm-editor .cm-diagnostic-warning {
91+
background: hsl(39, 100%, 10%);
92+
}
9093
}

0 commit comments

Comments
 (0)