Revert "Update to latest simplified WC implementation"

This reverts commit 8dff6f2.

Author: lpardosixtosMs

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

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

@@ -3,17 +3,6 @@ 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(`
-    .bottombar {
-        display: block;
-    }
-
-    :host([total-items="0"]) > .bottombar {
-        display: none;
-    }
-`);
-
 class TodoBottombar extends HTMLElement {
     static get observedAttributes() {
         return ["total-items", "active-items"];
@@ -31,13 +20,18 @@ 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, customStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles];
         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/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">
+    <footer class="bottombar" style="display:none">
         <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/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";
+                    this.toggleInput.checked = this.itemcompleted === "true" ? true : false;
                     break;
             }
         });
@@ -92,7 +92,7 @@ class TodoItem extends HTMLElement {
 
         this.dispatchEvent(
             new CustomEvent("toggle-item", {
-                detail: { completed: this.toggleInput.checked },
+                detail: { id: this.itemid, 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: { completed: this.toggleInput.checked },
+                detail: { id: this.itemid },
                 bubbles: true,
             })
         );
@@ -112,10 +112,17 @@ 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/dist/components/todo-list/todo-list.component.js

@@ -4,30 +4,12 @@ import TodoItem from "../todo-item/todo-item.component.js";
 import globalStyles from "../../styles/global.constructable.js";
 import listStyles from "../../styles/todo-list.constructable.js";
 
-const customListStyles = new CSSStyleSheet();
-customListStyles.replaceSync(`
-    .todo-list > todo-item {
-        display: block;
-    }
-
-    .todo-list[route="completed"] > [itemcompleted="false"] {
-        display: none;
-    }
-
-    .todo-list[route="active"] > [itemcompleted="true"] {
-        display: none;
-    }
-
-    .todo-list {
-        display: block;
-    }
-
-    :host([total-items="0"]) > .todo-list {
-        display: none;
+class TodoList extends HTMLElement {
+    static get observedAttributes() {
+        return ["total-items"];
     }
-`);
 
-class TodoList extends HTMLElement {
+    #elements = [];
     #route = undefined;
 
     constructor() {
@@ -39,7 +21,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, customListStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, listStyles];
         this.shadow.append(node);
         this.classList.add("show-priority");
 
@@ -50,51 +32,96 @@ class TodoList extends HTMLElement {
         }
     }
 
-    addItem(entry, itemIndex) {
+    addItem(entry) {
         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() {
-        Array.from(this.listNode.children).forEach((element) => {
+        this.#elements = this.#elements.filter((element) => {
             if (element.itemcompleted === "true")
                 element.removeItem();
+
+            return element.itemcompleted === "false";
         });
     }
 
     toggleItems(completed) {
-        Array.from(this.listNode.children).forEach((element) => {
+        this.#elements.forEach((element) => {
             if (completed && element.itemcompleted === "false")
                 element.toggleInput.click();
             else if (!completed && element.itemcompleted === "true")
                 element.toggleInput.click();
         });
     }
 
-    updateRoute(route) {
-        this.#route = route;
-        switch (route) {
+    updateStyles() {
+        if (parseInt(this["total-items"]) !== 0)
+            this.listNode.style.display = "block";
+        else
+            this.listNode.style.display = "none";
+    }
+
+    updateView(element) {
+        switch (this.#route) {
             case "completed":
-                this.listNode.setAttribute("route", "completed");
+                element.style.display = element.itemcompleted === "true" ? "block" : "none";
                 break;
             case "active":
-                this.listNode.setAttribute("route", "active");
+                element.style.display = element.itemcompleted === "true" ? "none" : "block";
                 break;
             default:
-                this.listNode.setAttribute("route", "all");
+                element.style.display = "block";
         }
     }
+
+    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/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"></ul>
+    <ul class="todo-list" style="display:none"></ul>
 `;
 
 export default template;

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

@@ -5,19 +5,9 @@ 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(`
-    .toggle-all-container {
-        display: block;
-    }
-    :host([total-items="0"]) .toggle-all-container {
-        display: none;
-    }
-`);
-
 class TodoTopbar extends HTMLElement {
     static get observedAttributes() {
-        return ["active-items", "completed-items"];
+        return ["total-items", "active-items", "completed-items"];
     }
 
     #route = undefined;
@@ -33,7 +23,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, customListStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, topbarStyles];
         this.shadow.append(node);
 
         this.keysListeners = [];
@@ -68,6 +58,13 @@ 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;
@@ -78,7 +75,7 @@ class TodoTopbar extends HTMLElement {
                 this.toggleInput.disabled = !parseInt(this["completed-items"]);
                 break;
             default:
-                this.toggleInput.checked = !parseInt(this["active-items"]);
+                this.toggleInput.checked = this["total-items"] === this["completed-items"];
                 this.toggleInput.disabled = false;
         }
     }

resources/todomvc/vanilla-examples/javascript-web-components/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">
+        <div class="toggle-all-container" style="display:none">
             <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>