chore(scripts): create separate configs for beachball releases #22091

Hotell · 2022-03-14T18:14:31Z

Current Behavior

we use environment variables to differentiate what kind of behaviour should be used for beachball releasing

New Behavior

we use different beachball configs per component library release, while leveraging undocumented beachball CLI --config flag
refactored lot of code to make it less redundant
we have tests

Related Issue(s)

microsoft/beachball#647

fabricteam · 2022-03-14T18:19:55Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`74.243 kB` `22.679 kB`
`react-avatar` Avatar	`45.571 kB` `13.318 kB`
`react-badge` Badge	`20.985 kB` `6.62 kB`
`react-badge` CounterBadge	`21.898 kB` `6.925 kB`
`react-badge` PresenceBadge	`22.21 kB` `6.672 kB`
`react-button` Button	`32.919 kB` `9.027 kB`
`react-button` CompoundButton	`39.846 kB` `10.254 kB`
`react-button` MenuButton	`35.102 kB` `9.777 kB`
`react-button` SplitButton	`42.353 kB` `11.078 kB`
`react-button` ToggleButton	`47.504 kB` `10.596 kB`
`react-card` Card - All	`60.746 kB` `17.41 kB`
`react-card` Card	`56.031 kB` `16.147 kB`
`react-card` CardFooter	`7.793 kB` `3.327 kB`
`react-card` CardHeader	`9.363 kB` `3.841 kB`
`react-card` CardPreview	`7.765 kB` `3.35 kB`
`react-combobox` Combobox	`61.412 kB` `20.982 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`181.141 kB` `50.598 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.078 kB` `11.098 kB`
`react-divider` Divider	`15.55 kB` `5.595 kB`
`react-image` Image	`10.012 kB` `3.982 kB`
`react-input` Input	`22.163 kB` `7.295 kB`
`react-label` Label	`8.57 kB` `3.586 kB`
`react-link` Link	`11.414 kB` `4.64 kB`
`react-menu` Menu (including children components)	`111.626 kB` `34.05 kB`
`react-menu` Menu (including selectable components)	`114.801 kB` `34.521 kB`
`react-overflow` hooks only	`10.792 kB` `4.124 kB`
`react-popover` Popover	`103.753 kB` `31.544 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-positioning` usePositioning	`23.828 kB` `8.283 kB`
`react-provider` FluentProvider	`14.127 kB` `5.299 kB`
`react-radio` Radio	`29.499 kB` `10.102 kB`
`react-radio` RadioGroup	`13.664 kB` `5.486 kB`
`react-select` Select	`17.138 kB` `6.367 kB`
`react-slider` Slider	`25.326 kB` `8.198 kB`
`react-spinbutton` SpinButton	`42.132 kB` `11.895 kB`
`react-spinner` Spinner	`18.132 kB` `6.013 kB`
`react-switch` Switch	`25.455 kB` `8.255 kB`
`react-text` Text - Default	`10.904 kB` `4.298 kB`
`react-text` Text - Wrappers	`14.226 kB` `4.714 kB`
`react-textarea` Textarea	`21.207 kB` `7.165 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.363 kB` `7.043 kB`
`react-theme` Teams: Light theme	`19.806 kB` `5.699 kB`
`react-tooltip` Tooltip	`43.584 kB` `14.992 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against c089a26b502e3b2f34855a86e932156c9271e03a}

codesandbox-ci · 2022-03-14T18:24:55Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 20a6176:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2022-03-14T18:32:59Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	898	923	5000
Button	mount	543	569	5000
FluentProvider	mount	1829	1856	5000
FluentProviderWithTheme	mount	298	275	10
FluentProviderWithTheme	virtual-rerender	245	244	10
FluentProviderWithTheme	virtual-rerender-with-unmount	308	304	10
MakeStyles	mount	1477	1609	50000

size-auditor · 2022-03-14T18:34:58Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: c089a26b502e3b2f34855a86e932156c9271e03a (build)

