Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: migrate to nx 16.1.4 #28583

Merged
merged 10 commits into from
Jul 28, 2023
Merged

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented Jul 19, 2023

New Behavior

  • @nrwl packages are now under @nx npm scope
  • tools is now another workspace directory that hosts workspace-plugin - a full fledged nx plugin (npm package) with all its jazz
  • workspace generator invocation changes from yarn nx workspace-tools <generator-name> to yarn nx g @fluentui/workspace-plugin:<generator-name>

@fluentui/workspace-plugin DX

via nx Console

image

via terminal

discover all plugin capabilities

yarn nx list @fluentui/workspace-plugin

image

discover all generator options

yarn nx g @fluentui/workspace-plugin:migrate-converge-pkg --help

image

NOTE 💡

Related Issue(s)

@github-actions github-actions bot added this to the July Project Cycle Q3 2023 milestone Jul 19, 2023
@Hotell Hotell added Area: Build System dependencies Pull requests that update a dependency file NX: workspace generators labels Jul 19, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
priority-overflow
createOverflowManager
4.383 kB
1.738 kB
4.379 kB
1.722 kB
-4 B
-16 B
react-checkbox
Checkbox
33.224 kB
10.727 kB
33.194 kB
10.708 kB
-30 B
-19 B
react-combobox
Combobox (including child components)
87.395 kB
28.184 kB
87.325 kB
28.175 kB
-70 B
-9 B
react-combobox
Dropdown (including child components)
85.798 kB
27.804 kB
85.749 kB
27.801 kB
-49 B
-3 B
react-datepicker-compat
DatePicker Compat
217.582 kB
58.025 kB
217.551 kB
58.015 kB
-31 B
-10 B
react-dialog
Dialog (including children components)
87.367 kB
26.408 kB
87.355 kB
26.401 kB
-12 B
-7 B
react-field
Field
18.174 kB
6.977 kB
18.163 kB
6.945 kB
-11 B
-32 B
react-infobutton
InfoLabel
129.763 kB
40.304 kB
129.753 kB
40.296 kB
-10 B
-8 B
react-input
Input
24.232 kB
7.781 kB
24.202 kB
7.762 kB
-30 B
-19 B
react-overflow
hooks only
12.64 kB
4.689 kB
12.636 kB
4.679 kB
-4 B
-10 B
react-radio
RadioGroup
11.376 kB
4.763 kB
11.352 kB
4.749 kB
-24 B
-14 B
react-select
Select
24.955 kB
8.722 kB
24.926 kB
8.702 kB
-29 B
-20 B
react-slider
Slider
34.87 kB
11.178 kB
34.846 kB
11.153 kB
-24 B
-25 B
react-spinbutton
SpinButton
33.756 kB
10.35 kB
33.723 kB
10.337 kB
-33 B
-13 B
react-switch
Switch
29.511 kB
9.239 kB
29.472 kB
9.219 kB
-39 B
-20 B
react-table
DataGrid
158.464 kB
42.465 kB
158.433 kB
42.451 kB
-31 B
-14 B
react-table
Table as DataGrid
132.268 kB
33.902 kB
132.237 kB
33.887 kB
-31 B
-15 B
react-table
Table (Selection only)
77.643 kB
19.195 kB
77.612 kB
19.179 kB
-31 B
-16 B
react-table
Table (Sort only)
76.262 kB
18.798 kB
76.231 kB
18.783 kB
-31 B
-15 B
react-textarea
Textarea
27.703 kB
9.126 kB
27.677 kB
9.115 kB
-26 B
-11 B
react-toast
Toast (including Toaster)
78.573 kB
23.728 kB
78.557 kB
23.714 kB
-16 B
-14 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
react-accordion
Accordion (including children components)
88.535 kB
26.796 kB
react-alert
Alert
84.992 kB
22.03 kB
react-avatar
Avatar
47.739 kB
14.521 kB
react-avatar
AvatarGroup
15.695 kB
6.314 kB
react-avatar
AvatarGroupItem
63.915 kB
19.001 kB
react-badge
Badge
23.604 kB
7.272 kB
react-badge
CounterBadge
24.506 kB
7.574 kB
react-badge
PresenceBadge
22.253 kB
7.891 kB
react-button
Button
39.193 kB
9.743 kB
react-button
CompoundButton
46.661 kB
11.257 kB
react-button
MenuButton
43.553 kB
10.979 kB
react-button
SplitButton
51.758 kB
12.571 kB
react-button
ToggleButton
57.629 kB
11.645 kB
react-card
Card - All
89.609 kB
25.358 kB
react-card
Card
84.027 kB
23.768 kB
react-card
CardFooter
9.24 kB
3.907 kB
react-card
CardHeader
11.652 kB
4.741 kB
react-card
CardPreview
10.048 kB
4.254 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.576 kB
18.225 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
207.472 kB
57.814 kB
react-components
react-components: FluentProvider & webLightTheme
36.409 kB
12.003 kB
react-divider
Divider
17.49 kB
6.364 kB
react-image
Image
11.561 kB
4.637 kB
react-infobutton
InfoButton
126.163 kB
39.164 kB
react-label
Label
10.186 kB
4.253 kB
react-link
Link
12.782 kB
5.247 kB
react-menu
Menu (including children components)
135.5 kB
41.325 kB
react-menu
Menu (including selectable components)
138.264 kB
41.828 kB
react-persona
Persona
55.293 kB
16.535 kB
react-popover
Popover
114.722 kB
35.751 kB
react-portal
Portal
11.935 kB
4.421 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-positioning
usePositioning
24.468 kB
8.915 kB
react-progress
ProgressBar
13.941 kB
5.498 kB
react-provider
FluentProvider
18.129 kB
6.73 kB
react-radio
Radio
27.017 kB
8.638 kB
react-spinner
Spinner
21.77 kB
7.134 kB
react-table
Table (Primitives only)
43.95 kB
12.263 kB
react-tags-preview
InteractionTag
34.171 kB
9.199 kB
react-tags-preview
Tag
25.962 kB
8.49 kB
react-tags-preview
TagGroup
69.398 kB
20.364 kB
react-text
Text - Default
12.574 kB
4.982 kB
react-text
Text - Wrappers
15.726 kB
5.302 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
31.987 kB
6.85 kB
react-theme
Teams: Light theme
18.121 kB
5.194 kB
react-tooltip
Tooltip
47.659 kB
16.697 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 0e9c438b78e58f346f61b15224c7b0020e4fe73e

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 18 16 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 618 621 5000
Button mount 291 300 5000
Field mount 1067 1055 5000
FluentProvider mount 669 640 5000
FluentProviderWithTheme mount 74 83 10
FluentProviderWithTheme virtual-rerender 66 64 10
FluentProviderWithTheme virtual-rerender-with-unmount 83 72 10
InfoButton mount 18 16 5000 Possible regression
MakeStyles mount 863 897 50000
Persona mount 1683 1651 5000
SpinButton mount 1337 1325 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ImageMinimalPerf.default 231 212 1.09:1
RadioGroupMinimalPerf.default 275 252 1.09:1
AttachmentMinimalPerf.default 90 83 1.08:1
AccordionMinimalPerf.default 81 76 1.07:1
TooltipMinimalPerf.default 1289 1217 1.06:1
ChatMinimalPerf.default 438 418 1.05:1
ItemLayoutMinimalPerf.default 729 695 1.05:1
AvatarMinimalPerf.default 110 106 1.04:1
ButtonOverridesMissPerf.default 665 638 1.04:1
DropdownManyItemsPerf.default 382 369 1.04:1
SliderMinimalPerf.default 747 720 1.04:1
CustomToolbarPrototype.default 1501 1448 1.04:1
HeaderMinimalPerf.default 201 195 1.03:1
ListMinimalPerf.default 303 295 1.03:1
ListNestedPerf.default 318 308 1.03:1
StatusMinimalPerf.default 388 377 1.03:1
LayoutMinimalPerf.default 200 196 1.02:1
RosterPerf.default 1541 1511 1.02:1
PopupMinimalPerf.default 353 345 1.02:1
TextAreaMinimalPerf.default 293 286 1.02:1
ToolbarMinimalPerf.default 532 522 1.02:1
TreeWith60ListItems.default 89 87 1.02:1
DatepickerMinimalPerf.default 3490 3444 1.01:1
DropdownMinimalPerf.default 1413 1395 1.01:1
EmbedMinimalPerf.default 1868 1842 1.01:1
FormMinimalPerf.default 222 219 1.01:1
LoaderMinimalPerf.default 186 185 1.01:1
MenuButtonMinimalPerf.default 953 944 1.01:1
SplitButtonMinimalPerf.default 2265 2239 1.01:1
AnimationMinimalPerf.default 288 289 1:1
CarouselMinimalPerf.default 257 258 1:1
InputMinimalPerf.default 543 543 1:1
PortalMinimalPerf.default 81 81 1:1
ProviderMergeThemesPerf.default 650 652 1:1
ProviderMinimalPerf.default 198 198 1:1
SkeletonMinimalPerf.default 193 193 1:1
TableManyItemsPerf.default 1110 1115 1:1
VideoMinimalPerf.default 440 442 1:1
BoxMinimalPerf.default 192 194 0.99:1
CheckboxMinimalPerf.default 1123 1130 0.99:1
DialogMinimalPerf.default 443 447 0.99:1
DividerMinimalPerf.default 204 206 0.99:1
LabelMinimalPerf.default 214 216 0.99:1
ReactionMinimalPerf.default 213 215 0.99:1
IconMinimalPerf.default 377 380 0.99:1
TextMinimalPerf.default 194 195 0.99:1
ButtonSlotsPerf.default 304 310 0.98:1
ChatDuplicateMessagesPerf.default 146 149 0.98:1
ChatWithPopoverPerf.default 190 194 0.98:1
HeaderSlotsPerf.default 467 476 0.98:1
CardMinimalPerf.default 309 320 0.97:1
FlexMinimalPerf.default 153 157 0.97:1
RefMinimalPerf.default 102 105 0.97:1
ListCommonPerf.default 373 387 0.96:1
MenuMinimalPerf.default 489 512 0.96:1
TableMinimalPerf.default 224 237 0.95:1
TreeMinimalPerf.default 455 478 0.95:1
AlertMinimalPerf.default 144 153 0.94:1
AttachmentSlotsPerf.default 616 655 0.94:1
ListWith60ListItems.default 347 372 0.93:1
SegmentMinimalPerf.default 185 198 0.93:1
GridMinimalPerf.default 179 194 0.92:1
ButtonMinimalPerf.default 90 106 0.85:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 622 629 5000
Breadcrumb mount 1666 1681 1000
Checkbox mount 1677 1707 5000
CheckboxBase mount 1474 1470 5000
ChoiceGroup mount 2998 2944 5000
ComboBox mount 680 659 1000
CommandBar mount 6216 6155 1000
ContextualMenu mount 12765 12735 1000
DefaultButton mount 752 742 5000
DetailsRow mount 2202 2168 5000
DetailsRowFast mount 2200 2147 5000
DetailsRowNoStyles mount 2033 2027 5000
Dialog mount 2727 2647 1000
DocumentCardTitle mount 211 225 1000
Dropdown mount 1964 1970 5000
FocusTrapZone mount 1126 1149 5000
FocusZone mount 1071 1059 5000
GroupedList mount 41041 40855 2
GroupedList virtual-rerender 19534 19731 2
GroupedList virtual-rerender-with-unmount 50069 50160 2
GroupedListV2 mount 225 227 2
GroupedListV2 virtual-rerender 204 214 2
GroupedListV2 virtual-rerender-with-unmount 227 231 2
IconButton mount 1101 1067 5000
Label mount 340 339 5000
Layer mount 2702 2703 5000
Link mount 384 386 5000
MenuButton mount 935 945 5000
MessageBar mount 21273 21512 5000
Nav mount 1943 1915 1000
OverflowSet mount 789 775 5000
Panel mount 1792 1781 1000
Persona mount 728 724 1000
Pivot mount 873 869 1000
PrimaryButton mount 836 832 5000
Rating mount 4647 4553 5000
SearchBox mount 904 871 5000
Shimmer mount 1910 1868 5000
Slider mount 1317 1306 5000
SpinButton mount 2846 2885 5000
Spinner mount 396 391 5000
SplitButton mount 1793 1870 5000
Stack mount 414 399 5000
StackWithIntrinsicChildren mount 887 847 5000
StackWithTextChildren mount 2565 2603 5000
SwatchColorPicker mount 6157 6131 5000
TagPicker mount 1417 1454 5000
Text mount 376 377 5000
TextField mount 890 936 5000
ThemeProvider mount 835 821 5000
ThemeProvider virtual-rerender 585 594 5000
ThemeProvider virtual-rerender-with-unmount 1249 1257 5000
Toggle mount 614 598 5000
buttonNative mount 180 190 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 19, 2023

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 1d0798e:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@size-auditor
Copy link

