Todomvc svelte cleanup

resources/todomvc/architecture-examples/svelte/package.json

@@ -11,7 +11,7 @@
         "build": "rollup -c",
         "watch": "rollup -c -w",
         "serve": "http-server ./dist -p 7002 -c-1 --cors",
-        "dev": "npm run serve & npm run watch"
+        "dev": "npm run serve & npm run watch --no-watch.clearScreen"
     },
     "dependencies": {
         "todomvc-app-css": "^2.4.2",

resources/todomvc/architecture-examples/svelte/readme.md

@@ -11,9 +11,24 @@ This application uses Svelte 3.58.0 to implement a todo application.
 
 This app has been inspired by the [official Svelte Todomvc app](https://github.com/sveltejs/svelte-todomvc).
 
-[TBD]
+To showcase how a larger application could be architected, we opted to build the todoMVC app with multiple components.
+Components can communicate through events to trigger changes in other components. For example, the Item component dispatchtes the `removeItem` event, which the App component listens for and updates the todo array.
+Additionally, component bindings are used to update automatically any item that changed from within the Item component (`item.description` and `item.completed`).
 
-## Built steps
+Svelte doesn't try to force a specific architectural pattern and instead is a component framework.
+A loose mapping of an MVC pattern:
+
+Svelte:
+Model: App component
+View: UI components
+Controller: App component + component bindings
+
+MVC:
+Model: Maintains the data and behavior of an application
+View: Displays the model in the ui
+Controller: Serves as an interface between view & model components
+
+## Build steps
 
 ```
 terminal:

resources/todomvc/architecture-examples/svelte/src/App.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { onMount } from 'svelte';
     import { router } from './router.js';
     import { uuid } from './utils.js';
 
@@ -12,7 +13,6 @@
 
     let currentFilter = "all";
     let items = [];
-    let editing = null;
 
     function addItem(event) {
         items.push({
@@ -31,16 +31,18 @@
     function toggleAllItems(event) {
         const checked = event.target.checked;
         items = items.map((item) => ({
-        ...item,
-        completed: checked,
+            ...item,
+            completed: checked,
         }));
     }
 
     function removeCompletedItems() {
         items = items.filter((item) => !item.completed);
     }
 
-    router(route => currentFilter = route).init();
+    onMount(() => {
+      router(route => currentFilter = route).init();
+    });
 
     $: filtered = currentFilter === "all" ? items : currentFilter === "completed" ? items.filter((item) => item.completed) : items.filter((item) => !item.completed);
     $: numActive = items.filter((item) => !item.completed).length;
@@ -57,10 +59,10 @@
         </div>
         <ul class="todo-list show-priority">
             {#each filtered as item, index (item.id)}
-                <Item bind:item editing={editing} index={index} on:removeItem={() => removeItem(index)} />
+                <Item bind:item index={index} on:removeItem={() => removeItem(index)} />
             {/each}
         </ul>
 
-        <Footer numActive={numActive} currentFilter={currentFilter} numCompleted={numCompleted} on:removeCompletedItems={removeCompletedItems} />
+        <Footer {numActive} {currentFilter} {numCompleted} on:removeCompletedItems={removeCompletedItems} />
     </main>
 {/if}

resources/todomvc/architecture-examples/svelte/src/Footer.svelte

@@ -19,9 +19,9 @@
     </span>
 
     <ul class="filters">
-        <li><a class={currentFilter === "all" ? "selected" : ""} href="#/">All</a></li>
-        <li><a class={currentFilter === "active" ? "selected" : ""} href="#/active">Active</a></li>
-        <li><a class={currentFilter === "completed" ? "selected" : ""} href="#/completed">Completed</a></li>
+        <li><a class:selected={currentFilter === "all"} href="#/">All</a></li>
+        <li><a class:selected={currentFilter === "active"} href="#/active">Active</a></li>
+        <li><a class:selected={currentFilter === "completed"} href="#/completed">Completed</a></li>
     </ul>
 
     {#if numCompleted}

resources/todomvc/architecture-examples/svelte/src/Item.svelte

@@ -4,9 +4,10 @@
     export let item;
     export let index;
 
-    let editing = false;
     const dispatch = createEventDispatcher();
 
+    let editing = false;
+
     function removeItem() {
         dispatch('removeItem');
     }
@@ -39,7 +40,7 @@
     }
 </script>
 
-<li class="{item.completed ? ' completed' : ''}{editing ? ' editing' : ''}" data-priority={4 - (index % 5)}>
+<li class:completed={item.completed} class:editing data-priority={4 - (index % 5)}>
     <div class="view">
         <input class="toggle" type="checkbox" on:change={(event) => item.completed = event.target.checked} checked={item.completed} />
         <!-- svelte-ignore a11y-label-has-associated-control -->