From 3512a5e98c051cb022b22b8968162635403e56d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Santiago=20Camargo=20Rodr=C3=ADguez?=
 <santi.camargo@lemoncode.net>
Date: Thu, 8 Sep 2022 22:26:38 +0200
Subject: [PATCH 1/2] Reviewed 05-context

---
 05-context/README.md                          | 295 +++++++++---------
 05-context/src/App.svelte                     |   6 +-
 .../src/name-component/name-component.svelte  |   2 +-
 .../src/name-component/name-display.svelte    |   8 +-
 .../src/name-component/name-edit.svelte       |  10 +-
 .../name-component/user-info.provider.svelte  |   4 +-
 05-context/src/name-component/user.store.ts   |   2 +-
 7 files changed, 160 insertions(+), 167 deletions(-)

diff --git a/05-context/README.md b/05-context/README.md
index 1242be4..e1e174a 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
-<script lang="ts">
-  import { NameComponent } from "./name-component";
-</script>
+  <script lang="ts">
+    import { NameComponent } from "./name-component";
+  </script>
 
-<main>
-  <h1>Context Demo</h1>
-  <NameComponent />
+  <main>
+    <h1>Context Demo</h1>
+    <NameComponent />
 +   <NameComponent />
-</main>
+  </main>
 ```
 
 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
-<script lang="ts">
-+ import { setContext } from "svelte";
-+ import type {UserEntity} from './model';
-  import NameDisplay from "./name-display.svelte";
-  import NameEdit from "./name-edit.svelte";
-
-+  setContext<UserEntity>("userInfoStore", {
-+    username: `Seed name: ${Math.random()}`,
-+  });
-</script>
-
-<NameDisplay />
-<NameEdit />
+  <script lang="ts">
++   import { setContext } from "svelte";
++   import type { UserEntity } from "./model";
+    import NameDisplay from "./name-display.svelte";
+    import NameEdit from "./name-edit.svelte";
+
++   setContext<UserEntity>("userInfoStore", {
++     username: `Seed name: ${Math.random()}`,
++   });
+  </script>
+
+  <NameDisplay />
+  <NameEdit />
 ```
 
 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
-<script lang="ts">
-+  import type {UserEntity} from './model';
-+  import { getContext, setContext } from "svelte";
--  import { userInfoStore } from "./user.store";
-
-+ const userInfo = getContext<UserEntity>("userInfoStore");
-</script>
-
--<h3>Username: {$userInfoStore.username}</h3>
-+<h3>Username: {userInfo.username}</h3>
+  <script lang="ts">
+-   import { userInfoStore } from "./user.store";
++   import type { UserEntity } from "./model";
++   import { getContext } from "svelte";
++
++   const userInfo = getContext<UserEntity>("userInfoStore");
+  </script>
+
+- <h3>Username: {$userInfoStore.username}</h3>
++ <h3>Username: {userInfo.username}</h3>
 ```
 
 _./src/name-component/name-edit.svelte_
 
 ```diff
-<script lang="ts">
--  import { userInfoStore } from "./user.store";
-+  import { getContext, setContext } from "svelte";
-+  import type {UserEntity} from './model';
-
-+  let userInfo = getContext<UserEntity>("userInfoStore");
-</script>
+  <script lang="ts">
+-   import { userInfoStore } from "./user.store";
++   import { getContext, setContext } from "svelte";
++   import type { UserEntity } from "./model";
++
++   let userInfo = getContext<UserEntity>("userInfoStore");
+  </script>
 
 - <input bind:value={$userInfoStore.username} />
 
 + <input
