feat(scripts-tasks): make perf test setup generic

.github/CODEOWNERS

@@ -90,6 +90,7 @@ scripts/ts-node @microsoft/fluentui-react-build
 scripts/update-release-notes @microsoft/fluentui-react-build
 scripts/utils @microsoft/fluentui-react-build
 scripts/webpack @microsoft/fluentui-react-build
+scripts/perf-test-flamegrill @microsoft/fluentui-react-build
 
 #### Fluent UI N*
 packages/a11y-rules @microsoft/fluentui-northstar

apps/perf-test-react-components/config/perf-test/index.ts

@@ -0,0 +1,21 @@
+import * as path from 'path';
+import { scenarioIterations } from './scenarioIterations';
+import { scenarioRenderTypes } from './scenarioRenderTypes';
+import { scenarioNames } from './scenarioNames';
+
+const projectRoot = path.join(__dirname, '../../');
+const projectRootPath = 'apps/perf-test-react-components';
+const outDir = path.join(projectRoot, './dist');
+const tempDir = path.join(projectRoot, './logfiles');
+const scenariosSrcDirPath = path.join(projectRoot, './src/scenarios');
+
+export const config = {
+  projectName: '@fluentui/react-components',
+  projectRootPath,
+  outDir,
+  tempDir,
+  scenariosSrcDirPath,
+  scenarioIterations,
+  scenarioRenderTypes,
+  scenarioNames,
+};

apps/perf-test-react-components/src/scenarioIterations.ts → apps/perf-test-react-components/config/perf-test/scenarioIterations.ts

@@ -1,5 +1,6 @@
+import type { ScenarioIterations } from '@fluentui/scripts-tasks';
 // You don't have to add scenarios to this structure unless you want their iterations to differ from the default.
-export const scenarioIterations = {
+export const scenarioIterations: ScenarioIterations = {
   MakeStyles: 50000,
   FluentProviderWithTheme: 10,
 };

apps/perf-test-react-components/src/scenarioNames.ts → apps/perf-test-react-components/config/perf-test/scenarioNames.ts

@@ -1,3 +1,4 @@
+import type { ScenarioNames } from '@fluentui/scripts-tasks';
 // You don't have to add scenarios to this structure unless you want their display name to differ
 // from their scenario name.
-export const scenarioNames = {};
+export const scenarioNames: ScenarioNames = {};

apps/perf-test-react-components/src/scenarioRenderTypes.ts → apps/perf-test-react-components/config/perf-test/scenarioRenderTypes.ts

@@ -1,3 +1,4 @@
+import { AllRenderTypes, ScenarioRenderTypes } from '@fluentui/scripts-tasks';
 /**
  * You don't have to add scenarios to this structure unless
  * you want their render types to differ from the default (mount only).
@@ -8,9 +9,6 @@
  * memoization logic help avoid certain code paths.
  */
 
-const AllRenderTypes = ['mount', 'virtual-rerender', 'virtual-rerender-with-unmount'];
-export const DefaultRenderTypes = ['mount'];
-
-export const scenarioRenderTypes = {
+export const scenarioRenderTypes: ScenarioRenderTypes = {
   FluentProviderWithTheme: AllRenderTypes,
 };

apps/perf-test-react-components/just.config.ts

@@ -1,7 +1,8 @@
-import { getPerfRegressions } from './tasks/perf-test';
-import { preset, task, series } from '@fluentui/scripts-tasks';
+import { preset, task, series, getPerfRegressions } from '@fluentui/scripts-tasks';
+
+import { config } from './config/perf-test';
 
 preset();
 
-task('run-perf-test', getPerfRegressions);
+task('run-perf-test', () => getPerfRegressions(config));
 task('perf-test', series('build', 'bundle', 'run-perf-test'));

apps/perf-test-react-components/package.json

@@ -17,6 +17,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
+    "@fluentui/scripts-perf-test-flamegrill": "*",
     "@griffel/core": "^1.9.0",
     "@fluentui/react-avatar": "^9.4.6",
     "@fluentui/react-button": "^9.3.6",
@@ -27,9 +28,6 @@
     "@fluentui/react-spinbutton": "^9.2.6",
     "@fluentui/react-theme": "^9.1.7",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "flamegrill": "0.2.0",
-    "lodash": "^4.17.15",
-    "querystring": "^0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "tslib": "^2.1.0"

apps/perf-test-react-components/src/app.tsx

@@ -0,0 +1,10 @@
+import { loadScenarios, render } from '@fluentui/scripts-perf-test-flamegrill';
+
+bootstrap();
+
+function bootstrap() {
+  const reqContext = require.context('./scenarios/', false, /^\.\/[^\.]*\.(j|t)sx?$/);
+  const scenarios = loadScenarios(reqContext);
+
+  render(scenarios);
+}

apps/perf-test-react-components/webpack.config.js

@@ -8,7 +8,7 @@ const { resources } = require('@fluentui/scripts-webpack');
 // TODO: Should root cause why this only works as a serve config.
 module.exports = resources.createServeConfig(
   {
-    entry: './src/index.scenarios.tsx',
+    entry: './src/app.tsx',
     mode: 'production',
     output: {
       filename: 'perf-test.js',

apps/perf-test/config/perf-test/index.ts

@@ -0,0 +1,24 @@
+import * as path from 'path';
+import { scenarioIterations } from './scenarioIterations';
+import { scenarioRenderTypes } from './scenarioRenderTypes';
+import { scenarioNames } from './scenarioNames';
+
+const projectRoot = path.join(__dirname, '../../');
+const projectRootPath = 'apps/perf-test';
+const outDir = path.join(projectRoot, './dist');
+const tempDir = path.join(projectRoot, './logfiles');
+const scenariosSrcDirPath = path.join(projectRoot, './src/scenarios');
+
+export const config = {
+  projectName: '@fluentui/react',
+  projectRootPath,
+  outDir,
+  tempDir,
+  scenarioIterations,
+  scenarioRenderTypes,
+  scenariosSrcDirPath,
+  excludeScenarios: [
+    // TeachingBubble perf test is hanging after puppeteer pin to v19. Disabling for now to unblock SWC migration work.
+    'TeachingBubble',
+  ],
+};

apps/perf-test/src/scenarioIterations.ts → apps/perf-test/config/perf-test/scenarioIterations.ts

@@ -1,5 +1,7 @@
+import type { ScenarioIterations } from '@fluentui/scripts-tasks';
+
 // You don't have to add scenarios to this structure unless you want their iterations to differ from the default.
-export const scenarioIterations = {
+export const scenarioIterations: ScenarioIterations = {
   DocumentCardTitle: 1000,
   Breadcrumb: 1000,
   CommandBar: 1000,

apps/perf-test/src/scenarioNames.ts → apps/perf-test/config/perf-test/scenarioNames.ts

@@ -1,6 +1,8 @@
+import type { ScenarioNames } from '@fluentui/scripts-tasks';
+
 // You don't have to add scenarios to this structure unless you want their display name to differ
 // from their scenario name.
-export const scenarioNames = {
+export const scenarioNames: ScenarioNames = {
   DetailsRowFast: 'DetailsRow (fast icons)',
   DetailsRowNoStyles: 'DetailsRow without styles',
   DocumentCardTitle: 'DocumentCardTitle with truncation',

apps/perf-test/src/scenarioRenderTypes.ts → apps/perf-test/config/perf-test/scenarioRenderTypes.ts

@@ -1,3 +1,5 @@
+import { ScenarioRenderTypes, AllRenderTypes } from '@fluentui/scripts-tasks';
+
 /**
  * You don't have to add scenarios to this structure unless
  * you want their render types to differ from the default (mount only).
@@ -8,10 +10,7 @@
  * memoization logic help avoid certain code paths.
  */
 
-const AllRenderTypes = ['mount', 'virtual-rerender', 'virtual-rerender-with-unmount'];
-export const DefaultRenderTypes = ['mount'];
-
-export const scenarioRenderTypes = {
+export const scenarioRenderTypes: ScenarioRenderTypes = {
   ThemeProvider: AllRenderTypes,
   GroupedList: AllRenderTypes,
   GroupedListV2: AllRenderTypes,

apps/perf-test/just.config.ts

@@ -1,7 +1,8 @@
-import { getPerfRegressions } from './tasks/perf-test';
-import { preset, task, series } from '@fluentui/scripts-tasks';
+import { preset, task, series, getPerfRegressions } from '@fluentui/scripts-tasks';
+
+import { config } from './config/perf-test';
 
 preset();
 
-task('run-perf-test', getPerfRegressions);
+task('run-perf-test', () => getPerfRegressions(config));
 task('perf-test', series('build', 'bundle', 'run-perf-test'));

apps/perf-test/package.json

@@ -17,12 +17,10 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
+    "@fluentui/scripts-perf-test-flamegrill": "*",
     "@fluentui/example-data": "^8.4.7",
     "@fluentui/react": "^8.106.10",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "flamegrill": "0.2.0",
-    "lodash": "^4.17.15",
-    "querystring": "^0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "tslib": "^2.1.0"

apps/perf-test/src/app.tsx

@@ -0,0 +1,14 @@
+import { loadScenarios, render } from '@fluentui/scripts-perf-test-flamegrill';
+
+import { initializeIcons } from '@fluentui/react/lib/Icons';
+
+bootstrap();
+
+function bootstrap() {
+  const reqContext = require.context('./scenarios/', false, /^\.\/[^\.]*\.(j|t)sx?$/);
+  const scenarios = loadScenarios(reqContext);
+
+  initializeIcons();
+
+  render(scenarios);
+}