size-auditor bot commented Jul 19, 2023

Asset size changes

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

Baseline commit: 0e9c438b78e58f346f61b15224c7b0020e4fe73e (build)

@Hotell Hotell force-pushed the hotell/nx/migrate-to-16 branch 2 times, most recently from 30471c8 to 2f824cd Compare July 20, 2023 12:58
@Hotell
Copy link
Contributor Author

Hotell commented Jul 20, 2023

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 20, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

@Hotell Hotell changed the title chore: migrate to nx 16.0.3 chore: migrate to nx 16.1.4 Jul 26, 2023
@Hotell Hotell force-pushed the hotell/nx/migrate-to-16 branch from 0bebe49 to 2dfd974 Compare July 26, 2023 09:17
Hotell added 4 commits July 26, 2023 11:41
…rt swc/[email protected] and remove swc-node in order to use ts-node within nx(nx uses swc/helpers 0.5 if swc-node is used/installed)
@@ -20,5 +19,12 @@
"**/node_modules",
"**/temp",
"**/*.scss.ts"
],
"overrides": [
Copy link
Contributor Author

Choose a reason for hiding this comment

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

added by nx migration

@@ -45,6 +45,7 @@
},
"editor.rulers": [120],
"eslint.workingDirectories": [{ "mode": "auto" }], // infer working directory based on .eslintrc/package.json location
"eslint.validate": ["json"],
Copy link
Contributor Author

