diff --git a/experimental/responsive-design/dist/index.html b/experimental/responsive-design/dist/index.html index b3e32439b..e526a0047 100644 --- a/experimental/responsive-design/dist/index.html +++ b/experimental/responsive-design/dist/index.html @@ -4,8 +4,22 @@ Cooking with Lit and Tailwind + - - + + diff --git a/experimental/responsive-design/index.html b/experimental/responsive-design/index.html index b3e32439b..e526a0047 100644 --- a/experimental/responsive-design/index.html +++ b/experimental/responsive-design/index.html @@ -4,8 +4,22 @@ Cooking with Lit and Tailwind + - - + + diff --git a/experimental/responsive-design/package-lock.json b/experimental/responsive-design/package-lock.json index 76da77403..15e1e10ab 100644 --- a/experimental/responsive-design/package-lock.json +++ b/experimental/responsive-design/package-lock.json @@ -8,7 +8,7 @@ "name": "responsive-design", "version": "1.0.0", "dependencies": { - "lit": "^3.1.4" + "lit": "^3.2.1" }, "devDependencies": { "@rollup/plugin-html": "^1.0.4", @@ -24,6 +24,7 @@ "rollup-plugin-copy": "^3.5.0", "rollup-plugin-import-css": "^3.5.6", "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-summary": "^3.0.0", "tailwindcss": "^3.4.14" }, "engines": { @@ -66,6 +67,16 @@ "node": ">=6.9.0" } }, + "node_modules/@colors/colors": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", + "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==", + "dev": true, + "optional": true, + "engines": { + "node": ">=0.1.90" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -1229,6 +1240,18 @@ "node": ">=8" } }, + "node_modules/brotli-size": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/brotli-size/-/brotli-size-4.0.0.tgz", + "integrity": "sha512-uA9fOtlTRC0iqKfzff1W34DXUA3GyVqbUaeo3Rw3d4gd1eavKVCETXrn3NzO74W+UVkG3UHu8WxUi+XvKI/huA==", + "dev": true, + "dependencies": { + "duplexer": "0.1.1" + }, + "engines": { + "node": ">= 10.16.0" + } + }, "node_modules/browserslist": { "version": "4.24.2", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", @@ -1388,6 +1411,21 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/cli-table3": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.5.tgz", + "integrity": "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0" + }, + "engines": { + "node": "10.* || >= 12.*" + }, + "optionalDependencies": { + "@colors/colors": "1.5.0" + } + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -1933,6 +1971,12 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha512-sxNZ+ljy+RA1maXoUReeqBBpBC6RLKmg5ewzV+x+mSETmWNoKdZN6vcQjpFROemza23hGFskJtFNoUWUaQ+R4Q==", + "dev": true + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -2239,6 +2283,15 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/filesize": { + "version": "10.1.6", + "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz", + "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==", + "dev": true, + "engines": { + "node": ">= 10.4.0" + } + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -2488,6 +2541,27 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/gzip-size": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz", + "integrity": "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==", + "dev": true, + "dependencies": { + "duplexer": "^0.1.2" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/gzip-size/node_modules/duplexer": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", + "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==", + "dev": true + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -4694,6 +4768,113 @@ "postcss": "8.x" } }, + "node_modules/rollup-plugin-summary": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-summary/-/rollup-plugin-summary-3.0.0.tgz", + "integrity": "sha512-TS+rGc32eYo8Gy14h98TEnsAQ9USSzumGC6Z5P2rSiphwM8lBST8/0ZXJyHwQG8idY/x3rrH1ek+l8qc/sH9wQ==", + "dev": true, + "dependencies": { + "@eslint/eslintrc": "^3.1.0", + "@eslint/js": "^9.13.0", + "brotli-size": "^4.0.0", + "cli-table3": "^0.6.5", + "filesize": "^10.1.6", + "globals": "^15.11.0", + "gzip-size": "^7.0.0", + "terser": "^5.36.0" + }, + "engines": { + "node": ">=20.9.0" + }, + "peerDependencies": { + "rollup": "^3.0.0||^4.0.0" + } + }, + "node_modules/rollup-plugin-summary/node_modules/@eslint/eslintrc": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz", + "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==", + "dev": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^10.0.1", + "globals": "^14.0.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/rollup-plugin-summary/node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", + "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rollup-plugin-summary/node_modules/@eslint/js": { + "version": "9.16.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.16.0.tgz", + "integrity": "sha512-tw2HxzQkrbeuvyj1tG2Yqq+0H9wGoI2IMk4EOsQeX+vmd75FtJAzf+gTA69WF+baUKRYQ3x2kbLE08js5OsTVg==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/rollup-plugin-summary/node_modules/eslint-visitor-keys": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz", + "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/rollup-plugin-summary/node_modules/espree": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz", + "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==", + "dev": true, + "dependencies": { + "acorn": "^8.14.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/rollup-plugin-summary/node_modules/globals": { + "version": "15.13.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-15.13.0.tgz", + "integrity": "sha512-49TewVEz0UxZjr1WYYsWpPrhyC/B/pA8Bq0fUmet2n+eR7yn0IvNzNaoBwnK6mdkzcN+se7Ez9zUgULTz2QH4g==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", diff --git a/experimental/responsive-design/package.json b/experimental/responsive-design/package.json index d543e6910..f509ec17d 100644 --- a/experimental/responsive-design/package.json +++ b/experimental/responsive-design/package.json @@ -27,7 +27,7 @@ "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { - "lit": "^3.1.4" + "lit": "^3.2.1" }, "devDependencies": { "@rollup/plugin-html": "^1.0.4", @@ -43,6 +43,7 @@ "rollup-plugin-copy": "^3.5.0", "rollup-plugin-import-css": "^3.5.6", "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-summary": "^3.0.0", "tailwindcss": "^3.4.14" } } diff --git a/experimental/responsive-design/rollup.config.js b/experimental/responsive-design/rollup.config.js index 4ea54008b..ab86cdf73 100644 --- a/experimental/responsive-design/rollup.config.js +++ b/experimental/responsive-design/rollup.config.js @@ -3,6 +3,7 @@ import terser from "@rollup/plugin-terser"; import copy from "rollup-plugin-copy"; import css from "rollup-plugin-import-css"; import html from "@rollup/plugin-html"; +import summary from "rollup-plugin-summary"; import path from "path"; import fs from "fs"; @@ -19,12 +20,6 @@ export default { plugins: [ resolve(), css(), - copy({ - targets: [ - { src: "index.html", dest: "dist/" }, - { src: "public/", dest: "dist/" }, - ], - }), html({ template: () => { const imagesDir = path.resolve("public", "images"); @@ -51,5 +46,12 @@ export default { }, fileName: "iframe.html", }), + summary(), + copy({ + targets: [ + { src: "index.html", dest: "dist/" }, + { src: "public/", dest: "dist/" }, + ], + }), ], }; diff --git a/resources/benchmark-runner.mjs b/resources/benchmark-runner.mjs index 83843d9f4..86f3ca798 100644 --- a/resources/benchmark-runner.mjs +++ b/resources/benchmark-runner.mjs @@ -150,7 +150,7 @@ class PageElement { } setWidth(width) { - this.#node.width = width; + this.#node.style.width = width; } scrollIntoView() { @@ -215,6 +215,14 @@ class PageElement { return new PageElement(element); } + querySelectorAllInShadowRoot(selector, path = []) { + const lookupStartNode = this.#node.shadowRoot ?? this.#node; + const elements = Array.from(getParent(lookupStartNode, path).querySelectorAll(selector)); + for (let i = 0; i < elements.length; i++) + elements[i] = new PageElement(elements[i]); + return elements; + } + querySelector(selector) { const element = this.#node.querySelector(selector); diff --git a/resources/tests.mjs b/resources/tests.mjs index 3f3a81687..71423e650 100644 --- a/resources/tests.mjs +++ b/resources/tests.mjs @@ -1109,15 +1109,18 @@ Suites.push({ (await page.waitForElement("#content-iframe")).focus(); }, tests: [ - new BenchmarkTestStep("LoadChatAndExpandRecipe", (page) => { + new BenchmarkTestStep("LoadChatAndExpandRecipes", (page) => { const iframeElement = page.querySelector("#content-iframe", [], true); const resumePreviousChatBtn = iframeElement.querySelectorInShadowRoot("#resume-previous-chat-btn", ["cooking-app", "chat-window"]); resumePreviousChatBtn.click(); page.layout(); - const showMoreBtn = iframeElement.querySelectorInShadowRoot(".show-more-btn", ["cooking-app", "main-content", "recipe-grid", "recipe-card"]); - showMoreBtn.click(); - page.layout(); + // Expand recipes + const showMoreBtn = iframeElement.querySelectorAllInShadowRoot(".show-more-btn", ["cooking-app", "main-content", "recipe-grid"]); + for (const btn of showMoreBtn) { + btn.click(); + page.layout(); + } }), new BenchmarkTestStep("ReduceWidthIn5Steps", (page) => { const iframeElement = page.querySelector("#content-iframe"); @@ -1128,17 +1131,29 @@ Suites.push({ page.layout(); }); }), - new BenchmarkTestStep("ScrollToChatAndSendMessage", (page) => { + new BenchmarkTestStep("ScrollToChatAndSendMessages", (page) => { const iframeElement = page.querySelector("#content-iframe", [], true); + + // Collapse recipes + const showMoreBtn = iframeElement.querySelectorAllInShadowRoot(".show-more-btn", ["cooking-app", "main-content", "recipe-grid"]); + for (const btn of showMoreBtn) { + btn.click(); + page.layout(); + } + const element = iframeElement.querySelectorInShadowRoot("#chat-window", ["cooking-app", "chat-window"]); element.scrollIntoView(); page.layout(); + const messagesToBeSent = ["Please generate an image of Tomato Soup.", "Try again, but make the soup look thicker.", "Try again, but make the soup served in a rustic bowl and include a sprinkle of fresh herbs on top."]; + const chatInput = iframeElement.querySelectorInShadowRoot("#chat-input", ["cooking-app", "chat-window"]); - chatInput.setValue("Please generate an image of Tomato Soup."); - chatInput.dispatchEvent("input"); - chatInput.enter("keydown"); - page.layout(); + for (const message of messagesToBeSent) { + chatInput.setValue(message); + chatInput.dispatchEvent("input"); + chatInput.enter("keydown"); + page.layout(); + } }), new BenchmarkTestStep("IncreaseWidthIn5Steps", (page) => { const iframeElement = page.querySelector("#content-iframe");