From a14004f3e73778ba66196ec6a230118c52680eea Mon Sep 17 00:00:00 2001 From: Luis Pardo Date: Mon, 14 Jul 2025 17:07:23 +0000 Subject: [PATCH 1/2] Squash commit, simplify WC --- resources/tests.mjs | 67 ++ .../components/todo-app/todo-app.component.js | 37 +- .../todo-bottombar.component.js | 18 +- .../todo-bottombar/todo-bottombar.template.js | 2 +- .../todo-item/todo-item.component.js | 18 +- .../todo-list/todo-list.component.js | 93 +- .../todo-list/todo-list.template.js | 2 +- .../todo-topbar/todo-topbar.component.js | 23 +- .../todo-topbar/todo-topbar.template.js | 2 +- .../README.md | 29 + .../dist/app.css | 11 + .../dist/big-dom.css | 933 +++++++++++++++ .../components/todo-app/todo-app.component.js | 147 +++ .../components/todo-app/todo-app.template.js | 14 + .../todo-bottombar.component.js | 80 ++ .../todo-bottombar/todo-bottombar.template.js | 22 + .../todo-item/todo-item.component.js | 190 +++ .../todo-item/todo-item.template.js | 19 + .../todo-list/todo-list.component.js | 129 ++ .../todo-list/todo-list.template.js | 8 + .../todo-topbar/todo-topbar.component.js | 131 ++ .../todo-topbar/todo-topbar.template.js | 17 + .../dist/default-variables.css | 5 + .../dist/hooks/useDoubleClick.js | 19 + .../dist/hooks/useKeyListener.js | 23 + .../dist/hooks/useRouter.js | 43 + .../dist/index.html | 31 + .../dist/logo.png | Bin 0 -> 9510 bytes .../dist/styles/app.constructable.js | 15 + .../dist/styles/bottombar.constructable.js | 158 +++ .../dist/styles/footer.css | 26 + .../dist/styles/global.constructable.js | 86 ++ .../dist/styles/global.css | 88 ++ .../dist/styles/header.css | 21 + .../dist/styles/main.constructable.js | 11 + .../dist/styles/todo-item.constructable.js | 147 +++ .../dist/styles/todo-list.constructable.js | 15 + .../dist/styles/topbar.constructable.js | 90 ++ .../dist/todo-item-extra-css.js | 47 + .../dist/todo-list-extra-css.js | 19 + .../dist/utils/nanoid.js | 41 + .../package-lock.json | 1049 +++++++++++++++++ .../package.json | 23 + .../scripts/build.js | 25 + .../javascript-web-components-old/.gitignore | 2 + .../javascript-web-components-old/README.md | 37 + .../components/todo-app/todo-app.component.js | 147 +++ .../components/todo-app/todo-app.template.js | 14 + .../todo-bottombar.component.js | 80 ++ .../todo-bottombar/todo-bottombar.template.js | 22 + .../todo-item/todo-item.component.js | 190 +++ .../todo-item/todo-item.template.js | 19 + .../todo-list/todo-list.component.js | 129 ++ .../todo-list/todo-list.template.js | 8 + .../todo-topbar/todo-topbar.component.js | 131 ++ .../todo-topbar/todo-topbar.template.js | 17 + .../dist/hooks/useDoubleClick.js | 19 + .../dist/hooks/useKeyListener.js | 23 + .../dist/hooks/useRouter.js | 43 + .../dist/index.html | 30 + .../dist/styles/app.constructable.js | 15 + .../dist/styles/bottombar.constructable.js | 158 +++ .../dist/styles/footer.css | 26 + .../dist/styles/global.constructable.js | 86 ++ .../dist/styles/global.css | 88 ++ .../dist/styles/header.css | 21 + .../dist/styles/main.constructable.js | 11 + .../dist/styles/todo-item.constructable.js | 147 +++ .../dist/styles/todo-list.constructable.js | 15 + .../dist/styles/topbar.constructable.js | 90 ++ .../dist/utils/nanoid.js | 41 + .../javascript-web-components-old/index.html | 30 + .../package-lock.json | 756 ++++++++++++ .../package.json | 22 + .../scripts/build.js | 94 ++ .../components/todo-app/todo-app.component.js | 147 +++ .../components/todo-app/todo-app.template.js | 14 + .../todo-bottombar.component.js | 80 ++ .../todo-bottombar/todo-bottombar.template.js | 22 + .../todo-item/todo-item.component.js | 190 +++ .../todo-item/todo-item.template.js | 19 + .../todo-list/todo-list.component.js | 129 ++ .../todo-list/todo-list.template.js | 8 + .../todo-topbar/todo-topbar.component.js | 131 ++ .../todo-topbar/todo-topbar.template.js | 17 + .../src/hooks/useDoubleClick.js | 19 + .../src/hooks/useKeyListener.js | 23 + .../src/hooks/useRouter.js | 43 + .../src/utils/nanoid.js | 41 + .../components/todo-app/todo-app.component.js | 37 +- .../todo-bottombar.component.js | 18 +- .../todo-bottombar/todo-bottombar.template.js | 2 +- .../todo-item/todo-item.component.js | 18 +- .../todo-list/todo-list.component.js | 93 +- .../todo-list/todo-list.template.js | 2 +- .../todo-topbar/todo-topbar.component.js | 23 +- .../todo-topbar/todo-topbar.template.js | 2 +- .../components/todo-app/todo-app.component.js | 37 +- .../todo-bottombar.component.js | 18 +- .../todo-bottombar/todo-bottombar.template.js | 2 +- .../todo-item/todo-item.component.js | 17 +- .../todo-list/todo-list.component.js | 93 +- .../todo-list/todo-list.template.js | 2 +- .../todo-topbar/todo-topbar.component.js | 23 +- .../todo-topbar/todo-topbar.template.js | 2 +- 105 files changed, 7415 insertions(+), 342 deletions(-) create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/README.md create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/app.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/big-dom.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-app/todo-app.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-app/todo-app.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-bottombar/todo-bottombar.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-bottombar/todo-bottombar.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-item/todo-item.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-item/todo-item.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-list/todo-list.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-list/todo-list.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-topbar/todo-topbar.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/components/todo-topbar/todo-topbar.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/default-variables.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/hooks/useDoubleClick.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/hooks/useKeyListener.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/hooks/useRouter.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/index.html create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/logo.png create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/app.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/bottombar.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/footer.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/global.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/global.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/header.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/main.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/todo-item.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/todo-list.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/styles/topbar.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/todo-item-extra-css.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/todo-list-extra-css.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/utils/nanoid.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/package-lock.json create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/package.json create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old-complex/scripts/build.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/.gitignore create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/README.md create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-app/todo-app.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-app/todo-app.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-bottombar/todo-bottombar.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-bottombar/todo-bottombar.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-item/todo-item.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-item/todo-item.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-list/todo-list.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-list/todo-list.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-topbar/todo-topbar.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/components/todo-topbar/todo-topbar.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/hooks/useDoubleClick.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/hooks/useKeyListener.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/hooks/useRouter.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/index.html create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/app.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/bottombar.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/footer.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/global.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/global.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/header.css create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/main.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/todo-item.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/todo-list.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/styles/topbar.constructable.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/dist/utils/nanoid.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/index.html create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/package-lock.json create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/package.json create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/scripts/build.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-app/todo-app.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-app/todo-app.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-bottombar/todo-bottombar.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-bottombar/todo-bottombar.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-item/todo-item.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-item/todo-item.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-list/todo-list.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-list/todo-list.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-topbar/todo-topbar.component.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/components/todo-topbar/todo-topbar.template.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/hooks/useDoubleClick.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/hooks/useKeyListener.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/hooks/useRouter.js create mode 100644 resources/todomvc/vanilla-examples/javascript-web-components-old/src/utils/nanoid.js diff --git a/resources/tests.mjs b/resources/tests.mjs index d7cf6794a..f35e88eec 100644 --- a/resources/tests.mjs +++ b/resources/tests.mjs @@ -274,6 +274,39 @@ Suites.push({ ], }); +Suites.push({ + name: "TodoMVC-WebComponents-Old", + url: "resources/todomvc/vanilla-examples/javascript-web-components-old/dist/index.html", + tags: ["todomvc", "webcomponents"], + async prepare(page) { + await page.waitForElement("todo-app"); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const input = page.querySelector(".new-todo-input", ["todo-app", "todo-topbar"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + input.setValue(getTodoText(defaultLanguage, i)); + input.dispatchEvent("input"); + input.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + const item = items[i].querySelectorInShadowRoot(".toggle-todo-input"); + item.click(); + } + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const item = items[i].querySelectorInShadowRoot(".remove-todo-button"); + item.click(); + } + }), + ], +}); + Suites.push({ name: "TodoMVC-WebComponents-Complex-DOM", url: "resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/index.html", @@ -308,6 +341,40 @@ Suites.push({ ], }); +Suites.push({ + name: "TodoMVC-WebComponents-Old-Complex-DOM", + url: "resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/index.html", + tags: ["todomvc", "webcomponents", "complex"], + disabled: true, + async prepare(page) { + await page.waitForElement("todo-app"); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const input = page.querySelector(".new-todo-input", ["todo-app", "todo-topbar"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + input.setValue(getTodoText(defaultLanguage, i)); + input.dispatchEvent("input"); + input.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + const item = items[i].querySelectorInShadowRoot(".toggle-todo-input"); + item.click(); + } + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const item = items[i].querySelectorInShadowRoot(".remove-todo-button"); + item.click(); + } + }), + ], +}); + Suites.push({ name: "TodoMVC-React", url: "resources/todomvc/architecture-examples/react/dist/index.html#/home", diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js index 877d0c29d..ed4be34e0 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js +++ b/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); diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js index cc0203c48..174bcc5e1 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js @@ -3,6 +3,17 @@ 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"]; @@ -20,18 +31,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!`; } diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js index 4f34ca92d..4a5e06f25 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js +++ b/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 = ` -