add perf testing with tensile

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,6 +178,7 @@
   "scripts": {
     "tsc": "tsc",
     "api-extractor": "api-extractor",
+    "benchmark": "tsc -p ./tsconfig.bench.json && npx tensile --file ./dist/esm/button/button.bench.js",
     "compile": "node ./scripts/compile",
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
@@ -197,6 +198,7 @@
   "devDependencies": {
     "@microsoft/api-extractor": "7.31.2",
     "@storybook/html": "6.5.15",
+    "@tensile-perf/web-components": "~0.1.12",
     "rimraf": "^3.0.2",
     "typescript": "4.7.4"
   },

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

@@ -0,0 +1,10 @@
+import './button.definition.js';
+
+const itemRenderer = () => {
+  const btn = document.createElement('fluent-button');
+  btn.appendChild(document.createTextNode('Fluent button'));
+  return btn;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/utils/benchmark-wrapper.ts

@@ -0,0 +1,20 @@
+import { tests } from '@tensile-perf/web-components';
+import { webLightTheme } from '@fluentui/tokens';
+import { setTheme } from '@fluentui/web-components';
+
+const testWrapper = (test: any, args: any) => {
+  setTheme(webLightTheme);
+  return test(args);
+};
+
+const wrappedTests = {};
+
+for (const testName of Object.keys(tests)) {
+  const test = tests[testName];
+
+  wrappedTests[testName] = (args: any) => {
+    return testWrapper(test, args);
+  };
+}
+
+export { wrappedTests as tests };

packages/web-components/tsconfig.bench.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "Node16",
+    "noImplicitAny": false,
+    "outDir": "dist/esm"
+  },
+  "include": ["./src/**/*.bench.ts", "./src/utils/benchmark-wrapper.ts"]
+}

packages/web-components/tsconfig.json

@@ -15,6 +15,9 @@
     {
       "path": "./tsconfig.spec.json"
     },
+    {
+      "path": "./tsconfig.bench.json"
+    },
     {
       "path": "./.storybook/tsconfig.json"
     }

packages/web-components/tsconfig.lib.json

@@ -11,5 +11,5 @@
     "types": []
   },
   "include": ["src"],
-  "exclude": ["**/*.stories.*", "**/*.test.*", "**/*.spec.*"]
+  "exclude": ["**/*.stories.*", "**/*.test.*", "**/*.spec.*", "**/*.bench.*", "src/utils/benchmark-wrapper.ts"]
 }