Choose a reason for hiding this comment

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

added by nx migration - enables to write lint rules for json as well in the future

@@ -126,8 +126,8 @@
"@storybook/manager-webpack5": "6.5.15",
"@storybook/react": "6.5.15",
"@storybook/theming": "6.5.15",
"@swc-node/register": "1.6.1",
"@swc/core": "1.3.30",
"@swc/cli": "0.1.62",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

added by nx migration ( @nx/js uses it for transpilation )

"@swc-node/register": "1.6.1",
"@swc/core": "1.3.30",
"@swc/cli": "0.1.62",
"@swc/core": "1.3.44",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

last swc/core version that works with swc/helpers v0.4.x, beyond this we need to migrate all v9 packages dep to helpers 0.5

Copy link
Contributor Author

Choose a reason for hiding this comment

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

from API and semver, swc should have bumped to 2.0 as switching to helper 0.5 its a breaking change. welp

Copy link
Member

Choose a reason for hiding this comment

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

we should trigger an issue for this in swc

Copy link
Contributor Author

Choose a reason for hiding this comment

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

that's definitely the right approach but it looks like that train has already left the station. ATM core latest version is 1.3.71, based on their approach I don't think they would be willing to do anything about it.

@@ -126,8 +126,8 @@
"@storybook/manager-webpack5": "6.5.15",
"@storybook/react": "6.5.15",
"@storybook/theming": "6.5.15",
"@swc-node/register": "1.6.1",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

