From 34d618882a79b1cd65b2d4903f77caf9d5d83891 Mon Sep 17 00:00:00 2001 From: Ben Howell <48106640+behowell@users.noreply.github.com> Date: Fri, 31 Mar 2023 13:07:05 -0700 Subject: [PATCH 1/5] fix: Fix babel build error on windows (#27406) Modify the change from #27313 to use path.resolve to ensure the slashes are in the correct direction on Windows. --- scripts/babel/preset-v9.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/babel/preset-v9.js b/scripts/babel/preset-v9.js index 5734d8c36c1f8..6652270ece2b4 100644 --- a/scripts/babel/preset-v9.js +++ b/scripts/babel/preset-v9.js @@ -24,7 +24,7 @@ function createModuleResolverAliases(options) { const tsSourceRoot = aliasTuple[0]; const jsSourceRoot = tsSourceRoot.replace('src', 'lib').replace('.ts', '.js'); const aliasRegex = `^${packageName}$`; - acc[aliasRegex] = `${rootOffset}/${jsSourceRoot}`; + acc[aliasRegex] = path.resolve(rootOffset, jsSourceRoot); return acc; }, /** @type {Record} */ ({})); } From cbc6188edbe994d00fd4448c5200a85ce97d7388 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Fri, 31 Mar 2023 16:24:39 -0700 Subject: [PATCH 2/5] fix: ColorPicker preview color updated to ignore forced colors (#27394) * Updated preview color to ignore forced colors * Updated colorpicker snapshot --- ...luentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json | 7 +++++++ .../react/src/components/ColorPicker/ColorPicker.styles.ts | 1 + .../ColorPicker/__snapshots__/ColorPicker.test.tsx.snap | 1 + 3 files changed, 9 insertions(+) create mode 100644 change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json diff --git a/change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json b/change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json new file mode 100644 index 0000000000000..bf8ac8a4df3fc --- /dev/null +++ b/change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: ColorPicker preview box updated to ignore forced colors to display chosen color", + "packageName": "@fluentui/react", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/ColorPicker/ColorPicker.styles.ts b/packages/react/src/components/ColorPicker/ColorPicker.styles.ts index 235667128ac3b..2190b19358af5 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.styles.ts +++ b/packages/react/src/components/ColorPicker/ColorPicker.styles.ts @@ -55,6 +55,7 @@ export const getStyles = (props: IColorPickerStyleProps): IColorPickerStyles => height: 48, margin: '0 0 0 8px', border: '1px solid #c8c6c4', + forcedColorAdjust: 'none', }, ], flexContainer: { diff --git a/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap index 21276141f6cb0..162728310e579 100644 --- a/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap +++ b/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap @@ -1428,6 +1428,7 @@ exports[`ColorPicker renders correctly with preview 1`] = ` is-preview { border: 1px solid #c8c6c4; + forced-color-adjust: none; height: 48px; margin-bottom: 0; margin-left: 8px; From ffe1c8becb670b463e1b1c3d6575d596d83a4fe8 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Apr 2023 08:26:03 +0200 Subject: [PATCH 3/5] feat(scripts-tasks): make perf test setup generic (#26920) * chore: apply SVP for flamegrill * feat(scripts-tasks): migrate and make perf setup generic * feat(scripts-tasks): migrate and make perf setup generic v2 * chore: remove flamegrill from app deps as it is used only within scripts-tasks * fix(scripts-tasks): format and update API usage which was modified by eslint export * rule unwrap autofix * generate changefile * feat(scripts-perf-test-flamegrill): extract rendering and loading logic for perf tests in separate package * ci: unify emmited variables within pipeline * fix(scripts-tasks): use existing flamegrill version * fix(perf-test-react-components): properly declare scneariosProjectName * refactor(perf-test-northstar): make config more DRY by using common env variables and config patterns from scripts-task * feat(scripts-tasks): add excludeScenarios api needed after rebase changes applied * refactor: update postprocessTask api after rebase * feat(scripts-tasks): add config validation for perf-test and update public API * fix(perf-test-northstar): make ts pass as we enabled checking for just scripts * fix(perf-test-northstar): pass config directly as API was changed * ci: simplify perf-test-northstar calls by reducing npm script alias --- .github/CODEOWNERS | 1 + .../config/perf-test/index.ts | 21 ++ .../perf-test}/scenarioIterations.ts | 3 +- .../perf-test}/scenarioNames.ts | 3 +- .../perf-test}/scenarioRenderTypes.ts | 6 +- .../perf-test-react-components/just.config.ts | 7 +- apps/perf-test-react-components/package.json | 4 +- apps/perf-test-react-components/src/app.tsx | 10 + .../src/index.scenarios.tsx | 57 --- .../src/scenarios/scenarioList.ts | 14 - .../webpack.config.js | 2 +- apps/perf-test/config/perf-test/index.ts | 24 ++ .../perf-test}/scenarioIterations.ts | 4 +- .../perf-test}/scenarioNames.ts | 4 +- .../perf-test}/scenarioRenderTypes.ts | 7 +- apps/perf-test/just.config.ts | 7 +- apps/perf-test/package.json | 4 +- apps/perf-test/src/app.tsx | 14 + apps/perf-test/src/index.scenarios.tsx | 60 ---- apps/perf-test/src/scenarios/scenarioList.ts | 14 - apps/perf-test/tasks/perf-test.ts | 327 ------------------ apps/perf-test/webpack.config.js | 2 +- azure-pipelines.perf-test.yml | 10 +- azure-pipelines.yml | 4 +- ...-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json | 7 + package.json | 1 + .../perf-test-northstar/just.config.ts | 5 +- .../fluentui/perf-test-northstar/package.json | 10 +- .../tasks/fluentPerfRegressions.ts | 16 +- .../tasks/perf-test.config.ts | 10 + .../perf-test-northstar/tasks/perf-test.ts | 82 +++-- scripts/perf-test-flamegrill/.eslintrc.json | 21 ++ scripts/perf-test-flamegrill/jest.config.js | 14 + scripts/perf-test-flamegrill/package.json | 20 ++ scripts/perf-test-flamegrill/src/index.ts | 2 + .../src/load-scenarios.ts | 20 ++ scripts/perf-test-flamegrill/src/renderer.tsx | 57 +++ scripts/perf-test-flamegrill/src/types.ts | 7 + scripts/perf-test-flamegrill/tsconfig.json | 22 ++ .../perf-test-flamegrill/tsconfig.lib.json | 12 + .../perf-test-flamegrill/tsconfig.spec.json | 9 + scripts/tasks/package.json | 3 +- scripts/tasks/src/index.ts | 10 + scripts/tasks/src/perf-task/env.ts | 22 ++ scripts/tasks/src/perf-task/index.ts | 11 + .../tasks/src/perf-task}/perf-test.ts | 135 +++++--- scripts/tasks/src/perf-task/settings.ts | 44 +++ workspace.json | 6 + 48 files changed, 553 insertions(+), 602 deletions(-) create mode 100644 apps/perf-test-react-components/config/perf-test/index.ts rename apps/perf-test-react-components/{src => config/perf-test}/scenarioIterations.ts (57%) rename apps/perf-test-react-components/{src => config/perf-test}/scenarioNames.ts (53%) rename apps/perf-test-react-components/{src => config/perf-test}/scenarioRenderTypes.ts (73%) create mode 100644 apps/perf-test-react-components/src/app.tsx delete mode 100644 apps/perf-test-react-components/src/index.scenarios.tsx delete mode 100644 apps/perf-test-react-components/src/scenarios/scenarioList.ts create mode 100644 apps/perf-test/config/perf-test/index.ts rename apps/perf-test/{src => config/perf-test}/scenarioIterations.ts (79%) rename apps/perf-test/{src => config/perf-test}/scenarioNames.ts (78%) rename apps/perf-test/{src => config/perf-test}/scenarioRenderTypes.ts (75%) create mode 100644 apps/perf-test/src/app.tsx delete mode 100644 apps/perf-test/src/index.scenarios.tsx delete mode 100644 apps/perf-test/src/scenarios/scenarioList.ts delete mode 100644 apps/perf-test/tasks/perf-test.ts create mode 100644 change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json create mode 100644 packages/fluentui/perf-test-northstar/tasks/perf-test.config.ts create mode 100644 scripts/perf-test-flamegrill/.eslintrc.json create mode 100644 scripts/perf-test-flamegrill/jest.config.js create mode 100644 scripts/perf-test-flamegrill/package.json create mode 100644 scripts/perf-test-flamegrill/src/index.ts create mode 100644 scripts/perf-test-flamegrill/src/load-scenarios.ts create mode 100644 scripts/perf-test-flamegrill/src/renderer.tsx create mode 100644 scripts/perf-test-flamegrill/src/types.ts create mode 100644 scripts/perf-test-flamegrill/tsconfig.json create mode 100644 scripts/perf-test-flamegrill/tsconfig.lib.json create mode 100644 scripts/perf-test-flamegrill/tsconfig.spec.json create mode 100644 scripts/tasks/src/perf-task/env.ts create mode 100644 scripts/tasks/src/perf-task/index.ts rename {apps/perf-test-react-components/tasks => scripts/tasks/src/perf-task}/perf-test.ts (75%) create mode 100644 scripts/tasks/src/perf-task/settings.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 5675c992ad76f..2fd1e6446064e 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/apps/perf-test-react-components/config/perf-test/index.ts b/apps/perf-test-react-components/config/perf-test/index.ts new file mode 100644 index 0000000000000..7f1cfa5658276 --- /dev/null +++ b/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, +}; diff --git a/apps/perf-test-react-components/src/scenarioIterations.ts b/apps/perf-test-react-components/config/perf-test/scenarioIterations.ts similarity index 57% rename from apps/perf-test-react-components/src/scenarioIterations.ts rename to apps/perf-test-react-components/config/perf-test/scenarioIterations.ts index aa2482f34f6cb..4beb9c38f3982 100644 --- a/apps/perf-test-react-components/src/scenarioIterations.ts +++ b/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, }; diff --git a/apps/perf-test-react-components/src/scenarioNames.ts b/apps/perf-test-react-components/config/perf-test/scenarioNames.ts similarity index 53% rename from apps/perf-test-react-components/src/scenarioNames.ts rename to apps/perf-test-react-components/config/perf-test/scenarioNames.ts index 7bb7aa2c2d28d..418083e98d157 100644 --- a/apps/perf-test-react-components/src/scenarioNames.ts +++ b/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 = {}; diff --git a/apps/perf-test-react-components/src/scenarioRenderTypes.ts b/apps/perf-test-react-components/config/perf-test/scenarioRenderTypes.ts similarity index 73% rename from apps/perf-test-react-components/src/scenarioRenderTypes.ts rename to apps/perf-test-react-components/config/perf-test/scenarioRenderTypes.ts index e72be02dacf71..d90cf36378855 100644 --- a/apps/perf-test-react-components/src/scenarioRenderTypes.ts +++ b/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, }; diff --git a/apps/perf-test-react-components/just.config.ts b/apps/perf-test-react-components/just.config.ts index be016c1495657..aff98a21110cd 100644 --- a/apps/perf-test-react-components/just.config.ts +++ b/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')); diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index 160e3235e64ed..118e28bd6b574 100644 --- a/apps/perf-test-react-components/package.json +++ b/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" diff --git a/apps/perf-test-react-components/src/app.tsx b/apps/perf-test-react-components/src/app.tsx new file mode 100644 index 0000000000000..08cb2ad24f2df --- /dev/null +++ b/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); +} diff --git a/apps/perf-test-react-components/src/index.scenarios.tsx b/apps/perf-test-react-components/src/index.scenarios.tsx deleted file mode 100644 index 3c6398b93e7ff..0000000000000 --- a/apps/perf-test-react-components/src/index.scenarios.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import * as qs from 'querystring'; - -const scenarios = require('./scenarios/scenarioList'); - -const div = document.createElement('div'); -document.body.appendChild(div); - -const renderFinishedMarkerId = 'render-done'; -const renderFinishedMarker = document.createElement('div'); -renderFinishedMarker.id = renderFinishedMarkerId; - -// TODO: could default to displaying list of scenarios if param is not provided. -const defaultScenarioName = Object.keys(scenarios)[0]; -const defaultIterations = 10; - -const queryParams = qs.parse(window.location.search.substring(1)); -const iterations = queryParams.iterations ? parseInt(queryParams.iterations as string, 10) : defaultIterations; -const scenario = queryParams.scenario ? (queryParams.scenario as string) : defaultScenarioName; -const renderType = queryParams.renderType; - -const PerfTestScenario = scenarios[scenario]; -if (PerfTestScenario) { - const PerfTestDecorator = PerfTestScenario.decorator || 'div'; - - if (renderType === 'virtual-rerender' || renderType === 'virtual-rerender-with-unmount') { - for (let i = 0; i < iterations - 1; i++) { - ReactDOM.render(, div); - if (renderType === 'virtual-rerender-with-unmount') { - ReactDOM.unmountComponentAtNode(div); - } - } - ReactDOM.render(, div, () => div.appendChild(renderFinishedMarker)); - } else { - // TODO: This seems to increase React (unstable_runWithPriority) render consumption from 4% to 72%! - // const ScenarioContent = Array.from({ length: iterations }, () => scenarios[scenario]); - - // TODO: Using React Fragments increases React (unstable_runWithPriority) render consumption from 4% to 26%. - // It'd be interesting to root cause why at some point. - // ReactDOM.render(<>{Array.from({ length: iterations }, () => (scenarios[scenario]))}, div); - ReactDOM.render( - - {Array.from({ length: iterations }, () => ( - - ))} - , - div, - () => div.appendChild(renderFinishedMarker), - ); - } -} else { - // No PerfTest scenario to render -> done - div.appendChild(renderFinishedMarker); -} diff --git a/apps/perf-test-react-components/src/scenarios/scenarioList.ts b/apps/perf-test-react-components/src/scenarios/scenarioList.ts deleted file mode 100644 index 0da3b397d2c00..0000000000000 --- a/apps/perf-test-react-components/src/scenarios/scenarioList.ts +++ /dev/null @@ -1,14 +0,0 @@ -const reqContext = require.context('./', false, /^\.\/(?!scenarioList)[^\.]*\.(j|t)sx?$/); - -const scenarios: { [scenarioName: string]: string } = {}; - -reqContext.keys().forEach((key: string) => { - const pathSplit = key.replace(/^\.\//, '').split(/\\\//); - const basename = pathSplit[pathSplit.length - 1]; - const scenarioName = basename.indexOf('.') > -1 ? basename.split('.')[0] : basename; - const scenarioModule = reqContext(key); - - scenarios[scenarioName] = scenarioModule.default || scenarioModule; -}); - -module.exports = scenarios; diff --git a/apps/perf-test-react-components/webpack.config.js b/apps/perf-test-react-components/webpack.config.js index 545d23fe7806e..e0bbbaa8322ca 100644 --- a/apps/perf-test-react-components/webpack.config.js +++ b/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', diff --git a/apps/perf-test/config/perf-test/index.ts b/apps/perf-test/config/perf-test/index.ts new file mode 100644 index 0000000000000..1606f5d11c8aa --- /dev/null +++ b/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', + ], +}; diff --git a/apps/perf-test/src/scenarioIterations.ts b/apps/perf-test/config/perf-test/scenarioIterations.ts similarity index 79% rename from apps/perf-test/src/scenarioIterations.ts rename to apps/perf-test/config/perf-test/scenarioIterations.ts index e04633b61ae23..854ec725e346e 100644 --- a/apps/perf-test/src/scenarioIterations.ts +++ b/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, diff --git a/apps/perf-test/src/scenarioNames.ts b/apps/perf-test/config/perf-test/scenarioNames.ts similarity index 78% rename from apps/perf-test/src/scenarioNames.ts rename to apps/perf-test/config/perf-test/scenarioNames.ts index 4a2dd120f69fa..ec4c0776683a5 100644 --- a/apps/perf-test/src/scenarioNames.ts +++ b/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', diff --git a/apps/perf-test/src/scenarioRenderTypes.ts b/apps/perf-test/config/perf-test/scenarioRenderTypes.ts similarity index 75% rename from apps/perf-test/src/scenarioRenderTypes.ts rename to apps/perf-test/config/perf-test/scenarioRenderTypes.ts index 58018e5e5df72..4e3b2a7adc43b 100644 --- a/apps/perf-test/src/scenarioRenderTypes.ts +++ b/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, diff --git a/apps/perf-test/just.config.ts b/apps/perf-test/just.config.ts index be016c1495657..aff98a21110cd 100644 --- a/apps/perf-test/just.config.ts +++ b/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')); diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index e8d2475586fa4..2a50da9c8066c 100644 --- a/apps/perf-test/package.json +++ b/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.107.0", "@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" diff --git a/apps/perf-test/src/app.tsx b/apps/perf-test/src/app.tsx new file mode 100644 index 0000000000000..5ffdd28d20719 --- /dev/null +++ b/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); +} diff --git a/apps/perf-test/src/index.scenarios.tsx b/apps/perf-test/src/index.scenarios.tsx deleted file mode 100644 index 14478e96c3c2f..0000000000000 --- a/apps/perf-test/src/index.scenarios.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { initializeIcons } from '@fluentui/react/lib/Icons'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import * as qs from 'querystring'; - -const scenarios = require('./scenarios/scenarioList'); - -initializeIcons(); - -const div = document.createElement('div'); -document.body.appendChild(div); - -const renderFinishedMarkerId = 'render-done'; -const renderFinishedMarker = document.createElement('div'); -renderFinishedMarker.id = renderFinishedMarkerId; - -// TODO: could default to displaying list of scenarios if param is not provided. -const defaultScenarioName = Object.keys(scenarios)[0]; -const defaultIterations = 10; - -const queryParams = qs.parse(window.location.search.substring(1)); -const iterations = queryParams.iterations ? parseInt(queryParams.iterations as string, 10) : defaultIterations; -const scenario = queryParams.scenario ? (queryParams.scenario as string) : defaultScenarioName; -const renderType = queryParams.renderType; - -const PerfTestScenario = scenarios[scenario]; -if (PerfTestScenario) { - const PerfTestDecorator = PerfTestScenario.decorator || 'div'; - - if (renderType === 'virtual-rerender' || renderType === 'virtual-rerender-with-unmount') { - for (let i = 0; i < iterations - 1; i++) { - ReactDOM.render(, div); - if (renderType === 'virtual-rerender-with-unmount') { - ReactDOM.unmountComponentAtNode(div); - } - } - ReactDOM.render(, div, () => div.appendChild(renderFinishedMarker)); - } else { - // TODO: This seems to increase React (unstable_runWithPriority) render consumption from 4% to 72%! - // const ScenarioContent = Array.from({ length: iterations }, () => scenarios[scenario]); - - // TODO: Using React Fragments increases React (unstable_runWithPriority) render consumption from 4% to 26%. - // It'd be interesting to root cause why at some point. - // ReactDOM.render(<>{Array.from({ length: iterations }, () => (scenarios[scenario]))}, div); - ReactDOM.render( - - {Array.from({ length: iterations }, () => ( - - ))} - , - div, - () => div.appendChild(renderFinishedMarker), - ); - } -} else { - // No PerfTest scenario to render -> done - div.appendChild(renderFinishedMarker); -} diff --git a/apps/perf-test/src/scenarios/scenarioList.ts b/apps/perf-test/src/scenarios/scenarioList.ts deleted file mode 100644 index 0da3b397d2c00..0000000000000 --- a/apps/perf-test/src/scenarios/scenarioList.ts +++ /dev/null @@ -1,14 +0,0 @@ -const reqContext = require.context('./', false, /^\.\/(?!scenarioList)[^\.]*\.(j|t)sx?$/); - -const scenarios: { [scenarioName: string]: string } = {}; - -reqContext.keys().forEach((key: string) => { - const pathSplit = key.replace(/^\.\//, '').split(/\\\//); - const basename = pathSplit[pathSplit.length - 1]; - const scenarioName = basename.indexOf('.') > -1 ? basename.split('.')[0] : basename; - const scenarioModule = reqContext(key); - - scenarios[scenarioName] = scenarioModule.default || scenarioModule; -}); - -module.exports = scenarios; diff --git a/apps/perf-test/tasks/perf-test.ts b/apps/perf-test/tasks/perf-test.ts deleted file mode 100644 index 8ece8d87fb919..0000000000000 --- a/apps/perf-test/tasks/perf-test.ts +++ /dev/null @@ -1,327 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -import flamegrill, { CookResults, Scenarios, ScenarioConfig, CookResult } from 'flamegrill'; -import { scenarioIterations } from '../src/scenarioIterations'; -import { scenarioRenderTypes, DefaultRenderTypes } from '../src/scenarioRenderTypes'; -import { argv } from '@fluentui/scripts-tasks'; - -type ScenarioSetting = Record; -// TODO: consolidate with newer version of fluent perf-test - -// A high number of iterations are needed to get visualization of lower level calls that are infrequently hit by ticks. -// Wiki: https://github.com/microsoft/fluentui/wiki/Perf-Testing -const iterationsDefault = 5000; - -/* eslint-disable @fluentui/max-len */ -// TODO: -// - Results Analysis -// - If System/Framework is cutting out over half of overall time.. what is consuming the rest? How can that be identified for users? -// - Is the case for Toggle.. but not SplitButton. Maybe it's normal for "ok" perf components? -// - Text is not nearly as bad as Toggle with overall lower samples, though, so something in Toggle is more expensive in Framework. -// - Even so, rationalize the time and what's consuming it, even if it's expected. -// - Could compare percentage differences rather than absolute to negate variance. (see variance examples) -// - Would also have to account for new or missing call hierarchies, which will affect overall percentages. -// - Production vs. Debug Build Results -// - Differences? -// - System Calls -// - Appear in CI but just appear as DLLs locally on Windows -// - V8 bug? -// - Ways to demonstrate improvement/regression: -// - How could perf results of https://github.com/microsoft/fluentui/pull/9622 be more succintly seen and summarized? -// - Some way of differing parts of the call graph that differ, from the root function (in this case filteredAssign) -// - https://github.com/microsoft/fluentui/pull/9516 -// - https://github.com/microsoft/fluentui/pull/9548 -// - https://github.com/microsoft/fluentui/pull/9580 -// - https://github.com/microsoft/fluentui/pull/9432 -// - How will pass/fail be determined? -// - What role should React measurements play in results? -// - Tick Processing -// - Flags: "https://github.com/v8/v8/blob/master/tools/tickprocessor.js" -// - Use same version of V8 in Puppeteer to process ticks, somehow -// - If not, need to remove "Testing v8 version different from logging version" from processed logs -// - Results Presentation -// - Use debug version of React to make results more readable? (Where time in React is being spent?) -// - Add links to scenario implementations? -// - Master trends for scenario results -// - Perf -// - Figure out what is causing huge PROCESSED log file size differences between Windows and Mac. (mac perf is pretty bad) -// - Mac files have many thousands more platform functions defined. -// - Way to remove? Any benefit to filtering out while streaming output? (Probably still as time consuming.) -// - Single CPU usage -// - Both perf testing and log processing seem to only use one CPU. -// - Ways to scale / parallelize processing? Node limitation? -// - Is already taking 10 minutes on CI. If users add scenarios it could get out of control. -// - Options: -// - Don't test master, just use posted results. -// - If master has a "bad" variance, this result will be frozen. May be ok since it can happen on PRs too. -// - Reduce default number iterations -// - Allow varying iterations by scenario (for "problem" components like DocumentCardTitle) -// - This may not be good if these components don't "stand out" as much with high samples. -// - Modularize: -// - Standard method for scenario implementation. Storybook? -// - Would require way of delineating scenario execution, if separate logfiles can't be used for each. -// - Options -// - Options to run in development mode to see React stack? -// - If nothing else should document ways that users can do it locally on wiki. -// - Ways to test changes to packages that doesn't require rebuilding everything to perf-test? -// - Add notes to wiki regarding requirements for changing other packages under test. -// - Add webpack serve option with aliasing? -// - Reference selection (local file, OUFR version, etc?) -// - Watch mode for flamegraphs. -// - Would require going back to webserve config mode? -// - Variance -// - Characterize variance -// - Verify results are repeatable and consistent -// - 1 tab vs. 100 tabs simulateneously -// - Eliminate or account for variance! -// - Minimize scenarios. -// - Further ideas: -// - Resizing page to determine reflow -// - React cascading updates on initial component render. -// - Monomorphic vs. Megamorphic Analysis: -// - Sean Larkin said that switching from polymorphic to monomorphic was a webpack optimization. -// - https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html -// - https://dzone.com/articles/impact-of-polymorphism-on-component-based-framewor - -// TODO: other args? -// https://github.com/v8/v8/blob/master/src/flags/flag-definitions.h -// --log-timer-events -// --log-source-code - -// Analysis -// - Why is BaseComponent warnMutuallyExclusive appearing in flamegraphs? -// - It appears the CPU is being consumed simply by calling warnMututallyExclusive. -// - warnMutuallyExlusive impl is neutered but there still perf hit in setting up the args to call it. -// - The "get" in flamegraphs is caused by "this.className" arg. -// - makeAllSafe also consumes time just by having any component extend BaseComponent. -// - Puppeteer.tracing -// - Similar to using profiler in Chrome, does not show bottom-up analysis well -// - Seems to break V8 profile logging output. -// await page.tracing.start({ path: path.join(logPath, testLogFile[0] + '.trace') }); -// await page.goto(testUrl); -// await page.tracing.stop(); - -// Hardcoded PR deploy URL for local testing -const DEPLOY_URL = 'fluentuipr.z22.web.core.windows.net'; - -const urlForDeployPath = process.env.DEPLOYURL - ? `${process.env.DEPLOYURL}/perf-test` - : 'file://' + path.resolve(__dirname, '../dist/'); - -// Temporarily comment out deploy site usage to speed up CI build time and support parallelization. -// At some point perf test should be broken out from CI default pipeline entirely and then can go back to using deploy site. -// For now, use local perf-test bundle so that perf-test job can run ASAP instead of waiting for the perf-test bundle to be deployed. -// const urlForDeploy = urlForDeployPath + '/index.html'; -const urlForDeploy = 'file://' + path.resolve(__dirname, '../dist/') + '/index.html'; - -const targetPath = `heads/${process.env.SYSTEM_PULLREQUEST_TARGETBRANCH || 'master'}`; -const urlForMaster = `https://${process.env.DEPLOYHOST || DEPLOY_URL}/${targetPath}/perf-test/index.html`; - -const outDir = path.join(__dirname, '../dist'); -const tempDir = path.join(__dirname, '../logfiles'); - -export async function getPerfRegressions() { - // For debugging, in case the environment variables used to generate these have unexpected values - console.log(`urlForDeployPath: "${urlForDeployPath}"`); - console.log(`urlForMaster: "${urlForMaster}"`); - - const iterationsArgv: number = argv().iterations; - const iterationsArg = Number.isInteger(iterationsArgv) && iterationsArgv; - - const scenariosAvailable = fs - .readdirSync(path.join(__dirname, '../src/scenarios')) - .filter(name => name.indexOf('scenarioList') < 0) - .map(name => path.basename(name, '.tsx')); - - const scenariosArgv: string = argv().scenarios; - const scenariosArg = scenariosArgv?.split?.(',') || []; - scenariosArg.forEach(scenario => { - if (!scenariosAvailable.includes(scenario)) { - throw new Error(`Invalid scenario: ${scenario}.`); - } - }); - - let scenarioList = scenariosArg.length > 0 ? scenariosArg : scenariosAvailable; - // TeachingBubble perf test is hanging after puppeteer pin to v19. Disabling for now to unblock SWC migration work. - scenarioList = scenarioList.filter(scenario => scenario !== 'TeachingBubble'); - - const scenarios: Scenarios = {}; - const scenarioSettings: ScenarioSetting = {}; - scenarioList.forEach(scenarioName => { - if (!scenariosAvailable.includes(scenarioName)) { - throw new Error(`Invalid scenario: ${scenarioName}.`); - } - const iterations: number = - iterationsArg || scenarioIterations[scenarioName as keyof typeof scenarioIterations] || iterationsDefault; - const renderTypes: string[] = - scenarioRenderTypes[scenarioName as keyof typeof scenarioRenderTypes] || DefaultRenderTypes; - - renderTypes.forEach(renderType => { - const scenarioKey = `${scenarioName}-${renderType}`; - const testUrlParams = `?scenario=${scenarioName}&iterations=${iterations}&renderType=${renderType}`; - - scenarios[scenarioKey] = { - baseline: `${urlForMaster}${testUrlParams}`, - scenario: `${urlForDeploy}${testUrlParams}`, - }; - - scenarioSettings[scenarioKey] = { - scenarioName, - iterations, - renderType, - }; - }); - }); - - console.log(`\nRunning scenarios:`); - console.dir(scenarios); - - if (fs.existsSync(tempDir)) { - const tempContents = fs.readdirSync(tempDir); - - if (tempContents.length > 0) { - console.log(`Unexpected files already present in ${tempDir}`); - tempContents.forEach(logFile => { - const logFilePath = path.join(tempDir, logFile); - console.log(`Deleting ${logFilePath}`); - fs.unlinkSync(logFilePath); - }); - } - } - - const scenarioConfig: ScenarioConfig = { - outDir, - tempDir, - pageActions: async (page, options) => { - // Occasionally during our CI, page takes unexpected amount of time to navigate (unsure about the root cause). - // Removing the timeout to avoid perf-test failures but be cautious about long test runs. - page.setDefaultTimeout(0); - - await page.goto(options.url); - await page.waitForSelector('#render-done'); - }, - }; - - const scenarioResults: CookResults = await flamegrill.cook(scenarios, scenarioConfig); - - const comment = createReport(scenarioSettings, scenarioResults); - - // TODO: determine status according to perf numbers - const status = 'success'; - - console.log(`Perf evaluation status: ${status}`); - console.log(`Writing comment to file:\n${comment}`); - - // Write results to file - fs.writeFileSync(path.join(outDir, 'perfCounts.html'), comment); - - console.log(`##vso[task.setvariable variable=PerfCommentFilePath;]apps/perf-test/dist/perfCounts.html`); - console.log(`##vso[task.setvariable variable=PerfCommentStatus;]${status}`); -} - -/** - * Create test summary based on test results. - */ -function createReport(scenarioSettings: ScenarioSetting, testResults: CookResults) { - const report = '## [Perf Analysis (`@fluentui/react`)](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n' - - // Show only significant changes by default. - .concat(createScenarioTable(scenarioSettings, testResults, false)) - - // Show all results in a collapsible table. - .concat('
All results

') - .concat(createScenarioTable(scenarioSettings, testResults, true)) - .concat('

\n\n'); - - return report; -} - -/** - * Create a table of scenario results. - * @param showAll Show only significant results by default. - */ -function createScenarioTable(scenarioSettings: ScenarioSetting, testResults: CookResults, showAll: boolean) { - const resultsToDisplay = Object.keys(testResults).filter( - key => showAll || testResults[key].analysis?.regression?.isRegression, - ); - - if (resultsToDisplay.length === 0) { - return '

No significant results to display.

'; - } - - const result = ` - - - - - - - - - `.concat( - resultsToDisplay - .map(key => { - const testResult = testResults[key]; - const { scenarioName, iterations, renderType } = scenarioSettings[key] || {}; - - return ` - - - ${getCell(testResult, true)} - ${getCell(testResult, false)} - - ${getRegression(testResult)} - `; - }) - .join('\n') - .concat(`
ScenarioRender type - Master Ticks - - PR Ticks - IterationsStatus
${scenarioName}${renderType}${iterations}
`), - ); - - console.log('result: ' + result); - - return result; -} - -/** - * Helper that renders an output cell based on a test result. - */ -function getCell(testResult: CookResult, getBaseline: boolean) { - let flamegraphFile = testResult.processed.output && testResult.processed.output.flamegraphFile; - let errorFile = testResult.processed.error && testResult.processed.error.errorFile; - let numTicks = testResult.analysis && testResult.analysis.numTicks; - - if (getBaseline) { - const processedBaseline = testResult.processed.baseline; - flamegraphFile = processedBaseline && processedBaseline.output && processedBaseline.output.flamegraphFile; - errorFile = processedBaseline && processedBaseline.error && processedBaseline.error.errorFile; - numTicks = testResult.analysis && testResult.analysis.baseline && testResult.analysis.baseline.numTicks; - } - - const cell = errorFile - ? `err` - : flamegraphFile - ? `${numTicks}` - : `n/a`; - - return `${cell}`; -} - -/** - * Helper that renders an output cell based on a test result. - */ -function getRegression(testResult: CookResult) { - const cell = - testResult.analysis && testResult.analysis.regression && testResult.analysis.regression.isRegression - ? testResult.analysis.regression.regressionFile - ? `Possible regression` - : '' - : ''; - - return `${cell}`; -} diff --git a/apps/perf-test/webpack.config.js b/apps/perf-test/webpack.config.js index 545d23fe7806e..e0bbbaa8322ca 100644 --- a/apps/perf-test/webpack.config.js +++ b/apps/perf-test/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', diff --git a/azure-pipelines.perf-test.yml b/azure-pipelines.perf-test.yml index 49fdd4137697f..08682210e8c38 100644 --- a/azure-pipelines.perf-test.yml +++ b/azure-pipelines.perf-test.yml @@ -56,7 +56,7 @@ jobs: displayName: Build to Perf Test (Northstar) - script: | - yarn perf:test:base + yarn perf:test --base condition: eq(variables.isPR, false) workingDirectory: packages/fluentui/perf-test-northstar displayName: Run Perf Test Base (Northstar) @@ -83,8 +83,8 @@ jobs: inputs: githubOwner: microsoft githubRepo: 'fluentui' - blobFilePath: '$(Build.SourcesDirectory)/$(PerfCommentFilePathNorthstar)' - status: '$(PerfCommentStatusNorthstar)' + blobFilePath: '$(Build.SourcesDirectory)/$(PerfCommentFilePathReactNorthstar)' + status: '$(PerfCommentStatusReactNorthstar)' uniqueId: 'perfComment9424' - script: | @@ -147,8 +147,8 @@ jobs: inputs: githubOwner: microsoft githubRepo: 'fluentui' - blobFilePath: '$(Build.SourcesDirectory)/$(PerfCommentFilePath)' - status: '$(PerfCommentStatus)' + blobFilePath: '$(Build.SourcesDirectory)/$(PerfCommentFilePathReact)' + status: '$(PerfCommentStatusReact)' uniqueId: 'perfComment9423' - template: .devops/templates/cleanup.yml diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 989520511d028..3a4a437264cd7 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -34,8 +34,10 @@ jobs: displayName: NX workspace lint - script: | - # @fluentui/api-docs is used within apps/public-docsite-resources/just.config.ts thus it needs to be build in advance + # @fluentui/api-docs is used within apps/public-docsite-resources/just.config.ts, thus it needs to be build in advance yarn workspace @fluentui/api-docs build + # @fluentui/digest is used within packages/fluentui/perf-test-northstar/just.config.ts, thus it needs to be build in advance + yarn workspace @fluentui/digest build yarn tsc -p ./tsconfig.json displayName: Type-check just.config.ts files diff --git a/change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json b/change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json new file mode 100644 index 0000000000000..0dfb945db3ce4 --- /dev/null +++ b/change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix(scripts-tasks): format and update API usage which was modified by eslint export * rule unwrap autofix", + "packageName": "@fluentui/monaco-editor", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/package.json b/package.json index d72a03c4f95a4..bfab1faa390f9 100644 --- a/package.json +++ b/package.json @@ -241,6 +241,7 @@ "extract-comments": "1.1.0", "file-loader": "6.2.0", "find-free-port": "2.0.0", + "flamegrill": "0.2.0", "fork-ts-checker-webpack-plugin": "6.1.0", "fs-extra": "8.1.0", "geckodriver": "3.0.2", diff --git a/packages/fluentui/perf-test-northstar/just.config.ts b/packages/fluentui/perf-test-northstar/just.config.ts index 0636533c21363..c9885ea8db84c 100644 --- a/packages/fluentui/perf-test-northstar/just.config.ts +++ b/packages/fluentui/perf-test-northstar/just.config.ts @@ -1,5 +1,6 @@ import path from 'path'; import { series, task, argv, taskPresets } from 'just-scripts'; +import { config } from './tasks/perf-test.config'; taskPresets.lib(); @@ -26,9 +27,9 @@ task('perf-test:bundle', bundleStories()); task('perf-test:run', () => { // delay require in case digest isn't built yet - const runPerfTest = require('./tasks/perf-test').default; + const { getPerfRegressions } = require('./tasks/perf-test') as typeof import('./tasks/perf-test'); - return runPerfTest(argv().base); + return getPerfRegressions(config, (argv() as { base?: boolean }).base); }); // TOOD: is build doing anything meaningful? only if there's source that's not a just script? diff --git a/packages/fluentui/perf-test-northstar/package.json b/packages/fluentui/perf-test-northstar/package.json index ce5b42cf4dfb4..1e82b92462e49 100644 --- a/packages/fluentui/perf-test-northstar/package.json +++ b/packages/fluentui/perf-test-northstar/package.json @@ -8,15 +8,17 @@ "bundle": "just-scripts perf-test:bundle", "clean": "just-scripts clean", "test": "just-scripts test", - "perf:test": "just-scripts perf-test", - "perf:test:base": "just-scripts perf-test --base" + "perf:test": "just-scripts perf-test" }, - "devDependencies": { - "@fluentui/digest": "^0.66.4", + "dependencies": { "@fluentui/react-northstar": "^0.66.4", "@fluentui/react-northstar-prototypes": "^0.66.4", + "@fluentui/digest": "^0.66.4", "flamegrill": "0.2.0" }, + "devDependencies": { + "@fluentui/scripts-tasks": "*" + }, "publishConfig": { "access": "public" } diff --git a/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts b/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts index 7e9bc60223d23..461a962712a0b 100644 --- a/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts +++ b/packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts @@ -1,6 +1,9 @@ import * as _ from 'lodash'; import * as path from 'path'; import { workspaceRoot } from 'nx/src/utils/app-root'; +import { perfTestEnv } from '@fluentui/scripts-tasks'; + +import { config } from './perf-test.config'; // TODO: check false positive potential regression reports in fluent ui repo and fix @@ -26,9 +29,10 @@ export function getFluentPerfRegressions() { } function linkToFlamegraph(value: string, filename: string) { - const urlForDeployPath = process.env.DEPLOYURL - ? `${process.env.DEPLOYURL}/perf-test-northstar` - : 'file://' + path.resolve(workspaceRoot, 'packages/fluentui/perf-test/dist'); + const projectRootDirectoryName = path.basename(config.projectRootPath); + const urlForDeployPath = perfTestEnv.DEPLOYURL + ? `${perfTestEnv.DEPLOYURL}/${projectRootDirectoryName}` + : 'file://' + path.resolve(workspaceRoot, `${config.projectRootPath}/dist`); return `[${value}](${urlForDeployPath}/${path.basename(filename)})`; } @@ -103,12 +107,12 @@ function reportResults(perfCounts: any, reporter: Reporter) { } const checkPerfRegressions = (reporter: Reporter) => { - let perfCounts; + let perfCounts: any; - reporter.markdown('## Perf Analysis (`@fluentui/react-northstar`)'); + reporter.markdown(`## Perf Analysis (\`${config.projectName}\`)`); try { - perfCounts = require(path.resolve(workspaceRoot, 'packages/perf-test-northstar/dist/perfCounts.json')); + perfCounts = require(path.resolve(workspaceRoot, `${config.projectRootPath}/dist/perfCounts.json`)); } catch { reporter.warn('No perf measurements available'); return; diff --git a/packages/fluentui/perf-test-northstar/tasks/perf-test.config.ts b/packages/fluentui/perf-test-northstar/tasks/perf-test.config.ts new file mode 100644 index 0000000000000..26b48fc856582 --- /dev/null +++ b/packages/fluentui/perf-test-northstar/tasks/perf-test.config.ts @@ -0,0 +1,10 @@ +import * as path from 'path'; +import type { PerfRegressionConfig } from '@fluentui/scripts-tasks'; + +export const config: PerfRegressionConfig = { + projectRootPath: 'packages/fluentui/perf-test-northstar', + projectName: '@fluentui/react-northstar', + outDir: path.join(__dirname, '../dist'), + tempDir: path.join(__dirname, '../logfiles'), + scenariosSrcDirPath: '../dist/stories.js', +}; diff --git a/packages/fluentui/perf-test-northstar/tasks/perf-test.ts b/packages/fluentui/perf-test-northstar/tasks/perf-test.ts index b8c77abfb9a80..e3059183e6928 100644 --- a/packages/fluentui/perf-test-northstar/tasks/perf-test.ts +++ b/packages/fluentui/perf-test-northstar/tasks/perf-test.ts @@ -3,10 +3,9 @@ import path from 'path'; import _ from 'lodash'; import flamegrill, { CookResult, CookResults, ScenarioConfig, Scenarios } from 'flamegrill'; import { generateUrl } from '@fluentui/digest'; -import { getFluentPerfRegressions } from './fluentPerfRegressions'; +import { perfTestEnv, PerfRegressionConfig } from '@fluentui/scripts-tasks'; -// Hardcoded PR deploy URL for local testing -const DEPLOY_URL = 'fluentuipr.z22.web.core.windows.net'; +import { getFluentPerfRegressions } from './fluentPerfRegressions'; type ExtendedCookResult = CookResult & { extended: { @@ -35,18 +34,17 @@ const urlForDeployPath = `file://${path.resolve(__dirname, '../dist/')}`; const urlForDeploy = `${urlForDeployPath}/index.html`; const defaultIterations = 1; -const outDir = path.join(__dirname, '../dist'); -const tempDir = path.join(__dirname, '../logfiles'); - console.log(`__dirname: ${__dirname}`); -export default async function getPerfRegressions(baselineOnly: boolean = false) { - let urlForMaster: string | undefined; +export async function getPerfRegressions(config: PerfRegressionConfig, baselineOnly = false) { + const { outDir, tempDir, scenariosSrcDirPath, projectName, projectRootPath } = config; + const projectRootDirectoryName = path.basename(projectRootPath); + const projectEnvVars = perfTestEnv.EnvVariablesByProject[projectName]; - if (!baselineOnly) { - const targetPath = `heads/${process.env.SYSTEM_PULLREQUEST_TARGETBRANCH || 'master'}`; - urlForMaster = `https://${process.env.DEPLOYHOST || DEPLOY_URL}/${targetPath}/perf-test-northstar/index.html`; - } + const targetPath = `heads/${perfTestEnv.SYSTEM_PULLREQUEST_TARGETBRANCH || 'master'}`; + const urlForMaster = baselineOnly + ? undefined + : `https://${perfTestEnv.DEPLOYHOST}/${targetPath}/${projectRootDirectoryName}/index.html`; // For debugging, in case the environment variables used to generate these have unexpected values console.log(`urlForDeployPath: "${urlForDeployPath}"`); @@ -59,7 +57,7 @@ export default async function getPerfRegressions(baselineOnly: boolean = false) const scenarioList: string[] = []; // TODO: can this get typing somehow? can't be imported since file is only available after build - const test = require('../dist/stories.js'); + const test = require(scenariosSrcDirPath); const { stories } = test.default; console.log('stories:'); @@ -75,8 +73,13 @@ export default async function getPerfRegressions(baselineOnly: boolean = false) scenario: generateUrl(urlForDeploy, kindKey, storyKey, getIterations(stories, kindKey, storyKey)), ...(!baselineOnly && storyKey !== 'Fabric' && { - // Optimization: skip baseline comparision for Fabric - baseline: generateUrl(urlForMaster, kindKey, storyKey, getIterations(stories, kindKey, storyKey)), + // Optimization: skip baseline comparison for Fabric + baseline: generateUrl( + urlForMaster as string, + kindKey, + storyKey, + getIterations(stories, kindKey, storyKey), + ), }), }; }); @@ -126,13 +129,14 @@ export default async function getPerfRegressions(baselineOnly: boolean = false) // Write results to file fs.writeFileSync(path.join(outDir, 'perfCounts.html'), comment); - console.log( - `##vso[task.setvariable variable=PerfCommentFilePathNorthstar;]packages/fluentui/perf-test-northstar/dist/perfCounts.html`, - ); - console.log(`##vso[task.setvariable variable=PerfCommentStatusNorthstar;]${status}`); + console.log(`##vso[task.setvariable variable=${projectEnvVars.filePath};]${projectRootPath}/dist/perfCounts.html`); + console.log(`##vso[task.setvariable variable=${projectEnvVars.status};]${status}`); } -function extendCookResults(stories, testResults: CookResults): ExtendedCookResults { +function extendCookResults( + stories: { [x: string]: { [x: string]: any } }, + testResults: CookResults, +): ExtendedCookResults { return _.mapValues(testResults, (testResult, resultKey) => { const kind = getKindKey(resultKey); const story = getStoryKey(resultKey); @@ -158,7 +162,7 @@ function extendCookResults(stories, testResults: CookResults): ExtendedCookResul * @param {CookResults} testResults * @returns {string} */ -function createReport(stories, testResults: ExtendedCookResults): string { +function createReport(stories: any, testResults: ExtendedCookResults): string { // TODO: We can't do CI, measure baseline or do regression analysis until master & PR files are deployed and publicly accessible. // TODO: Fluent reporting is outside of this script so this code will probably be moved entirely on perf-test consolidation. // // Show only significant changes by default. @@ -179,15 +183,9 @@ function createReport(stories, testResults: ExtendedCookResults): string { * @param {boolean} showAll Show only significant results by default. * @returns {string} */ -function createScenarioTable(stories, testResults: ExtendedCookResults, showAll: boolean): string { +function createScenarioTable(stories: any, testResults: ExtendedCookResults, showAll: boolean): string { const resultsToDisplay = Object.keys(testResults) - .filter( - key => - showAll || - (testResults[key].analysis && - testResults[key].analysis.regression && - testResults[key].analysis.regression.isRegression), - ) + .filter(key => showAll || testResults[key]?.analysis?.regression?.isRegression) .filter(testResultKey => getStoryKey(testResultKey) !== 'Fabric') .sort(); @@ -272,8 +270,13 @@ function getStoryKey(resultKey: string): string { return story; } -function getTpiResult(testResults, stories, kind, story): number | undefined { - let tpi = undefined; +function getTpiResult( + testResults: CookResults, + stories: { [x: string]: { [x: string]: any } }, + kind: string, + story: string, +): number | undefined { + let tpi: number | undefined; if (stories[kind][story]) { const resultKey = `${kind}.${story}`; const testResult = testResults[resultKey]; @@ -284,18 +287,25 @@ function getTpiResult(testResults, stories, kind, story): number | undefined { return tpi; } -function getIterations(stories, kind, story): number { +function getIterations( + stories: { + [x: string]: Partial<{ + default: { iterations?: number }; + [x: string]: { iterations?: number }; + }>; + }, + kind: string, + story: string, +): number { // Give highest priority to most localized definition of iterations. Story => kind => default. - return ( - stories[kind][story].iterations || (stories[kind].default && stories[kind].default.iterations) || defaultIterations - ); + return stories[kind][story]?.iterations || stories[kind].default?.iterations || defaultIterations; } function getTicks(testResult: CookResult): number | undefined { return testResult.analysis && testResult.analysis.numTicks; } -function linkifyResult(testResult, resultContent, getBaseline) { +function linkifyResult(testResult: CookResult, resultContent: string | number | undefined, getBaseline: boolean) { let flamegraphFile = testResult.processed.output && testResult.processed.output.flamegraphFile; let errorFile = testResult.processed.error && testResult.processed.error.errorFile; diff --git a/scripts/perf-test-flamegrill/.eslintrc.json b/scripts/perf-test-flamegrill/.eslintrc.json new file mode 100644 index 0000000000000..4f5307c1c0b5b --- /dev/null +++ b/scripts/perf-test-flamegrill/.eslintrc.json @@ -0,0 +1,21 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/node", "plugin:@fluentui/eslint-plugin/imports"], + "rules": { + "@fluentui/max-len": "off", + "import/no-extraneous-dependencies": [ + "error", + { + "packageDir": [".", "../../"] + } + ] + }, + "overrides": [ + { + "files": "index.d.ts", + "rules": { + "import/no-self-import": "off" + } + } + ], + "root": true +} diff --git a/scripts/perf-test-flamegrill/jest.config.js b/scripts/perf-test-flamegrill/jest.config.js new file mode 100644 index 0000000000000..e6ac1cdb5dff4 --- /dev/null +++ b/scripts/perf-test-flamegrill/jest.config.js @@ -0,0 +1,14 @@ +// @ts-check + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'scripts-perf-test-flamegrill', + preset: '../../jest.preset.js', + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + testEnvironment: 'node', +}; diff --git a/scripts/perf-test-flamegrill/package.json b/scripts/perf-test-flamegrill/package.json new file mode 100644 index 0000000000000..1edc441192a4f --- /dev/null +++ b/scripts/perf-test-flamegrill/package.json @@ -0,0 +1,20 @@ +{ + "name": "@fluentui/scripts-perf-test-flamegrill", + "version": "0.0.1", + "private": true, + "main": "src/index.ts", + "scripts": { + "format": "prettier -w --ignore-path ../../.prettierignore .", + "format:check": "yarn format -c", + "lint": "eslint --ext .ts,.js .", + "test": "jest --passWithNoTests", + "type-check": "tsc -b tsconfig.json" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "@types/react-dom": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0", + "react-dom": ">=16.8.0 <19.0.0", + "webpack": "^5.75.0" + } +} diff --git a/scripts/perf-test-flamegrill/src/index.ts b/scripts/perf-test-flamegrill/src/index.ts new file mode 100644 index 0000000000000..ee0b3bc41ab86 --- /dev/null +++ b/scripts/perf-test-flamegrill/src/index.ts @@ -0,0 +1,2 @@ +export { render } from './renderer'; +export { loadScenarios } from './load-scenarios'; diff --git a/scripts/perf-test-flamegrill/src/load-scenarios.ts b/scripts/perf-test-flamegrill/src/load-scenarios.ts new file mode 100644 index 0000000000000..37a596cf4c838 --- /dev/null +++ b/scripts/perf-test-flamegrill/src/load-scenarios.ts @@ -0,0 +1,20 @@ +import type { Scenarios } from './types'; + +/** + * + * //TODO this uses proprietary webpack require.context which is not future-proof - use standard ESM + */ +export function loadScenarios(context: __WebpackModuleApi.RequireContext): Scenarios { + const scenarios: Scenarios = {}; + + context.keys().forEach((key: string) => { + const pathSplit = key.replace(/^\.\//, '').split(/\\\//); + const basename = pathSplit[pathSplit.length - 1]; + const scenarioName = basename.indexOf('.') > -1 ? basename.split('.')[0] : basename; + const scenarioModule = context(key); + + scenarios[scenarioName] = scenarioModule.default || scenarioModule; + }); + + return scenarios; +} diff --git a/scripts/perf-test-flamegrill/src/renderer.tsx b/scripts/perf-test-flamegrill/src/renderer.tsx new file mode 100644 index 0000000000000..fa6940393a01d --- /dev/null +++ b/scripts/perf-test-flamegrill/src/renderer.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; + +import type { Scenarios } from './types'; + +export function render(scenarios: Scenarios) { + const div = document.createElement('div'); + document.body.appendChild(div); + + const renderFinishedMarkerId = 'render-done'; + const renderFinishedMarker = document.createElement('div'); + renderFinishedMarker.id = renderFinishedMarkerId; + + // TODO: could default to displaying list of scenarios if param is not provided. + const defaultScenarioName = Object.keys(scenarios)[0]; + const defaultIterations = 10; + const queryParams = new URLSearchParams(window.location.search); + + const iterations = queryParams.get('iterations') ? Number(queryParams.get('iterations')) : defaultIterations; + const scenario = queryParams.get('scenario') ?? defaultScenarioName; + const renderType = queryParams.get('renderType'); + + const PerfTestScenario = scenarios[scenario]; + + if (PerfTestScenario) { + const PerfTestDecorator = PerfTestScenario.decorator || 'div'; + + if (renderType === 'virtual-rerender' || renderType === 'virtual-rerender-with-unmount') { + for (let i = 0; i < iterations - 1; i++) { + ReactDOM.render(, div); + if (renderType === 'virtual-rerender-with-unmount') { + ReactDOM.unmountComponentAtNode(div); + } + } + ReactDOM.render(, div, () => div.appendChild(renderFinishedMarker)); + } else { + // TODO: This seems to increase React (unstable_runWithPriority) render consumption from 4% to 72%! + // const ScenarioContent = Array.from({ length: iterations }, () => scenarios[scenario]); + + // TODO: Using React Fragments increases React (unstable_runWithPriority) render consumption from 4% to 26%. + // It'd be interesting to root cause why at some point. + // ReactDOM.render(<>{Array.from({ length: iterations }, () => (scenarios[scenario]))}, div); + ReactDOM.render( + + {Array.from({ length: iterations }, () => ( + + ))} + , + div, + () => div.appendChild(renderFinishedMarker), + ); + } + } else { + // No PerfTest scenario to render -> done + div.appendChild(renderFinishedMarker); + } +} diff --git a/scripts/perf-test-flamegrill/src/types.ts b/scripts/perf-test-flamegrill/src/types.ts new file mode 100644 index 0000000000000..dea4ce7101aed --- /dev/null +++ b/scripts/perf-test-flamegrill/src/types.ts @@ -0,0 +1,7 @@ +import * as React from 'react'; +export interface Scenario { + (): JSX.Element; + decorator?: (props: { children: React.ReactNode }) => JSX.Element; +} + +export type Scenarios = { [scenarioExportName: string]: Scenario }; diff --git a/scripts/perf-test-flamegrill/tsconfig.json b/scripts/perf-test-flamegrill/tsconfig.json new file mode 100644 index 0000000000000..b289e657bc0e5 --- /dev/null +++ b/scripts/perf-test-flamegrill/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "@tsconfig/node14/tsconfig.json", + "compilerOptions": { + "target": "ES2019", + "pretty": true, + "noEmit": true, + "allowJs": true, + "checkJs": true, + "sourceMap": true, + "noUnusedLocals": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/scripts/perf-test-flamegrill/tsconfig.lib.json b/scripts/perf-test-flamegrill/tsconfig.lib.json new file mode 100644 index 0000000000000..5354d98dbfac2 --- /dev/null +++ b/scripts/perf-test-flamegrill/tsconfig.lib.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "DOM"], + "jsx": "react", + "outDir": "../../dist/out-tsc", + "types": ["webpack-env"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "include": ["./**/*.ts", "./**/*.tsx", "./**/*.js"] +} diff --git a/scripts/perf-test-flamegrill/tsconfig.spec.json b/scripts/perf-test-flamegrill/tsconfig.spec.json new file mode 100644 index 0000000000000..bc196f0514f5b --- /dev/null +++ b/scripts/perf-test-flamegrill/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx", "**/*.d.ts"] +} diff --git a/scripts/tasks/package.json b/scripts/tasks/package.json index a1e93c82db61b..a994fd70eb550 100644 --- a/scripts/tasks/package.json +++ b/scripts/tasks/package.json @@ -13,6 +13,7 @@ "dependencies": { "@fluentui/scripts-monorepo": "*", "@fluentui/scripts-utils": "*", - "@fluentui/scripts-prettier": "*" + "@fluentui/scripts-prettier": "*", + "flamegrill": "0.2.0" } } diff --git a/scripts/tasks/src/index.ts b/scripts/tasks/src/index.ts index a06699dde7e7d..b8525731e60e8 100644 --- a/scripts/tasks/src/index.ts +++ b/scripts/tasks/src/index.ts @@ -87,3 +87,13 @@ export type { export { preset } from './presets'; export { expandSourcePath } from './copy'; export { postprocessTask } from './postprocess'; +export { + getPerfRegressions, + AllRenderTypes, + DefaultRenderTypes, + ScenarioIterations, + ScenarioRenderTypes, + ScenarioNames, + perfTestEnv, + PerfRegressionConfig, +} from './perf-task'; diff --git a/scripts/tasks/src/perf-task/env.ts b/scripts/tasks/src/perf-task/env.ts new file mode 100644 index 0000000000000..f149b283727f6 --- /dev/null +++ b/scripts/tasks/src/perf-task/env.ts @@ -0,0 +1,22 @@ +/** + * Hardcoded PR deploy URL for local testing + */ +const DEPLOY_URL = 'fluentuipr.z22.web.core.windows.net'; + +export const DEPLOYHOST = process.env.DEPLOYHOST ?? DEPLOY_URL; +export const DEPLOYURL = process.env.DEPLOYURL; +export const SYSTEM_PULLREQUEST_TARGETBRANCH = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH; + +const envPrefix = { filePath: 'PerfCommentFilePath', status: 'PerfCommentStatus' }; + +export const EnvVariablesByProject: { [projectName: string]: { filePath: string; status: string } } = { + '@fluentui/react': { filePath: `${envPrefix.filePath}React`, status: `${envPrefix.status}React` }, + '@fluentui/react-components': { + filePath: `${envPrefix.filePath}ReactComponents`, + status: `${envPrefix.status}ReactComponents`, + }, + '@fluentui/react-northstar': { + filePath: `${envPrefix.filePath}ReactNorthstar`, + status: `${envPrefix.status}ReactNorthstar`, + }, +}; diff --git a/scripts/tasks/src/perf-task/index.ts b/scripts/tasks/src/perf-task/index.ts new file mode 100644 index 0000000000000..a10e805c1196e --- /dev/null +++ b/scripts/tasks/src/perf-task/index.ts @@ -0,0 +1,11 @@ +import { DEPLOYHOST, DEPLOYURL, EnvVariablesByProject, SYSTEM_PULLREQUEST_TARGETBRANCH } from './env'; +export { getPerfRegressions } from './perf-test'; +export { + RenderTypes as AllRenderTypes, + RenderTypesDefault as DefaultRenderTypes, + ScenarioIterations, + ScenarioRenderTypes, + ScenarioNames, + PerfRegressionConfig, +} from './settings'; +export const perfTestEnv = { EnvVariablesByProject, DEPLOYHOST, DEPLOYURL, SYSTEM_PULLREQUEST_TARGETBRANCH }; diff --git a/apps/perf-test-react-components/tasks/perf-test.ts b/scripts/tasks/src/perf-task/perf-test.ts similarity index 75% rename from apps/perf-test-react-components/tasks/perf-test.ts rename to scripts/tasks/src/perf-task/perf-test.ts index f54e00573fa99..6fa725fbbcd48 100644 --- a/apps/perf-test-react-components/tasks/perf-test.ts +++ b/scripts/tasks/src/perf-task/perf-test.ts @@ -1,19 +1,17 @@ import fs from 'fs'; import path from 'path'; -import flamegrill, { CookResults, Scenarios, ScenarioConfig, CookResult } from 'flamegrill'; -import { scenarioIterations } from '../src/scenarioIterations'; -import { scenarioRenderTypes, DefaultRenderTypes } from '../src/scenarioRenderTypes'; -import { argv } from '@fluentui/scripts-tasks'; -type ScenarioSetting = Record; +import { workspaceRoot } from '@nrwl/devkit'; +import flamegrill, { CookResult, CookResults, ScenarioConfig, Scenarios } from 'flamegrill'; -// TODO: consolidate with newer version of fluent perf-test +import { getJustArgv as argv } from '../argv'; -// A high number of iterations are needed to get visualization of lower level calls that are infrequently hit by ticks. -// Wiki: https://github.com/microsoft/fluentui/wiki/Perf-Testing -const iterationsDefault = 5000; +import { DEPLOYHOST, DEPLOYURL, EnvVariablesByProject, SYSTEM_PULLREQUEST_TARGETBRANCH } from './env'; +import { IterationsDefault, PerfRegressionConfig, RenderTypesDefault } from './settings'; + +type ScenarioSetting = Record; +// TODO: consolidate with newer version of fluent perf-test -/* eslint-disable @fluentui/max-len */ // TODO: // - Results Analysis // - If System/Framework is cutting out over half of overall time.. what is consuming the rest? How can that be identified for users? @@ -102,28 +100,33 @@ const iterationsDefault = 5000; // await page.goto(testUrl); // await page.tracing.stop(); -// Hardcoded PR deploy URL for local testing -const DEPLOY_URL = 'fluentuipr.z22.web.core.windows.net'; +export async function getPerfRegressions(options: PerfRegressionConfig) { + validatePerfOptions(options); -const urlForDeployPath = process.env.DEPLOYURL - ? `${process.env.DEPLOYURL}/perf-test-react-components` - : 'file://' + path.resolve(__dirname, '../dist/'); + const { + scenarioIterations, + scenarioRenderTypes, + outDir, + tempDir, + projectName, + projectRootPath, + scenariosSrcDirPath, + excludeScenarios, + } = options; + const projectRootDirectoryName = path.basename(projectRootPath); -// Temporarily comment out deploy site usage to speed up CI build time and support parallelization. -// At some point perf test should be broken out from CI default pipeline entirely and then can go back to using deploy site. -// For now, use local perf-test bundle so that perf-test job can run ASAP instead of waiting for the perf-test bundle to be deployed. -// const urlForDeploy = urlForDeployPath + '/index.html'; -const urlForDeploy = 'file://' + path.resolve(__dirname, '../dist/') + '/index.html'; + const projectEnvVars = EnvVariablesByProject[projectName]; + const urlForDeployPath = DEPLOYURL ? `${DEPLOYURL}/${projectRootDirectoryName}` : 'file://' + outDir; -const targetPath = `heads/${process.env.SYSTEM_PULLREQUEST_TARGETBRANCH || 'master'}`; -const urlForMaster = `https://${ - process.env.DEPLOYHOST || DEPLOY_URL -}/${targetPath}/perf-test-react-components/index.html`; + // Temporarily comment out deploy site usage to speed up CI build time and support parallelization. + // At some point perf test should be broken out from CI default pipeline entirely and then can go back to using deploy site. + // For now, use local perf-test bundle so that perf-test job can run ASAP instead of waiting for the perf-test bundle to be deployed. + // const urlForDeploy = urlForDeployPath + '/index.html'; + const urlForDeploy = 'file://' + outDir + '/index.html'; -const outDir = path.join(__dirname, '../dist'); -const tempDir = path.join(__dirname, '../logfiles'); + const targetPath = `heads/${SYSTEM_PULLREQUEST_TARGETBRANCH || 'master'}`; + const urlForMaster = `https://${DEPLOYHOST}/${targetPath}/${projectRootDirectoryName}/index.html`; -export async function getPerfRegressions() { // For debugging, in case the environment variables used to generate these have unexpected values console.log(`urlForDeployPath: "${urlForDeployPath}"`); console.log(`urlForMaster: "${urlForMaster}"`); @@ -132,9 +135,21 @@ export async function getPerfRegressions() { const iterationsArg = Number.isInteger(iterationsArgv) && iterationsArgv; const scenariosAvailable = fs - .readdirSync(path.join(__dirname, '../src/scenarios')) - .filter(name => name.indexOf('scenarioList') < 0) - .map(name => path.basename(name, '.tsx')); + .readdirSync(scenariosSrcDirPath) + .filter(fileName => { + if (excludeScenarios) { + const shouldExclude = excludeScenarios.some(scenarioName => { + return fileName.indexOf(scenarioName) !== -1; + }); + + if (shouldExclude) { + return false; + } + } + + return true; + }) + .map(fileName => path.basename(fileName, '.tsx')); const scenariosArgv: string = argv().scenarios; const scenariosArg = scenariosArgv?.split?.(',') || []; @@ -152,10 +167,10 @@ export async function getPerfRegressions() { if (!scenariosAvailable.includes(scenarioName)) { throw new Error(`Invalid scenario: ${scenarioName}.`); } - const iterations = - iterationsArg || scenarioIterations[scenarioName as keyof typeof scenarioIterations] || iterationsDefault; - const renderTypes: string[] = - scenarioRenderTypes[scenarioName as keyof typeof scenarioRenderTypes] || DefaultRenderTypes; + const iterations: number = + iterationsArg || (scenarioIterations && scenarioIterations[scenarioName]) || IterationsDefault; + + const renderTypes: string[] = (scenarioRenderTypes && scenarioRenderTypes[scenarioName]) || RenderTypesDefault; renderTypes.forEach(renderType => { const scenarioKey = `${scenarioName}-${renderType}`; @@ -193,6 +208,7 @@ export async function getPerfRegressions() { const scenarioConfig: ScenarioConfig = { outDir, tempDir, + // eslint-disable-next-line @typescript-eslint/no-shadow pageActions: async (page, options) => { // Occasionally during our CI, page takes unexpected amount of time to navigate (unsure about the root cause). // Removing the timeout to avoid perf-test failures but be cautious about long test runs. @@ -205,7 +221,7 @@ export async function getPerfRegressions() { const scenarioResults: CookResults = await flamegrill.cook(scenarios, scenarioConfig); - const comment = createReport(scenarioSettings, scenarioResults); + const comment = createReport(scenarioSettings, scenarioResults, { projectName, urlForDeployPath }); // TODO: determine status according to perf numbers const status = 'success'; @@ -216,25 +232,27 @@ export async function getPerfRegressions() { // Write results to file fs.writeFileSync(path.join(outDir, 'perfCounts.html'), comment); - console.log( - `##vso[task.setvariable variable=PerfCommentFilePathReactComponents;]apps/perf-test-react-components/dist/perfCounts.html`, - ); - console.log(`##vso[task.setvariable variable=PerfCommentStatusReactComponents;]${status}`); + console.log(`##vso[task.setvariable variable=${projectEnvVars.filePath};]${projectRootPath}/dist/perfCounts.html`); + console.log(`##vso[task.setvariable variable=${projectEnvVars.status};]${status}`); } +interface ReportOptions { + projectName: string; + urlForDeployPath: string; +} /** * Create test summary based on test results. */ -function createReport(scenarioSettings: ScenarioSetting, testResults: CookResults) { +function createReport(scenarioSettings: ScenarioSetting, testResults: CookResults, options: ReportOptions) { const report = - '## [Perf Analysis (`@fluentui/react-components`)](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n' + `## [Perf Analysis (\`${options.projectName}\`)](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n` // Show only significant changes by default. - .concat(createScenarioTable(scenarioSettings, testResults, false)) + .concat(createScenarioTable(scenarioSettings, testResults, false, options)) // Show all results in a collapsible table. .concat('
All results

') - .concat(createScenarioTable(scenarioSettings, testResults, true)) + .concat(createScenarioTable(scenarioSettings, testResults, true, options)) .concat('

\n\n'); return report; @@ -244,7 +262,12 @@ function createReport(scenarioSettings: ScenarioSetting, testResults: CookResult * Create a table of scenario results. * @param showAll Show only significant results by default. */ -function createScenarioTable(scenarioSettings: ScenarioSetting, testResults: CookResults, showAll: boolean) { +function createScenarioTable( + scenarioSettings: ScenarioSetting, + testResults: CookResults, + showAll: boolean, + options: ReportOptions, +) { const resultsToDisplay = Object.keys(testResults).filter( key => showAll || testResults[key].analysis?.regression?.isRegression, ); @@ -275,10 +298,10 @@ function createScenarioTable(scenarioSettings: ScenarioSetting, testResults: Coo return ` ${scenarioName} ${renderType} - ${getCell(testResult, true)} - ${getCell(testResult, false)} + ${getCell(testResult, true, options)} + ${getCell(testResult, false, options)} ${iterations} - ${getRegression(testResult)} + ${getRegression(testResult, options)} `; }) .join('\n') @@ -293,7 +316,8 @@ function createScenarioTable(scenarioSettings: ScenarioSetting, testResults: Coo /** * Helper that renders an output cell based on a test result. */ -function getCell(testResult: CookResult, getBaseline: boolean) { +function getCell(testResult: CookResult, getBaseline: boolean, options: ReportOptions) { + const { urlForDeployPath } = options; let flamegraphFile = testResult.processed.output && testResult.processed.output.flamegraphFile; let errorFile = testResult.processed.error && testResult.processed.error.errorFile; let numTicks = testResult.analysis && testResult.analysis.numTicks; @@ -317,7 +341,8 @@ function getCell(testResult: CookResult, getBaseline: boolean) { /** * Helper that renders an output cell based on a test result. */ -function getRegression(testResult: CookResult) { +function getRegression(testResult: CookResult, options: ReportOptions) { + const { urlForDeployPath } = options; const cell = testResult.analysis && testResult.analysis.regression && testResult.analysis.regression.isRegression ? testResult.analysis.regression.regressionFile @@ -329,3 +354,15 @@ function getRegression(testResult: CookResult) { return `${cell}`; } + +function validatePerfOptions(options: PerfRegressionConfig) { + if (!fs.existsSync(path.join(workspaceRoot, options.projectRootPath))) { + throw new Error(`Invalid ProjectRootPath. ${options.projectRootPath} doesn't exists`); + } + + if (!fs.existsSync(options.outDir)) { + throw new Error( + `${options.outDir} doesn't exist. Make sure to run bundling process to be able to generate perf suite.`, + ); + } +} diff --git a/scripts/tasks/src/perf-task/settings.ts b/scripts/tasks/src/perf-task/settings.ts new file mode 100644 index 0000000000000..92ca4b26dd01d --- /dev/null +++ b/scripts/tasks/src/perf-task/settings.ts @@ -0,0 +1,44 @@ +/** + * You don't have to add scenarios to this structure unless + * you want their render types to differ from the default (mount only). + * + * Note: + * You should not need to have virtual-rerender tests in most cases because mount test provides enough coverage. + * It is mostly usefual for cases where component has memoization logics. And in case of re-rendering, + * memoization logic help avoid certain code paths. + */ + +// A high number of iterations are needed to get visualization of lower level calls that are infrequently hit by ticks. +// Wiki: https://github.com/microsoft/fluentui/wiki/Perf-Testing +export const IterationsDefault = 5000; + +export const RenderTypes = ['mount', 'virtual-rerender', 'virtual-rerender-with-unmount']; +export const RenderTypesDefault = ['mount']; + +export type ScenarioNames = { [scenarioName: string]: string }; + +export type ScenarioRenderTypes = { [scenarioName: string]: string[] }; + +export type ScenarioIterations = { [scenarioName: string]: number }; + +export type PerfRegressionConfig = { + /** + * path from workspace root -> example `apps/my-app` + */ + projectRootPath: string; + /** + * name used within package.json#name + */ + projectName: string; + outDir: string; + tempDir: string; + scenariosSrcDirPath: string; + scenarioNames?: ScenarioNames; + scenarioIterations?: ScenarioIterations; + scenarioRenderTypes?: ScenarioRenderTypes; + /** + * array of scenario names to be excluded. + * NOTE: array item needs to match scenario filename without extension. So to exclude `Foo.tsx` , you need to define `['Foo']` etc. + */ + excludeScenarios?: string[]; +}; diff --git a/workspace.json b/workspace.json index 58b32ef0140e3..fc7796bf79378 100644 --- a/workspace.json +++ b/workspace.json @@ -1020,6 +1020,12 @@ "projectType": "library", "tags": ["tools"] }, + "@fluentui/scripts-perf-test-flamegrill": { + "root": "scripts/perf-test-flamegrill", + "sourceRoot": "scripts/perf-test-flamegrill/src", + "projectType": "library", + "tags": ["tools", "platform:any"] + }, "@fluentui/set-version": { "root": "packages/set-version", "projectType": "library", From 618bccf669722de1519e1408661be1919d6a078d Mon Sep 17 00:00:00 2001 From: Fluent UI Build Date: Mon, 3 Apr 2023 07:37:24 +0000 Subject: [PATCH 4/5] applying package updates --- apps/perf-test/package.json | 2 +- apps/public-docsite-resources/package.json | 10 ++++----- apps/public-docsite-v9/package.json | 2 +- apps/public-docsite/package.json | 12 +++++------ apps/react-18-tests-v8/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/stress-test/package.json | 2 +- apps/theming-designer/package.json | 4 ++-- apps/ts-minbar-test-react/package.json | 2 +- apps/vr-tests/package.json | 4 ++-- ...-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json | 7 ------- ...-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json | 7 ------- packages/azure-themes/CHANGELOG.json | 15 +++++++++++++ packages/azure-themes/CHANGELOG.md | 11 +++++++++- packages/azure-themes/package.json | 4 ++-- packages/cra-template/CHANGELOG.json | 15 +++++++++++++ packages/cra-template/CHANGELOG.md | 11 +++++++++- packages/cra-template/package.json | 4 ++-- packages/fluent2-theme/CHANGELOG.json | 15 +++++++++++++ packages/fluent2-theme/CHANGELOG.md | 11 +++++++++- packages/fluent2-theme/package.json | 4 ++-- packages/monaco-editor/CHANGELOG.json | 15 +++++++++++++ packages/react-cards/CHANGELOG.json | 15 +++++++++++++ packages/react-cards/CHANGELOG.md | 11 +++++++++- packages/react-cards/package.json | 4 ++-- packages/react-charting/CHANGELOG.json | 15 +++++++++++++ packages/react-charting/CHANGELOG.md | 11 +++++++++- packages/react-charting/package.json | 6 +++--- .../react-migration-v8-v9/package.json | 4 ++-- packages/react-date-time/CHANGELOG.json | 15 +++++++++++++ packages/react-date-time/CHANGELOG.md | 11 +++++++++- packages/react-date-time/package.json | 4 ++-- .../react-docsite-components/CHANGELOG.json | 21 +++++++++++++++++++ .../react-docsite-components/CHANGELOG.md | 12 ++++++++++- .../react-docsite-components/package.json | 6 +++--- packages/react-examples/package.json | 14 ++++++------- packages/react-experiments/CHANGELOG.json | 15 +++++++++++++ packages/react-experiments/CHANGELOG.md | 11 +++++++++- packages/react-experiments/package.json | 4 ++-- packages/react-monaco-editor/CHANGELOG.json | 15 +++++++++++++ packages/react-monaco-editor/CHANGELOG.md | 11 +++++++++- packages/react-monaco-editor/package.json | 4 ++-- packages/react/CHANGELOG.json | 15 +++++++++++++ packages/react/CHANGELOG.md | 11 +++++++++- packages/react/package.json | 2 +- packages/storybook/package.json | 6 +++--- packages/theme-samples/CHANGELOG.json | 15 +++++++++++++ packages/theme-samples/CHANGELOG.md | 11 +++++++++- packages/theme-samples/package.json | 4 ++-- workspace.json | 12 +++++------ 50 files changed, 359 insertions(+), 87 deletions(-) delete mode 100644 change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json delete mode 100644 change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index 2a50da9c8066c..48b0ce0a0679c 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -19,7 +19,7 @@ "dependencies": { "@fluentui/scripts-perf-test-flamegrill": "*", "@fluentui/example-data": "^8.4.7", - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@microsoft/load-themed-styles": "^1.10.26", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 097dcb5877d92..b8a3c9bba7e98 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -34,15 +34,15 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/azure-themes": "^8.5.74", - "@fluentui/react-docsite-components": "^8.11.35", + "@fluentui/azure-themes": "^8.5.75", + "@fluentui/react-docsite-components": "^8.11.36", "@fluentui/font-icons-mdl2": "^8.5.13", "@fluentui/set-version": "^8.2.6", - "@fluentui/theme-samples": "^8.7.70", - "@fluentui/react-monaco-editor": "^1.7.70", + "@fluentui/theme-samples": "^8.7.71", + "@fluentui/react-monaco-editor": "^1.7.71", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index cb6ac8cfc86df..0088630dffe36 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -25,7 +25,7 @@ "@fluentui/react-datepicker-compat": "0.0.0-alpha.0", "@fluentui/react-migration-v8-v9": "^9.2.5", "@fluentui/react-migration-v0-v9": "9.0.0-alpha.0", - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/react-northstar": "^0.66.4", "@fluentui/react-icons-northstar": "^0.66.4", "@fluentui/react-components": "^9.18.6", diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json index 5e6a2c19ca24c..8624c732fc047 100644 --- a/apps/public-docsite/package.json +++ b/apps/public-docsite/package.json @@ -25,7 +25,7 @@ "devDependencies": { "@fluentui/common-styles": "^1.2.22", "@fluentui/eslint-plugin": "*", - "@fluentui/react-monaco-editor": "^1.7.70", + "@fluentui/react-monaco-editor": "^1.7.71", "write-file-webpack-plugin": "^4.1.0", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*" @@ -34,17 +34,17 @@ "@fluentui/font-icons-mdl2": "^8.5.13", "@fluentui/public-docsite-resources": "^8.1.41", "@fluentui/public-docsite-setup": "^0.3.18", - "@fluentui/react": "^8.107.0", - "@fluentui/react-docsite-components": "^8.11.35", + "@fluentui/react": "^8.107.1", + "@fluentui/react-docsite-components": "^8.11.36", "@fluentui/react-examples": "^8.34.4", - "@fluentui/react-experiments": "^8.14.65", - "@fluentui/fluent2-theme": "^8.106.7", + "@fluentui/react-experiments": "^8.14.66", + "@fluentui/fluent2-theme": "^8.106.8", "@fluentui/react-file-type-icons": "^8.8.13", "@fluentui/react-icons-mdl2": "^1.3.37", "@fluentui/react-icons-mdl2-branded": "^1.2.38", "@fluentui/set-version": "^8.2.6", "@fluentui/theme": "^2.6.25", - "@fluentui/theme-samples": "^8.7.70", + "@fluentui/theme-samples": "^8.7.71", "@fluentui/utilities": "^8.13.9", "@microsoft/load-themed-styles": "^1.10.26", "office-ui-fabric-core": "^11.0.0", diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json index cd97e4a577bd1..dd7fea5ae4092 100644 --- a/apps/react-18-tests-v8/package.json +++ b/apps/react-18-tests-v8/package.json @@ -21,7 +21,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/react-hooks": "^8.6.20", "@types/react": "18.0.14", "@types/react-dom": "18.0.6", diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index eb5c1966b09fa..39ae288590720 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -13,7 +13,7 @@ }, "license": "MIT", "devDependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@microsoft/load-themed-styles": "^1.10.26", "@types/mocha": "7.0.2", "@fluentui/public-docsite-resources": "^8.1.41", diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json index d764aeaa143e7..8cab09a24495b 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -10,7 +10,7 @@ "type-check": "tsc -b tsconfig.type.json" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/react-components": "^9.18.6", "@fluentui/react-icons": "^2.0.196", "@fluentui/web-components": "^2.5.12", diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json index 6702ea906f90f..03bb4a50809ba 100644 --- a/apps/theming-designer/package.json +++ b/apps/theming-designer/package.json @@ -19,9 +19,9 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/merge-styles": "^8.5.7", - "@fluentui/react-docsite-components": "^8.11.35", + "@fluentui/react-docsite-components": "^8.11.36", "@fluentui/foundation-legacy": "^8.2.33", "@fluentui/scheme-utilities": "^8.3.26", "@fluentui/set-version": "^8.2.6", diff --git a/apps/ts-minbar-test-react/package.json b/apps/ts-minbar-test-react/package.json index 91a3576445376..57275d0b902fe 100644 --- a/apps/ts-minbar-test-react/package.json +++ b/apps/ts-minbar-test-react/package.json @@ -5,7 +5,7 @@ "description": "Testing Fluent UI React compatibility with Typescript 3.9", "license": "MIT", "dependencies": { - "@fluentui/react": "^8.107.0" + "@fluentui/react": "^8.107.1" }, "scripts": { "type-check": "tsc -p .", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 5e94e6ca314f6..564a506faa948 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -22,8 +22,8 @@ "dependencies": { "@fluentui/example-data": "^8.4.7", "@fluentui/font-icons-mdl2": "^8.5.13", - "@fluentui/react": "^8.107.0", - "@fluentui/react-experiments": "^8.14.65", + "@fluentui/react": "^8.107.1", + "@fluentui/react-experiments": "^8.14.66", "@fluentui/react-hooks": "^8.6.20", "@fluentui/react-icons-mdl2": "^1.3.37", "@fluentui/storybook": "^1.0.0", diff --git a/change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json b/change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json deleted file mode 100644 index 0dfb945db3ce4..0000000000000 --- a/change/@fluentui-monaco-editor-ddb09896-2b72-4b5a-a337-3f5cc2597ae9.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "fix(scripts-tasks): format and update API usage which was modified by eslint export * rule unwrap autofix", - "packageName": "@fluentui/monaco-editor", - "email": "martinhochel@microsoft.com", - "dependentChangeType": "none" -} diff --git a/change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json b/change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json deleted file mode 100644 index bf8ac8a4df3fc..0000000000000 --- a/change/@fluentui-react-8e2d7e7a-c47a-459d-8184-f5744bc1d88e.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: ColorPicker preview box updated to ignore forced colors to display chosen color", - "packageName": "@fluentui/react", - "email": "gcox@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index 4073a8cbfcc46..3d20b961a76b8 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/azure-themes_v8.5.75", + "version": "8.5.75", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/azure-themes_v8.5.74", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index 3dc1156a6908e..95f54bcc27819 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.5.75](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.75) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.5.74..@fluentui/azure-themes_v8.5.75) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [8.5.74](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.74) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index df0e78ff44e4e..e841168600b0a 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.5.74", + "version": "8.5.75", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/set-version": "^8.2.6", "tslib": "^2.1.0" } diff --git a/packages/cra-template/CHANGELOG.json b/packages/cra-template/CHANGELOG.json index 0897cb8738cd9..00d57b5a0b27d 100644 --- a/packages/cra-template/CHANGELOG.json +++ b/packages/cra-template/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/cra-template", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/cra-template_v8.4.72", + "version": "8.4.72", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/cra-template_v8.4.71", diff --git a/packages/cra-template/CHANGELOG.md b/packages/cra-template/CHANGELOG.md index 14c79be459caf..47d0a7ac953e9 100644 --- a/packages/cra-template/CHANGELOG.md +++ b/packages/cra-template/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/cra-template -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.4.72](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.72) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.71..@fluentui/cra-template_v8.4.72) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [8.4.71](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.71) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index d5dcd6aa1a35b..168cb8b821854 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.71", + "version": "8.4.72", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", @@ -18,7 +18,7 @@ "template.json" ], "devDependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/scripts-projects-test": "*", "@fluentui/scripts-monorepo": "*" } diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json index 3d5907c67dab7..dd423f0a42710 100644 --- a/packages/fluent2-theme/CHANGELOG.json +++ b/packages/fluent2-theme/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/fluent2-theme", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/fluent2-theme_v8.106.8", + "version": "8.106.8", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/fluent2-theme_v8.106.7", diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md index 7e5cbd0806dfb..ffed7b568a995 100644 --- a/packages/fluent2-theme/CHANGELOG.md +++ b/packages/fluent2-theme/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/fluent2-theme -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.106.8](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.106.8) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.106.7..@fluentui/fluent2-theme_v8.106.8) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [8.106.7](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.106.7) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json index c9059e4f7d328..da517ff743d9f 100644 --- a/packages/fluent2-theme/package.json +++ b/packages/fluent2-theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/fluent2-theme", - "version": "8.106.7", + "version": "8.106.8", "description": "A Fluent2 theme for Fluent UI React 8.x", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/set-version": "^8.2.6", "tslib": "^2.1.0" } diff --git a/packages/monaco-editor/CHANGELOG.json b/packages/monaco-editor/CHANGELOG.json index 2c33540c274db..33b08dfee9e77 100644 --- a/packages/monaco-editor/CHANGELOG.json +++ b/packages/monaco-editor/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/monaco-editor", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:17 GMT", + "tag": "@fluentui/monaco-editor_v1.3.6", + "version": "1.3.6", + "comments": { + "none": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/monaco-editor", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8", + "comment": "fix(scripts-tasks): format and update API usage which was modified by eslint export * rule unwrap autofix" + } + ] + } + }, { "date": "Mon, 27 Feb 2023 07:39:55 GMT", "tag": "@fluentui/monaco-editor_v1.3.5", diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index 88f12da589a70..913d1ee86016b 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/react-cards_v0.205.71", + "version": "0.205.71", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/react-cards_v0.205.70", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index bcf54fc17affc..f2bfb2eae2c7f 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-cards -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [0.205.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.71) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.70..@fluentui/react-cards_v0.205.71) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [0.205.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.70) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index a0bfee9641478..a02fe5fcac98c 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.70", + "version": "0.205.71", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,7 +34,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/foundation-legacy": "^8.2.33", "@fluentui/set-version": "^8.2.6", "@microsoft/load-themed-styles": "^1.10.26", diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json index 42c6b44bd6524..c82c66f4f99c7 100644 --- a/packages/react-charting/CHANGELOG.json +++ b/packages/react-charting/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/react-charting_v5.16.11", + "version": "5.16.11", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:51 GMT", "tag": "@fluentui/react-charting_v5.16.10", diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md index 84e719c5655fb..9c9f06fd58f5b 100644 --- a/packages/react-charting/CHANGELOG.md +++ b/packages/react-charting/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-charting -This log was last generated on Thu, 30 Mar 2023 07:43:51 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [5.16.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.11) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.10..@fluentui/react-charting_v5.16.11) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [5.16.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.10) Thu, 30 Mar 2023 07:43:51 GMT diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 751a629f002bb..d67e3618b2a79 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charting", - "version": "5.16.10", + "version": "5.16.11", "description": "Experimental React charting components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@types/react-addons-test-utils": "0.14.18", "@fluentui/jest-serializer-merge-styles": "^8.0.24", "@fluentui/scripts-jest": "*", @@ -62,7 +62,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json index 4b5b7d6391d8e..bd399ea2bbb91 100644 --- a/packages/react-components/react-migration-v8-v9/package.json +++ b/packages/react-components/react-migration-v8-v9/package.json @@ -32,8 +32,8 @@ }, "dependencies": { "@ctrl/tinycolor": "3.3.4", - "@fluentui/fluent2-theme": "^8.106.7", - "@fluentui/react": "^8.107.0", + "@fluentui/fluent2-theme": "^8.106.8", + "@fluentui/react": "^8.107.1", "@fluentui/react-components": "^9.18.6", "@fluentui/react-icons": "^2.0.196", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json index a80bff04edb4a..d0e2d9dfa871e 100644 --- a/packages/react-date-time/CHANGELOG.json +++ b/packages/react-date-time/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-date-time", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/react-date-time_v8.7.71", + "version": "8.7.71", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-date-time", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/react-date-time_v8.7.70", diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md index 0bf1af3b0032c..624fef4ffce69 100644 --- a/packages/react-date-time/CHANGELOG.md +++ b/packages/react-date-time/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-date-time -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.7.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.71) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.70..@fluentui/react-date-time_v8.7.71) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [8.7.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.70) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json index a23389e3220f5..a2c148d1c2af2 100644 --- a/packages/react-date-time/package.json +++ b/packages/react-date-time/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-date-time", - "version": "8.7.70", + "version": "8.7.71", "description": "Date and time related React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/set-version": "^8.2.6", "tslib": "^2.1.0" }, diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json index 0fd09764f9b70..a19390487e336 100644 --- a/packages/react-docsite-components/CHANGELOG.json +++ b/packages/react-docsite-components/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-docsite-components", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/react-docsite-components_v8.11.36", + "version": "8.11.36", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.71", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/react-docsite-components_v8.11.35", diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md index cb8f96e57074e..f04813124fc25 100644 --- a/packages/react-docsite-components/CHANGELOG.md +++ b/packages/react-docsite-components/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-docsite-components -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.11.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.11.36) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.11.35..@fluentui/react-docsite-components_v8.11.36) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.71 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [8.11.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.11.35) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json index bf89fa8390a6d..4a9cdbb60eb24 100644 --- a/packages/react-docsite-components/package.json +++ b/packages/react-docsite-components/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-docsite-components", - "version": "8.11.35", + "version": "8.11.36", "description": "Fluent UI React components for building documentation sites.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,14 +35,14 @@ "react-dom": ">=16.8.0 <19.0.0" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/theme": "^2.6.25", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.7", "@fluentui/public-docsite-setup": "^0.3.18", "@fluentui/react-hooks": "^8.6.20", "@fluentui/set-version": "^8.2.6", - "@fluentui/react-monaco-editor": "^1.7.70", + "@fluentui/react-monaco-editor": "^1.7.71", "color-check": "0.0.2", "markdown-to-jsx": "^7.0.0", "office-ui-fabric-core": "^11.0.0", diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index dc8a8487654dc..dff1b0eb3efdf 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -25,18 +25,18 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/azure-themes": "^8.5.74", + "@fluentui/azure-themes": "^8.5.75", "@fluentui/date-time-utilities": "^8.5.6", "@fluentui/dom-utilities": "^2.2.6", "@fluentui/example-data": "^8.4.7", "@fluentui/font-icons-mdl2": "^8.5.13", "@fluentui/foundation-legacy": "^8.2.33", "@fluentui/merge-styles": "^8.5.7", - "@fluentui/react": "^8.107.0", - "@fluentui/react-cards": "^0.205.70", - "@fluentui/react-charting": "^5.16.10", - "@fluentui/react-docsite-components": "^8.11.35", - "@fluentui/react-experiments": "^8.14.65", + "@fluentui/react": "^8.107.1", + "@fluentui/react-cards": "^0.205.71", + "@fluentui/react-charting": "^5.16.11", + "@fluentui/react-docsite-components": "^8.11.36", + "@fluentui/react-experiments": "^8.14.66", "@fluentui/react-file-type-icons": "^8.8.13", "@fluentui/react-focus": "^8.8.19", "@fluentui/react-hooks": "^8.6.20", @@ -44,7 +44,7 @@ "@fluentui/scheme-utilities": "^8.3.26", "@fluentui/style-utilities": "^8.9.6", "@fluentui/theme": "^2.6.25", - "@fluentui/theme-samples": "^8.7.70", + "@fluentui/theme-samples": "^8.7.71", "@fluentui/utilities": "^8.13.9", "@microsoft/load-themed-styles": "^1.10.26", "d3-fetch": "3.0.1", diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json index 023efec869603..8e69012d3b6b4 100644 --- a/packages/react-experiments/CHANGELOG.json +++ b/packages/react-experiments/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-experiments", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/react-experiments_v8.14.66", + "version": "8.14.66", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/react-experiments_v8.14.65", diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md index 899922fc8c814..da0d0f8223d53 100644 --- a/packages/react-experiments/CHANGELOG.md +++ b/packages/react-experiments/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-experiments -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.14.66](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.66) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.65..@fluentui/react-experiments_v8.14.66) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [8.14.65](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.65) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json index 97fb8feea8b26..a51fad6a2ac9d 100644 --- a/packages/react-experiments/package.json +++ b/packages/react-experiments/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-experiments", - "version": "8.14.65", + "version": "8.14.66", "description": "Experimental React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -39,7 +39,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/theme": "^2.6.25", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.7", diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json index 445c2ec9c58d0..51c8a82974f94 100644 --- a/packages/react-monaco-editor/CHANGELOG.json +++ b/packages/react-monaco-editor/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-monaco-editor", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.71", + "version": "1.7.71", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/react-monaco-editor_v1.7.70", diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md index aca6169b3fc5c..b9f4b1d8e18a0 100644 --- a/packages/react-monaco-editor/CHANGELOG.md +++ b/packages/react-monaco-editor/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-monaco-editor -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [1.7.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.71) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.70..@fluentui/react-monaco-editor_v1.7.71) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [1.7.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.70) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json index 12d86532e6a69..707f08a07e76c 100644 --- a/packages/react-monaco-editor/package.json +++ b/packages/react-monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-monaco-editor", - "version": "1.7.70", + "version": "1.7.71", "description": "Live React example editing using monaco", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -30,7 +30,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.7", "@fluentui/monaco-editor": "^1.3.6", diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json index 4b829120f305d..0f9a2f70a484d 100644 --- a/packages/react/CHANGELOG.json +++ b/packages/react/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/react_v8.107.1", + "version": "8.107.1", + "comments": { + "patch": [ + { + "author": "gcox@microsoft.com", + "package": "@fluentui/react", + "commit": "cbc6188edbe994d00fd4448c5200a85ce97d7388", + "comment": "fix: ColorPicker preview box updated to ignore forced colors to display chosen color" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:50 GMT", "tag": "@fluentui/react_v8.107.0", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 95866873b16ee..ee50c4d625b39 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react -This log was last generated on Thu, 30 Mar 2023 07:43:50 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.107.1](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.107.1) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.107.0..@fluentui/react_v8.107.1) + +### Patches + +- fix: ColorPicker preview box updated to ignore forced colors to display chosen color ([PR #27394](https://github.com/microsoft/fluentui/pull/27394) by gcox@microsoft.com) + ## [8.107.0](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.107.0) Thu, 30 Mar 2023 07:43:50 GMT diff --git a/packages/react/package.json b/packages/react/package.json index 59cf9668341de..33d863b930863 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react", - "version": "8.107.0", + "version": "8.107.1", "description": "Reusable React components for building web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index ccbdbded2caa8..2addfa627d268 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -22,13 +22,13 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/theme": "^2.6.25", "@storybook/addon-knobs": "6.4.0", "@storybook/addon-essentials": "6.5.15", "@storybook/addons": "6.5.15", - "@fluentui/azure-themes": "^8.5.74", - "@fluentui/theme-samples": "^8.7.70", + "@fluentui/azure-themes": "^8.5.75", + "@fluentui/theme-samples": "^8.7.71", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json index ff25f3b0a04be..08b21e404c98d 100644 --- a/packages/theme-samples/CHANGELOG.json +++ b/packages/theme-samples/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/theme-samples", "entries": [ + { + "date": "Mon, 03 Apr 2023 07:37:18 GMT", + "tag": "@fluentui/theme-samples_v8.7.71", + "version": "8.7.71", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/react to v8.107.1", + "commit": "ffe1c8becb670b463e1b1c3d6575d596d83a4fe8" + } + ] + } + }, { "date": "Thu, 30 Mar 2023 07:43:52 GMT", "tag": "@fluentui/theme-samples_v8.7.70", diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md index 1aef1acd7b8af..99856a9ee0a32 100644 --- a/packages/theme-samples/CHANGELOG.md +++ b/packages/theme-samples/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/theme-samples -This log was last generated on Thu, 30 Mar 2023 07:43:52 GMT and should not be manually modified. +This log was last generated on Mon, 03 Apr 2023 07:37:18 GMT and should not be manually modified. +## [8.7.71](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.71) + +Mon, 03 Apr 2023 07:37:18 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.70..@fluentui/theme-samples_v8.7.71) + +### Patches + +- Bump @fluentui/react to v8.107.1 ([PR #26920](https://github.com/microsoft/fluentui/pull/26920) by beachball) + ## [8.7.70](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.70) Thu, 30 Mar 2023 07:43:52 GMT diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json index 7a1ce41427698..901e188d815c2 100644 --- a/packages/theme-samples/package.json +++ b/packages/theme-samples/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme-samples", - "version": "8.7.70", + "version": "8.7.71", "description": "Sample themes for use with Fabric components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.0", + "@fluentui/react": "^8.107.1", "@fluentui/set-version": "^8.2.6", "@fluentui/scheme-utilities": "^8.3.26", "tslib": "^2.1.0" diff --git a/workspace.json b/workspace.json index fc7796bf79378..7160536139301 100644 --- a/workspace.json +++ b/workspace.json @@ -960,6 +960,12 @@ "projectType": "library", "tags": ["tools"] }, + "@fluentui/scripts-perf-test-flamegrill": { + "root": "scripts/perf-test-flamegrill", + "sourceRoot": "scripts/perf-test-flamegrill/src", + "projectType": "library", + "tags": ["tools", "platform:any"] + }, "@fluentui/scripts-prettier": { "root": "scripts/prettier", "sourceRoot": "scripts/prettier/src", @@ -1020,12 +1026,6 @@ "projectType": "library", "tags": ["tools"] }, - "@fluentui/scripts-perf-test-flamegrill": { - "root": "scripts/perf-test-flamegrill", - "sourceRoot": "scripts/perf-test-flamegrill/src", - "projectType": "library", - "tags": ["tools", "platform:any"] - }, "@fluentui/set-version": { "root": "packages/set-version", "projectType": "library", From 2bea5b29844ac124b923a40e20e135e5b25668c6 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 3 Apr 2023 11:30:53 +0200 Subject: [PATCH 5/5] feat(scripts-executors): support custom base and printing all affected packages for checkIfPackagesAffected (#27364) * feat(scripts-executors): support custom base and printing all affected packages for checkIfPackagesAffected * ci: update check:affected-packages API to check:affected --- .devops/templates/runpublishvrscreenshot.yml | 2 +- azure-pipelines.perf-test.yml | 6 +-- package.json | 2 +- scripts/executors/checkIfPackagesAffected.js | 43 +++++++++----------- scripts/monorepo/src/getAffectedPackages.js | 17 ++++++++ scripts/monorepo/src/index.d.ts | 2 +- scripts/monorepo/src/utils.js | 36 +++++++++++++++- 7 files changed, 77 insertions(+), 31 deletions(-) diff --git a/.devops/templates/runpublishvrscreenshot.yml b/.devops/templates/runpublishvrscreenshot.yml index 199504680c4ba..ac66886c6fb17 100644 --- a/.devops/templates/runpublishvrscreenshot.yml +++ b/.devops/templates/runpublishvrscreenshot.yml @@ -19,7 +19,7 @@ steps: isPR=${{lower(eq(variables['Build.Reason'], 'PullRequest'))}} echo $isPR if [[ $isPR == true ]]; then - packageAffected=$(yarn --silent check:affected-package --packages ${{ parameters.vrTestPackageName }} --pr=true) + packageAffected=$(yarn --silent check:affected --package ${{ parameters.vrTestPackageName }}) if [[ $packageAffected == false ]]; then echo "In PR pipeline but NOT affecting test package. Skipping test run" echo "##vso[task.setvariable variable=vrTestSkip;]yes" diff --git a/azure-pipelines.perf-test.yml b/azure-pipelines.perf-test.yml index 08682210e8c38..c0662c3d9b1f1 100644 --- a/azure-pipelines.perf-test.yml +++ b/azure-pipelines.perf-test.yml @@ -21,9 +21,9 @@ jobs: displayName: yarn - script: | - NorthstarAffected=$(yarn --silent check:affected-package --packages @fluentui/react-northstar --pr) - V8Affected=$(yarn --silent check:affected-package --packages @fluentui/react --pr) - ReactComponentsAffected=$(yarn --silent check:affected-package --packages @fluentui/react-components --pr) + NorthstarAffected=$(yarn --silent check:affected --package @fluentui/react-northstar) + V8Affected=$(yarn --silent check:affected --package @fluentui/react) + ReactComponentsAffected=$(yarn --silent check:affected --package @fluentui/react-components) if [[ $NorthstarAffected == true ]]; then echo "##vso[task.setvariable variable=NorthstarPackageAffected;isOutput=true]true" fi diff --git a/package.json b/package.json index bfab1faa390f9..12d49f6b292c6 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "change": "beachball change --no-commit", "check:change": "beachball check", "check:modified-files": "node -r ./scripts/ts-node/register ./scripts/executors/check-for-modified-files", - "check:affected-package": "node ./scripts/executors/checkIfPackagesAffected.js", + "check:affected": "node ./scripts/executors/checkIfPackagesAffected.js", "check:installed-dependencies-versions": "satisfied --no-peers --skip-invalid", "clean": "lage clean --verbose", "code-style": "lage code-style --verbose", diff --git a/scripts/executors/checkIfPackagesAffected.js b/scripts/executors/checkIfPackagesAffected.js index da03b35904499..ec09a15f7096b 100644 --- a/scripts/executors/checkIfPackagesAffected.js +++ b/scripts/executors/checkIfPackagesAffected.js @@ -1,41 +1,36 @@ -const { getAffectedPackages, getNthCommit } = require('@fluentui/scripts-monorepo'); +const { getAffectedPackages } = require('@fluentui/scripts-monorepo'); const yargs = require('yargs'); const args = yargs - .option('packages', { + .option('package', { alias: 'p', type: 'array', + // eslint-disable-next-line @typescript-eslint/naming-convention + string: true, description: 'Package to check modified files from', - demandOption: true, + demandOption: false, }) - .option('pr', { - alias: 'r', - type: 'boolean', - description: 'During PR build compares to origin/master, in CI build compares to last commit', - default: false, + .option('base', { + type: 'string', + description: 'Base of the current branch (usually main or master)', + default: 'origin/master', }) - .scriptName('bundle-size') .version(false).argv; const isPackageAffected = () => { - const { packages, pr } = args; + const { package: packages, base } = args; + const affectedPackages = getAffectedPackages(base); - let affectedPackages = new Set(); - - if (pr) { - affectedPackages = getAffectedPackages(); - } else { - // master CI build, - const previousMasterCommit = getNthCommit(); - affectedPackages = getAffectedPackages(previousMasterCommit); - } - - for (const pkg of packages) { - if (affectedPackages.has(pkg)) { - return true; + if (packages) { + for (const pkg of packages) { + if (affectedPackages.has(pkg)) { + return true; + } } + return false; } - return false; + + return affectedPackages; }; function main() { diff --git a/scripts/monorepo/src/getAffectedPackages.js b/scripts/monorepo/src/getAffectedPackages.js index 1bedc5046a080..7546395da1849 100644 --- a/scripts/monorepo/src/getAffectedPackages.js +++ b/scripts/monorepo/src/getAffectedPackages.js @@ -1,6 +1,7 @@ const { spawnSync } = require('child_process'); const findGitRoot = require('./findGitRoot'); +const { getUncommittedFiles, getUntrackedFiles } = require('./utils'); /** * Indicator of what packages have been affected by changes @@ -10,6 +11,7 @@ const findGitRoot = require('./findGitRoot'); * @returns {Set} - Set of packages that are affected by in the current branch */ function getAffectedPackages(since = 'origin/master') { + reportLageAffectedSinceResolution(); const gitRoot = findGitRoot(); const res = spawnSync('yarn', ['lage', 'info', '--since', since], { cwd: gitRoot, shell: true }); if (res.status !== 0) { @@ -28,4 +30,19 @@ function getAffectedPackages(since = 'origin/master') { return new Set(info.scope); } +/** + * @see https://github.com/microsoft/fluentui/issues/26147 + */ +function reportLageAffectedSinceResolution() { + const uncommittedGitFiles = [...getUncommittedFiles(), ...getUntrackedFiles()]; + if (uncommittedGitFiles.length > 0) { + console.warn( + '⚠️ NOTE:\n', + 'You workspace contains uncommitted or untracked files!\n', + 'This gives you false positives about true affected tree.\n', + 'To get proper results make sure you have clean git tree.\n\n', + ); + } +} + exports.getAffectedPackages = getAffectedPackages; diff --git a/scripts/monorepo/src/index.d.ts b/scripts/monorepo/src/index.d.ts index 2a4c56adac346..ee8b3d4e5ca0d 100644 --- a/scripts/monorepo/src/index.d.ts +++ b/scripts/monorepo/src/index.d.ts @@ -7,6 +7,6 @@ export { isConvergedPackage, shipsAMD } from './isConvergedPackage'; export { getAffectedPackages } from './getAffectedPackages'; export { getLernaAliases } from './get-lerna-aliases'; export { getDefaultEnvironmentVars } from './getDefaultEnvironmentVars'; -export { getProjectMetadata, workspaceRoot } from './utils'; +export { getProjectMetadata, workspaceRoot, getUncommittedFiles, getUntrackedFiles } from './utils'; export * as eslintConstants from './eslint-constants'; export { getNthCommit } from './getNthCommit'; diff --git a/scripts/monorepo/src/utils.js b/scripts/monorepo/src/utils.js index 6f4c813a25fd5..a3fe6c5457987 100644 --- a/scripts/monorepo/src/utils.js +++ b/scripts/monorepo/src/utils.js @@ -1,8 +1,11 @@ +const { execSync } = require('child_process'); const fs = require('fs'); const path = require('path'); -const { workspaceRoot } = require('nx/src/utils/app-root'); + +const { workspaceRoot } = require('@nrwl/devkit'); const findGitRoot = require('./findGitRoot'); +const TEN_MEGABYTES = 1024 * 10000; /** * Gets project metadata from monorepo source of truth which is `workspace.json` @@ -20,5 +23,36 @@ function getProjectMetadata(options) { return nxWorkspace.projects[options.name]; } +/** + * + * @param {string} command + * @returns {string[]} + */ +function parseGitOutput(command) { + return execSync(command, { maxBuffer: TEN_MEGABYTES, cwd: workspaceRoot }) + .toString('utf-8') + .split('\n') + .map(a => a.trim()) + .filter(a => a.length > 0); +} + +/** + * + * @returns {string[]} + */ +function getUncommittedFiles() { + return parseGitOutput(`git diff --name-only --no-renames --relative HEAD .`); +} + +/** + * + * @returns {string[]} + */ +function getUntrackedFiles() { + return parseGitOutput(`git ls-files --others --exclude-standard`); +} + +exports.getUncommittedFiles = getUncommittedFiles; +exports.getUntrackedFiles = getUntrackedFiles; exports.getProjectMetadata = getProjectMetadata; exports.workspaceRoot = workspaceRoot;