fabricteam · 2022-03-14T18:41:05Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	202	173	1.17:1
AttachmentMinimalPerf.default	177	164	1.08:1
ButtonMinimalPerf.default	191	177	1.08:1
ImageMinimalPerf.default	430	400	1.08:1
AnimationMinimalPerf.default	615	580	1.06:1
DividerMinimalPerf.default	401	377	1.06:1
BoxMinimalPerf.default	381	364	1.05:1
FlexMinimalPerf.default	308	293	1.05:1
ListCommonPerf.default	721	686	1.05:1
TableMinimalPerf.default	449	427	1.05:1
VideoMinimalPerf.default	734	696	1.05:1
ButtonSlotsPerf.default	607	582	1.04:1
PortalMinimalPerf.default	174	168	1.04:1
CheckboxMinimalPerf.default	2937	2852	1.03:1
SegmentMinimalPerf.default	384	374	1.03:1
AttachmentSlotsPerf.default	1184	1156	1.02:1
ButtonOverridesMissPerf.default	1659	1633	1.02:1
ChatMinimalPerf.default	824	806	1.02:1
GridMinimalPerf.default	366	360	1.02:1
LabelMinimalPerf.default	435	426	1.02:1
MenuButtonMinimalPerf.default	1890	1853	1.02:1
RosterPerf.default	1272	1246	1.02:1
SliderMinimalPerf.default	1831	1795	1.02:1
IconMinimalPerf.default	684	670	1.02:1
CardMinimalPerf.default	640	636	1.01:1
ChatDuplicateMessagesPerf.default	319	316	1.01:1
DialogMinimalPerf.default	836	825	1.01:1
DropdownMinimalPerf.default	3199	3166	1.01:1
FormMinimalPerf.default	474	469	1.01:1
HeaderSlotsPerf.default	840	832	1.01:1
LoaderMinimalPerf.default	741	731	1.01:1
ProviderMergeThemesPerf.default	1297	1281	1.01:1
SkeletonMinimalPerf.default	385	383	1.01:1
StatusMinimalPerf.default	757	746	1.01:1
TextMinimalPerf.default	379	377	1.01:1
CustomToolbarPrototype.default	2877	2855	1.01:1
CarouselMinimalPerf.default	520	520	1:1
DatepickerMinimalPerf.default	6679	6647	1:1
DropdownManyItemsPerf.default	771	768	1:1
EmbedMinimalPerf.default	4461	4449	1:1
InputMinimalPerf.default	1400	1394	1:1
MenuMinimalPerf.default	943	939	1:1
ReactionMinimalPerf.default	407	408	1:1
SplitButtonMinimalPerf.default	4802	4787	1:1
ToolbarMinimalPerf.default	1100	1096	1:1
HeaderMinimalPerf.default	393	396	0.99:1
ItemLayoutMinimalPerf.default	1304	1322	0.99:1
ListMinimalPerf.default	552	555	0.99:1
ListNestedPerf.default	630	634	0.99:1
PopupMinimalPerf.default	657	663	0.99:1
TooltipMinimalPerf.default	1280	1289	0.99:1
AvatarMinimalPerf.default	208	212	0.98:1
ChatWithPopoverPerf.default	418	428	0.98:1
LayoutMinimalPerf.default	387	396	0.98:1
ListWith60ListItems.default	678	691	0.98:1
RefMinimalPerf.default	239	245	0.98:1
TableManyItemsPerf.default	2136	2178	0.98:1
TreeMinimalPerf.default	895	909	0.98:1
AccordionMinimalPerf.default	156	161	0.97:1
RadioGroupMinimalPerf.default	493	506	0.97:1
TextAreaMinimalPerf.default	567	582	0.97:1
AlertMinimalPerf.default	283	295	0.96:1
ProviderMinimalPerf.default	409	439	0.93:1

fabricteam · 2022-03-14T18:46:50Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1073	1094	5000
Breadcrumb	mount	2946	3000	1000
Checkbox	mount	1761	1744	5000
CheckboxBase	mount	1540	1491	5000
ChoiceGroup	mount	5383	5480	5000
ComboBox	mount	1090	1167	1000
CommandBar	mount	11460	11254	1000
ContextualMenu	mount	12247	12194	1000
DefaultButton	mount	1280	1321	5000
DetailsRow	mount	4393	4289	5000
DetailsRowFast	mount	4378	4304	5000
DetailsRowNoStyles	mount	4178	4273	5000
Dialog	mount	2519	2452	1000
DocumentCardTitle	mount	196	245	1000
Dropdown	mount	3707	3722	5000
FocusTrapZone	mount	2142	2104	5000
FocusZone	mount	2122	2048	5000
IconButton	mount	2075	2028	5000
Label	mount	377	390	5000
Layer	mount	3310	3291	5000
Link	mount	547	555	5000
MenuButton	mount	1779	1736	5000
MessageBar	mount	2330	2329	5000
Nav	mount	3737	3731	1000
OverflowSet	mount	1204	1200	5000
Panel	mount	2403	2410	1000
Persona	mount	1157	1126	1000
Pivot	mount	1637	1633	1000
PrimaryButton	mount	1507	1480	5000
Rating	mount	9191	9194	5000
SearchBox	mount	1566	1531	5000
Shimmer	mount	2925	2886	5000
Slider	mount	2172	2241	5000
SpinButton	mount	5559	5649	5000
Spinner	mount	488	476	5000
SplitButton	mount	3637	3591	5000
Stack	mount	599	591	5000
StackWithIntrinsicChildren	mount	2900	2861	5000
StackWithTextChildren	mount	6470	6425	5000
SwatchColorPicker	mount	13078	13046	5000
TagPicker	mount	3132	3150	5000
TeachingBubble	mount	101039	102243	5000
Text	mount	493	493	5000
TextField	mount	1655	1583	5000
ThemeProvider	mount	1301	1322	5000
ThemeProvider	virtual-rerender	713	686	5000
ThemeProvider	virtual-rerender-with-unmount	2176	2107	5000
Toggle	mount	957	907	5000
buttonNative	mount	146	142	5000

Hotell · 2022-03-15T17:40:06Z

scripts/jest.config.js

+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {


added common setup to enable test search intellisense and typescript support

yeah, we might complain, but it is a good thing to test these scripts

Hotell · 2022-03-15T17:41:52Z

scripts/beachball/utils.ts

  const vNextPackagePaths = getVNextPackagePaths(allPackageInfo);

-  if (process.env.RELEASE_VNEXT) {


no more env variables hacks

scripts/beachball/utils.ts

Hotell · 2022-03-15T17:51:13Z

.github/workflows/check-packages.yml

            core.exportVariable('BEACHBALL_VERSION', beachballVersion);

      - run: |
-          cp scripts/beachball/.beachballrc.base.json .beachballrc.json


no more hacks needed

Hotell · 2022-03-15T17:52:25Z

scripts/beachball/getVNextChangelogGroups.ts

-export function getVNextPackagePaths(allPackageInfo: AllPackageInfo) {
-  return Object.values(allPackageInfo)
-    .map(packageInfo => {
-      if (packageInfo.packageJson.version.startsWith('9.')) {


unified the logic by leveraging isConverged

varholak-peter

Nice work mate! 👏

azure-pipelines.release-vnext.yml

varholak-peter · 2022-03-17T17:18:05Z

scripts/beachball/shared.config.ts

+import { renderHeader, renderEntry } from './customRenderers';
+
+const baseConfig: BeachballConfig = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, 'base.config.json'), { encoding: 'utf8' }),


What's the benefit of reading the file from FS instead of importing it directly as a JSON? 🤔

good question!

typescript config tweak which in context of script may be non trivial at the moment

using require to obtain static assets doesn't align with ESM modules

there are probably more reasons I cant think of ATM :D sorry about that

varholak-peter · 2022-03-17T17:20:24Z

scripts/beachball/utils.ts

+      scope: [...vNextPackagePaths],
+      groupConfig: {
+        masterPackageName: '@fluentui/react-components',
+        changelogPath: 'packages/react-components',
+        include: vNextPackagePaths,


We are spreading vNextPackagePaths in scope but not in include. I don't think spreading the array does much here so we might want to pass it directly.

varholak-peter · 2022-03-17T17:20:44Z

scripts/beachball/utils.ts

+  if (version === 'v8') {
+    const ignoreVNextScope = vNextPackagePaths.map(path => `!${path}`);
+
+    return { scope: [...ignoreVNextScope] };


scripts/beachball/config.test.ts

scripts/beachball/utils.ts

ling1726

Left a few suggesions, but I like how much cleaner it is now

ling1726 · 2022-04-07T10:36:13Z

@Hotell are you still planning to get this in ?

Co-authored-by: ling1726 <[email protected]> Co-authored-by: Niko <[email protected]>

…soft#22091) * chore(scripts): create separate configs for release groups for beachball * test(scripts): add beachball config creation coverage * chore(scripts): remove getSharedPackagePaths as its not needed anymore * Apply suggestions from code review Co-authored-by: ling1726 <[email protected]> Co-authored-by: Niko <[email protected]> * test: update tests after rebase Co-authored-by: ling1726 <[email protected]> Co-authored-by: Niko <[email protected]>

Hotell force-pushed the hotell/build-system/using-beachbal-config branch 2 times, most recently from 0bf787a to 7ff26b5 Compare March 14, 2022 18:19

Hotell added the Area: Build System label Mar 14, 2022

Hotell changed the title ~~chore(scripts): create separate configs for release groups for beachball~~ chore(scripts): create separate configs for beachball releases Mar 15, 2022

Hotell force-pushed the hotell/build-system/using-beachbal-config branch from 7ff26b5 to 62c3a28 Compare March 15, 2022 17:22

Hotell commented Mar 15, 2022

View reviewed changes

Hotell marked this pull request as ready for review March 16, 2022 09:04

Hotell requested a review from a team as a code owner March 16, 2022 09:04

Hotell requested a review from ling1726 March 16, 2022 09:04

varholak-peter self-requested a review March 17, 2022 13:18

varholak-peter reviewed Mar 17, 2022

View reviewed changes

ling1726 reviewed Mar 17, 2022

View reviewed changes

scripts/beachball/config.test.ts Outdated Show resolved Hide resolved

ling1726 reviewed Mar 17, 2022

View reviewed changes

scripts/beachball/utils.ts Show resolved Hide resolved

ling1726 approved these changes Mar 17, 2022

View reviewed changes

raghavthind2005 approved these changes Apr 7, 2022

View reviewed changes

Hotell force-pushed the hotell/build-system/using-beachbal-config branch from f03c78c to 2ef5774 Compare May 26, 2022 13:34

Hotell and others added 4 commits May 26, 2022 15:37

chore(scripts): create separate configs for release groups for beachball

20e7247

test(scripts): add beachball config creation coverage

726cd1d

chore(scripts): remove getSharedPackagePaths as its not needed anymore

5a9af17

Apply suggestions from code review

2c801bf

Co-authored-by: ling1726 <[email protected]> Co-authored-by: Niko <[email protected]>

Hotell force-pushed the hotell/build-system/using-beachbal-config branch from 2ef5774 to 2c801bf Compare May 26, 2022 13:38

test: update tests after rebase

20a6176

Hotell enabled auto-merge (squash) May 26, 2022 17:12

Hotell added this to the May Project Cycle Q2 2022 milestone May 26, 2022

Hotell merged commit 678792b into microsoft:master May 26, 2022

Hotell deleted the hotell/build-system/using-beachbal-config branch May 27, 2022 14:17

		const vNextPackagePaths = getVNextPackagePaths(allPackageInfo);

		if (process.env.RELEASE_VNEXT) {

chore(scripts): create separate configs for beachball releases #22091

chore(scripts): create separate configs for beachball releases #22091

Uh oh!

Conversation

Hotell commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

varholak-peter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ling1726 left a comment

Choose a reason for hiding this comment

Uh oh!

ling1726 commented Apr 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Hotell commented Mar 14, 2022 •

edited

Loading

fabricteam commented Mar 14, 2022 •

edited

Loading

codesandbox-ci bot commented Mar 14, 2022 •

edited

Loading

fabricteam commented Mar 14, 2022 •

edited

Loading

size-auditor bot commented Mar 14, 2022 •

edited

Loading

fabricteam commented Mar 14, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Mar 14, 2022 •

edited

Loading