perf: add js-framework-benchmark tests

packages/@lwc/perf-benchmarks-components/src/benchmark/jsFrameworkBenchmarkTable/jsFrameworkBenchmarkTable.html

@@ -0,0 +1,60 @@
+<!--
+Copyright (c) 2024, Salesforce, Inc.
+All rights reserved.
+SPDX-License-Identifier: MIT
+For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+-->
+<!--
+  This should be kept in sync with
+  https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/lwc/src/bench/app/app.js
+-->
+<template lwc:render-mode="light">
+    <div class="jumbotron">
+        <div class="row">
+            <div class="col-md-6">
+                <h1>LWC</h1>
+            </div>
+            <div class="col-md-6">
+                <div class="row">
+                    <div class="col-sm-6 smallpad">
+                        <button type="button" class="btn btn-primary btn-block" id="run" onclick={run}>Create 1,000 rows</button>
+                    </div>
+                    <div class="col-sm-6 smallpad">
+                        <button type="button" class="btn btn-primary btn-block" id="runlots" onclick={runLots}>Create 10,000 rows</button>
+                    </div>
+                    <div class="col-sm-6 smallpad">
+                        <button type="button" class="btn btn-primary btn-block" id="add" onclick={add}>Append 1,000 rows</button>
+                    </div>
+                    <div class="col-sm-6 smallpad">
+                        <button type="button" class="btn btn-primary btn-block" id="update" onclick={update}>Update every 10th row</button>
+                    </div>
+                    <div class="col-sm-6 smallpad">
+                        <button type="button" class="btn btn-primary btn-block" id="clear" onclick={clear}>Clear</button>
+                    </div>
+                    <div class="col-sm-6 smallpad">
+                        <button type="button" class="btn btn-primary btn-block" id="swaprows" onclick={swapRows}>Swap Rows</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <table class="table table-hover table-striped test-data">
+        <tbody>
+        <template for:each={rows} for:item="row">
+            <tr key={row.id} class={row.className} data-id={row.id} onclick={handleRowClick}>
+                <td class="col-md-1">{row.id}</td>
+                <td class="col-md-4" data-interaction="select">
+                    <a data-interaction="select">{row.label}</a>
+                </td>
+                <td class="col-md-1">
+                    <a data-interaction="remove">
+                        <span data-interaction="remove" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                    </a>
+                </td>
+                <td class="col-md-6"></td>
+            </tr>
+        </template>
+        </tbody>
+    </table>
+    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+</template>

packages/@lwc/perf-benchmarks-components/src/benchmark/jsFrameworkBenchmarkTable/jsFrameworkBenchmarkTable.js

