Replace generator with handcrafted css

lpardosixtosMs · lpardosixtosMs · Aug 19, 2023 · Aug 19, 2023 · Aug 19, 2023 · Aug 19, 2023
commit 63ebfa298218e0b156ed763a8e0c931422c7a44f
diff --git a/resources/benchmark-runner.mjs b/resources/benchmark-runner.mjs
@@ -316,12 +316,12 @@ class RAFTestInvoker extends TestInvoker {
 
 // https://stackoverflow.com/a/47593316
 function seededHashRandomNumberGenerator(a) {
-    return function() {
-      var t = a += 0x6D2B79F5;
-      t = Math.imul(t ^ t >>> 15, t | 1);
-      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-      return ((t ^ t >>> 14) >>> 0);
-    }
+    return function () {
+        var t = a += 0x6d2b79f5;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return (t ^ (t >>> 14)) >>> 0;
+    };
 }
 
 export class BenchmarkRunner {
@@ -333,9 +333,9 @@ export class BenchmarkRunner {
         this._page = null;
         this._metrics = null;
         this._iterationCount = params.iterationCount;
-        if (params.shuffleSeed !== "off") {
+        if (params.shuffleSeed !== "off")
             this._suiteOrderRandomNumberGenerator = seededHashRandomNumberGenerator(params.shuffleSeed);
-        }
+
     }
 
     async runMultipleIterations(iterationCount) {

diff --git a/resources/params.mjs b/resources/params.mjs
@@ -111,7 +111,7 @@ class Params {
             this.shuffleSeed = searchParams.get("shuffleSeed");
             if (this.shuffleSeed !== "off") {
                 if (this.shuffleSeed === "generate") {
-                    this.shuffleSeed = Math.floor(Math.random() * 1 << 16);
+                    this.shuffleSeed = Math.floor((Math.random() * 1) << 16);
                     console.log(`Generated a random suite order seed: ${this.shuffleSeed}`);
                 } else {
                     this.shuffleSeed = parseInt(this.shuffleSeed);

diff --git a/resources/todomvc/architecture-examples/lit-complex/scripts/build.js b/resources/todomvc/architecture-examples/lit-complex/scripts/build.js
@@ -1,23 +1,26 @@
 const path = require("path");
 const { buildComplex } = require("big-dom-generator/utils/buildComplex");
-const fs = require("fs");
 
 const SOURCE_DIRECTORY = "node_modules/todomvc-lit/dist/";
 const TITLE = "TodoMVC: Lit Complex DOM";
 const FILES_TO_MOVE = [
-    "node_modules/big-dom-generator/dist/app.css",
-    "node_modules/big-dom-generator/generated.css",
-    "node_modules/big-dom-generator/javascript-web-components/generated-variables.css",
-    "node_modules/big-dom-generator/javascript-web-components/add-extra-css.js",
+    "app.css",
+    "node_modules/big-dom-generator/dist/big-dom-generator.css",
+    "node_modules/big-dom-generator/utils/lit/todo-item-extra-css.constructable.js",
+    "node_modules/big-dom-generator/utils/todo-list-extra-css.constructable.js",
+    "node_modules/big-dom-generator/utils/default-variables.css",
     "node_modules/big-dom-generator/dist/logo.png",
 ];
-const EXTRA_CSS_TO_LINK = ["generated-variables.css"];
-const SCRIPTS_TO_LINK = ["add-extra-css.js"];
+const EXTRA_CSS_TO_LINK = ["app.css", "default-variables.css"];
+const SCRIPTS_TO_LINK = ["todo-item-extra-css.constructable.js", "todo-list-extra-css.constructable.js"];
 
-buildComplex(path.resolve(__dirname), path.join("..", SOURCE_DIRECTORY), TITLE, FILES_TO_MOVE, EXTRA_CSS_TO_LINK, SCRIPTS_TO_LINK);
+const options = {
+    callerDirectory: path.resolve(__dirname),
+    sourceDirectory: path.join("..", SOURCE_DIRECTORY),
+    title: TITLE,
+    filesToMove: FILES_TO_MOVE,
+    extraCssToLink: EXTRA_CSS_TO_LINK,
+    scriptsToLink: SCRIPTS_TO_LINK,
+};
 
-// Remove the second half of generated.css
-let generatedCss = fs.readFileSync(path.resolve(__dirname, path.join("..", "dist", "generated.css")), "utf8");
-generatedCss = generatedCss.split("}\n");
-generatedCss = `${generatedCss.slice(0, generatedCss.length / 2).join("}\n")}}\n`;
-fs.writeFileSync(path.resolve(__dirname, path.join("..", "dist", "generated.css")), generatedCss);
+buildComplex(options);
diff --git a/resources/todomvc/architecture-examples/lit/src/lib/todo-app.ts b/resources/todomvc/architecture-examples/lit/src/lib/todo-app.ts
@@ -82,7 +82,7 @@ export class TodoApp extends LitElement {
                 <todo-form .todoList=${this.todoList}></todo-form>
             </header>
             <main class="main">
-                <todo-list .todoList=${this.todoList}></todo-list>
+                <todo-list class="show-priority" .todoList=${this.todoList}></todo-list>
             </main>
             <todo-footer
                 class="${classMap({

diff --git a/resources/todomvc/architecture-examples/lit/src/lib/todo-item.ts b/resources/todomvc/architecture-examples/lit/src/lib/todo-item.ts
@@ -142,28 +142,20 @@ export class TodoItem extends LitElement {
         super.connectedCallback();
         if (!EXTRA_CSS_TO_ADOPT)
             return;
-        const styleSheetIndex = this.index % EXTRA_CSS_TO_ADOPT.length;
-        const styleSheetToAdopt = EXTRA_CSS_TO_ADOPT[styleSheetIndex];
-        if (styleSheetToAdopt)
-            this.shadowRoot?.adoptedStyleSheets.push(styleSheetToAdopt);
+
+        this.shadowRoot?.adoptedStyleSheets.push(EXTRA_CSS_TO_ADOPT);
     }
 
     override render() {
         const itemClassList = {
-            targeted: true,
             todo: true,
             completed: this.completed ?? false,
             editing: this.isEditing,
-            [`li-${this.index}`]: true,
-        };
-        const divClassList = {
-            targeted: true,
-            [`view-${this.index}`]: true,
         };
 
         return html`
             <li class="${classMap(itemClassList)}">
-                <div class="${classMap(divClassList)}">
+                <div class="view">
                     <input class="toggle" type="checkbox" .checked=${this.completed ?? false} @change=${this.#toggleTodo} />
                     <label @dblclick=${this.#beginEdit}> ${this.text} </label>
                     <button @click=${this.#deleteTodo} class="destroy"></button>
@@ -209,6 +201,6 @@ declare global {
     }
     // eslint-disable-next-line no-unused-vars
     interface Window {
-        extraCssToAdopt?: CSSStyleSheet[];
+        extraCssToAdopt?: CSSStyleSheet;
     }
 }
diff --git a/resources/todomvc/architecture-examples/lit/src/lib/todo-list.ts b/resources/todomvc/architecture-examples/lit/src/lib/todo-list.ts
@@ -10,6 +10,7 @@ import "./todo-item.js";
 import { ToggleAllTodoEvent } from "./events.js";
 import { updateOnEvent } from "./utils.js";
 
+const EXTRA_CSS_TO_ADOPT = window.extraTodoListCssToAdopt;
 @customElement("todo-list")
 export class TodoList extends LitElement {
     static override styles = [
@@ -74,6 +75,14 @@ export class TodoList extends LitElement {
     @property({ attribute: false })
         todoList?: Todos;
 
+    override connectedCallback() {
+        super.connectedCallback();
+        if (!EXTRA_CSS_TO_ADOPT)
+            return;
+
+        this.shadowRoot?.adoptedStyleSheets.push(EXTRA_CSS_TO_ADOPT);
+    }
+
     override render() {
         return html`
             ${(this.todoList?.all.length ?? 0) > 0
@@ -86,7 +95,7 @@ export class TodoList extends LitElement {
                 ${repeat(
         this.todoList?.filtered() ?? [],
         (todo) => todo.id,
-        (todo, index) => html`<todo-item .todoId=${todo.id} .text=${todo.text} .completed=${todo.completed} .index=${index}></todo-item>`
+        (todo, index) => html`<todo-item data-priority=${4 - (index % 5)} .todoId=${todo.id} .text=${todo.text} .completed=${todo.completed}></todo-item>`
     )}
             </ul>
         `;
@@ -102,4 +111,8 @@ declare global {
     interface HTMLElementTagNameMap {
         "todo-list": TodoList;
     }
+    // eslint-disable-next-line no-unused-vars
+    interface Window {
+        extraTodoListCssToAdopt?: CSSStyleSheet;
+    }
 }
diff --git a/resources/todomvc/big-dom-generator/utils/default-variables.css b/resources/todomvc/big-dom-generator/utils/default-variables.css
@@ -0,0 +1,5 @@
+:root {
+    --complex-border-bottom-color-default: rgb(237, 237, 237);
+    --complex-background-color-default: rgb(255, 255, 255);
+    --complex-label-color-default: rgb(72, 72, 72);
+}
diff --git a/...vc/big-dom-generator/utils/javascript-web-components/todo-item-extra-css.constructable.js b/...vc/big-dom-generator/utils/javascript-web-components/todo-item-extra-css.constructable.js
@@ -0,0 +1,40 @@
+const additionalStyleSheet = new CSSStyleSheet();
+const PRIORITY_LEVELS = 5;
+
+let priorityColorVariables = [];
+for (let i = 0; i < PRIORITY_LEVELS; i++) {
+    priorityColorVariables.push(`
+        :host([data-priority="${i}"]) > li {
+            --priority-background-color: var(--complex-todo-red-pri-${i});
+            --priority-background-color-completed: var(--complex-todo-green-pri-${i});
+        }`);
+}
+priorityColorVariables = priorityColorVariables.join("\n");
+
+additionalStyleSheet.replaceSync(`
+    ${priorityColorVariables}
+    .todo-item {
+        background-color: var(--priority-background-color, var(--complex-background-color-default));
+        border-bottom-color: var(--complex-todo-red-border, var(--complex-border-bottom-color-default));
+    }
+    :host([completed="true"]) > .todo-item {
+        background-color: var(--priority-background-color-completed, var(--complex-background-color-default));
+        border-bottom-color: var(--complex-todo-green-border, var(--complex-border-bottom-color-default));
+    }
+    .todo-item > div label {
+        color: var(--complex-todo-red-label, --complex-label-color-default);
+    }
+    :host([completed="true"]) > .todo-item label  {
+        color: var(--complex-todo-green-label, --complex-label-color-default);
+    }
+    .todo-item  > div > :focus,
+    .todo-item  > div > .toggle:focus + label {
+        box-shadow: var(--complex-box-shadow-red) !important;
+    }
+    :host([completed="true"]) > .todo-item > div > :focus,
+    :host([completed="true"]) > .todo-item > div > .toggle:focus + label {
+        box-shadow: var(--complex-box-shadow-green) !important;
+    }
+`);
+
+window.extraCssToAdopt = additionalStyleSheet;
diff --git a/resources/todomvc/big-dom-generator/utils/lit/todo-item-extra-css.constructable.js b/resources/todomvc/big-dom-generator/utils/lit/todo-item-extra-css.constructable.js
@@ -0,0 +1,40 @@
+const additionalStyleSheet = new CSSStyleSheet();
+const PRIORITY_LEVELS = 5;
+
+let priorityRules = [];
+for (let i = 0; i < PRIORITY_LEVELS; i++) {
+    priorityRules.push(`
+        :host([data-priority="${i}"]) > li {
+            --priority-background-color: var(--complex-todo-red-pri-${i});
+            --priority-background-color-completed: var(--complex-todo-green-pri-${i});
+        }`);
+}
+priorityRules = priorityRules.join("\n");
+
+additionalStyleSheet.replaceSync(`
+    ${priorityRules}
+    .todo {
+        background-color: var(--priority-background-color, var(--complex-background-color-default));
+        border-bottom-color: var(--complex-todo-red-border, var(--complex-border-bottom-color-default));
+    }
+    .todo.completed {
+        background-color: var(--priority-background-color-completed, var(--complex-background-color-default));
+        border-bottom-color: var(--complex-todo-green-border, var(--complex-border-bottom-color-default));
+    }
+    .todo > div label {
+        color: var(--complex-todo-red-label, --complex-label-color-default);
+    }
+    .todo.completed label {
+        color: var(--complex-todo-green-label, --complex-label-color-default);
+    }
+    .todo > div > :focus,
+    .todo > div > .toggle:focus + label {
+        box-shadow: var(--complex-box-shadow-red) !important;
+    }
+    .todo.completed > div > :focus,
+    .todo.completed > div > .toggle:focus + label {
+        box-shadow: var(--complex-box-shadow-green) !important;
+    }
+`);
+
+window.extraCssToAdopt = additionalStyleSheet;
diff --git a/resources/todomvc/big-dom-generator/utils/todo-list-extra-css.constructable.js b/resources/todomvc/big-dom-generator/utils/todo-list-extra-css.constructable.js
@@ -0,0 +1,19 @@
+const additionalTodoListStyleSheet = new CSSStyleSheet();
+additionalTodoListStyleSheet.replaceSync(`:host(.show-priority) {
+    --complex-todo-red-pri-0: rgb(253, 204, 204);
+    --complex-todo-red-pri-1: rgb(248, 221, 221);
+    --complex-todo-red-pri-2: rgb(251, 234, 234);
+    --complex-todo-red-pri-3: rgb(250, 240, 240);
+    --complex-todo-red-border: rgb(255, 215, 215);
+    --complex-todo-red-label: rgb(37, 0, 0);
+    --complex-todo-green-pri-0: rgb(204, 253, 204);
+    --complex-todo-green-pri-1: rgb(221, 248, 221);
+    --complex-todo-green-pri-2: rgb(234, 251, 234);
+    --complex-todo-green-pri-3: rgb(241, 250, 240);
+    --complex-todo-green-border: rgb(215, 255, 215);
+    --complex-todo-green-label: rgb(135, 167, 144);
+    --complex-box-shadow-red: rgb(193, 133, 133) 0 0 2px 2px inset;
+    --complex-box-shadow-green: rgb(125, 207, 137) 0 0 2px 2px inset;
+}`);
+
+window.extraTodoListCssToAdopt = additionalTodoListStyleSheet;
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/a.out b/resources/todomvc/vanilla-examples/javascript-web-components-complex/a.out
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/app.css b/resources/todomvc/vanilla-examples/javascript-web-components-complex/app.css
@@ -0,0 +1,13 @@
+.todo-area {
+    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 1.4em;
+    /* background: #f5f5f5; */
+    color: #111111;
+    min-width: 230px;
+    max-width: 550px;
+    margin: 0 7%;
+    /* margin: 0; */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 300;
+}
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/app.css b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/app.css
@@ -0,0 +1,13 @@
+.todo-area {
+  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  /* background: #f5f5f5; */
+  color: #111111;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 7%;
+  /* margin: 0; */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}
diff --git a/...ces/todomvc/vanilla-examples/javascript-web-components-complex/dist/big-dom-generator.css b/...ces/todomvc/vanilla-examples/javascript-web-components-complex/dist/big-dom-generator.css
diff --git a/...amples/javascript-web-components-complex/dist/components/todo-item/todo-item.component.js b/...amples/javascript-web-components-complex/dist/components/todo-item/todo-item.component.js
@@ -6,7 +6,6 @@ import globalStyles from "../../styles/global.constructable.js";
 import itemStyles from "../../styles/todo-item.constructable.js";
 
 const EXTRA_CSS_TO_ADOPT = window.extraCssToAdopt;
-
 class TodoItem extends HTMLElement {
     static get observedAttributes() {
         return ["id", "title", "completed"];
@@ -55,11 +54,8 @@ class TodoItem extends HTMLElement {
                         this.item.id = `todo-item-${this.id}`;
                     break;
                 case "index":
-                    if (this.index !== undefined) {
-                        this.item.classList.add(`li-${this.index}`);
-                        this.displayTodo.classList.add(`view-${this.index}`);
+                    if (this.index !== undefined)
                         this.maybeUpdateCss();
-                    }
                     break;
                 case "title":
                     if (this.title !== undefined) {
@@ -159,16 +155,13 @@ class TodoItem extends HTMLElement {
     }
 
     maybeUpdateCss() {
-        if (!EXTRA_CSS_TO_ADOPT)
-            return;
-        const styleSheetIndex = this.index % EXTRA_CSS_TO_ADOPT.length;
-        const styleSheetToAdopt = EXTRA_CSS_TO_ADOPT[styleSheetIndex];
-        if (styleSheetToAdopt)
-            this.shadow.adoptedStyleSheets.push(styleSheetToAdopt);
+        if (EXTRA_CSS_TO_ADOPT)
+            this.shadow.adoptedStyleSheets.push(EXTRA_CSS_TO_ADOPT);
     }
 
     connectedCallback() {
         this.update("id", "title", "completed", "index");
+        this.maybeUpdateCss();
 
         this.keysListeners.push(
             useKeyListener({

diff --git a/...xamples/javascript-web-components-complex/dist/components/todo-item/todo-item.template.js b/...xamples/javascript-web-components-complex/dist/components/todo-item/todo-item.template.js
@@ -2,8 +2,8 @@ const template = document.createElement("template");
 
 template.id = "todo-item-template";
 template.innerHTML = `
-    <li class="targeted todo-item">
-        <div class="targeted display-todo">
+    <li class="todo-item">
+        <div class="display-todo">
             <label for="toggle-todo" class="toggle-todo-label visually-hidden">Toggle Todo</label>
             <input id="toggle-todo" class="toggle-todo-input" type="checkbox" />
             <span class="todo-item-text truncate-singleline" tabindex="0">Placeholder Text</span>