Remove mockup storage and inline styles from web componenets todoMVC (#521)

Currently most versions of TodoMVC use a mockup storage in the form of an array. This causes expensive array operations to be overrepresented in the benchmark (like splices in the delete100items step). Similarly inline style changes are used to manage the state of the list. This PR:

1. Removes the lists of todo entries at the app and list level and keep them only as children of the todolist element.
1. Remove inline styling of elements display, use css attribute selectors instead.

Author: lpardosixtosMs

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js

@@ -6,7 +6,8 @@ import appStyles from "../../styles/app.constructable.js";
 import mainStyles from "../../styles/main.constructable.js";
 class TodoApp extends HTMLElement {
     #isReady = false;
-    #data = [];
+    #numberOfItems = 0;
+    #numberOfCompletedItems = 0;
     constructor() {
         super();
 
@@ -42,37 +43,28 @@ class TodoApp extends HTMLElement {
 
     addItem(event) {
         const { detail: item } = event;
-
-        this.#data.push(item);
-        this.list.addItem(item);
-
+        this.list.addItem(item, this.#numberOfItems++);
         this.update("add-item", item.id);
     }
 
     toggleItem(event) {
-        this.#data.forEach((entry) => {
-            if (entry.id === event.detail.id)
-                entry.completed = event.detail.completed;
-        });
+        if (event.detail.completed)
+            this.#numberOfCompletedItems++;
+        else
+            this.#numberOfCompletedItems--;
 
         this.update("toggle-item", event.detail.id);
     }
 
     removeItem(event) {
-        this.#data.forEach((entry, index) => {
-            if (entry.id === event.detail.id)
-                this.#data.splice(index, 1);
-        });
+        if (event.detail.completed)
+            this.#numberOfCompletedItems--;
 
+        this.#numberOfItems--;
         this.update("remove-item", event.detail.id);
     }
 
     updateItem(event) {
-        this.#data.forEach((entry) => {
-            if (entry.id === event.detail.id)
-                entry.title = event.detail.title;
-        });
-
         this.update("update-item", event.detail.id);
     }
 
@@ -84,13 +76,12 @@ class TodoApp extends HTMLElement {
         this.list.removeCompletedItems();
     }
 
