Tests Observable track / notify / subscribe cycle with custom element properties.
+ + + + diff --git a/packages/fast-element/src/observation/observable.bench.ts b/packages/bench/src/observable/main.ts similarity index 86% rename from packages/fast-element/src/observation/observable.bench.ts rename to packages/bench/src/observable/main.ts index d927d08039c..819e2b561d6 100644 --- a/packages/fast-element/src/observation/observable.bench.ts +++ b/packages/bench/src/observable/main.ts @@ -1,16 +1,17 @@ -import { attr, FASTElement, Observable } from "../index.js"; -import { _random, adjectives, nouns } from "../__test__/utilities.js"; +import { attr, FASTElement, Observable } from "@microsoft/fast-element"; +import { runBenchmark } from "../harness.js"; +import { _random, adjectives, nouns } from "../utilities.js"; -export class TestObservable extends FASTElement { +class TestObservable extends FASTElement { private _greetMessage: string = ""; private _name: string = ""; private _exit: boolean = false; @attr - firstName: string; + firstName!: string; @attr - lastName: string; + lastName!: string; connectedCallback(): void { super.connectedCallback(); @@ -78,5 +79,4 @@ const itemRenderer = (): HTMLElement => { return testObservable; }; -export default itemRenderer; -export { tests } from "@tensile-perf/web-components"; +runBenchmark(itemRenderer); diff --git a/packages/bench/src/render/index.html b/packages/bench/src/render/index.html new file mode 100644 index 00000000000..892ee22b5ba --- /dev/null +++ b/packages/bench/src/render/index.html @@ -0,0 +1,14 @@ + + + + + +Tests rendering a repeat list of 100 items with oneTime bindings and styles.
+ + + + diff --git a/packages/fast-element/src/templating/render.bench.ts b/packages/bench/src/render/main.ts similarity index 73% rename from packages/fast-element/src/templating/render.bench.ts rename to packages/bench/src/render/main.ts index a1657698b30..f567bf7a57e 100644 --- a/packages/fast-element/src/templating/render.bench.ts +++ b/packages/bench/src/render/main.ts @@ -1,5 +1,7 @@ -import { attr, css, FASTElement, html, oneTime, repeat } from "../index.js"; -import { data, RandomItem } from "../__test__/utilities.js"; +import { attr, css, FASTElement, html, oneTime, repeat } from "@microsoft/fast-element"; +import type { RandomItem } from "../utilities.js"; +import { data } from "../utilities.js"; +import { runBenchmark } from "../harness.js"; const xItemTemplate = htmlTests repeat directive performance when reversing a 100-item array.
+ + + + diff --git a/packages/fast-element/src/templating/repeat-basic-reverse.bench.ts b/packages/bench/src/repeat-reverse/main.ts similarity index 78% rename from packages/fast-element/src/templating/repeat-basic-reverse.bench.ts rename to packages/bench/src/repeat-reverse/main.ts index 8f9373394c0..54c1dfb178a 100644 --- a/packages/fast-element/src/templating/repeat-basic-reverse.bench.ts +++ b/packages/bench/src/repeat-reverse/main.ts @@ -1,4 +1,11 @@ -import { attr, FASTElement, html, nullableNumberConverter, repeat } from "../index.js"; +import { + attr, + FASTElement, + html, + nullableNumberConverter, + repeat, +} from "@microsoft/fast-element"; +import { runBenchmark } from "../harness.js"; class TestRepeat extends FASTElement { @attr({ @@ -28,11 +35,8 @@ TestRepeat.define({ const itemRenderer = (): HTMLElement => { const testRepeat = document.createElement("test-repeat"); - testRepeat.setAttribute("count", "100"); - return testRepeat; }; -export default itemRenderer; -export { tests } from "@tensile-perf/web-components"; +runBenchmark(itemRenderer); diff --git a/packages/bench/src/repeat-shift/index.html b/packages/bench/src/repeat-shift/index.html new file mode 100644 index 00000000000..bb4c45c2191 --- /dev/null +++ b/packages/bench/src/repeat-shift/index.html @@ -0,0 +1,14 @@ + + + + + +Tests repeat directive performance when shifting a 100-item array.
+ + + + diff --git a/packages/fast-element/src/templating/repeat-basic-shift.bench.ts b/packages/bench/src/repeat-shift/main.ts similarity index 57% rename from packages/fast-element/src/templating/repeat-basic-shift.bench.ts rename to packages/bench/src/repeat-shift/main.ts index 1972ba14a9c..f249c30febc 100644 --- a/packages/fast-element/src/templating/repeat-basic-shift.bench.ts +++ b/packages/bench/src/repeat-shift/main.ts @@ -1,13 +1,24 @@ -import { attr, FASTElement, html, nullableNumberConverter, repeat } from "../index.js"; +import { + attr, + FASTElement, + html, + nullableNumberConverter, + observable, + repeat, +} from "@microsoft/fast-element"; +import { runBenchmark } from "../harness.js"; -class TestRepeat extends FASTElement { +export class TestRepeat extends FASTElement { @attr({ mode: "fromView", converter: nullableNumberConverter, }) - count: number = 0; + count: number; + countChanged(prev: number, next: number): void { + this.items = new Array(this.count).fill("foo"); + } - public items: ArrayTests a single when conditional directive.
+ + + + diff --git a/packages/fast-element/src/templating/when-basic.bench.ts b/packages/bench/src/when-basic/main.ts similarity index 60% rename from packages/fast-element/src/templating/when-basic.bench.ts rename to packages/bench/src/when-basic/main.ts index a26fd0e4845..cbed7394c5d 100644 --- a/packages/fast-element/src/templating/when-basic.bench.ts +++ b/packages/bench/src/when-basic/main.ts @@ -1,4 +1,5 @@ -import { attr, FASTElement, html, when } from "../index.js"; +import { attr, FASTElement, html, when } from "@microsoft/fast-element"; +import { runBenchmark } from "../harness.js"; class TestWhen extends FASTElement { @attr({ @@ -19,10 +20,7 @@ TestWhen.define({ }); const itemRenderer = (): HTMLElement => { - const testWhen = document.createElement("test-when"); - - return testWhen; + return document.createElement("test-when"); }; -export default itemRenderer; -export { tests } from "@tensile-perf/web-components"; +runBenchmark(itemRenderer); diff --git a/packages/bench/src/when-conditional/index.html b/packages/bench/src/when-conditional/index.html new file mode 100644 index 00000000000..feedbb40f65 --- /dev/null +++ b/packages/bench/src/when-conditional/index.html @@ -0,0 +1,14 @@ + + + + + +Tests two opposing when blocks (if / else pattern).
+ + + + diff --git a/packages/fast-element/src/templating/when-conditional.bench.ts b/packages/bench/src/when-conditional/main.ts similarity index 67% rename from packages/fast-element/src/templating/when-conditional.bench.ts rename to packages/bench/src/when-conditional/main.ts index a4910893282..53ee5551acd 100644 --- a/packages/fast-element/src/templating/when-conditional.bench.ts +++ b/packages/bench/src/when-conditional/main.ts @@ -1,4 +1,5 @@ -import { attr, FASTElement, html, when } from "../index.js"; +import { attr, FASTElement, html, when } from "@microsoft/fast-element"; +import { runBenchmark } from "../harness.js"; class TestWhen extends FASTElement { @attr({ @@ -25,10 +26,7 @@ TestWhen.define({ }); const itemRenderer = (): HTMLElement => { - const testWhen = document.createElement("test-when"); - - return testWhen; + return document.createElement("test-when"); }; -export default itemRenderer; -export { tests } from "@tensile-perf/web-components"; +runBenchmark(itemRenderer); diff --git a/packages/bench/src/when-switch/index.html b/packages/bench/src/when-switch/index.html new file mode 100644 index 00000000000..b7b00d9c061 --- /dev/null +++ b/packages/bench/src/when-switch/index.html @@ -0,0 +1,14 @@ + + + + + +Tests multiple when blocks acting like a switch statement over numeric ranges.
+ + + + diff --git a/packages/fast-element/src/templating/when-switch.bench.ts b/packages/bench/src/when-switch/main.ts similarity index 78% rename from packages/fast-element/src/templating/when-switch.bench.ts rename to packages/bench/src/when-switch/main.ts index 4aad340b2d9..de3ec7d55a5 100644 --- a/packages/fast-element/src/templating/when-switch.bench.ts +++ b/packages/bench/src/when-switch/main.ts @@ -1,4 +1,11 @@ -import { attr, FASTElement, html, nullableNumberConverter, when } from "../index.js"; +import { + attr, + FASTElement, + html, + nullableNumberConverter, + when, +} from "@microsoft/fast-element"; +import { runBenchmark } from "../harness.js"; const emotionalTemplates = { depressed: html` @@ -27,6 +34,7 @@ const emotionalTemplates = {