chore(web-components): add perf testing benchmarks

.gitignore

@@ -160,3 +160,10 @@ rush.json
 
 # tsdoc
 tsdoc-metadata.json
+
+# benchmarking
+.tensile/
+
+# tools cache
+.swc
+.nx/cache

change/@fluentui-web-components-75bb133a-ee8d-445e-8e69-cb61a4b58ae9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: setup perf benchmarking in web components",
+  "packageName": "@fluentui/web-components",
+  "email": "=",
+  "dependentChangeType": "patch"
+}

package.json

@@ -523,6 +523,7 @@
           "@fluentui/web-components"
         ],
         "dependencies": [
+          "@fluentui/tokens",
           "@microsoft/fast-element",
           "@microsoft/api-extractor",
           "typescript"

packages/web-components/.npmignore

@@ -3,6 +3,7 @@
 # Tests
 *.spec.*
 *.test.*
+*.bench.*
 coverage/
 __fixtures__
 __mocks__

packages/web-components/docs/api-report.md

@@ -422,6 +422,29 @@ export const BadgeStyles: ElementStyles;
 // @public (undocumented)
 export const BadgeTemplate: ElementViewTemplate<Badge>;
 
+// @public
+export class BaseTabs extends FASTElement {
+    activeid: string;
+    // @internal (undocumented)
+    activeidChanged(oldValue: string, newValue: string): void;
+    activetab: HTMLElement;
+    adjust(adjustment: number): void;
+    // @internal (undocumented)
+    connectedCallback(): void;
+    orientation: TabsOrientation;
+    // @internal (undocumented)
+    orientationChanged(): void;
+    protected setTabs(): void;
+    // @internal (undocumented)
+    tabpanels: HTMLElement[];
+    // @internal (undocumented)
+    tabpanelsChanged(): void;
+    // @internal (undocumented)
+    tabs: HTMLElement[];
+    // @internal (undocumented)
+    tabsChanged(): void;
+}
+
 // @public (undocumented)
 export const borderRadiusCircular = "--borderRadiusCircular";
 
@@ -2633,30 +2656,14 @@ export const TabPanelStyles: ElementStyles;
 // @public (undocumented)
 export const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
 
-// @public
-export class Tabs extends FASTElement {
-    activeid: string;
-    // @internal (undocumented)
+// @public (undocumented)
+export class Tabs extends BaseTabs {
+    // (undocumented)
     activeidChanged(oldValue: string, newValue: string): void;
-    activetab: HTMLElement;
-    adjust(adjustment: number): void;
     appearance?: TabsAppearance;
-    // @internal (undocumented)
-    connectedCallback(): void;
     disabled?: boolean;
-    orientation: TabsOrientation;
-    // @internal (undocumented)
-    orientationChanged(): void;
-    // (undocumented)
-    protected setTabs: () => void;
     size?: TabsSize;
-    // @internal (undocumented)
-    tabpanels: HTMLElement[];
-    // @internal (undocumented)
-    tabpanelsChanged(): void;
-    // @internal (undocumented)
-    tabs: HTMLElement[];
-    // @internal (undocumented)
+    // (undocumented)
     tabsChanged(): void;
 }
 

packages/web-components/package.json

@@ -178,7 +178,9 @@
   "scripts": {
     "tsc": "tsc",
     "api-extractor": "api-extractor",
+    "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
     "compile": "node ./scripts/compile",
+    "compile:benchmark": "rollup -c rollup.bench.js",
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
     "build": "yarn compile && rollup -c && yarn generate-api",
@@ -197,14 +199,15 @@
   "devDependencies": {
     "@microsoft/api-extractor": "7.31.2",
     "@storybook/html": "6.5.15",
+    "@tensile-perf/web-components": "~0.1.13",
     "rimraf": "^3.0.2",
     "typescript": "4.7.4"
   },
   "dependencies": {
     "@microsoft/fast-element": "2.0.0-beta.26",
     "@microsoft/fast-foundation": "3.0.0-alpha.31",
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "@fluentui/tokens": "1.0.0-alpha.2",
+    "@fluentui/tokens": "1.0.0-alpha.16",
     "tslib": "^2.1.0"
   },
   "beachball": {

packages/web-components/rollup.bench.js

@@ -0,0 +1,21 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import esbuild from 'rollup-plugin-esbuild';
+import commonJS from 'rollup-plugin-commonjs';
+
+const plugins = [nodeResolve({ browser: true }), commonJS(), esbuild({ tsconfig: './tsconfig.json' })];
+
+export default [
+  {
+    input: {
+      tokens: './src/utils/benchmark-dependencies/tokens.ts',
+    },
+    output: [
+      {
+        dir: './.tensile/benchmark-dependencies',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+  },
+];

packages/web-components/scripts/run-benchmarks.js

@@ -0,0 +1,45 @@
+import fs from 'fs/promises';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.join(__dirname, '..');
+const tensileConfig = 'tensile.config.js';
+
+try {
+  const esmOutput = path.join(rootDir, 'dist', 'esm');
+  const items = await fs.readdir(esmOutput);
+
+  // Collect all component folders
+  const folders = [];
+  for (const item of items) {
+    const itemPath = path.join(esmOutput, item);
+    const stats = await fs.lstat(itemPath);
+    if (stats.isDirectory()) {
+      folders.push(item);
+    }
+  }
+
+  // Collect all .bench.js files
+  const benchFiles = [];
+  for (const folder of folders) {
+    const folderPath = path.join(esmOutput, folder);
+    const files = await fs.readdir(folderPath);
+    const filteredFiles = files.filter(file => file.endsWith('.bench.js'));
+    benchFiles.push(...filteredFiles.map(file => path.relative(rootDir, path.join(folderPath, file))));
+  }
+
+  // Execute tensile for each .bench.js file
+  for (const file of benchFiles) {
+    try {
+      // eslint-disable-next-line no-undef
+      execSync(`tensile --file ./${file} --config ${tensileConfig} ${process.argv[2]}`, { stdio: 'inherit' });
+    } catch (error) {
+      console.error(`Error executing command for file ${file}: ${error.message}`);
+    }
+  }
+} catch (error) {
+  console.error(`Error reading directory: ${error.message}`);
+}

packages/web-components/src/accordion-item/accordion-item.bench.ts

@@ -0,0 +1,16 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './accordion-item.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const item = document.createElement('fluent-accordion-item');
+  const text = document.createElement('span');
+  text.setAttribute('slot', 'heading');
+  text.appendChild(document.createTextNode('Accordion item'));
+  item.appendChild(text);
+  return item;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/accordion/accordion.bench.ts

@@ -0,0 +1,36 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as accordionItemDefinition } from '../accordion-item/accordion-item.definition.js';
+import { definition as accordiongDefinition } from './accordion.definition.js';
+
+accordiongDefinition.define(FluentDesignSystem.registry);
+accordionItemDefinition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const accordion = document.createElement('fluent-accordion');
+  const accordionItem = document.createElement('fluent-accordion-item');
+  const accordionItem2 = document.createElement('fluent-accordion-item');
+  const accordionItem3 = document.createElement('fluent-accordion-item');
+  const heading = document.createElement('span');
+  const heading2 = document.createElement('span');
+  const heading3 = document.createElement('span');
+
+  heading.setAttribute('slot', 'heading');
+  heading2.setAttribute('slot', 'heading');
+  heading3.setAttribute('slot', 'heading');
+  heading.appendChild(document.createTextNode('Accordion item 1'));
+  heading2.appendChild(document.createTextNode('Accordion item 2'));
+  heading3.appendChild(document.createTextNode('Accordion item 3'));
+
+  accordionItem.appendChild(heading);
+  accordionItem2.appendChild(heading2);
+  accordionItem3.appendChild(heading3);
+
+  accordion.appendChild(accordionItem);
+  accordion.appendChild(accordionItem2);
+  accordion.appendChild(accordionItem3);
+
+  return accordion;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/anchor-button/anchor-button.bench.ts

@@ -0,0 +1,13 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './anchor-button.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const btn = document.createElement('fluent-anchor-button');
+  btn.appendChild(document.createTextNode('Anchor button'));
+  return btn;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/avatar/avatar.bench.ts

@@ -0,0 +1,12 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './avatar.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const avatar = document.createElement('fluent-avatar');
+  return avatar;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/badge/badge.bench.ts

@@ -0,0 +1,13 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './badge.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const badge = document.createElement('fluent-badge');
+  badge.appendChild(document.createTextNode('Badge'));
+  return badge;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/button/button.bench.ts

@@ -0,0 +1,13 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './button.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const button = document.createElement('fluent-button');
+  button.appendChild(document.createTextNode('Button'));
+  return button;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/checkbox/checkbox.bench.ts

@@ -0,0 +1,13 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './checkbox.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const checkbox = document.createElement('fluent-checkbox');
+  checkbox.appendChild(document.createTextNode('Checkbox'));
+  return checkbox;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/compound-button/compound-button.bench.ts

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './compound-button.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const compoundButton = document.createElement('fluent-compound-button');
+  const description = document.createElement('span');
+  description.setAttribute('slot', 'description');
+  description.appendChild(document.createTextNode('Description'));
+  compoundButton.appendChild(document.createTextNode('Button'));
+  compoundButton.appendChild(description);
+  return compoundButton;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/counter-badge/counter-badge.bench.ts

@@ -0,0 +1,13 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './counter-badge.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const counterBadge = document.createElement('fluent-counter-badge');
+  counterBadge.setAttribute('count', '5');
+  return counterBadge;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/dialog/dialog.bench.ts

@@ -0,0 +1,14 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './dialog.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const dialog = document.createElement('fluent-dialog');
+  dialog.appendChild(document.createTextNode('Dialog'));
+
+  return dialog;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/divider/divider.bench.ts

@@ -0,0 +1,12 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './divider.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const divider = document.createElement('fluent-divider');
+  return divider;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/image/image.bench.ts

@@ -0,0 +1,16 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './image.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const image = document.createElement('fluent-image');
+  const img = document.createElement('img');
+  img.setAttribute('src', 'https://picsum.photos/300/100');
+  img.setAttribute('alt', 'Placeholder image');
+  image.appendChild(img);
+  return image;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';