-    update(type = "", id = "") {
-        const totalItems = this.#data.length;
-        const activeItems = this.#data.filter((entry) => !entry.completed).length;
-        const completedItems = totalItems - activeItems;
+    update() {
+        const totalItems = this.#numberOfItems;
+        const completedItems = this.#numberOfCompletedItems;
+        const activeItems = totalItems - completedItems;
 
         this.list.setAttribute("total-items", totalItems);
-        this.list.updateElements(type, id);
 
         this.topbar.setAttribute("total-items", totalItems);
         this.topbar.setAttribute("active-items", activeItems);

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js

@@ -3,6 +3,13 @@ import template from "./todo-bottombar.template.js";
 import globalStyles from "../../styles/global.constructable.js";
 import bottombarStyles from "../../styles/bottombar.constructable.js";
 
+const customStyles = new CSSStyleSheet();
+customStyles.replaceSync(`
+    :host([total-items="0"]) > .bottombar {
+        display: none;
+    }
+`);
+
 class TodoBottombar extends HTMLElement {
     static get observedAttributes() {
         return ["total-items", "active-items"];
@@ -20,18 +27,13 @@ class TodoBottombar extends HTMLElement {
         this.shadow = this.attachShadow({ mode: "open" });
         this.htmlDirection = document.dir || "ltr";
         this.setAttribute("dir", this.htmlDirection);
-        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles, customStyles];
         this.shadow.append(node);
 
         this.clearCompletedItems = this.clearCompletedItems.bind(this);
     }
 
     updateDisplay() {
-        if (parseInt(this["total-items"]) !== 0)
-            this.element.style.display = "block";
-        else
-            this.element.style.display = "none";
-
         this.todoStatus.textContent = `${this["active-items"]} ${this["active-items"] === "1" ? "item" : "items"} left!`;
     }
 

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js

@@ -2,7 +2,7 @@ const template = document.createElement("template");
 
 template.id = "todo-bottombar-template";
 template.innerHTML = `
-    <footer class="bottombar" style="display:none">
+    <footer class="bottombar">
         <div class="todo-status"><span class="todo-count">0</span> item left</div>
         <ul class="filter-list">
             <li class="filter-item">

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-item/todo-item.component.js

@@ -65,7 +65,7 @@ class TodoItem extends HTMLElement {
                     }
                     break;
                 case "itemcompleted":
-                    this.toggleInput.checked = this.itemcompleted === "true" ? true : false;
+                    this.toggleInput.checked = this.itemcompleted === "true";
                     break;
             }
         });
@@ -92,7 +92,7 @@ class TodoItem extends HTMLElement {
 
         this.dispatchEvent(
             new CustomEvent("toggle-item", {
-                detail: { id: this.itemid, completed: this.toggleInput.checked },
+                detail: { completed: this.toggleInput.checked },
                 bubbles: true,
             })
         );
@@ -103,7 +103,7 @@ class TodoItem extends HTMLElement {
         // (therefore the removal has to happen after the list is updated)
         this.dispatchEvent(
             new CustomEvent("remove-item", {
-                detail: { id: this.itemid },
+                detail: { completed: this.toggleInput.checked },
                 bubbles: true,
             })
         );
@@ -112,17 +112,10 @@ class TodoItem extends HTMLElement {
 
     updateItem(event) {
         if (event.target.value !== this.itemtitle) {
-            if (!event.target.value.length) {
+            if (!event.target.value.length)
                 this.removeItem();
-            } else {
+            else
                 this.setAttribute("itemtitle", event.target.value);
-                this.dispatchEvent(
-                    new CustomEvent("update-item", {
-                        detail: { id: this.itemid, title: event.target.value },
-                        bubbles: true,
-                    })
-                );
-            }
         }
 
         this.cancelEdit();

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-list/todo-list.component.js

@@ -4,12 +4,22 @@ import TodoItem from "../todo-item/todo-item.component.js";
 import globalStyles from "../../styles/global.constructable.js";
 import listStyles from "../../styles/todo-list.constructable.js";
 
-class TodoList extends HTMLElement {
-    static get observedAttributes() {
-        return ["total-items"];
+const customListStyles = new CSSStyleSheet();
+customListStyles.replaceSync(`
+    .todo-list[route="completed"] > [itemcompleted="false"] {
+        display: none;
+    }
+
+    .todo-list[route="active"] > [itemcompleted="true"] {
+        display: none;
     }
 
-    #elements = [];
+    :host([total-items="0"]) > .todo-list {
+        display: none;
+    }
+`);
+
+class TodoList extends HTMLElement {
     #route = undefined;
 
     constructor() {
@@ -21,7 +31,7 @@ class TodoList extends HTMLElement {
         this.shadow = this.attachShadow({ mode: "open" });
         this.htmlDirection = document.dir || "ltr";
         this.setAttribute("dir", this.htmlDirection);
-        this.shadow.adoptedStyleSheets = [globalStyles, listStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, listStyles, customListStyles];
         this.shadow.append(node);
         this.classList.add("show-priority");
 
@@ -32,96 +42,51 @@ class TodoList extends HTMLElement {
         }
     }
 
-    addItem(entry) {
+    addItem(entry, itemIndex) {
         const { id, title, completed } = entry;
         const element = new TodoItem();
 
         element.setAttribute("itemid", id);
         element.setAttribute("itemtitle", title);
         element.setAttribute("itemcompleted", completed);
+        element.setAttribute("data-priority", 4 - (itemIndex % 5));
 
-        const elementIndex = this.#elements.length;
-        this.#elements.push(element);
         this.listNode.append(element);
-        element.setAttribute("data-priority", 4 - (elementIndex % 5));
     }
 
     addItems(items) {
         items.forEach((entry) => this.addItem(entry));
     }
 
     removeCompletedItems() {
-        this.#elements = this.#elements.filter((element) => {
+        Array.from(this.listNode.children).forEach((element) => {
             if (element.itemcompleted === "true")
                 element.removeItem();
-
-            return element.itemcompleted === "false";
         });
     }
 
     toggleItems(completed) {
-        this.#elements.forEach((element) => {
+        Array.from(this.listNode.children).forEach((element) => {
             if (completed && element.itemcompleted === "false")
                 element.toggleInput.click();
             else if (!completed && element.itemcompleted === "true")
                 element.toggleInput.click();
         });
     }
 
-    updateStyles() {
-        if (parseInt(this["total-items"]) !== 0)
-            this.listNode.style.display = "block";
-        else
-            this.listNode.style.display = "none";
-    }
-
-    updateView(element) {
-        switch (this.#route) {
+    updateRoute(route) {
+        this.#route = route;
+        switch (route) {
             case "completed":
-                element.style.display = element.itemcompleted === "true" ? "block" : "none";
+                this.listNode.setAttribute("route", "completed");
                 break;
             case "active":
-                element.style.display = element.itemcompleted === "true" ? "none" : "block";
+                this.listNode.setAttribute("route", "active");
                 break;
             default:
-                element.style.display = "block";
+                this.listNode.setAttribute("route", "all");
         }
     }
-
-    updateElements(type = "", id = "") {
-        switch (type) {
-            case "route-change":
-                this.#elements.forEach((element) => this.updateView(element));
-                break;
-            case "toggle-item":
-            case "add-item":
-                this.#elements.forEach((element) => {
-                    if (element.itemid === id)
-                        this.updateView(element);
-                });
-                break;
-            case "remove-item":
-                this.#elements = this.#elements.filter((element) => element.itemid !== id);
-                break;
-        }
-    }
-
-    updateRoute(route) {
-        this.#route = route;
-        this.updateElements("route-change");
-    }
-
-    attributeChangedCallback(property, oldValue, newValue) {
-        if (oldValue === newValue)
-            return;
-        this[property] = newValue;
-        if (this.isConnected)
-            this.updateStyles();
-    }
-
-    connectedCallback() {
-        this.updateStyles();
-    }
 }
 
 customElements.define("todo-list", TodoList);

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-list/todo-list.template.js

@@ -2,7 +2,7 @@ const template = document.createElement("template");
 
 template.id = "todo-list-template";
 template.innerHTML = `
-    <ul class="todo-list" style="display:none"></ul>
+    <ul class="todo-list"></ul>
 `;
 
 export default template;

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-topbar/todo-topbar.component.js

@@ -5,9 +5,16 @@ import { nanoid } from "../../utils/nanoid.js";
 import globalStyles from "../../styles/global.constructable.js";
 import topbarStyles from "../../styles/topbar.constructable.js";
 
+const customListStyles = new CSSStyleSheet();
+customListStyles.replaceSync(`
+    :host([total-items="0"]) .toggle-all-container {
+        display: none;
+    }
+`);
+
 class TodoTopbar extends HTMLElement {
     static get observedAttributes() {
-        return ["total-items", "active-items", "completed-items"];
+        return ["active-items", "completed-items"];
     }
 
     #route = undefined;
@@ -23,7 +30,7 @@ class TodoTopbar extends HTMLElement {
         this.shadow = this.attachShadow({ mode: "open" });
         this.htmlDirection = document.dir || "ltr";
         this.setAttribute("dir", this.htmlDirection);
-        this.shadow.adoptedStyleSheets = [globalStyles, topbarStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, topbarStyles, customListStyles];
         this.shadow.append(node);
 
         this.keysListeners = [];
@@ -58,13 +65,6 @@ class TodoTopbar extends HTMLElement {
     }
 
     updateDisplay() {
-        if (!parseInt(this["total-items"])) {
-            this.toggleContainer.style.display = "none";
-            return;
-        }
-
-        this.toggleContainer.style.display = "block";
-
         switch (this.#route) {
             case "active":
                 this.toggleInput.checked = false;
@@ -75,7 +75,7 @@ class TodoTopbar extends HTMLElement {
                 this.toggleInput.disabled = !parseInt(this["completed-items"]);
                 break;
             default:
-                this.toggleInput.checked = this["total-items"] === this["completed-items"];
+                this.toggleInput.checked = !parseInt(this["active-items"]);
                 this.toggleInput.disabled = false;
         }
     }

resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-topbar/todo-topbar.template.js

@@ -7,7 +7,7 @@ template.innerHTML = `
             <label for="new-todo" class="visually-hidden">Enter a new todo.</label>
             <input id="new-todo" class="new-todo-input" placeholder="What needs to be done?" autofocus />
         </div>
-        <div class="toggle-all-container" style="display:none">
+        <div class="toggle-all-container">
             <input id="toggle-all" class="toggle-all-input" type="checkbox" />
             <label for="toggle-all" class="toggle-all-label">Mark all todos as complete.</label>
         </div>