Tweaks (#276)

* tweaks

* .

* remove duplicates

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

content/tutorial/01-svelte/03-props/01-declaring-props/app-b/src/lib/App.svelte

@@ -15,9 +15,9 @@ You can also declare event handlers inline:
 </script>
 
 <div
-	+++on:mousemove={(e) => {
+	on:mousemove={+++(e) => {
 		m = { x: e.clientX, y: e.clientY };
-	}}+++
+	}+++}
 >
 	The mouse position is {m.x} x {m.y}
 </div>

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

@@ -6,9 +6,9 @@ Components can also dispatch events. To do so, they must create an event dispatc
 
 ```svelte
 <script>
-	import { createEventDispatcher } from 'svelte';
+	+++import { createEventDispatcher } from 'svelte';+++
 
-	const dispatch = createEventDispatcher();
+	+++const dispatch = createEventDispatcher();+++
 
 	function sayHello() {
 		dispatch('message', {
@@ -20,8 +20,10 @@ Components can also dispatch events. To do so, they must create an event dispatc
 
 > `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
 
-Notice that the `App` component is listening to the messages dispatched by `Inner` component thanks to the `on:message` directive. This directive is an attribute prefixed with `on:` followed by the event name that we are dispatching (in this case, `message`).
+Then, add an `on:message` handler in `App.svelte`:
 
-Without this attribute, messages would still be dispatched, but the App would not react to it. You can try removing the `on:message` attribute and pressing the button again.
+```svelte
+<Inner +++on:message={handleMessage}+++ />
+```
 
-> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in the `App.svelte` component.
+> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in `App.svelte`.

content/tutorial/01-svelte/05-events/04-component-events/README.md

@@ -6,4 +6,4 @@
 	}
 </script>
 
-<Inner on:message={handleMessage} />
+<Inner />

content/tutorial/01-svelte/05-events/04-component-events/app-a/src/lib/App.svelte

@@ -1,7 +1,9 @@
 <script>
-	// setup code goes here
-
-	function sayHello() {}
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
 </script>
 
 <button on:click={sayHello}>

content/tutorial/01-svelte/05-events/04-component-events/app-a/src/lib/Inner.svelte

@@ -6,7 +6,7 @@ Unlike DOM events, component events don't _bubble_. If you want to listen to an
 
 In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
 
-One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
+One way we _could_ solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
 
 ```svelte
 <script>

content/tutorial/01-svelte/05-events/05-event-forwarding/README.md

@@ -7,7 +7,7 @@ Event forwarding works for DOM events too.
 We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
 
 ```svelte
-<button on:click>
+<button +++on:click+++>
 	Click me
 </button>
 ```

content/tutorial/01-svelte/05-events/05-event-forwarding/app-b/src/lib/App.svelte

@@ -1,4 +1,6 @@
-<button>Click me</button>
+<button>
+	Click me
+</button>
 
 <style>
 	button {

content/tutorial/01-svelte/05-events/05-event-forwarding/app-b/src/lib/Inner.svelte

@@ -1,4 +1,6 @@
-<button on:click>Click me</button>
+<button on:click>
+	Click me
+</button>
 
 <style>
 	button {