tweaks (sveltejs#292)

Rich-Harris · Rich Harris · web-flow · commit 87ba39031204 · 2023-03-22T11:12:43.000-04:00
Co-authored-by: Rich Harris &lt;git@rich-harris.dev&gt;
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
@@ -11,7 +11,7 @@ Our image is missing a `src` — let's add one:
 <img +++src={src}+++ />
 ```
 
-That's better. But Svelte is giving us a warning:
+That's better. But if you hover over the `<img>` in the editor, Svelte is giving us a warning:
 
 > A11y: &lt;img&gt; element should have an alt attribute
 
diff --git a/content/tutorial/01-svelte/01-introduction/05-nested-components/README.md b/content/tutorial/01-svelte/01-introduction/05-nested-components/README.md
@@ -4,7 +4,7 @@ title: Nested components
 
 It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them in our markup.
 
-Add a `<script>` tag that imports `Nested.svelte`...
+Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...
 
 ```svelte
 /// file: App.svelte
diff --git a/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md b/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md
@@ -9,6 +9,9 @@ To demonstrate it, we first need to wire up an event handler (we'll learn more a
 ```svelte
 /// file: App.svelte
 <button +++on:click={increment}+++>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
 ```
 
 Inside the `increment` function, all we need to do is change the value of `count`:
diff --git a/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md b/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md
@@ -17,7 +17,7 @@ You can easily group statements together with a block:
 /// file: App.svelte
 $: +++{+++
 	console.log(`the count is ${count}`);
-	alert(`I SAID THE COUNT IS ${count}`);
+	console.log(`this will also be logged whenever count changes`);
 +++}+++
 ```
 
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
@@ -2,7 +2,7 @@
 title: Updating arrays and objects
 ---
 
-Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the 'Add a number' button doesn't currently do anything.
+Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the 'Add a number' button doesn't currently do anything, even though we're calling `numbers.push(...)` inside `addNumber`.
 
 One way to fix that is to add an assignment that would otherwise be redundant:
 
diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/README.md b/content/tutorial/01-svelte/03-props/03-spread-props/README.md
@@ -2,11 +2,25 @@
 title: Spread props
 ---
 
-If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
+In this exercise, we've forgotten to specify the `version` prop expected by `PackageInfo.svelte`, meaning it shows 'version undefined'.
+
+We _could_ fix it by adding the `version` prop...
+
+```svelte
+/// file: App.svelte
+<PackageInfo
+    name={pkg.name}
+	speed={pkg.speed}
+    +++version={pkg.version}+++
+	website={pkg.website}
+/>
+```
+
+...but since the properties of `pkg` correspond to the component's expected props, we can 'spread' them onto the component instead:
 
 ```svelte
 /// file: App.svelte
-<PackageInfo +++{...pkg}+++/>
+<PackageInfo +++{...pkg}+++ />
 ```
 
 > Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.
diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/App.svelte
@@ -3,15 +3,14 @@
 
 	const pkg = {
 		name: 'svelte',
+		speed: 'blazing',
 		version: 3,
-		speed: 'blazingly',
 		website: 'https://svelte.dev'
 	};
 </script>
 
 <PackageInfo
 	name={pkg.name}
-	version={pkg.version}
 	speed={pkg.speed}
 	website={pkg.website}
 />
diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte b/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte
@@ -8,8 +8,6 @@
 </script>
 
 <p>
-	The <code>{name}</code> package is {speed} fast. Download version {version}
-	from
-	<a {href}>npm</a>
-	and <a href={website}>learn more here</a>
+	The <code>{name}</code> package is {speed} fast. Download version {version} from
+	<a {href}>npm</a> and <a href={website}>learn more here</a>
 </p>
diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/app-b/src/lib/App.svelte b/content/tutorial/01-svelte/03-props/03-spread-props/app-b/src/lib/App.svelte
@@ -3,8 +3,8 @@
 
 	const pkg = {
 		name: 'svelte',
+		speed: 'blazing',
 		version: 3,
-		speed: 'blazingly',
 		website: 'https://svelte.dev'
 	};
 </script>
