From 700de3b92a3e881f0cf41ee4d734011f02aa6d08 Mon Sep 17 00:00:00 2001 From: Luis Pardo Date: Mon, 14 Jul 2025 17:07:23 +0000 Subject: [PATCH 1/5] Squash commit, simplify WC --- resources/tests.mjs | 1201 +++++++++++++++++ .../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, 8549 insertions(+), 342 deletions(-) create mode 100644 resources/tests.mjs 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 new file mode 100644 index 000000000..f35e88eec --- /dev/null +++ b/resources/tests.mjs @@ -0,0 +1,1201 @@ +import { BenchmarkTestStep } from "./benchmark-runner.mjs"; +import { todos } from "./translations.mjs"; + +const numberOfItemsToAdd = 100; +const defaultLanguage = "en"; + +function getTodoText(lang, index) { + const todosSelection = todos[lang] ?? todos[defaultLanguage]; + const currentIndex = index % todosSelection.length; + return todosSelection[currentIndex]; +} + +export const Suites = []; + +Suites.enable = function (names, tags) { + if (names?.length) { + const lowerCaseNames = names.map((each) => each.toLowerCase()); + this.forEach((suite) => { + if (lowerCaseNames.includes(suite.name.toLowerCase())) + suite.disabled = false; + else + suite.disabled = true; + }); + } else if (tags?.length) { + tags.forEach((tag) => { + if (!Tags.has(tag)) + console.error(`Unknown Suites tag: "${tag}"`); + }); + const tagsSet = new Set(tags); + this.forEach((suite) => { + suite.disabled = !suite.tags.some((tag) => tagsSet.has(tag)); + }); + } else { + console.warn("Neither names nor tags provided. Enabling all default suites."); + this.forEach((suite) => { + suite.disabled = !("default" in suite.tags); + }); + } + if (this.some((suite) => !suite.disabled)) + return; + let message, debugInfo; + if (names?.length) { + message = `Suites "${names}" does not match any Suite. No tests to run.`; + debugInfo = { + providedNames: names, + validNames: this.map((each) => each.name), + }; + } else if (tags?.length) { + message = `Tags "${tags}" does not match any Suite. No tests to run.`; + debugInfo = { + providedTags: tags, + validTags: Array.from(Tags), + }; + } + alert(message); + console.error(message, debugInfo); +}; + +Suites.push({ + name: "TodoMVC-LocalStorage", + url: "experimental/todomvc-localstorage/dist/index.html", + tags: ["todomvc"], + disabled: true, + async prepare(page) { + (await page.waitForElement(".new-todo")).focus(); + page.getLocalStorage().getItem("javascript-es5"); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText("ja", i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Emoji", + url: "resources/todomvc/vanilla-examples/javascript-web-components/dist/index.html", + tags: ["todomvc", "experimental"], + 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("emoji", 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-JavaScript-ES5", + url: "resources/todomvc/vanilla-examples/javascript-es5/dist/index.html", + tags: ["todomvc"], + async prepare(page) { + (await page.waitForElement(".new-todo")).focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText("ja", i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-JavaScript-ES5-Complex-DOM", + url: "resources/todomvc/vanilla-examples/javascript-es5-complex/dist/index.html", + tags: ["todomvc", "complex"], + disabled: true, + async prepare(page) { + (await page.waitForElement(".new-todo")).focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText("ja", i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-JavaScript-ES6-Webpack", + url: "resources/todomvc/vanilla-examples/javascript-es6-webpack/dist/index.html", + tags: ["todomvc"], + disabled: true, + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText("ru", i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-JavaScript-ES6-Webpack-Complex-DOM", + url: "resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/dist/index.html", + tags: ["todomvc", "complex", "complex-default"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText("ru", i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-WebComponents", + url: "resources/todomvc/vanilla-examples/javascript-web-components/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-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", + 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-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", + tags: ["todomvc"], + disabled: true, + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-React-Complex-DOM", + url: "resources/todomvc/architecture-examples/react-complex/dist/index.html#/home", + tags: ["todomvc", "complex", "complex-default"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-React-Redux", + url: "resources/todomvc/architecture-examples/react-redux/dist/index.html", + tags: ["todomvc"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-React-Redux-Complex-DOM", + url: "resources/todomvc/architecture-examples/react-redux-complex/dist/index.html", + tags: ["todomvc", "complex"], + disabled: true, + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Backbone", + url: "resources/todomvc/architecture-examples/backbone/dist/index.html", + tags: ["todomvc"], + async prepare(page) { + await page.waitForElement("#appIsReady"); + const newTodo = page.querySelector(".new-todo"); + newTodo.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Backbone-Complex-DOM", + url: "resources/todomvc/architecture-examples/backbone-complex/dist/index.html", + tags: ["todomvc", "complex"], + disabled: true, + async prepare(page) { + await page.waitForElement("#appIsReady"); + const newTodo = page.querySelector(".new-todo"); + newTodo.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Angular", + url: "resources/todomvc/architecture-examples/angular/dist/index.html", + tags: ["todomvc"], + disabled: true, + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Angular-Complex-DOM", + url: "resources/todomvc/architecture-examples/angular-complex/dist/index.html", + tags: ["todomvc", "complex", "complex-default"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Vue", + url: "resources/todomvc/architecture-examples/vue/dist/index.html", + tags: ["todomvc"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Vue-Complex-DOM", + url: "resources/todomvc/architecture-examples/vue-complex/dist/index.html", + tags: ["todomvc", "complex", "complex-default"], + disabled: true, + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-jQuery", + url: "resources/todomvc/architecture-examples/jquery/dist/index.html", + tags: ["todomvc"], + async prepare(page) { + await page.waitForElement("#appIsReady"); + const newTodo = page.getElementById("new-todo"); + newTodo.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + for (let i = 1; i <= numberOfItemsToAdd; i++) + page.querySelector(`li:nth-child(${i}) .toggle`).click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + page.querySelector(".destroy").click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-jQuery-Complex-DOM", + url: "resources/todomvc/architecture-examples/jquery-complex/dist/index.html", + tags: ["todomvc", "complex"], + disabled: true, + async prepare(page) { + await page.waitForElement("#appIsReady"); + const newTodo = page.getElementById("new-todo"); + newTodo.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keyup"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + for (let i = 1; i <= numberOfItemsToAdd; i++) + page.querySelector(`li:nth-child(${i}) .toggle`).click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + page.querySelector(".destroy").click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Preact", + url: "resources/todomvc/architecture-examples/preact/dist/index.html#/home", + tags: ["todomvc"], + disabled: true, + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Preact-Complex-DOM", + url: "resources/todomvc/architecture-examples/preact-complex/dist/index.html#/home", + tags: ["todomvc", "complex", "complex-default"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Svelte", + url: "resources/todomvc/architecture-examples/svelte/dist/index.html", + tags: ["todomvc"], + disabled: true, + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Svelte-Complex-DOM", + url: "resources/todomvc/architecture-examples/svelte-complex/dist/index.html", + tags: ["todomvc", "complex", "complex-default"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Lit", + url: "resources/todomvc/architecture-examples/lit/dist/index.html", + tags: ["todomvc", "webcomponents"], + disabled: true, + async prepare(page) { + await page.waitForElement("todo-app"); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo", ["todo-app", "todo-form"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + const checkbox = todoItems[i].querySelectorInShadowRoot(".toggle"); + checkbox.click(); + } + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const deleteButton = todoItems[i].querySelectorInShadowRoot(".destroy"); + deleteButton.click(); + } + }), + ], +}); + +Suites.push({ + name: "TodoMVC-Lit-Complex-DOM", + url: "resources/todomvc/architecture-examples/lit-complex/dist/index.html", + tags: ["todomvc", "webcomponents", "complex", "complex-default"], + async prepare(page) { + await page.waitForElement("todo-app"); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo", ["todo-app", "todo-form"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.enter("keydown"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + const checkbox = todoItems[i].querySelectorInShadowRoot(".toggle"); + checkbox.click(); + } + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const deleteButton = todoItems[i].querySelectorInShadowRoot(".destroy"); + deleteButton.click(); + } + }), + ], +}); + +Suites.push({ + name: "NewsSite-Next", + url: "resources/newssite/news-next/dist/index.html", + tags: ["newssite", "language"], + async prepare(page) { + await page.waitForElement("#navbar-dropdown-toggle"); + }, + tests: [ + new BenchmarkTestStep("NavigateToUS", (page) => { + for (let i = 0; i < 25; i++) { + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + } + page.querySelector("#navbar-navlist-us-link").click(); + page.layout(); + }), + new BenchmarkTestStep("NavigateToWorld", (page) => { + for (let i = 0; i < 25; i++) { + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + } + page.querySelector("#navbar-navlist-world-link").click(); + page.layout(); + }), + new BenchmarkTestStep("NavigateToPolitics", (page) => { + for (let i = 0; i < 25; i++) { + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + } + page.querySelector("#navbar-navlist-politics-link").click(); + page.layout(); + }), + ], +}); + +Suites.push({ + name: "NewsSite-PostMessage", + url: "resources/newssite/news-next/dist/index.html", + tags: ["experimental", "newssite", "language"], + disabled: true, + async prepare() {}, + type: "remote", + /* config: { + name: "default", // optional param to target non-default tests locally + }, */ +}); + +Suites.push({ + name: "NewsSite-Nuxt", + url: "resources/newssite/news-nuxt/dist/index.html", + tags: ["newssite"], + async prepare(page) { + await page.waitForElement("#navbar-dropdown-toggle"); + }, + tests: [ + new BenchmarkTestStep("NavigateToUS", (page) => { + for (let i = 0; i < 25; i++) { + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + } + page.querySelector("#navbar-navlist-us-link").click(); + page.layout(); + }), + new BenchmarkTestStep("NavigateToWorld", (page) => { + for (let i = 0; i < 25; i++) { + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + } + page.querySelector("#navbar-navlist-world-link").click(); + page.layout(); + }), + new BenchmarkTestStep("NavigateToPolitics", (page) => { + for (let i = 0; i < 25; i++) { + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + page.querySelector("#navbar-dropdown-toggle").click(); + page.layout(); + } + page.querySelector("#navbar-navlist-politics-link").click(); + page.layout(); + }), + ], +}); + +Suites.push({ + name: "Editor-CodeMirror", + url: "resources/editors/dist/codemirror.html", + tags: ["editor"], + async prepare(page) {}, + tests: [ + new BenchmarkTestStep("Long", (page) => { + page.querySelector("#create").click(); + page.querySelector("#layout").click(); + page.querySelector("#long").click(); + page.querySelector("#layout").click(); + }), + new BenchmarkTestStep("Highlight", (page) => { + page.querySelector("#highlight").click(); + page.querySelector("#layout").click(); + }), + ], +}); + +Suites.push({ + name: "Editor-TipTap", + url: "resources/editors/dist/tiptap.html", + tags: ["editor"], + async prepare(page) {}, + tests: [ + new BenchmarkTestStep("Long", (page) => { + page.querySelector("#create").click(); + page.querySelector("#layout").click(); + page.querySelector("#long").click(); + page.querySelector("#layout").click(); + }), + new BenchmarkTestStep("Highlight", (page) => { + page.querySelector("#highlight").click(); + page.querySelector("#layout").click(); + }), + ], +}); + +Suites.push({ + name: "Charts-observable-plot", + url: "resources/charts/dist/observable-plot.html", + tags: ["chart"], + async prepare(page) {}, + tests: [ + new BenchmarkTestStep("Stacked by 6", (page) => { + page.querySelector("#prepare").click(); + page.querySelector("#reset").click(); + page.querySelector("#add-stacked-chart-button").click(); + }), + new BenchmarkTestStep("Stacked by 20", (page) => { + const sizeSlider = page.querySelector("#airport-group-size-input"); + sizeSlider.setValue(20); + sizeSlider.dispatchEvent("input"); + sizeSlider.dispatchEvent("change"); + page.querySelector("#prepare").click(); + page.querySelector("#reset").click(); + page.querySelector("#add-stacked-chart-button").click(); + }), + new BenchmarkTestStep("Dotted", (page) => { + page.querySelector("#reset").click(); + page.querySelector("#add-dotted-chart-button").click(); + }), + ], +}); + +Suites.push({ + name: "Charts-chartjs", + url: "resources/charts/dist/chartjs.html", + tags: ["chart"], + async prepare(page) {}, + tests: [ + new BenchmarkTestStep("Draw scatter", (page) => { + page.querySelector("#prepare").click(); + page.querySelector("#add-scatter-chart-button").click(); + }), + new BenchmarkTestStep("Show tooltip", (page) => { + page.querySelector("#open-tooltip").click(); + }), + new BenchmarkTestStep("Draw opaque scatter", (page) => { + page.querySelector("#opaque-color").click(); + page.querySelector("#add-scatter-chart-button").click(); + }), + ], +}); + +Suites.push({ + name: "React-Stockcharts-SVG", + url: "resources/react-stockcharts/build/index.html?type=svg", + tags: ["chart", "svg"], + async prepare(page) { + await page.waitForElement("#render"); + }, + tests: [ + new BenchmarkTestStep("Render", (page) => { + page.getElementById("render").click(); + }), + new BenchmarkTestStep("PanTheChart", (page) => { + const cursor = page.querySelector(".react-stockcharts-crosshair-cursor"); + let x = 150; + let y = 200; + const coords = (i) => ({ clientX: x + i * 10, clientY: y + i * 2, bubbles: true, cancelable: true }); + for (let i = 0; i < 5; i++) { + cursor.dispatchEvent("mousedown", coords(0), MouseEvent); + for (let j = 0; j < 10; j++) + cursor.dispatchEvent("mousemove", coords(j), MouseEvent); + cursor.dispatchEvent("mouseup", coords(10), MouseEvent); + } + }), + new BenchmarkTestStep("ZoomTheChart", (page) => { + const cursor = page.querySelector(".react-stockcharts-crosshair-cursor"); + let event = { + clientX: 200, + clientY: 200, + deltaMode: 0, + delta: -10, + deltaY: -10, + bubbles: true, + cancelable: true, + }; + for (let i = 0; i < 15; i++) + cursor.dispatchEvent("wheel", event, WheelEvent); + }), + ], +}); + +Suites.push({ + name: "Perf-Dashboard", + url: "resources/perf.webkit.org/public/v3/#/charts/?since=1678991819934&paneList=((55-1974-null-null-(5-2.5-500)))", + tags: ["chart", "webcomponents"], + async prepare(page) { + await page.waitForElement("#app-is-ready"); + page.call("startTest"); + page.callAsync("serviceRAF"); + await new Promise((resolve) => setTimeout(resolve, 1)); + }, + tests: [ + new BenchmarkTestStep("Render", (page) => { + page.call("openCharts"); + page.call("serviceRAF"); + }), + new BenchmarkTestStep("SelectingPoints", (page) => { + const chartPane = page.callToGetElement("getChartPane"); + for (let i = 0; i < 20; ++i) { + chartPane.dispatchKeyEvent("keydown", 39 /* Right */, "ArrowRight"); + page.call("serviceRAF"); + } + }), + new BenchmarkTestStep("SelectingRange", (page) => { + const canvas = page.callToGetElement("getChartCanvas"); + const startingX = 118; + const startingY = 155; + const endingX = 210; + const endingY = 121; + canvas.dispatchMouseEvent("mousedown", startingX, startingY); + page.call("serviceRAF"); + const movementCount = 20; + for (let i = 0; i <= movementCount; ++i) { + canvas.dispatchMouseEvent("mousemove", startingX + ((endingX - startingX) * i) / movementCount, startingY + ((endingY - startingY) * i) / movementCount); + page.call("serviceRAF"); + } + canvas.dispatchMouseEvent("mouseup", endingX, endingY); + page.call("serviceRAF"); + }), + ], +}); + +Object.freeze(Suites); +Suites.forEach((suite) => { + if (!suite.tags) + suite.tags = []; + if (suite.url.startsWith("experimental/")) + suite.tags.unshift("all", "experimental"); + else if (suite.disabled) + suite.tags.unshift("all"); + else + suite.tags.unshift("all", "default"); + Object.freeze(suite.tags); + Object.freeze(suite.steps); +}); + +export const Tags = new Set(["all", "default", "experimental", ...Suites.flatMap((suite) => suite.tags)]); +Object.freeze(Tags); + +globalThis.Suites = Suites; +globalThis.Tags = Tags; 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 = ` -