removing for now as swc-node is incompatible with swc/helpers 0.4 - thus making nx explode. as a fallback nx will use ts-node which is our only option for now.

@Hotell Hotell marked this pull request as ready for review July 28, 2023 09:54
@Hotell Hotell requested review from a team as code owners July 28, 2023 09:54
@Hotell Hotell merged commit d39f715 into microsoft:master Jul 28, 2023
@Hotell Hotell deleted the hotell/nx/migrate-to-16 branch July 28, 2023 12:38
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 1, 2023
* master: (37 commits)
  release (microsoft#28696)
  Fixing re-render issue for all charts when empty (microsoft#28321)
  feat(FluentProvider): emit errors on duplicate IDs (microsoft#28670)
  applying package updates
  fix(react-positioning): autoSize causing position update to reach maximum (microsoft#28689)
  fix(react-tags-preview): fix InteractionTag hover styles (microsoft#28686)
  Accordion: export AccordionHeaderProvider (microsoft#28542)
  feat(react-shared-contexts): add AnnounceContext (microsoft#28654)
  Added VR tests for Breadcrumb (microsoft#28653)
  fix(react-menu): use outline for menuItem focus ring (microsoft#28685)
  [Bug]: Tree, vertical spacing of branches and children is inconsistent (microsoft#28681)
  feaTt(react-tree): adds openItems and checkedItems to tree callback data (microsoft#28669)
  applying package updates
  Add mountNode prop to combos (microsoft#28661)
  react-tags-preview: add more vr test (microsoft#28582)
  chore: migrate to nx 16.1.4 (microsoft#28583)
  applying package updates
  chore: improves internal headless signature (microsoft#28651)
  fix: remove margin from icon when ToolbarButton is vertical (microsoft#28658)
  applying package updates
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Build System dependencies Pull requests that update a dependency file NX: workspace generators
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants