diff --git a/05-context/README.md b/05-context/README.md
index 1242be4..1c7922c 100644
--- a/05-context/README.md
+++ b/05-context/README.md
@@ -1,14 +1,13 @@
# Summary
-- Let's create two components that will be used to display a name
- and edit a name and wrap it in a myname component.
+- We will create two components: one to display a name, other to edit a name. We will wrap them in a _Name_ component.
- We won't use props (yes, this is an overkill it's just for the
sake of the example).
- We will first solve the problem using stores.
-- Then we will instantiate two instance of the myname component, and
+- Then we will create two instances of the _Name_ component, and
we will check that both components will share the same info :(.
- Time to start using context, let's use it just to store a given string,
@@ -21,7 +20,7 @@
# Step By Step Guide
-- This example will take a starting point _00-scratch-typescript_
+- This example will take a starting point _00-boiler-typescript_
- Let's install the packages.
@@ -125,15 +124,15 @@ Buuut... let's try to instantiate two instances of the component:
_./src/App.svelte_
```diff
-
+
-
-
Context Demo
-
+
+
Context Demo
+
+
-
+
```
What's going on? Since we are using an store both components are sharing
@@ -144,11 +143,11 @@ What else can we do?
Let' play with Svelte Context.
Let's get rid of the store solution (temporarily :)) and let's start
-using a new api _context_ we got _setContext_ and _getContext_ we
-pass a key and we get a value...
+using a new _context_ api. We got _setContext_ and _getContext_ that we'll use to
+pass a key and get a value...
This seems to be ok, but we will need to add an extra step to make it
-work, why? because Context in svelte:
+work, why? Because context in svelte:
- Allows you to call get and set context just when a component is initialized
(so no update in _onChange_ handlers like...).
@@ -160,22 +159,22 @@ So let's try first to add a "react" like approach:
Let's initialize the value (in this case we will add some random number
to check that bot name edit instances are initialized with different data)
-_./src/name-component/name-component_
+_./src/name-component/name-component.svelte_
```diff
-
-
-
-
+
+
+
+
```
Then in the display and edit components:
@@ -183,45 +182,45 @@ Then in the display and edit components:
_./src/name-component/name-display.svelte_
```diff
-
-
--
Username: {$userInfoStore.username}
-+
Username: {userInfo.username}
+
+
+-
Username: {$userInfoStore.username}
++
Username: {userInfo.username}
```
_./src/name-component/name-edit.svelte_
```diff
-
+
-
+
-+ setContext("userInfoStore", {
-+ ...userInfo,
-+ username: e.currentTarget.value,
-+ })}
++ bind:value={userInfo.username}
++ on:input={(e) =>
++ setContext("userInfoStore", {
++ ...userInfo,
++ username: e.currentTarget.value,
++ })}
+ />
```
Well if we run this, a good thing is that we got two different values
on each component, that's nice...
-BUT We will get no reactivity !! :-@, what's going on here? If we want
+BUT we will get no reactivity !! :-@, what's going on here? If we want
to get reactivity with a context we have to combine it with stores,
but in this case we will keep the store as private and just keep
it for the context it self.
@@ -234,24 +233,22 @@ we will assign an store to it:
_./src/name-component/name-component.svelte_
```diff
-
+
```
- Now let's go for the display name component, since we are using an
@@ -260,19 +257,17 @@ _./src/name-component/name-component.svelte_
_./src/name-component/name-display.svelte_
```diff
-
+- const userInfo = getContext("userInfoStore");
++ const userInfoStore = getContext>("userInfoStore");
+
--
Username: {userInfo.username}
-+
Username: {$userInfoStore.username}
+-
Username: {userInfo.username}
++
Username: {$userInfoStore.username}
```
- It's time to update the edit name component, this time we will
@@ -282,24 +277,24 @@ _./src/name-component/name-display.svelte_
_./src/name-component/name-edit.svelte_
```diff
-
+- const userInfo = getContext("userInfoStore");
++ const userInfoStore = getContext>("userInfoStore");
+
-
-- setContext("userInfoStore", {
-- ...userInfo,
-- username: e.currentTarget.value,
-- })}
+- bind:value={userInfo.username}
+- on:input={(e) =>
+- setContext("userInfoStore", {
+- ...userInfo,
+- username: e.currentTarget.value,
+- })}
- />
```
@@ -324,7 +319,7 @@ _./src/name-component/user-info.provider.svelte_
import type { UserEntity } from "./model";
const userInfoStore = writable({
- username: "Seed name " + Math.random(),
+ username: `Seed name: ${Math.random()}`,
});
setContext>("userInfoStore", userInfoStore);
@@ -338,23 +333,23 @@ _./src/name-component/user-info.provider.svelte_
_./src/name-component/name-component.svelte_
```diff
-
-
-
-
+
+
+
+
```
- Let's update our index barrel
@@ -371,24 +366,24 @@ export { default as NameComponent } from "./name-component.svelte";
_./src/App.svelte_
```diff
-
-
-
-
Context Demo
-+
-
-+
-+
-
-+
-
+
+
+
+
Context Demo
++
+
++
++
+
++
+
```
Now you can give a try and enclose the second _NameComponent_ inside the
-first _userInfoProvider_
+first _UserInfoProvider_
- Let's do a final refactor, we have enclosed the instantiation of the
_userInfoStore_ inside of the provider, we could just enclose it in the
@@ -396,41 +391,40 @@ first _userInfoProvider_
the same instantiated store we could just move to our _user.store.ts_
but use a factory function instead:
-_./user.store.ts_
+_./src/name-component/user.store.ts_
```diff
-import type { UserEntity } from "./model";
-import { writable } from "svelte/store";
+ import type { UserEntity } from "./model";
+ import { writable } from "svelte/store";
- export const userInfoStore = writable({
-- username: "default user",
+- username: "default user",
- });
-
-+ export const createUserInfoStore = () => writable({
-+ username: `Seed name ${Math.random()}`,
-+ });
++ export const createUserInfoStore = () =>
++ writable({
++ username: `Seed name: ${Math.random()}`,
++ });
```
-_./user-info.provider.svelte_
+_./src/name-component/user-info.provider.svelte_
```diff
-
-
-
+
+
+
```
Not so bad, but the getContext and setContest are a bit clunky:
@@ -445,16 +439,18 @@ _./src/name-component/user.store.ts_
```diff
+ import { getContext, setContext } from "svelte";
+ import type { Writable } from "svelte/store";
-import type { UserEntity } from "./model";
-import { writable } from "svelte/store";
+ import type { UserEntity } from "./model";
+ import { writable } from "svelte/store";
-export const createUserInfoStore = () =>
- writable({
- username: `Seed name ${Math.random()}`,
- });
+ export const createUserInfoStore = () =>
+ writable({
+ username: `Seed name ${Math.random()}`,
+ });
-+ export const getUserInfoContext = () => getContext>("userInfoStore");
-+ export const setUserInfoContext = (userInfoStore: Writable) => setContext("userInfoStore", userInfoStore);
++ export const getUserInfoContext = () =>
++ getContext>("userInfoStore");
++ export const setUserInfoContext = (userInfoStore: Writable) =>
++ setContext("userInfoStore", userInfoStore);
```
Let's use this new helper in nameDisplay and nameEdit
@@ -462,34 +458,33 @@ Let's use this new helper in nameDisplay and nameEdit
_./src/name-component/name-display.svelte_
```diff
-
-
-
-
Username: {$userInfoStore.username}
+
Username: {$userInfoStore.username}
```
_./src/name-component/name-edit.svelte_
```diff
-
+- const userInfoStore = getContext>("userInfoStore");
++ const userInfoStore = getUserInfoContext();
+
-
+
```
And in the provider:
@@ -497,17 +492,17 @@ And in the provider:
_./src/name-component/user-info.provider.svelte_
```diff
-
-
\ No newline at end of file
+
diff --git a/05-context/src/name-component/name-display.svelte b/05-context/src/name-component/name-display.svelte
index bc5b442..c5b0886 100644
--- a/05-context/src/name-component/name-display.svelte
+++ b/05-context/src/name-component/name-display.svelte
@@ -1,9 +1,9 @@
-
Username: {$userInfoStore.username}
\ No newline at end of file
+
Username: {$userInfoStore.username}
diff --git a/05-context/src/name-component/name-edit.svelte b/05-context/src/name-component/name-edit.svelte
index c9219ae..a324d5b 100644
--- a/05-context/src/name-component/name-edit.svelte
+++ b/05-context/src/name-component/name-edit.svelte
@@ -1,9 +1,9 @@
-
+
diff --git a/05-context/src/name-component/user-info.provider.svelte b/05-context/src/name-component/user-info.provider.svelte
index 2995687..1196a60 100644
--- a/05-context/src/name-component/user-info.provider.svelte
+++ b/05-context/src/name-component/user-info.provider.svelte
@@ -1,5 +1,5 @@
-
\ No newline at end of file
+
diff --git a/05-context/src/name-component/user.store.ts b/05-context/src/name-component/user.store.ts
index 31caf90..556a5e5 100644
--- a/05-context/src/name-component/user.store.ts
+++ b/05-context/src/name-component/user.store.ts
@@ -3,5 +3,5 @@ import { writable } from "svelte/store";
export const createUserInfoStore = () =>
writable({
- username: "Seed name " + Math.random(),
+ username: `Seed name: ${Math.random()}`,
});