@@ -0,0 +1,141 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+// This should be kept in sync with
+// https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/lwc/src/bench/app/app.js
+import { LightningElement, track } from 'lwc';
+
+let id = 1;
+
+function _random(max) {
+    return Math.round(Math.random() * 1000) % max;
+}
+
+export default class App extends LightningElement {
+    static renderMode = 'light';
+    @track rows = [];
+    selected;
+
+    run() {
+        this.rows = this.buildData();
+        this.selected = undefined;
+    }
+    runLots() {
+        this.rows = this.buildData(10000);
+        this.selected = undefined;
+    }
+    delete(id) {
+        const idx = this.rows.findIndex((row) => row.id === id);
+        this.rows.splice(idx, 1);
+    }
+    add() {
+        this.rows.push(...this.buildData(1000));
+    }
+    update() {
+        for (let i = 0, len = this.rows.length; i < len; i += 10) {
+            this.rows[i].label += ' !!!';
+        }
+    }
+    select(id) {
+        this.selected = id;
+    }
+    clear() {
+        this.rows.length = 0;
+        this.selected = undefined;
+    }
+    swapRows() {
+        if (this.rows.length > 998) {
+            const row = this.rows[1];
+            this.rows[1] = this.rows[998];
+            this.rows[998] = row;
+        }
+    }
+    handleRowClick(evt) {
+        const { target, currentTarget } = evt;
+        const { interaction } = target.dataset;
+        const { id } = currentTarget.dataset;
+
+        if (interaction === 'select') {
+            this.select(parseInt(id, 10));
+        } else if (interaction === 'remove') {
+            this.delete(parseInt(id, 10));
+        }
+    }
+    buildData(count = 1000) {
+        const 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',
+        ];
+        const colours = [
+            'red',
+            'yellow',
+            'blue',
+            'green',
+            'pink',
+            'brown',
+            'purple',
+            'brown',
+            'white',
+            'black',
+            'orange',
+        ];
+        const nouns = [
+            'table',
+            'chair',
+            'house',
+            'bbq',
+            'desk',
+            'car',
+            'pony',
+            'cookie',
+            'sandwich',
+            'burger',
+            'pizza',
+            'mouse',
+            'keyboard',
+        ];
+        const data = [];
+        const component = this; // eslint-disable-line @typescript-eslint/no-this-alias
+        for (let i = 0; i < count; i++) {
+            data.push({
+                id: id++,
+                label:
+                    adjectives[_random(adjectives.length)] +
+                    ' ' +
+                    colours[_random(colours.length)] +
+                    ' ' +
+                    nouns[_random(nouns.length)],
+                get className() {
+                    return this.id === component.selected ? 'danger' : '';
+                },
+            });
+        }
+        return data;
+    }
+}

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/js-framework-benchmark/append-rows-1k.benchmark.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { runJsFrameworkBenchmark, WARMUP_COUNT } from '../../../utils/runJsFrameworkBenchmark.js';
+
+// Based on https://github.com/krausest/js-framework-benchmark/blob/6c9f43f/webdriver-ts/src/benchmarksPuppeteer.ts
+// See `benchAppendToManyRows()`
+runJsFrameworkBenchmark(
+    `dom/js-framework-benchmark/append-rows/10k`,
+    { benchmark, before, run, after },
+    {
+        async warmup({ run, clear }) {
+            for (let i = 0; i < WARMUP_COUNT; i++) {
+                await run();
+                await clear();
+            }
+            await run();
+        },
+        async execute({ add }) {
+            await add();
+        },
+    }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/js-framework-benchmark/clear-rows-1k.benchmark.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { runJsFrameworkBenchmark, WARMUP_COUNT } from '../../../utils/runJsFrameworkBenchmark.js';
+
+// Based on https://github.com/krausest/js-framework-benchmark/blob/6c9f43f/webdriver-ts/src/benchmarksPuppeteer.ts
+// See `benchClear()`
+runJsFrameworkBenchmark(
+    `dom/js-framework-benchmark/clear-rows/10k`,
+    { benchmark, before, run, after },
+    {
+        async warmup({ run, clear }) {
+            for (let i = 0; i < WARMUP_COUNT; i++) {
+                await run();
+                await clear();
+            }
+            await run();
+        },
+        async execute({ clear }) {
+            await clear();
+        },
+    }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/js-framework-benchmark/create-rows-10k.benchmark.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { runJsFrameworkBenchmark, WARMUP_COUNT } from '../../../utils/runJsFrameworkBenchmark.js';
+
+// Based on https://github.com/krausest/js-framework-benchmark/blob/6c9f43f/webdriver-ts/src/benchmarksPuppeteer.ts
+// See `benchRunBig()`
+runJsFrameworkBenchmark(
+    `dom/js-framework-benchmark/create-rows/10k`,
+    { benchmark, before, run, after },
+    {
+        async warmup({ runLots, clear }) {
+            for (let i = 0; i < WARMUP_COUNT; i++) {
+                await runLots();
+                await clear();
+            }
+        },
+        async execute({ runLots }) {
+            await runLots();
+        },
+    }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/js-framework-benchmark/create-rows-1k.benchmark.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { runJsFrameworkBenchmark, WARMUP_COUNT } from '../../../utils/runJsFrameworkBenchmark.js';
+
+// Based on https://github.com/krausest/js-framework-benchmark/blob/6c9f43f/webdriver-ts/src/benchmarksPuppeteer.ts
+// See `benchRun()`
+runJsFrameworkBenchmark(
+    `dom/js-framework-benchmark/create-rows/1k`,
+    { benchmark, before, run, after },
+    {
+        async warmup({ run, clear }) {
+            for (let i = 0; i < WARMUP_COUNT; i++) {
+                await run();
+                await clear();
+            }
+        },
+        async execute({ run }) {
+            await run();
+        },
+    }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/js-framework-benchmark/partial-update-1k.benchmark.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { runJsFrameworkBenchmark, WARMUP_COUNT } from '../../../utils/runJsFrameworkBenchmark.js';
+
+// Based on https://github.com/krausest/js-framework-benchmark/blob/6c9f43f/webdriver-ts/src/benchmarksPuppeteer.ts
+// See `benchUpdate()`
+runJsFrameworkBenchmark(
+    `dom/js-framework-benchmark/partial-update/1k`,
+    { benchmark, before, run, after },
+    {
+        async warmup({ run, update }) {
+            await run();
+            for (let i = 0; i < WARMUP_COUNT; i++) {
+                await update();
+            }
+        },
+        async execute({ update }) {
+            await update();
+        },
+    }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/js-framework-benchmark/remove-row-1k.benchmark.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { runJsFrameworkBenchmark, WARMUP_COUNT } from '../../../utils/runJsFrameworkBenchmark.js';
+
+const rowsToSkip = 4;
+
+// Based on https://github.com/krausest/js-framework-benchmark/blob/6c9f43f/webdriver-ts/src/benchmarksPuppeteer.ts
+// See `benchRemove()`
+runJsFrameworkBenchmark(
+    `dom/js-framework-benchmark/remove-row/1k`,
+    { benchmark, before, run, after },
+    {
+        async warmup({ run, remove }) {
+            await run();
+            for (let i = 0; i < WARMUP_COUNT; i++) {
+                const rowToClick = WARMUP_COUNT - i + rowsToSkip;
+                await remove(rowToClick);
+            }
+        },
+        async execute({ remove }) {
+            await remove(rowsToSkip);
+        },
+    }
+);

packages/@lwc/perf-benchmarks/src/__benchmarks__/engine-dom/js-framework-benchmark/replace-rows-1k.benchmark.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { runJsFrameworkBenchmark, WARMUP_COUNT } from '../../../utils/runJsFrameworkBenchmark.js';
+
+// Based on https://github.com/krausest/js-framework-benchmark/blob/6c9f43f/webdriver-ts/src/benchmarksPuppeteer.ts
+// See `benchReplaceAll()`
+runJsFrameworkBenchmark(
+    `dom/js-framework-benchmark/replace-rows/1k`,
+    { benchmark, before, run, after },
+    {
+        async warmup({ run }) {
+            for (let i = 0; i < WARMUP_COUNT; i++) {
+                await run();
+            }
+        },
+        async execute({ run }) {
+            await run();
+        },
+    }
+);