[test] add lit case

vifjs · Mar 30, 2024 · df0ee7b · df0ee7b
1 parent 099aa84
commit df0ee7b
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 34 deletions.
diff --git a/src/directives/reconcile.md b/src/directives/reconcile.md
diff --git a/tests/garbage/index.html b/tests/garbage/index.html
@@ -6,7 +6,7 @@
         <title>Garbage testing</title>
         <!-- <script src="../../../dist/vif.js"></script> -->
         <!-- <script src="../../dist/iife/vif.js" defer></script> -->
-        <script type="module" src="./components.js" defer></script>
+        <script type="module" src="./lit.js" defer></script>
     </head>
     <body>
         <h1>Primary tests here</h1>
@@ -22,6 +22,7 @@ <h1>Primary tests here</h1>
                     <p x-text="item().label">number</p>
                 </template>
             </x-app>
+            <lit-app></lit-app>
         </main>
     </body>
 </html>
diff --git a/tests/garbage/lit.js b/tests/garbage/lit.js
@@ -0,0 +1,104 @@
+import {
+    LitElement,
+    html,
+} from "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";
+
+let id = 0;
+
+function _random(max) {
+    return Math.round(Math.random() * 1000) % max;
+}
+
+function buildData(count = 1000) {
+    var adjectives = [
+        "pretty",
+        "large",
+        "big",
+        "small",
+        "tall",
+        "short",
+        "long",
+        "handsome",
+        "plain",
+        "quaint",
+        "clean",
+        "elegant",
+        "easy",
+        "angry",
+        "crazy",
+        "helpful",
+        "mushy",
+        "odd",
+        "unsightly",
+        "adorable",
+        "important",
+        "inexpensive",
+        "cheap",
+        "expensive",
+        "fancy",
+    ];
+    var colours = [
+        "red",
+        "yellow",
+        "blue",
+        "green",
+        "pink",
+        "brown",
+        "purple",
+        "brown",
+        "white",
+        "black",
+        "orange",
+    ];
+    var nouns = [
+        "table",
+        "chair",
+        "house",
+        "bbq",
+        "desk",
+        "car",
+        "pony",
+        "cookie",
+        "sandwich",
+        "burger",
+        "pizza",
+        "mouse",
+        "keyboard",
+    ];
+    var data = [];
+    for (var i = 0; i < count; i++)
+        data.push({
+            id: id++,
+            label:
+                adjectives[_random(adjectives.length)] +
+                " " +
+                colours[_random(colours.length)] +
+                " " +
+                nouns[_random(nouns.length)],
+        });
+    return data;
+}
+
+class LitApp extends LitElement {
+    static properties = {
+        array: {},
+    };
+    constructor() {
+        super();
+        this.array = [];
+        setTimeout(() => {
+            this.array = this.array.length ? [] : buildData(10000);
+        }, 1000);
+        setTimeout(() => {
+            this.array = this.array.length ? [] : buildData(10000);
+        }, 2000);
+        setTimeout(() => {
+            this.array = this.array.length ? [] : buildData(10000);
+        }, 3000);
+    }
+    render() {
+        return html`${this.array.map((item) => html`<p>${item.label}</p>`)}`;
+    }
+}
+
+customElements.define("lit-app", LitApp);
diff --git a/tests/garbage/components.js → tests/garbage/vif.js b/tests/garbage/components.js → tests/garbage/vif.js