From bd13c3e2eca2df265a6ec530c06004576577794a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Santiago=20Camargo=20Rodr=C3=ADguez?=
 <santi.camargo@lemoncode.net>
Date: Wed, 7 Sep 2022 20:00:58 +0200
Subject: [PATCH 1/3] Improve readme

---
 02-reactivity-order/README.md               | 197 ++++++++++----------
 02-reactivity-order/src/orders/order.svelte |   4 +-
 2 files changed, 99 insertions(+), 102 deletions(-)

diff --git a/02-reactivity-order/README.md b/02-reactivity-order/README.md
index 345022e..9eb2995 100644
--- a/02-reactivity-order/README.md
+++ b/02-reactivity-order/README.md
@@ -6,7 +6,7 @@ We will simulate a simple order system, and we will calculate total, subtotal an
 
 # Step By Step Guide
 
-- We will take as starting point: _00-scratch-typescript_, let's copy the content of that folder and
+- We will take as starting point: _00-boiler-typescript_, let's copy the content of that folder and
   execute
 
 ```bash
@@ -16,7 +16,7 @@ npm install
 - Let's create in `/src` a subfolder called _orders_
 
 ```bash
-md orders
+md src/orders
 ```
 
 - First we are going to define the order model:
@@ -43,7 +43,7 @@ export const createNewItem = (): Item => ({
 
 Let's define now the order component, we will start with something simple:
 
-_./src/order.svelte_
+_./src/orders/order.svelte_
 
 ```svelte
 <h1>Order</h1>
@@ -60,7 +60,7 @@ export { default as OrderComponent } from "./order.svelte";
 And let's consume it in our _app_ file just to ensure that we have wired up the basics, we will just
 replace the whole content
 
-_./src/app.svelte_
+_./src/App.svelte_
 
 ```svelte
 <script lang="ts">
@@ -84,37 +84,37 @@ npm run dev
 - Time to come back and start adding some functionality to our order component, let's import the interfaces and factory
   from the _order.model_, add some mock data and define some variables to hold the calculated fields (subtotal, vat, price).
 
-_./src/order.svelte_
+_./src/orders/order.svelte_
 
 ```diff
-+<script lang="ts">
-+ import type {Order, Item} from './order.model'
-+ import {createNewItem } from './order.model';
++ <script lang="ts">
++   import type { Order, Item } from "./order.model";
++   import { createNewItem } from "./order.model";
 +
-+  let order : Order = {
-+    itemCollection: [
-+      {
-+        name: 'test',
-+        quantity: 1,
-+        price: 0
-+      }
-+    ]
-+  };
++   let order: Order = {
++      itemCollection: [
++        {
++          name: 'test',
++          quantity: 1,
++          price: 0
++        }
++      ]
++    };
 +
-+  let subtotal = 0;
-+  let vat = 0;
-+  let total = 0;
++   let subtotal = 0;
++   let vat = 0;
++   let total = 0;
 + </script>
-<h1>Order Component</h1>
+  <h1>Order Component</h1>
 ```
 
 - Cool let's show the data..., we will use the _#each_ directive to iterate over the items and display them.
 
-_./src/order.svelte_
+_./src/orders/order.svelte_
 
 ```diff