-+  bind:value={userInfo.username}
-+  on:input={(e) =>
-+    setContext("userInfoStore", {
-+      ...userInfo,
-+      username: e.currentTarget.value,
-+    })}
++   bind:value={userInfo.username}
++   on:input={(e) =>
++     setContext<UserEntity>("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
-<script lang="ts">
-+ import type { Writable } from 'svelte/store';
-+ import {writable} from 'svelte/store';
-  import { setContext } from "svelte";
-  import type {UserEntity} from './model';
-  import NameDisplay from "./name-display.svelte";
-  import NameEdit from "./name-edit.svelte";
-
-+ const userInfoStore = writable<UserEntity>({
-+   username: `Seed name:  ${Math.random()}`,
-+ });
-
-+ setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
-
--  setContext("userInfoStore", {
--    username: "Seed name " + Math.random(),
--  });
-</script>
+  <script lang="ts">
++   import type { Writable } from "svelte/store";
++   import { writable } from "svelte/store";
+    import { setContext } from "svelte";
+    import type { UserEntity } from "./model";
+    import NameDisplay from "./name-display.svelte";
+    import NameEdit from "./name-edit.svelte";
+
++   const userInfoStore = writable<UserEntity>({
++     username: `Seed name: ${Math.random()}`,
++   });
+-   setContext("userInfoStore", {
+-     username: `Seed name: ${Math.random()}`,
+-   });
++   setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
+  </script>
 ```
 
 - 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
-<script lang="ts">
-+ import type {UserEntity} from './model';
-+ import type { Writable } from 'svelte/store';
-  import { getContext } from "svelte";
--  import { userInfoStore } from "./user.store";
+  <script lang="ts">
+    import type { UserEntity } from "./model";
++   import type { Writable } from 'svelte/store';
+    import { getContext } from "svelte";
 
--  const userInfo: any = getContext("userInfoStore");
-+  const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
+-   const userInfo = getContext<UserEntity>("userInfoStore");
++   const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
+  </script>
 
-</script>
-
--<h3>Username: {userInfo.username}</h3>
-+<h3>Username: {$userInfoStore.username}</h3>
+- <h3>Username: {userInfo.username}</h3>
++ <h3>Username: {$userInfoStore.username}</h3>
 ```
 
 - 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
-<script lang="ts">
-+ import type { Writable } from 'svelte/store';
-+  import { getContext } from "svelte";
--  import { getContext, setContext } from "svelte";
+  <script lang="ts">
++   import type { Writable } from "svelte/store";
+    import type { UserEntity } from "./model";
+-   import { getContext, setContext } from "svelte";
++   import { getContext } from "svelte";
 
--  const userInfo: any = getContext("userInfoStore");
-+  const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
-</script>
+-   const userInfo = getContext<UserEntity>("userInfoStore");
++   const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
 
 + <input bind:value={$userInfoStore.username}>
 
 - <input
--  bind:value={userInfo.username}
--  on:input={(e) =>
--    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<UserEntity>({
-    username: "Seed name " + Math.random(),
+    username: `Seed name: ${Math.random()}`,
   });
 
   setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
@@ -338,23 +333,23 @@ _./src/name-component/user-info.provider.svelte_
 _./src/name-component/name-component.svelte_
 
 ```diff
-<script lang="ts">
--  import type { Writable } from 'svelte/store';
--  import {writable} from 'svelte/store';
--  import { setContext } from "svelte";
--  import type {UserEntity} from './model';
-  import NameDisplay from "./name-display.svelte";
-  import NameEdit from "./name-edit.svelte";
-
--  const userInfoStore = writable<UserInfo>({
--   username: "Seed name" + Math.random(),
-- });
-
-- setContext("userInfoStore", userInfoStore);
-</script>
-
-<NameDisplay />
-<NameEdit />
+  <script lang="ts">
+-   import type {UserEntity} from "./model";
+-   import { setContext } from "svelte";
+-   import type { Writable } from "svelte/store";
+-   import { writable } from "svelte/store";
+    import NameDisplay from "./name-display.svelte";
+    import NameEdit from "./name-edit.svelte";
+-
+-   const userInfoStore = writable<UserInfo>({
+-     username: `Seed name: ${Math.random()}`,
+-   });
+-
+-   setContext("userInfoStore", userInfoStore);
+  </script>
+
+  <NameDisplay />
+  <NameEdit />
 ```
 
 - Let's update our index barrel
@@ -371,24 +366,24 @@ export { default as NameComponent } from "./name-component.svelte";
 _./src/App.svelte_
 
 ```diff
-<script lang="ts">
--  import { NameComponent } from "./name-component";
-+  import { NameComponent, UserInfoProvider } from "./name-component";
-</script>
-
-<main>
-  <h1>Context Demo</h1>
-+ <UserInfoProvider>
-    <NameComponent />
-+ </UserInfoProvider>
-+ <UserInfoProvider>
-    <NameComponent />
-+ </UserInfoProvider>
-</main>
+  <script lang="ts">
+-   import { NameComponent } from "./name-component";
++   import { NameComponent, UserInfoProvider } from "./name-component";
+  </script>
+
+  <main>
+    <h1>Context Demo</h1>
++   <UserInfoProvider>
+      <NameComponent />
++   </UserInfoProvider>
++   <UserInfoProvider>
+      <NameComponent />
++   </UserInfoProvider>
+  </main>
 ```
 
 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,39 @@ 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<UserEntity>({
--  username: "default user",
+-   username: "default user",
 - });
-
 + export const createUserInfoStore = () => writable<UserEntity>({
-+    username: `Seed name ${Math.random()}`,
++    username: "Seed name " + Math.random(),
 +  });
 ```
 
-_./user-info.provider.svelte_
+_./src/name-component/user-info.provider.svelte_
 
 ```diff
-<script lang="ts">
-  import type { Writable } from 'svelte/store';
-  import { setContext } from "svelte";
--  import { writable } from "svelte/store";
-  import type { UserEntity } from "./model";
-+ import { createUserInfoStore } from "./user.store";
-
--  const userInfoStore = writable<UserEntity>({
--    username: "Seed name " + Math.random(),
--  });
-
-+  const userInfoStore = createUserInfoStore();
-
-  setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
-</script>
-
-<slot />
+  <script lang="ts">
+    import type { Writable } from 'svelte/store';
+    import { setContext } from "svelte";
+-   import { writable } from "svelte/store";
+    import type { UserEntity } from "./model";
++   import { createUserInfoStore } from "./user.store";
+
+-   const userInfoStore = writable<UserEntity>({
+-     username: `Seed name: ${Math.random()}`,
+-   });
+-
++   const userInfoStore = createUserInfoStore();
+    setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
+  </script>
+
+  <slot />
 ```
 
 Not so bad, but the getContext and setContest are a bit clunky:
diff --git a/05-context/src/App.svelte b/05-context/src/App.svelte
index 6113fc6..f2faf22 100644
--- a/05-context/src/App.svelte
+++ b/05-context/src/App.svelte
@@ -6,8 +6,8 @@
   <h1>Context Demo</h1>
   <UserInfoProvider>
     <NameComponent />
-  </UserInfoProvider> 
+  </UserInfoProvider>
   <UserInfoProvider>
     <NameComponent />
-  </UserInfoProvider> 
-</main>
\ No newline at end of file
+  </UserInfoProvider>
+</main>
diff --git a/05-context/src/name-component/name-component.svelte b/05-context/src/name-component/name-component.svelte
index 5220265..9c4caab 100644
--- a/05-context/src/name-component/name-component.svelte
+++ b/05-context/src/name-component/name-component.svelte
@@ -4,4 +4,4 @@
 </script>
 
 <NameDisplay />
-<NameEdit />
\ No newline at end of file
+<NameEdit />
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 @@
 <script lang="ts">
-  import type {UserEntity} from './model';
-  import type { Writable } from 'svelte/store';
-  import { getContext, setContext } from "svelte";
+  import type { UserEntity } from "./model";
+  import type { Writable } from "svelte/store";
+  import { getContext } from "svelte";
 
   const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
 </script>
 
-<h3>Username: {$userInfoStore.username}</h3>
\ No newline at end of file
+<h3>Username: {$userInfoStore.username}</h3>
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 @@
 <script lang="ts">
-  import type {UserEntity} from './model';
-  import type { Writable } from 'svelte/store'; 
-  import { getContext, setContext } from "svelte";
+  import type { UserEntity } from "./model";
+  import type { Writable } from "svelte/store";
+  import { getContext } from "svelte";
 
-  const userInfoStore: any = getContext<Writable<UserEntity>>("userInfoStore");
+  const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
 </script>
 
-<input bind:value={$userInfoStore.username}>
+<input bind:value={$userInfoStore.username} />
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 @@
 <script lang="ts">
-  import type { Writable } from 'svelte/store'; 
+  import type { Writable } from "svelte/store";
   import { setContext } from "svelte";
   import type { UserEntity } from "./model";
   import { createUserInfoStore } from "./user.store";
@@ -9,4 +9,4 @@
   setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
 </script>
 
-<slot />
\ No newline at end of file
+<slot />
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<UserEntity>({
-    username: "Seed name " + Math.random(),
+    username: `Seed name: ${Math.random()}`,
   });

From 2346a72d54d0d0d695344f059787db2d6aa105ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Santiago=20Camargo=20Rodr=C3=ADguez?=
 <santi.camargo@lemoncode.net>
Date: Sat, 24 Sep 2022 19:21:24 +0200
Subject: [PATCH 2/2] Second revision. Bump svelte

---
 05-context/README.md         | 120 ++++++++++++++++++-----------------
 05-context/package-lock.json |  14 ++--
 05-context/package.json      |   2 +-
 3 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/05-context/README.md b/05-context/README.md
index e1e174a..1c7922c 100644
--- a/05-context/README.md
+++ b/05-context/README.md
@@ -279,9 +279,9 @@ _./src/name-component/name-edit.svelte_
 ```diff
   <script lang="ts">
 +   import type { Writable } from "svelte/store";
-    import type { UserEntity } from "./model";
 -   import { getContext, setContext } from "svelte";
 +   import { getContext } from "svelte";
+    import type { UserEntity } from "./model";
 
 -   const userInfo = getContext<UserEntity>("userInfoStore");
 +   const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
@@ -334,10 +334,10 @@ _./src/name-component/name-component.svelte_
 
 ```diff
   <script lang="ts">
--   import type {UserEntity} from "./model";
--   import { setContext } from "svelte";
 -   import type { Writable } from "svelte/store";
 -   import { writable } from "svelte/store";
+-   import { setContext } from "svelte";
+-   import type  {UserEntity } from "./model";
     import NameDisplay from "./name-display.svelte";
     import NameEdit from "./name-edit.svelte";
 -
@@ -400,16 +400,17 @@ _./src/name-component/user.store.ts_
 - export const userInfoStore = writable<UserEntity>({
 -   username: "default user",
 - });
-+ export const createUserInfoStore = () => writable<UserEntity>({
-+    username: "Seed name " + Math.random(),
-+  });
++ export const createUserInfoStore = () =>
++   writable<UserEntity>({
++     username: `Seed name: ${Math.random()}`,
++   });
 ```
 
 _./src/name-component/user-info.provider.svelte_
 
 ```diff
   <script lang="ts">
-    import type { Writable } from 'svelte/store';
+    import type { Writable } from "svelte/store";
     import { setContext } from "svelte";
 -   import { writable } from "svelte/store";
     import type { UserEntity } from "./model";
@@ -438,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<UserEntity>({
-    username: `Seed name ${Math.random()}`,
-  });
+  export const createUserInfoStore = () =>
+    writable<UserEntity>({
+      username: `Seed name ${Math.random()}`,
+    });
 
-+ export const getUserInfoContext = () => getContext<Writable<UserEntity>>("userInfoStore");
-+ export const setUserInfoContext = (userInfoStore: Writable<UserEntity>) => setContext("userInfoStore", userInfoStore);
++ export const getUserInfoContext = () =>
++   getContext<Writable<UserEntity>>("userInfoStore");
++ export const setUserInfoContext = (userInfoStore: Writable<UserEntity>) =>
++   setContext("userInfoStore", userInfoStore);
 ```
 
 Let's use this new helper in nameDisplay and nameEdit
@@ -455,34 +458,33 @@ Let's use this new helper in nameDisplay and nameEdit
 _./src/name-component/name-display.svelte_
 
 ```diff
-<script lang="ts">
-  import type {UserEntity} from './model';
-  import type { Writable } from 'svelte/store';
--  import { getContext, setContext } from "svelte";
-+ import {getUserInfoContext} from './user.store';
-
--  const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
-+  const userInfoStore = getUserInfoContext();
+  <script lang="ts">
+-   import type {UserEntity} from "./model";
+-   import type { Writable } from "svelte/store";
+-   import { getContext } from "svelte";
++   import { getUserInfoContext } from "./user.store";
 
-</script>
+-    const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
++    const userInfoStore = getUserInfoContext();
+  </script>
 
-<h3>Username: {$userInfoStore.username}</h3>
+  <h3>Username: {$userInfoStore.username}</h3>
 ```
 
 _./src/name-component/name-edit.svelte_
 
 ```diff
-<script lang="ts">
-  import type {UserEntity} from './model';
-  import type { Writable } from 'svelte/store';
--  import { getContext, setContext } from "svelte";
-+ import {getUserInfoContext} from './user.store';
+  <script lang="ts">
+-   import type { Writable } from "svelte/store";
+-   import { getContext } from "svelte";
+-   import type { UserEntity } from "./model";
++   import { getUserInfoContext } from "./user.store";
 
--  const userInfoStore: any = getContext<Writable<UserEntity>>("userInfoStore");
-+  const userInfoStore = getUserInfoContext();
-</script>
+-   const userInfoStore = getContext<Writable<UserEntity>>("userInfoStore");
++   const userInfoStore = getUserInfoContext();
+  </script>
 
-<input bind:value={$userInfoStore.username}>
+  <input bind:value={$userInfoStore.username}>
 ```
 
 And in the provider:
@@ -490,17 +492,17 @@ And in the provider:
 _./src/name-component/user-info.provider.svelte_
 
 ```diff
-<script lang="ts">
-  import type { Writable } from 'svelte/store';
--  import { setContext } from "svelte";
-  import type { UserEntity } from "./model";
-  import { createUserInfoStore } from "./user.store";
-+ import {setUserInfoContext} from './user.store';
+  <script lang="ts">
+-   import type { Writable } from "svelte/store";
+-   import { setContext } from "svelte";
+-   import type { UserEntity } from "./model";
+-   import { createUserInfoStore } from "./user.store";
++   import { createUserInfoStore, setUserInfoContext } from "./user.store";
 
-  const userInfoStore = createUserInfoStore();
+    const userInfoStore = createUserInfoStore();
 
--  setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
-+  setUserInfoContext(userInfoStore);
+-   setContext<Writable<UserEntity>>("userInfoStore", userInfoStore);
++   setUserInfoContext(userInfoStore);
 ```
 
 We can check that things are working as expected.
@@ -517,23 +519,23 @@ And in the store:
 _./src/name-component/user.store.ts_
 
 ```diff
-import { getContext, setContext } from "svelte";
-+ import {v4 as uuidv4} from 'uuid';
-import type { Writable } from "svelte/store";
-import type { UserEntity } from "./model";
-import { writable } from "svelte/store";
-
-export const createUserInfoStore = () =>
-  writable<UserEntity>({
-    username: `Seed name ${Math.random()}`,
-  });
+  import { getContext, setContext } from "svelte";
++ import {v4 as uuidv4} from "uuid";
+  import type { Writable } from "svelte/store";
+  import type { UserEntity } from "./model";
+  import { writable } from "svelte/store";
 
+  export const createUserInfoStore = () =>
+    writable<UserEntity>({
+      username: `Seed name ${Math.random()}`,
+    });
++
 + const membersContextUID = uuidv4();
 
-export const getUserInfoContext = () =>
--  getContext<Writable<UserEntity>>("userInfoStore");
-+ getContext<Writable<UserEntity>>(membersContextUID);
-export const setUserInfoContext = (userInfoStore: Writable<UserEntity>) =>
--  setContext("userInfoStore", userInfoStore);
-+  setContext(membersContextUID, userInfoStore);
+  export const getUserInfoContext = () =>
+-   getContext<Writable<UserEntity>>("userInfoStore");
++   getContext<Writable<UserEntity>>(membersContextUID);
+  export const setUserInfoContext = (userInfoStore: Writable<UserEntity>) =>
+-   setContext("userInfoStore", userInfoStore);
++   setContext(membersContextUID, userInfoStore);
 ```
diff --git a/05-context/package-lock.json b/05-context/package-lock.json
index e6d3008..1a840e6 100644
--- a/05-context/package-lock.json
+++ b/05-context/package-lock.json
@@ -11,7 +11,7 @@
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
         "@tsconfig/svelte": "^3.0.0",
         "prettier-plugin-svelte": "^2.7.0",
-        "svelte": "^3.49.0",
+        "svelte": "^3.50.1",
         "svelte-check": "^2.8.0",
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
@@ -1284,9 +1284,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
+      "version": "3.50.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
+      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
       "dev": true,
       "engines": {
         "node": ">= 8"
@@ -2295,9 +2295,9 @@
       "dev": true
     },
     "svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
+      "version": "3.50.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
+      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
       "dev": true
     },
     "svelte-check": {
diff --git a/05-context/package.json b/05-context/package.json
index c7b1985..e12b601 100644
--- a/05-context/package.json
+++ b/05-context/package.json
@@ -13,7 +13,7 @@
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
     "prettier-plugin-svelte": "^2.7.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.50.1",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",