Tweaks (sveltejs#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 <[email protected]>

Author: Rich-Harris

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

@@ -6,11 +6,13 @@ If you need to loop over lists of data, use an `each` block:
 
 ```svelte
 <ul>
-	{#each cats as cat}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
-			{cat.name}
-		</a></li>
-	{/each}
+	+++{#each cats as cat}+++
+		<li>
+			<a href="https://www.youtube.com/watch?v={cat.id}">
+				{cat.name}
+			</a>
+		</li>
+	+++{/each}+++
 </ul>
 ```
 
@@ -19,10 +21,12 @@ If you need to loop over lists of data, use an `each` block:
 You can get the current _index_ as a second argument, like so:
 
 ```svelte
-{#each cats as cat, i}
-	<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
-		{i + 1}: {cat.name}
-	</a></li>
+{#each cats as cat+++, i}+++
+	<li>
+		<a href="https://www.youtube.com/watch?v={cat.id}">
+			+++{i + 1}:+++ {cat.name}
+		</a>
+	</li>
 {/each}
 ```
 

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

@@ -19,13 +19,10 @@
 
 <ul>
 	<!-- open each block -->
-	<li>
-		<a
-			target="_blank"
-			href="https://www.youtube.com/watch?v={cat.id}"
-		>
-			{cat.name}
-		</a>
-	</li>
+		<li>
+			<a href="https://www.youtube.com/watch?v={cat.id}">
+				{cat.name}
+			</a>
+		</li>
 	<!-- close each block -->
 </ul>

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

@@ -20,10 +20,7 @@
 <ul>
 	{#each cats as { id, name }, i}
 		<li>
-			<a
-				target="_blank"
-				href="https://www.youtube.com/watch?v={id}"
-			>
+			<a href="https://www.youtube.com/watch?v={id}">
 				{i + 1}: {name}
 			</a>
 		</li>

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

@@ -4,14 +4,14 @@ 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.
 
-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.
+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.
 
 Instead, we'd like to remove only the first `<Thing>` component and its DOM node, and leave the others unaffected.
 
 To do that, we specify a unique identifier (or "key") for the `each` block:
 
 ```svelte
-{#each things as thing (thing.id)}
+{#each things as thing (+++thing.id+++)}
 	<Thing name={thing.name}/>
 {/each}
 ```

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

@@ -1,6 +1,4 @@
 <script>
-	import { onDestroy } from 'svelte';
-
 	const emojis = {
 		apple: '🍎',
 		banana: '🍌',
@@ -12,13 +10,9 @@
 	// the name is updated whenever the prop value changes...
 	export let name;
 
-	// ...but the "emoji" variable is fixed upon initialisation of the component
+	// ...but the "emoji" variable is fixed upon initialisation
+	// of the component because it uses `const` instead of `$:`
 	const emoji = emojis[name];
-
-	// observe in the console which entry is removed
-	onDestroy(() => {
-		console.log('thing destroyed: ' + name);
-	});
 </script>
 
 <p>

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

@@ -1,14 +1,14 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(
-			`https://svelte.dev/tutorial/random-number`
-		);
-		const text = await res.text();
+		// Fetch a random number between 0 and 100
+		// (with a delay, so that we can see it)
+		const res = await fetch('/random-number');
 
 		if (res.ok) {
-			return text;
+			return await res.text();
 		} else {
-			throw new Error(text);
+			// Sometimes the API will fail!
+			throw new Error('Request failed');
 		}
 	}
 
@@ -19,7 +19,9 @@
 	}
 </script>
 
-<button on:click={handleClick}> generate random number </button>
+<button on:click={handleClick}>
+	generate random number
+</button>
 
 <!-- replace this element -->
 <p>{promise}</p>

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

@@ -0,0 +1,23 @@
+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': '*' }
+	});
+}

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

@@ -1,14 +1,14 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(
-			`https://svelte.dev/tutorial/random-number`
-		);
-		const text = await res.text();
+		// Fetch a random number between 0 and 100
+		// (with a delay, so that we can see it)
+		const res = await fetch('/random-number');
 
 		if (res.ok) {
-			return text;
+			return await res.text();
 		} else {
-			throw new Error(text);
+			// Sometimes the API will fail!
+			throw new Error('Request failed');
 		}
 	}
 
@@ -19,7 +19,9 @@
 	}
 </script>
 
-<button on:click={handleClick}> generate random number </button>
+<button on:click={handleClick}>
+	generate random number
+</button>
 
 {#await promise}
 	<p>...waiting</p>

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

@@ -5,7 +5,7 @@ title: DOM events
 As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
 
 ```svelte
-<div on:mousemove={handleMousemove}>
+<div +++on:mousemove={handleMousemove}+++>
 	The mouse position is {m.x} x {m.y}
 </div>
 ```