-<h1>Order Component</h1>
-+ {#each order.itemCollection as item, index(index)}
+  <h1>Orders</h1>
++ {#each order.itemCollection as item, index (index)}
 +    <span>{item.name}</span>
 +    <span>{item.quantity}</span>
 +    <span>{item.price}</span>
@@ -125,23 +125,23 @@ _./src/order.svelte_
 
 - If we run the example, we can check that the data is being shown although the layout looks a bit ugly, let's add some styling, we will add a grid layout and create a header section.
 
-_./src/order.svelte_
+_./src/orders/order.svelte_
 
 ```diff
 + <div class="items-container">
-+  <h3>Name</h3>
-+  <h3>Qty</h3>
-+  <h3>Price</h3>
-+  <h3>Total</h3>
-+  <h3>Commands</h3>
-
- {#each order.itemCollection as item, index}
-    <span>{item.name}</span>
-    <span>{item.quantity}</span>
-    <span>{item.price}</span>
-    <span>here goes total</span>
-    <button>Delete</button>
- {/each}
++   <h3>Name</h3>
++   <h3>Qty</h3>
++   <h3>Price</h3>
++   <h3>Total</h3>
++   <h3>Commands</h3>
+
+    {#each order.itemCollection as item, index}
+      <span>{item.name}</span>
+      <span>{item.quantity}</span>
+      <span>{item.price}</span>
+      <span>here goes total</span>
+      <button>Delete</button>
+    {/each}
 + </div>
 
 + <style>
@@ -157,19 +157,19 @@ _./src/order.svelte_
 
 - Is time prepare the edit mode:
 
-_./src/order.svelte_
+_./src/orders/order.svelte_
 
 ```diff
- {#each order.itemCollection as item, index}
--    <span>{item.name}</span>
--    <span>{item.quantity}</span>
--    <span>{item.price}</span>
-+      <input bind:value={item.name}/>
-+      <input bind:value={item.quantity} type="number"/>
-+      <input bind:value={item.price} type="number"/>
+  {#each order.itemCollection as item, index}
+-   <span>{item.name}</span>
+-   <span>{item.quantity}</span>
+-   <span>{item.price}</span>
++   <input bind:value={item.name}/>
++   <input bind:value={item.quantity} type="number"/>
++   <input bind:value={item.price} type="number"/>
     <span>here goes total</span>
     <button>Delete</button>
-{/each}
+  {/each}
 ```
 
 Not bad, in this case we just benefit from the binding two way, that's ok because we are on a local scope.
@@ -177,13 +177,12 @@ Not bad, in this case we just benefit from the binding two way, that's ok becaus
 - Time to calculate the total amount for each item, easy pc (very similar to React in this case):
 
 ```diff
-
-      <input bind:value={item.name}/>
-      <input bind:value={item.quantity} type="number"/>
-      <input bind:value={item.price} type="number"/>
--    <span>here goes total</span>
-+    {item.price * item.quantity}
-    <button>Delete</button>
+  <input bind:value={item.name}/>
+  <input bind:value={item.quantity} type="number"/>
+  <input bind:value={item.price} type="number"/>
+- <span>here goes total</span>
++ {item.price * item.quantity}
+  <button>Delete</button>
 ```
 
 If you give a try you will check that the total is being calculated.
@@ -192,48 +191,46 @@ If you give a try you will check that the total is being calculated.
   in this case we have to take care, in order to notify svelte we need to make an assignment (we cannot just
   simple remove that item from array in a mutable way).
 
-````diff
 ```diff
-  let subtotal = 0;
-  let vat = 0;
-  let total = 0;
+    let subtotal = 0;
+    let vat = 0;
+    let total = 0;
 
-+  export const removeItem = (item : Item) => {
-+    // Svelte's reactivity is triggered by assignments. Therefore push, pop, slice etc do not work
-+    order.itemCollection = order.itemCollection.filter((e) => e !== item);
-+  }
-</script>
++   export const removeItem = (item: Item) => {
++     // Svelte's reactivity is triggered by assignments. Therefore push, pop, slice etc do not work
++     order.itemCollection = order.itemCollection.filter((e) => e !== item);
++   }
+  </script>
 
 
-// (...)
+  // (...)
       <input bind:value={item.name}/>
       <input bind:value={item.quantity} type="number"/>
       <input bind:value={item.price} type="number"/>
-     {item.price * item.quantity}
--    <button>Delete</button>
-+    <button on:click={() => removeItem(item)}>Delete</button>
-// (...)
-````
+      {item.price * item.quantity}
+-     <button>Delete</button>
++     <button on:click={() => removeItem(item)}>Delete</button>
+```
 
 If you give a try you will realize that... we have removed the only item we had on the list.
 
 - Let's add an option to add more items to the order list:
 
-_./src/order.svelte_
+_./src/order/order.svelte_
 
 ```diff
-    <button on:click={() => removeItem(index)}>Delete</button>
-  </div>
+     <button on:click={() => removeItem(index)}>Delete</button>
+   </div>
 +  <div class="add-container">
 +    <button on:click={() => order.itemCollection = [...order.itemCollection, createNewItem()]} >Add</button>
 +  </div>
 
-<style>
-  .items-container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 2fr 1fr 1fr;
-    gap: 10px;
-  }
+  <style>
+    .items-container {
+      display: grid;
+      grid-template-columns: 2fr 1fr 2fr 1fr 1fr;
+      gap: 10px;
+    }
 
 +  .add-container {
 +    display: flex;
@@ -241,7 +238,7 @@ _./src/order.svelte_
 +    flex-direction: column;
 +    margin-top: 10px;
 +  }
-</style>
+  </style>
 ```
 
 We are just assigning a new array that contains the old array and the new item.
@@ -279,47 +276,47 @@ total (subtotal + taxes).
 
 - First let's add some markup to display the subtotal, the vat and the total:
 
-_./src/order.svelte_
+_./src/orders/order.svelte_
 
 ```diff
   <div class="add-container">
     <button on:click={() => order.itemCollection = [...order.itemCollection, createNewItem()]} >Add</button>
   </div>
 
-+  <div class="total-container">
-+    <h5>Subtotal: {subtotal}</h5>
-+    <h5>VAT:{vat}</h5>
-+    <h5>Total: {total}</h5>
-+  </div>
++ <div class="total-container">
++   <h5>Subtotal: {subtotal}</h5>
++   <h5>VAT:{vat}</h5>
++   <h5>Total: {total}</h5>
++ </div>
 
-<styles>
-  // (...)
-+  .total-container {
-+    display:flex;
-+    justify-content: flex-end;
-+    gap: 50px;
-+    margin-top: 20px;
-+  }
-</styles>
+  <styles>
+    // (...)
++   .total-container {
++     display:flex;
++     justify-content: flex-end;
++     gap: 50px;
++     margin-top: 20px;
++   }
+  </styles>
 ```
 
 - Now comes the magic, using the _$:_ directive we are just indicating the app to reevaluate this assignment whenever any the
   variables on the right side of the assignment are changed.
 
-_./src/order.svelte_
+_./src/orders/order.svelte_
 
 ```diff
   let subtotal = 0;
   let vat = 0;
   let total = 0;
 
-+  $: subtotal = order.itemCollection.reduce((acc, item) => {
-+    return acc + (item.price * item.quantity);
-+  }, 0);
++ $: subtotal = order.itemCollection.reduce((acc, item) => {
++   return acc + (item.price * item.quantity);
++ }, 0);
 +
-+  $: vat = subtotal * 0.21;
++ $: vat = subtotal * 0.21;
 +
-+  $: total = subtotal + vat;
++ $: total = subtotal + vat;
 ```
 
 - Now we can start adding items and check
diff --git a/02-reactivity-order/src/orders/order.svelte b/02-reactivity-order/src/orders/order.svelte
index 3204eb4..60dcdf0 100644
--- a/02-reactivity-order/src/orders/order.svelte
+++ b/02-reactivity-order/src/orders/order.svelte
@@ -24,7 +24,7 @@
 
   $: total = subtotal + vat;
 
-  export const removeItem = (item : Item) => {
+  export const removeItem = (item: Item) => {
     // Svelte's reactivity is triggered by assignments. Therefore push, pop, slice etc do not work
     order.itemCollection = order.itemCollection.filter((e) => e !== item);
   };
@@ -39,7 +39,7 @@
   <h3>Total</h3>
   <h3>Commands</h3>
 
-  {#each order.itemCollection as item, index(index)}
+  {#each order.itemCollection as item, index (index)}
     <input bind:value={item.name} />
     <input bind:value={item.quantity} type="number" />
     <input bind:value={item.price} type="number" />

From 9d6bbdad65f1522a65c6b334d9fc51a4201cd1a1 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 17:56:15 +0200
Subject: [PATCH 2/3] bump svelte version

---
 02-reactivity-order/package-lock.json | 14 +++++++-------
 02-reactivity-order/package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/02-reactivity-order/package-lock.json b/02-reactivity-order/package-lock.json
index c732276..039db75 100644
--- a/02-reactivity-order/package-lock.json
+++ b/02-reactivity-order/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/02-reactivity-order/package.json b/02-reactivity-order/package.json
index c7b1985..e12b601 100644
--- a/02-reactivity-order/package.json
+++ b/02-reactivity-order/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",

From 2d5579bcd7a5eb5260dd2da4abb5e80b344fda6f 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 18:11:34 +0200
Subject: [PATCH 3/3] Second revision

---
 02-reactivity-order/README.md               | 42 ++++++++++-----------
 02-reactivity-order/src/orders/order.svelte |  4 +-
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/02-reactivity-order/README.md b/02-reactivity-order/README.md
index 9eb2995..5771fa0 100644
--- a/02-reactivity-order/README.md
+++ b/02-reactivity-order/README.md
@@ -115,11 +115,11 @@ _./src/orders/order.svelte_
 ```diff
   <h1>Orders</h1>
 + {#each order.itemCollection as item, index (index)}
-+    <span>{item.name}</span>
-+    <span>{item.quantity}</span>
-+    <span>{item.price}</span>
-+    <span>here goes total</span>
-+    <button>Delete</button>
++   <span>{item.name}</span>
++   <span>{item.quantity}</span>
++   <span>{item.price}</span>
++   <span>here goes total</span>
++   <button>Delete</button>
 + {/each}
 ```
 
@@ -197,7 +197,7 @@ If you give a try you will check that the total is being calculated.
     let total = 0;
 
 +   export const removeItem = (item: Item) => {
-+     // Svelte's reactivity is triggered by assignments. Therefore push, pop, slice etc do not work
++     // Svelte's reactivity is triggered by assignments. Therefore push, pop, splice etc do not work
 +     order.itemCollection = order.itemCollection.filter((e) => e !== item);
 +   }
   </script>
@@ -222,7 +222,7 @@ _./src/order/order.svelte_
      <button on:click={() => removeItem(index)}>Delete</button>
    </div>
 +  <div class="add-container">
-+    <button on:click={() => order.itemCollection = [...order.itemCollection, createNewItem()]} >Add</button>
++    <button on:click={() => order.itemCollection = [...order.itemCollection, createNewItem()]}>Add</button>
 +  </div>
 
   <style>
@@ -248,12 +248,12 @@ what would happen?
 
 ```diff
   <div class="add-container">
-    <button on:click={
--      () => order.itemCollection = [...order.itemCollection, createNewItem()]
-+      () => {
-+          order.itemCollection.push(createNewItem())
-+        }
-      } >Add</button>
+-   <button on:click={() => order.itemCollection = [...order.itemCollection, createNewItem()]}>Add</button>
++   <button
++     on:click={() => {
++       order.itemCollection.push(createNewItem());
++     }}
++   >Add</button>
   </div>
 ```
 
@@ -261,12 +261,12 @@ It wont' work because there's no assignment and svelte does not notice about the
 update, but what if we try something like?
 
 ```diff
-    <button on:click={
-      () => {
-          order.itemCollection.push(createNewItem())
-+          order.itemCollection = order.itemCollection;
-        }
-      } >Add</button>
+  <button
+    on:click={() => {
+      order.itemCollection.push(createNewItem());
++     order.itemCollection = order.itemCollection;
+    }}
+  >Add</button>
 ```
 
 It works, there is an assignment... but what an ugly code :D
@@ -285,14 +285,14 @@ _./src/orders/order.svelte_
 
 + <div class="total-container">
 +   <h5>Subtotal: {subtotal}</h5>
-+   <h5>VAT:{vat}</h5>
++   <h5>VAT: {vat}</h5>
 +   <h5>Total: {total}</h5>
 + </div>
 
   <styles>
     // (...)
 +   .total-container {
-+     display:flex;
++     display: flex;
 +     justify-content: flex-end;
 +     gap: 50px;
 +     margin-top: 20px;
diff --git a/02-reactivity-order/src/orders/order.svelte b/02-reactivity-order/src/orders/order.svelte
index 60dcdf0..d0d2af9 100644
--- a/02-reactivity-order/src/orders/order.svelte
+++ b/02-reactivity-order/src/orders/order.svelte
@@ -25,7 +25,7 @@
   $: total = subtotal + vat;
 
   export const removeItem = (item: Item) => {
-    // Svelte's reactivity is triggered by assignments. Therefore push, pop, slice etc do not work
+    // Svelte's reactivity is triggered by assignments. Therefore push, pop, splice etc do not work
     order.itemCollection = order.itemCollection.filter((e) => e !== item);
   };
 </script>
@@ -58,7 +58,7 @@
 
 <div class="total-container">
   <h5>Subtotal: {subtotal}</h5>
-  <h5>VAT:{vat}</h5>
+  <h5>VAT: {vat}</h5>
   <h5>Total: {total}</h5>
 </div>