From 25bb740bc085c4d914dce4186fc61ead463aad46 Mon Sep 17 00:00:00 2001 From: MeuhMeuh Date: Mon, 6 Apr 2020 15:37:06 +0200 Subject: [PATCH 1/5] feat(tutorial): better explanation of component events --- site/content/tutorial/05-events/04-component-events/text.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md index 222a292b5ff2..1226450ea0db 100644 --- a/site/content/tutorial/05-events/04-component-events/text.md +++ b/site/content/tutorial/05-events/04-component-events/text.md @@ -18,4 +18,8 @@ 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. \ No newline at end of file +> `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 how the `App.svelte` component, that is including `Inner.svelte`, is listening to the messages dispatched by `Inner` thanks to the `on:message` attribute. + +> Without this attribute, messages would still be dispatched, but the App would not react to it. Try removing the `on:message` attribute and pressing the button again! From c5aec5f2d0766e98fad00bed9d7a51caf46b1884 Mon Sep 17 00:00:00 2001 From: MeuhMeuh Date: Mon, 6 Apr 2020 15:56:47 +0200 Subject: [PATCH 2/5] fix(tutorial): more precise explanation --- site/content/tutorial/05-events/04-component-events/text.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md index 1226450ea0db..3af025460014 100644 --- a/site/content/tutorial/05-events/04-component-events/text.md +++ b/site/content/tutorial/05-events/04-component-events/text.md @@ -20,6 +20,8 @@ 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 how the `App.svelte` component, that is including `Inner.svelte`, is listening to the messages dispatched by `Inner` thanks to the `on:message` attribute. +Notice how the `App.svelte` component, that is including `Inner.svelte`, is listening to the messages dispatched by `Inner` thanks to the `on:message` attribute. This attribute is named with `on:` followed by the event name that we are dispatching (here, `message`). -> Without this attribute, messages would still be dispatched, but the App would not react to it. Try removing the `on:message` attribute and pressing the button again! +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. + +> You can also try changing the event name to anything you like. 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. This still works! From 6394fa11e54a8b697b9c732253219fb248254997 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20M=C3=A9nard?= Date: Tue, 7 Apr 2020 11:03:23 +0200 Subject: [PATCH 3/5] fix(tutorial): naming paragraph language fixes Co-Authored-By: Antony Jones --- site/content/tutorial/05-events/04-component-events/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md index 3af025460014..e9dabbaf14db 100644 --- a/site/content/tutorial/05-events/04-component-events/text.md +++ b/site/content/tutorial/05-events/04-component-events/text.md @@ -20,7 +20,7 @@ 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 how the `App.svelte` component, that is including `Inner.svelte`, is listening to the messages dispatched by `Inner` thanks to the `on:message` attribute. This attribute is named with `on:` followed by the event name that we are dispatching (here, `message`). +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`). 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. From e9bc5beabfd3c80d820a250341c5d29f318aaff5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20M=C3=A9nard?= Date: Tue, 7 Apr 2020 11:03:46 +0200 Subject: [PATCH 4/5] fix(tutorial): event name change language fixes Co-Authored-By: Antony Jones --- site/content/tutorial/05-events/04-component-events/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md index e9dabbaf14db..ba3cd5b9c418 100644 --- a/site/content/tutorial/05-events/04-component-events/text.md +++ b/site/content/tutorial/05-events/04-component-events/text.md @@ -24,4 +24,4 @@ Notice that the `App` component is listening to the messages dispatched by `Inne 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. -> You can also try changing the event name to anything you like. 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. This still works! +> 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. From 47a06efea83f06e74cfff105c5401f0011cb578f Mon Sep 17 00:00:00 2001 From: MeuhMeuh Date: Tue, 7 Apr 2020 13:54:04 +0200 Subject: [PATCH 5/5] fix: retrigger CI