Skip to content

Commit 20e2f64

Browse files
radium-vradium-v
authored
chore: restructure bench package with variant-based benchmarks and fast-html support (#7272)
# Pull Request ## 📖 Description Restructures the bench package to support multiple implementation variants per benchmark scenario. Each scenario (e.g. `basic`, `bind-text`, `repeat-create`) now contains subdirectories for each variant: `fe/` (FAST Element), `fhtml/` (fast-html client-side), and `fhtml-hydrate/` (fast-html SSR hydration). This replaces the previous flat structure where benchmarks only targeted FAST Element. Several outdated or redundant benchmarks (`observable`, `render`, `repeat-reverse`, `repeat-shift`, `when-basic`, `when-conditional`, `when-switch`) and the shared `utilities.ts` helper have been removed in favor of focused, self-contained scenarios. Other changes: - Adds `@microsoft/fast-html` as a dependency for the bench package to support fast-html scenarios. - Renames script commands to avoid conflicts with CI: - `build` → `bundle` - `test` → `bench` - Adds a `signalDone()` harness helper for benchmarks that manage their own DOM setup (hydration scenarios). - Adds a Vite `@bench-ssr` HTML directive for repeating SSR markup in `index.html` files. - Improves benchmark runner output with per-iteration progress and median timing in the summary. ## 📑 Test Plan Benchmarks have been run locally with `BENCH_DIST=true npm run bench` and all scenarios complete successfully. ## ✅ Checklist ### General - [x] I have tested my changes. - [x] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.
1 parent a5fcea8 commit 20e2f64

File tree

92 files changed

+1742
-802
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+1742
-802
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/bench/README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ npm install
2525
From this folder (`packages/bench`):
2626

2727
```bash
28-
npm run test
28+
npm run bench
2929
```
3030

3131
This uses:
@@ -39,8 +39,8 @@ This uses:
3939
Build once, then run tests with `BENCH_DIST=true`:
4040

4141
```bash
42-
npm run build # builds Vite output to `server/dist`
43-
BENCH_DIST=true npm run test
42+
npm run bundle # builds Vite output to `server/dist`
43+
BENCH_DIST=true npm run bench
4444
```
4545

4646
This uses:
@@ -57,23 +57,23 @@ Default iterations per benchmark are `10`.
5757
Override with `BENCH_ITERATIONS`:
5858

5959
```bash
60-
BENCH_ITERATIONS=50 npm run test
60+
BENCH_ITERATIONS=50 npm run bench
6161
```
6262

6363
You can combine with dist mode:
6464

6565
```bash
66-
BENCH_DIST=true BENCH_ITERATIONS=50 npm run test
66+
BENCH_DIST=true BENCH_ITERATIONS=50 npm run bench
6767
```
6868

6969
## Running from repo root
7070

7171
You can run workspace scripts without changing directories:
7272

7373
```bash
74-
npm run test -w @microsoft/fast-bench
75-
npm run build -w @microsoft/fast-bench
76-
BENCH_DIST=true npm run test -w @microsoft/fast-bench
74+
npm run bench -w @microsoft/fast-bench
75+
npm run bundle -w @microsoft/fast-bench
76+
BENCH_DIST=true npm run bench -w @microsoft/fast-bench
7777
```
7878

7979
## Output

‎packages/bench/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"build": "vite build",
7+
"bundle": "vite build",
88
"serve": "vite --clearScreen false",
99
"start": "node server/server.mjs",
10-
"test": "playwright test"
10+
"bench": "node src/bench.ts"
1111
},
1212
"dependencies": {
13-
"@microsoft/fast-element": "*"
13+
"@microsoft/fast-element": "*",
14+
"@microsoft/fast-html": "*"
1415
}
1516
}

‎packages/bench/playwright.config.ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎packages/bench/server/server.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const MIME_TYPES = {
1717
};
1818

1919
if (!existsSync(distDir)) {
20-
console.error(`dist/ not found. Run "npm run build" first.`);
20+
console.error(`dist/ not found. Run "npm run bundle" first.`);
2121
process.exit(1);
2222
}
2323

‎packages/bench/src/attr-reflect/fe/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>attr-reflect / fast-element</title>
7+
</head>
8+
<body>
9+
<div id="container"></div>
10+
<script type="module" src="./main.ts"></script>
11+
</body>
12+
</html>

‎packages/bench/src/attr-reflect/fe/main.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { attr, FASTElement, html } from "@microsoft/fast-element";
2+
import { runBenchmark } from "../../harness.js";
3+
4+
class AttrElement extends FASTElement {
5+
@attr label: string = "";
6+
@attr count: string = "0";
7+
@attr({ mode: "boolean" }) active: boolean = false;
8+
}
9+
AttrElement.define({
10+
name: "bench-attr",
11+
template: html`
12+
<span>${x => x.label} (${x => x.count})</span>
13+
`,
14+
});
15+
16+
let id = 0;
17+
18+
runBenchmark(() => {
19+
const el = document.createElement("bench-attr");
20+
el.setAttribute("label", `item-${++id}`);
21+
el.setAttribute("count", String(id));
22+
el.setAttribute("active", "");
23+
return el;
24+
});

‎packages/bench/src/attr-reflect/fhtml-hydrate/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>attr-reflect / fast-html (hydrate)</title>
7+
</head>
8+
<body>
9+
<div id="container">
10+
<!-- @bench-ssr count="100" -->
11+
<div>
12+
<bench-attr needs-hydration label="item-1" count="1" active>
13+
<template shadowrootmode="open"><span><!--fe-b$$start$$0$$t0$$fe-b-->item-1<!--fe-b$$end$$0$$t0$$fe-b--> (<!--fe-b$$start$$1$$t0$$fe-b-->1<!--fe-b$$end$$1$$t0$$fe-b-->)</span></template>
14+
</bench-attr>
15+
</div>
16+
<!-- @/bench-ssr -->
17+
</div>
18+
<f-template name="bench-attr">
19+
<template><span>{{label}} ({{count}})</span></template>
20+
</f-template>
21+
<script type="module" src="./main.ts"></script>
22+
</body>
23+
</html>

‎packages/bench/src/attr-reflect/fhtml-hydrate/main.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { attr, FASTElement } from "@microsoft/fast-element";
2+
import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
3+
import { signalDone } from "../../harness.js";
4+
5+
class AttrElement extends FASTElement {
6+
@attr label: string = "";
7+
@attr count: string = "0";
8+
@attr({ mode: "boolean" }) active: boolean = false;
9+
}
10+
11+
RenderableFASTElement(AttrElement).defineAsync({
12+
name: "bench-attr",
13+
templateOptions: "defer-and-hydrate",
14+
});
15+
16+
performance.mark("bench-start");
17+
18+
TemplateElement.config({
19+
hydrationComplete() {
20+
performance.mark("bench-end");
21+
performance.measure("bench", "bench-start", "bench-end");
22+
signalDone();
23+
},
24+
}).define({ name: "f-template" });

‎packages/bench/src/attr-reflect/fhtml/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>attr-reflect / fast-html</title>
7+
</head>
8+
<body>
9+
<div id="container"></div>
10+
<f-template name="bench-attr">
11+
<template><span>{{label}} ({{count}})</span></template>
12+
</f-template>
13+
<script type="module" src="./main.ts"></script>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)