From 5f4d2d5ec87e2440c20714eb524f7d3cadd70b1f Mon Sep 17 00:00:00 2001 From: vages Date: Sat, 3 Aug 2019 13:17:33 +0000 Subject: [PATCH 1/3] Explain difference between contexts and stores I had a problem understanding why you would want to use a context when you can just use a store. This is what I've gathered after reading a bit about them. --- .../tutorial/15-context/01-context-api/text.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md index ef146772c5..e6f6d25dac 100644 --- a/site/content/tutorial/15-context/01-context-api/text.md +++ b/site/content/tutorial/15-context/01-context-api/text.md @@ -35,6 +35,20 @@ The markers can now add themselves to the map. > A more finished version of `` would also handle removal and prop changes, but we're only demonstrating context here. +## Contexts vs. stores + +Contexts and stores seem similar. They differ in that stores are available to *any* part of an app, while a context is only *available to a component and its descendants*. This can be helpful if you want to use several copies of a component without the state of one interfering with the state of the others. + +Try making a copy of the Map component in `App.svelte` to see how this works. Replace the style tag in `Map.svelte` with the following to show both maps: + +```html + +``` ## Context keys From 9299ef9231c5f15f256de1a5a53848d4779c8e85 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 3 Aug 2019 13:01:51 -0400 Subject: [PATCH 2/3] Combine context-vs-stores with reactivity explanation --- .../15-context/01-context-api/text.md | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md index e6f6d25dac..32b0f2efcc 100644 --- a/site/content/tutorial/15-context/01-context-api/text.md +++ b/site/content/tutorial/15-context/01-context-api/text.md @@ -35,21 +35,6 @@ The markers can now add themselves to the map. > A more finished version of `` would also handle removal and prop changes, but we're only demonstrating context here. -## Contexts vs. stores - -Contexts and stores seem similar. They differ in that stores are available to *any* part of an app, while a context is only *available to a component and its descendants*. This can be helpful if you want to use several copies of a component without the state of one interfering with the state of the others. - -Try making a copy of the Map component in `App.svelte` to see how this works. Replace the style tag in `Map.svelte` with the following to show both maps: - -```html - -``` - ## Context keys In `mapbox.js` you'll see this line: @@ -60,4 +45,12 @@ const key = {}; We can use anything as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using an object literal means the keys are guaranteed not to conflict in any circumstance, even when you have multiple different contexts operating across many component layers. -> Remember that context is not inherently reactive. If you need context values to be reactive then you can pass a store into context, which *will* be reactive. +## Contexts vs. stores + +Contexts and stores seem similar. They differ in that stores are available to *any* part of an app, while a context is only *available to a component and its descendants*. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others. + +In fact, you might use the two together. Since context is not reactive, values that change over time should be represented as stores: + +```js +const { these, are, stores } = getContext(...); +``` From 2978a3c1922d043942d1e52cddb60c83d0de7cd9 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 3 Aug 2019 13:39:09 -0400 Subject: [PATCH 3/3] fix italicisation --- site/content/tutorial/15-context/01-context-api/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md index 32b0f2efcc..28001362f6 100644 --- a/site/content/tutorial/15-context/01-context-api/text.md +++ b/site/content/tutorial/15-context/01-context-api/text.md @@ -47,7 +47,7 @@ We can use anything as a key — we could do `setContext('mapbox', ...)` for exa ## Contexts vs. stores -Contexts and stores seem similar. They differ in that stores are available to *any* part of an app, while a context is only *available to a component and its descendants*. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others. +Contexts and stores seem similar. They differ in that stores are available to *any* part of an app, while a context is only available to *a component and its descendants*. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others. In fact, you might use the two together. Since context is not reactive, values that change over time should be represented as stores: