chore: migrate to nx 12.5 #18748

Hotell · 2021-06-28T14:08:34Z

Pull request checklist

~~[ ] Addresses an existing issue:~~
~~[ ] Include a change request file using $ yarn change~~
Blocked by migration: migrate converged packages to new DX (1st stage) #18579

Description of changes

migrates to nx 12.5 yarn nx migrate @nrwl/[email protected]
applies automated migrations via yarn nx migrate --run-migrations=migrations.json
updates tools generators to leverage new features ( finally getting rid of angular-devkit )

(give an overview)

Focus areas to test

(optional)

size-auditor · 2021-06-28T14:23:27Z

Asset size changes

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

Baseline commit: 6e818d76d4bea22b0fc701828cdcbfe58fda24d5 (build)

fabricteam · 2021-06-28T14:38:53Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	905	922	5000
BaseButton	mount	892	913	5000
Breadcrumb	mount	2663	2662	1000
ButtonNext	mount	439	436	5000
Checkbox	mount	1634	1527	5000
CheckboxBase	mount	1288	1289	5000
ChoiceGroup	mount	4758	4746	5000
ComboBox	mount	1016	1004	1000
CommandBar	mount	10492	10327	1000
ContextualMenu	mount	6306	6348	1000
DefaultButton	mount	1116	1131	5000
DetailsRow	mount	3777	3779	5000
DetailsRowFast	mount	3710	3668	5000
DetailsRowNoStyles	mount	3525	3534	5000
Dialog	mount	2178	2148	1000
DocumentCardTitle	mount	159	154	1000
Dropdown	mount	3278	3248	5000
FluentProviderNext	mount	7583	7504	5000
FocusTrapZone	mount	1831	1847	5000
FocusZone	mount	1804	1836	5000
IconButton	mount	1709	1760	5000
Label	mount	340	349	5000
Layer	mount	1760	1782	5000
Link	mount	473	469	5000
MakeStyles	mount	1845	1859	50000
MenuButton	mount	1512	1466	5000
MessageBar	mount	2046	2032	5000
Nav	mount	3198	3270	1000
OverflowSet	mount	1104	1137	5000
Panel	mount	2068	2126	1000
Persona	mount	850	838	1000
Pivot	mount	1394	1412	1000
PrimaryButton	mount	1341	1289	5000
Rating	mount	7644	7583	5000
SearchBox	mount	1302	1318	5000
Shimmer	mount	2532	2546	5000
Slider	mount	1940	1942	5000
SpinButton	mount	5004	4976	5000
Spinner	mount	424	415	5000
SplitButton	mount	3210	3145	5000
Stack	mount	500	501	5000
StackWithIntrinsicChildren	mount	1496	1537	5000
StackWithTextChildren	mount	4478	4483	5000
SwatchColorPicker	mount	10210	10253	5000
Tabs	mount	1401	1427	1000
TagPicker	mount	2591	2524	5000
TeachingBubble	mount	11920	12111	5000
Text	mount	400	432	5000
TextField	mount	1362	1358	5000
ThemeProvider	mount	1194	1202	5000
ThemeProvider	virtual-rerender	589	598	5000
Toggle	mount	820	854	5000
buttonNative	mount	111	129	5000

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ListWith60ListItems.default	641	628	1.02:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	149	137	1.09:1
ImageMinimalPerf.default	380	351	1.08:1
AnimationMinimalPerf.default	422	396	1.07:1
ChatDuplicateMessagesPerf.default	298	279	1.07:1
TextMinimalPerf.default	353	331	1.07:1
ChatMinimalPerf.default	675	638	1.06:1
LoaderMinimalPerf.default	707	673	1.05:1
ReactionMinimalPerf.default	384	366	1.05:1
ListNestedPerf.default	560	541	1.04:1
StatusMinimalPerf.default	688	660	1.04:1
TableMinimalPerf.default	403	388	1.04:1
TreeMinimalPerf.default	815	786	1.04:1
HeaderMinimalPerf.default	363	354	1.03:1
HeaderSlotsPerf.default	771	745	1.03:1
LabelMinimalPerf.default	385	372	1.03:1
PortalMinimalPerf.default	173	168	1.03:1
SegmentMinimalPerf.default	344	335	1.03:1
SkeletonMinimalPerf.default	346	336	1.03:1
TreeWith60ListItems.default	177	172	1.03:1
AttachmentSlotsPerf.default	1077	1056	1.02:1
AvatarMinimalPerf.default	198	194	1.02:1
DatepickerMinimalPerf.default	5492	5376	1.02:1
GridMinimalPerf.default	335	329	1.02:1
ItemLayoutMinimalPerf.default	1232	1210	1.02:1
CardMinimalPerf.default	551	548	1.01:1
ChatWithPopoverPerf.default	372	368	1.01:1
DialogMinimalPerf.default	748	741	1.01:1
FlexMinimalPerf.default	291	287	1.01:1
FormMinimalPerf.default	402	398	1.01:1
ListMinimalPerf.default	511	508	1.01:1
MenuMinimalPerf.default	845	837	1.01:1
PopupMinimalPerf.default	598	591	1.01:1
ProviderMinimalPerf.default	967	959	1.01:1
RadioGroupMinimalPerf.default	451	445	1.01:1
SplitButtonMinimalPerf.default	4153	4097	1.01:1
TableManyItemsPerf.default	1866	1840	1.01:1
ToolbarMinimalPerf.default	924	912	1.01:1
AlertMinimalPerf.default	273	272	1:1
ButtonSlotsPerf.default	542	540	1:1
CarouselMinimalPerf.default	457	458	1:1
CheckboxMinimalPerf.default	2748	2740	1:1
DropdownManyItemsPerf.default	676	675	1:1
DropdownMinimalPerf.default	3056	3051	1:1
MenuButtonMinimalPerf.default	1623	1623	1:1
SliderMinimalPerf.default	1553	1552	1:1
TextAreaMinimalPerf.default	484	482	1:1
ButtonOverridesMissPerf.default	1676	1697	0.99:1
EmbedMinimalPerf.default	4059	4112	0.99:1
InputMinimalPerf.default	1258	1270	0.99:1
ListCommonPerf.default	615	624	0.99:1
ProviderMergeThemesPerf.default	1654	1675	0.99:1
RefMinimalPerf.default	237	239	0.99:1
CustomToolbarPrototype.default	3775	3827	0.99:1
ButtonMinimalPerf.default	162	165	0.98:1
TooltipMinimalPerf.default	1003	1020	0.98:1
BoxMinimalPerf.default	336	346	0.97:1
DividerMinimalPerf.default	340	351	0.97:1
LayoutMinimalPerf.default	361	371	0.97:1
VideoMinimalPerf.default	639	660	0.97:1
RosterPerf.default	1109	1150	0.96:1
AccordionMinimalPerf.default	144	156	0.92:1
IconMinimalPerf.default	591	641	0.92:1

Hotell · 2021-07-07T08:58:30Z

tools/generators/migrate-converged-pkg/index.ts

@@ -12,8 +12,8 @@ import {
  logger,
  writeJson,
  updateProjectConfiguration,
+  serializeJson,


nrwl team is moving utils gradually to nx devkit 🙌

more reasoning/info workspace: @nrwl/workspace uses @angular-devkit/schematics but doesn't provide it within dependencies nrwl/nx#6153

Hotell · 2021-07-07T08:58:47Z

tools/jest.config.js

      diagnostics: false,
+      tsconfig: '<rootDir>/tsconfig.json',


applied by auto migration

Hotell · 2021-07-07T08:59:22Z

package.json

@@ -72,16 +72,15 @@
    "vrtest": "cd apps && cd vr-tests && yarn screener"
  },
  "devDependencies": {
-    "@angular-devkit/schematics": "12.0.2",


not needed anymore, see https://github.com/microsoft/fluentui/pull/18748/files#r665180543

nice catch, lemme check. AFAIR @TristanWatanabe expanded that ignore regex because of storybook

as expected storybook "needs it"

That's too bad. Thanks for checking!

codesandbox-ci · 2021-07-07T09:15:42Z

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 ca191de:

Sandbox	Source
Fluent UI React Starter	Configuration

fabricteam · 2021-08-27T16:08:28Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`55.727 kB` `17.563 kB`
`react-avatar` Avatar	`56.558 kB` `15.66 kB`
`react-badge` Badge	`24.343 kB` `7.165 kB`
`react-badge` CounterBadge	`27.156 kB` `7.851 kB`
`react-badge` PresenseBadge	`237 B` `177 B`
`react-button` Button	`25.016 kB` `8.035 kB`
`react-button` CompoundButton	`30.308 kB` `8.911 kB`
`react-button` MenuButton	`26.603 kB` `8.543 kB`
`react-button` ToggleButton	`34.613 kB` `8.671 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`166.562 kB` `48.102 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.288 kB` `11.615 kB`
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-label` Label	`9.397 kB` `3.839 kB`
`react-link` Link	`14.715 kB` `6.012 kB`
`react-make-styles` makeStaticStyles (runtime)	`7.59 kB` `3.321 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`22.135 kB` `8.356 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.557 kB` `1.202 kB`
`react-menu` Menu (including children components)	`105.997 kB` `32.718 kB`
`react-menu` Menu (including selectable components)	`108.727 kB` `33.263 kB`
`react-popover` Popover	`102.804 kB` `31.283 kB`
`react-portal` Portal	`7.78 kB` `2.672 kB`
`react-positioning` usePopper	`23.145 kB` `7.942 kB`
`react-provider` FluentProvider	`16.286 kB` `5.991 kB`
`react-text` Text - Default	`11.798 kB` `4.452 kB`
`react-text` Text - Wrappers	`15.414 kB` `4.734 kB`
`react-theme` Teams: all themes	`32.941 kB` `6.674 kB`
`react-theme` Teams: Light theme	`20.247 kB` `5.662 kB`
`react-tooltip` Tooltip	`46.054 kB` `15.658 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against 6e818d76d4bea22b0fc701828cdcbfe58fda24d5}

jest.config.js

Hotell · 2021-08-27T16:24:08Z

tsconfig.base.json

@@ -12,45 +12,45 @@
    "typeRoots": ["node_modules/@types", "./typings"],
    "baseUrl": ".",
    "paths": {
-      "@fluentui/react-conformance": ["packages/react-conformance/src/index.ts"],


nx now properly orders generated stuff alphabetically

tools/generators/migrate-converged-pkg/index.ts

Hotell · 2021-08-27T16:51:03Z

pipeline fails because of stale react-menu devDep in react-button ( will be unblocked once this PR will be merged -> https://github.com/microsoft/fluentui/pull/19517/files#diff-56725d2ca7e25e62022ab3e05473c73a2731401078a6482b7c719f7fca5caa7cL28)

ecraig12345 · 2021-08-27T19:18:02Z

package.json

@@ -198,7 +197,7 @@
    "postcss": "8.3.5",
    "postcss-loader": "4.1.0",
    "postcss-modules": "4.1.3",
-    "prettier": "2.2.1",
+    "prettier": "2.3.2",


Can this be done separately? Done this way it's going to cause random noise to be introduced when people make unrelated changes in files, and possibly even when doing things like merging with master.

for context:

nx bumps deps when running their automation migrations (it also bumps TS but that's whole different story as we have various projects with various TS support needs, so I opted out from that one).

Done this way it's going to cause random noise to be introduced when people make unrelated changes in files, and possibly even when doing things like merging with master.

from my experience gradual formatting updates scoped by smaller chunk of codebase is the most efficient way rather that running a tool on whole codebase on every version bump when formatting checks are run only against affected changes ( our case ).

I don't have much time to discuss this here and now further unfortunately so I'll undo to unblock this PR. thx

hahah hello darkness my old friend

Thanks, yeah we can talk about this more after you're back

Just remembered, we currently run format --check --all in master builds, so while that's another thing we can discuss later about whether to keep it, that would have failed if prettier was updated in this PR

msft-fluent-ui-bot assigned miroslavstastny Jun 28, 2021

Hotell changed the title ~~chore: migrate to nx 12.4~~ chore: migrate to nx 12.5 Jul 7, 2021

Hotell force-pushed the hotell/build-system/bump-nx-to-12-dot-4 branch from 2fb2d3d to b7506dd Compare July 7, 2021 08:56

Hotell commented Jul 7, 2021

View reviewed changes

tools/jest.config.js

diagnostics: false,

tsconfig: '<rootDir>/tsconfig.json',

Copy link

Contributor Author

Hotell Jul 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

applied by auto migration

Hotell commented Jul 7, 2021

View reviewed changes

Hotell added Area: Build System Fluent UI react-components (v9) labels Jul 7, 2021

Hotell added this to the July Project Cycle Q2 2021 milestone Jul 7, 2021

Hotell force-pushed the hotell/build-system/bump-nx-to-12-dot-4 branch from b7506dd to 5a98097 Compare August 27, 2021 15:52

Hotell changed the title ~~chore: migrate to nx 12.5~~ chore: migrate to nx 12.8 Aug 27, 2021

Hotell commented Aug 27, 2021

View reviewed changes

jest.config.js Outdated Show resolved Hide resolved

Hotell commented Aug 27, 2021

View reviewed changes

tools/generators/migrate-converged-pkg/index.ts Outdated Show resolved Hide resolved

Hotell force-pushed the hotell/build-system/bump-nx-to-12-dot-4 branch from 1763a5f to dc06f1c Compare August 27, 2021 17:18

Hotell changed the title ~~chore: migrate to nx 12.8~~ chore: migrate to nx 12.5 Aug 27, 2021

Hotell force-pushed the hotell/build-system/bump-nx-to-12-dot-4 branch from dc06f1c to f3e1d85 Compare August 27, 2021 18:21

chore: migrate to nx 12.5

281dc7b

Hotell force-pushed the hotell/build-system/bump-nx-to-12-dot-4 branch from f3e1d85 to 281dc7b Compare August 27, 2021 18:22

refactor(tools): get rid of angular devkit as dependency

68e6dc5

Hotell modified the milestones: July Project Cycle Q3 2021, August Project Cycle Q3 2021 Aug 27, 2021

Hotell marked this pull request as ready for review August 27, 2021 18:55

Hotell requested a review from a team as a code owner August 27, 2021 18:55

ecraig12345 reviewed Aug 27, 2021

View reviewed changes

fixup! chore: migrate to nx 12.5

6bebd4c

Hotell enabled auto-merge (squash) August 30, 2021 18:15

fixup! fixup! chore: migrate to nx 12.5

ca191de

Hotell requested a review from ecraig12345 August 30, 2021 18:21

ecraig12345 approved these changes Aug 30, 2021

View reviewed changes

Hotell merged commit bb7dc46 into microsoft:master Aug 30, 2021

miroslavstastny mentioned this pull request Sep 17, 2021

tooling: create-package fails #19845

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: migrate to nx 12.5 #18748

chore: migrate to nx 12.5 #18748

Hotell commented Jun 28, 2021 •

edited

Loading

size-auditor bot commented Jun 28, 2021 •

edited

Loading

fabricteam commented Jun 28, 2021 •

edited

Loading

Hotell Jul 7, 2021

Hotell Jul 7, 2021

Hotell Jul 7, 2021

ecraig12345 Aug 27, 2021

Hotell Aug 30, 2021

Hotell Aug 30, 2021

ecraig12345 Aug 30, 2021

codesandbox-ci bot commented Jul 7, 2021 •

edited

Loading

fabricteam commented Aug 27, 2021 •

edited

Loading

Hotell Aug 27, 2021

Hotell commented Aug 27, 2021

ecraig12345 Aug 27, 2021

Hotell Aug 30, 2021 •

edited

Loading

Hotell Aug 30, 2021

ecraig12345 Aug 30, 2021

ecraig12345 Sep 1, 2021

chore: migrate to nx 12.5 #18748

chore: migrate to nx 12.5 #18748

Conversation

Hotell commented Jun 28, 2021 • edited Loading

Pull request checklist

Description of changes

Focus areas to test

size-auditor bot commented Jun 28, 2021 • edited Loading

Asset size changes

fabricteam commented Jun 28, 2021 • edited Loading

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codesandbox-ci bot commented Jul 7, 2021 • edited Loading

fabricteam commented Aug 27, 2021 • edited Loading

📊 Bundle size report

Choose a reason for hiding this comment

Hotell commented Aug 27, 2021

Choose a reason for hiding this comment

Hotell Aug 30, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hotell commented Jun 28, 2021 •

edited

Loading

size-auditor bot commented Jun 28, 2021 •

edited

Loading

fabricteam commented Jun 28, 2021 •

edited

Loading

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

codesandbox-ci bot commented Jul 7, 2021 •

edited

Loading

fabricteam commented Aug 27, 2021 •

edited

Loading

Hotell Aug 30, 2021 •

edited

Loading