fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

Published 20 hours ago • verified publisher icon microsoft

feat: replace lerna publish with nx release

Open Hotell opened this issue 1 year ago • 9 comments

Previous Behavior

react-northstar

  • uses lerna for publising
  • releases dont work

New Behavior

  • lerna is replaced with nx release
  • lerna is completely removed from our repo
  • new binary that handles northstar releases has been created - northstar-release
  • release pipeline has been updated

northstar-release

  • new cli that encapsulates nx release
  • work solely for northstar release group
  • nx release changelog is not being used because N* changelog is maintained by hand. version command will update the changelog with new version though for smoother automation.
northstar-release <command>

Commands:
  northstar-release version  bump version
  northstar-release publish  publish version to npm

Options:
  --help  Show help                                                    [boolean]

cmd version

northstar-release version

bump version

Positionals:
  specifier  Explicit version specifier to use, if overriding conventional
             commits                                                    [string]

Options:
  --help        Show help                                              [boolean]
  --dryRun, -d  Whether or not to perform a dry-run of the release process,
                defaults to false                     [boolean] [default: false]
  --verbose     Whether or not to enable verbose logging, defaults to false
                                                      [boolean] [default: false]

cmd publish

northstar-release publish

publish version to npm

Options:
  --help        Show help                                              [boolean]
  --dryRun, -d  Whether or not to perform a dry-run of the release process,
                defaults to false                     [boolean] [default: false]
  --verbose     Whether or not to enable verbose logging, defaults to false
                                                      [boolean] [default: false]

Updated release flow

  • (same as before) create branch within upstream(not on fork) with name do-not-delete-this-branch/0.xx.x
  • bump release via yarn northstar:release version patch|minor
    • this will:
      • bump all v0 version group deps and update dependencies within group and in cross release group packages
      • generates change-file for cross release group packages
      • updates packages/fluentui/CHANGELOG.md with new release template heading
  • create PR against master
  • run release pipeline on CI which will invoke yarn northstar:release publish
    • creates github Tag @fluentui/react-northstar_v{0.xx.xx}
    • pushes packages to npm registry
    • if anything fails during push to npm registry, push again until all packages will make it to npm

Demo

version

Bump version to prepare release ( patch )

yarn northstar:release version patch

  • updates northstar version group packages
  • updates projects outside release group including changelog generation
  • updates changelog
image

publish

image

publish (re-run)

If something went wrong on CI (npm registry errors, or something else), we can re-run pipeline.

nx release will determine which versions were already published so there will be no invalid release.

image

Related Issue(s)

  • https://github.com/nrwl/nx/issues/21044
  • https://github.com/nrwl/nx/issues/21078
  • https://github.com/nrwl/nx/issues/21116
  • https://github.com/nrwl/nx/issues/21118
  • https://github.com/nrwl/nx/issues/21457
  • https://github.com/nrwl/nx/issues/21464
  • https://github.com/nrwl/nx/issues/21458
  • https://github.com/nrwl/nx/issues/21466

Follows:

  • https://github.com/microsoft/fluentui/pull/30202
  • Partially implements https://github.com/microsoft/fluentui/issues/30265

Hotell avatar Jan 08 '24 16:01 Hotell

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
328 B
global-context
createContextSelector		 537 B
339 B
keyboard-key
keyboard-key package		 3.746 kB
1.928 kB
priority-overflow
createOverflowManager		 4.447 kB
1.853 kB
react
ActivityItem		 68.833 kB
22.613 kB
react
Announced		 36.473 kB
12.628 kB
react
Autofill		 15.365 kB
4.743 kB
react
Breadcrumb		 196.083 kB
58.757 kB
react
Button		 190.127 kB
55.019 kB
react
ButtonGrid		 175.918 kB
53.25 kB
react
Calendar		 118.756 kB
36.101 kB
react
Callout		 80.866 kB
26.564 kB
react
Check		 51.062 kB
17.152 kB
react
Checkbox		 57.791 kB
19.17 kB
react
ChoiceGroup		 63.339 kB
20.824 kB
react
ChoiceGroupOption		 56.601 kB
18.695 kB
react
Coachmark		 89.704 kB
28.407 kB
react
Color		 7.737 kB
3.106 kB
react
ColorPicker		 129.984 kB
40.589 kB
react
ComboBox		 245.355 kB
70.51 kB
react
CommandBar		 197.362 kB
58.46 kB
react
ContextualMenu		 150.967 kB
46.982 kB
react
DatePicker		 180.318 kB
54.947 kB
react
DateTimeUtilities		 5.244 kB
1.849 kB
react
DetailsList		 225.886 kB
64.647 kB
react
Dialog		 205.294 kB
61.428 kB
react
Divider		 17.63 kB
6.234 kB
react
DocumentCard		 211.08 kB
62.793 kB
react
DragDrop		 8.343 kB
2.724 kB
react
DraggableZone		 33.345 kB
11.166 kB
react
Dropdown		 227.732 kB
66.867 kB
react
ExtendedPicker		 94.987 kB
27.297 kB
react
Fabric		 39.75 kB
13.688 kB
react
Facepile		 205.992 kB
61.67 kB
react
FloatingPicker		 236.233 kB
67.368 kB
react
FocusTrapZone		 15.831 kB
5.54 kB
react
FocusZone		 53.259 kB
16.869 kB
react
Grid		 175.918 kB
53.25 kB
react
GroupedList		 131.636 kB
39.657 kB
react
GroupedListV2		 119.324 kB
36.822 kB
react
HoverCard		 93.735 kB
29.778 kB
react
Icon		 49.74 kB
16.603 kB
react
Icons		 65.829 kB
24.212 kB
react
Image		 44.79 kB
15.024 kB
react
Keytip		 78.588 kB
25.825 kB
react
KeytipData		 13.585 kB
4.418 kB
react
KeytipLayer		 100.422 kB
31.128 kB
react
Keytips		 103.175 kB
32.07 kB
react
Label		 36.347 kB
12.639 kB
react
Layer		 45.683 kB
15.585 kB
react
Link		 37.673 kB
12.993 kB
react
List		 38.136 kB
12.004 kB
react
MarqueeSelection		 72.119 kB
21.676 kB
react
MessageBar		 184.707 kB
55.523 kB
react
Modal		 90.409 kB
29.213 kB
react
Nav		 183.442 kB
55.093 kB
react
OverflowSet		 31.044 kB
10.593 kB
react
Overlay		 38.784 kB
13.401 kB
react
Panel		 194.946 kB
58.34 kB
react
Persona		 111.705 kB
35.58 kB
react
PersonaCoin		 111.705 kB
35.58 kB
react
PersonaPresence		 55.928 kB
18.715 kB
react
Pickers		 287.603 kB
80.607 kB
react
Pivot		 184.252 kB
55.823 kB
react
Popup		 12.032 kB
4.114 kB
react
Positioning		 21.821 kB
7.334 kB
react
PositioningContainer		 70.754 kB
22.84 kB
react
ProgressIndicator		 37.498 kB
12.906 kB
react
Rating		 78.989 kB
25.18 kB
react
ResizeGroup		 13.286 kB
4.365 kB
react
ResponsiveMode		 8.078 kB
2.95 kB
react
ScrollablePane		 53.538 kB
17.113 kB
react
SearchBox		 182.982 kB
55.1 kB
react
SelectableOption		 724 B
413 B
react
SelectedItemsList		 226.659 kB
66.321 kB
react
Selection		 41.202 kB
11.839 kB
react
Separator		 33.397 kB
11.529 kB
react
Shimmer		 47.265 kB
15.632 kB
react
ShimmeredDetailsList		 236.654 kB
67.42 kB
react
Slider		 55.575 kB
18.574 kB
react
SpinButton		 186.661 kB
56.205 kB
react
Spinner		 39.691 kB
13.815 kB
react
Stack		 40.761 kB
13.931 kB
react
Sticky		 32.064 kB
10.324 kB
react
Styling		 44.812 kB
14.688 kB
react
SwatchColorPicker		 186.166 kB
56.724 kB
react
TeachingBubble		 200.004 kB
59.345 kB
react
Text		 35.931 kB
12.486 kB
react
TextField		 78.587 kB
24.642 kB
react
Theme		 42.456 kB
13.773 kB
react
ThemeGenerator		 12.34 kB
4.106 kB
react
TimePicker		 235.197 kB
68.29 kB
react
Toggle		 44.17 kB
15.346 kB
react
Tooltip		 84.225 kB
27.277 kB
react
Utilities		 71.851 kB
21.843 kB
react
Viewport		 22.945 kB
7.292 kB
react
WeeklyDayPicker		 98.762 kB
30.828 kB
react
WindowProvider		 1.059 kB
541 B
react-accordion
Accordion (including children components)		 100.127 kB
30.426 kB
react-alert
Alert		 83.737 kB
23.474 kB
react-avatar
Avatar		 50.175 kB
15.944 kB
react-avatar
AvatarGroup		 19.704 kB
7.796 kB
react-avatar
AvatarGroupItem		 64.831 kB
20.274 kB
react-badge
Badge		 26.905 kB
8.729 kB
react-badge
CounterBadge		 27.806 kB
9.024 kB
react-badge
PresenceBadge		 25.311 kB
9.306 kB
react-breadcrumb
@fluentui/react-breadcrumb - package		 115.48 kB
31.84 kB
react-button
Button		 39.513 kB
11.169 kB
react-button
CompoundButton		 46.874 kB
12.661 kB
react-button
MenuButton		 44.292 kB
12.542 kB
react-button
SplitButton		 52.306 kB
14.134 kB
react-button
ToggleButton		 56.559 kB
13.068 kB
react-calendar-compat
Calendar Compat		 152.073 kB
39.83 kB
react-card
Card - All		 101.557 kB
28.932 kB
react-card
Card		 96.382 kB
27.401 kB
react-card
CardFooter		 13.064 kB
5.385 kB
react-card
CardHeader		 15.307 kB
6.143 kB
react-card
CardPreview		 14.015 kB
5.752 kB
react-checkbox
Checkbox		 35.656 kB
12.07 kB
react-combobox
Combobox (including child components)		 102.463 kB
33.101 kB
react-combobox
Dropdown (including child components)		 103.837 kB
33.038 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 71.098 kB
20.514 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 217.207 kB
61.943 kB
react-components
react-components: FluentProvider & webLightTheme		 43.585 kB
14.351 kB
react-datepicker-compat
DatePicker Compat		 224.523 kB
62.939 kB
react-dialog
Dialog (including children components)		 100.93 kB
29.924 kB
react-divider
Divider		 20.82 kB
7.763 kB
react-field
Field		 22.542 kB
8.608 kB
react-image
Image		 15.745 kB
6.23 kB
react-infobutton
InfoButton		 138.696 kB
43.398 kB
react-infobutton
InfoLabel		 142.497 kB
44.627 kB
react-input
Input		 26.891 kB
9.119 kB
react-jsx-runtime
Classic Pragma		 1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime		 3.783 kB
1.648 kB
react-jsx-runtime
JSX Runtime		 4.377 kB
1.881 kB
react-label
Label		 14.266 kB
5.828 kB
react-link
Link		 17.082 kB
6.911 kB
react-menu
Menu (including children components)		 149.428 kB
45.509 kB
react-menu
Menu (including selectable components)		 152.114 kB
46.021 kB
react-message-bar
MessageBar (all components)		 25.566 kB
9.131 kB
react-northstar
Accordion		 85.357 kB
26.509 kB
react-northstar
Alert		 87.425 kB
26.91 kB
react-northstar
Animation		 55.304 kB
17.834 kB
react-northstar
Attachment		 86.819 kB
26.7 kB
react-northstar
Avatar		 80.254 kB
24.634 kB
react-northstar
Box		 75.223 kB
23.814 kB
react-northstar
Breadcrumb		 79.889 kB
24.707 kB
react-northstar
Button		 83.135 kB
25.957 kB
react-northstar
Card		 82.674 kB
25.027 kB
react-northstar
Carousel		 105.15 kB
31.882 kB
react-northstar
Chat		 152.326 kB
45.963 kB
react-northstar
Checkbox		 79.782 kB
25.085 kB
react-northstar
Datepicker		 184.887 kB
56.167 kB
react-northstar
Debug		 8.801 kB
3.594 kB
react-northstar
Design		 36.564 kB
12.07 kB
react-northstar
Dialog		 112.02 kB
33.638 kB
react-northstar
Divider		 76.594 kB
24.137 kB
react-northstar
Dropdown		 196.43 kB
59.442 kB
react-northstar
Embed		 81.446 kB
25.42 kB
react-northstar
Flex		 47.702 kB
15.45 kB
react-northstar
Form		 92.492 kB
28.881 kB
react-northstar
Grid		 70.555 kB
22.283 kB
react-northstar
Header		 74.731 kB
23.476 kB
react-northstar
Image		 73.566 kB
23.339 kB
react-northstar
Input		 88.31 kB
27.784 kB
react-northstar
ItemLayout		 78.206 kB
24.458 kB
react-northstar
Label		 77.895 kB
24.415 kB
react-northstar
Layout		 75.368 kB
23.806 kB
react-northstar
List		 88.472 kB
27.57 kB
react-northstar
Loader		 78.591 kB
24.745 kB
react-northstar
Menu		 126.85 kB
39.875 kB
react-northstar
MenuButton		 161.254 kB
48.881 kB
react-northstar
Pill		 83.697 kB
26.077 kB
react-northstar
Popup		 133.56 kB
41.486 kB
react-northstar
Portal		 58.294 kB
18.855 kB
react-northstar
Provider		 93.114 kB
29.626 kB
react-northstar
RadioGroup		 83.25 kB
26.056 kB
react-northstar
Reaction		 77.255 kB
24.138 kB
react-northstar
Segment		 76.184 kB
23.899 kB
react-northstar
Skeleton		 77.74 kB
24.21 kB
react-northstar
Slider		 84.235 kB
26.744 kB
react-northstar
SplitButton		 176.487 kB
52.632 kB
react-northstar
Status		 76.247 kB
24.059 kB
react-northstar
SvgIcon		 36.819 kB
11.744 kB
react-northstar
Table		 80.765 kB
25.159 kB
react-northstar
Text		 74.089 kB
23.522 kB
react-northstar
TextArea		 74.223 kB
23.501 kB
react-northstar
Toolbar		 173.3 kB
52.087 kB
react-northstar
Tooltip		 108.23 kB
34.491 kB
react-northstar
Tree		 87.83 kB
27.223 kB
react-northstar
Video		 75.379 kB
23.794 kB
react-overflow
hooks only		 12.862 kB
4.827 kB
react-persona
Persona		 57.066 kB
17.821 kB
react-popover
Popover		 126.886 kB
39.806 kB
react-portal
Portal		 13.633 kB
4.869 kB
react-portal-compat
PortalCompatProvider		 7.944 kB
2.588 kB
react-positioning
usePositioning		 26.398 kB
9.539 kB
react-progress
ProgressBar		 17.428 kB
6.898 kB
react-provider
FluentProvider		 23.759 kB
8.657 kB
react-radio
Radio		 32.95 kB
10.251 kB
react-radio
RadioGroup		 15.354 kB
6.265 kB
react-select
Select		 28.609 kB
10.205 kB
react-slider
Slider		 39.949 kB
12.968 kB
react-spinbutton
SpinButton		 36.774 kB
11.788 kB
react-spinner
Spinner		 23.517 kB
8.512 kB
react-switch
Switch		 35.14 kB
11.2 kB
react-table
DataGrid		 165.168 kB
45.902 kB
react-table
Table (Primitives only)		 45.324 kB
14.116 kB
react-table
Table as DataGrid		 136.55 kB
36.811 kB
react-table
Table (Selection only)		 76.311 kB
20.546 kB
react-table
Table (Sort only)		 74.977 kB
20.154 kB
react-tags
InteractionTag		 15.259 kB
6.058 kB
react-tags
Tag		 29.982 kB
9.439 kB
react-tags
TagGroup		 80.556 kB
24.027 kB
react-text
Text - Default		 16.705 kB
6.569 kB
react-text
Text - Wrappers		 19.878 kB
6.896 kB
react-textarea
Textarea		 30.947 kB
10.476 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 35.666 kB
7.453 kB
react-theme
Teams: Light theme		 19.642 kB
5.549 kB
react-timepicker-compat
TimePicker		 104.484 kB
34.49 kB
react-toast
Toast (including Toaster)		 100.198 kB
29.76 kB
react-tooltip
Tooltip		 54.58 kB
19.188 kB
react-utilities
SSRProvider		 180 B
160 B
🤖 This report was generated against b1f669dceb6855bdd01d9e7be7764687aa161cf5

fabricteam avatar Jan 08 '24 16:01 fabricteam

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 594 621 5000
Button mount 287 296 5000
Field mount 1154 1099 5000
FluentProvider mount 710 716 5000
FluentProviderWithTheme mount 91 82 10
FluentProviderWithTheme virtual-rerender 72 67 10
FluentProviderWithTheme virtual-rerender-with-unmount 78 85 10
MakeStyles mount 877 864 50000
Persona mount 1758 1705 5000
SpinButton mount 1384 1430 5000

fabricteam avatar Jan 08 '24 16:01 fabricteam

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 95 81 1.17:1
CardMinimalPerf.default 328 293 1.12:1
HeaderMinimalPerf.default 224 208 1.08:1
IconMinimalPerf.default 395 367 1.08:1
TreeWith60ListItems.default 95 88 1.08:1
ChatDuplicateMessagesPerf.default 155 145 1.07:1
RadioGroupMinimalPerf.default 272 254 1.07:1
ChatWithPopoverPerf.default 191 180 1.06:1
FlexMinimalPerf.default 166 157 1.06:1
ListMinimalPerf.default 314 295 1.06:1
ProviderMinimalPerf.default 205 193 1.06:1
SegmentMinimalPerf.default 199 188 1.06:1
TableManyItemsPerf.default 1152 1089 1.06:1
GridMinimalPerf.default 192 182 1.05:1
ListNestedPerf.default 324 308 1.05:1
AttachmentMinimalPerf.default 85 82 1.04:1
DividerMinimalPerf.default 214 205 1.04:1
HeaderSlotsPerf.default 476 459 1.04:1
ImageMinimalPerf.default 236 228 1.04:1
TableMinimalPerf.default 233 225 1.04:1
TextAreaMinimalPerf.default 284 274 1.04:1
AccordionMinimalPerf.default 90 87 1.03:1
AnimationMinimalPerf.default 307 299 1.03:1
DialogMinimalPerf.default 452 438 1.03:1
LabelMinimalPerf.default 218 211 1.03:1
PopupMinimalPerf.default 348 337 1.03:1
ProviderMergeThemesPerf.default 651 633 1.03:1
TextMinimalPerf.default 200 194 1.03:1
ButtonOverridesMissPerf.default 635 624 1.02:1
ChatMinimalPerf.default 440 431 1.02:1
CheckboxMinimalPerf.default 1128 1107 1.02:1
ItemLayoutMinimalPerf.default 712 700 1.02:1
LoaderMinimalPerf.default 194 190 1.02:1
MenuMinimalPerf.default 503 494 1.02:1
SkeletonMinimalPerf.default 197 193 1.02:1
ToolbarMinimalPerf.default 538 526 1.02:1
AttachmentSlotsPerf.default 647 640 1.01:1
CarouselMinimalPerf.default 261 259 1.01:1
DatepickerMinimalPerf.default 3556 3517 1.01:1
DropdownManyItemsPerf.default 390 385 1.01:1
SplitButtonMinimalPerf.default 2227 2215 1.01:1
CustomToolbarPrototype.default 1469 1458 1.01:1
ButtonSlotsPerf.default 313 313 1:1
EmbedMinimalPerf.default 1874 1866 1:1
FormMinimalPerf.default 210 209 1:1
MenuButtonMinimalPerf.default 946 944 1:1
RosterPerf.default 1526 1530 1:1
RefMinimalPerf.default 106 106 1:1
BoxMinimalPerf.default 195 196 0.99:1
TooltipMinimalPerf.default 1279 1287 0.99:1
TreeMinimalPerf.default 466 472 0.99:1
DropdownMinimalPerf.default 1404 1429 0.98:1
SliderMinimalPerf.default 731 743 0.98:1
VideoMinimalPerf.default 466 476 0.98:1
AvatarMinimalPerf.default 110 113 0.97:1
InputMinimalPerf.default 531 549 0.97:1
ButtonMinimalPerf.default 85 89 0.96:1
ReactionMinimalPerf.default 201 210 0.96:1
AlertMinimalPerf.default 158 167 0.95:1
StatusMinimalPerf.default 378 397 0.95:1
ListCommonPerf.default 372 394 0.94:1
ListWith60ListItems.default 351 375 0.94:1
LayoutMinimalPerf.default 190 208 0.91:1

fabricteam avatar Jan 08 '24 16:01 fabricteam

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.

codesandbox-ci[bot] avatar Jan 08 '24 17:01 codesandbox-ci[bot]

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam avatar Jan 08 '24 17:01 fabricteam

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam avatar Jan 08 '24 17:01 fabricteam

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 632 635 5000
Breadcrumb mount 1676 1666 1000
Checkbox mount 1701 1680 5000
CheckboxBase mount 1457 1486 5000
ChoiceGroup mount 2981 3000 5000
ComboBox mount 666 684 1000
CommandBar mount 6338 6386 1000
ContextualMenu mount 13652 12946 1000
DefaultButton mount 751 797 5000
DetailsRow mount 2254 2176 5000
DetailsRowFast mount 2245 2191 5000
DetailsRowNoStyles mount 2039 2007 5000
Dialog mount 2796 2751 1000
DocumentCardTitle mount 241 228 1000
Dropdown mount 1992 1964 5000
FocusTrapZone mount 1172 1209 5000
FocusZone mount 1112 1070 5000
GroupedList mount 41811 42079 2
GroupedList virtual-rerender 18008 20123 2
GroupedList virtual-rerender-with-unmount 52714 52559 2
GroupedListV2 mount 252 241 2
GroupedListV2 virtual-rerender 207 213 2
GroupedListV2 virtual-rerender-with-unmount 231 221 2
IconButton mount 1096 1075 5000
Label mount 331 331 5000
Layer mount 2768 2692 5000
Link mount 391 391 5000
MenuButton mount 923 944 5000
MessageBar mount 21726 21610 5000
Nav mount 1972 1969 1000
OverflowSet mount 787 788 5000
Panel mount 1772 1814 1000
Persona mount 752 761 1000
Pivot mount 853 867 1000
PrimaryButton mount 869 843 5000
Rating mount 4613 4686 5000
SearchBox mount 926 938 5000
Shimmer mount 1902 1908 5000
Slider mount 1345 1348 5000
SpinButton mount 2954 2898 5000
Spinner mount 391 395 5000
SplitButton mount 1870 1876 5000
Stack mount 415 409 5000
StackWithIntrinsicChildren mount 850 859 5000
StackWithTextChildren mount 2595 2631 5000
SwatchColorPicker mount 6199 6192 5000
TagPicker mount 1477 1462 5000
Text mount 367 368 5000
TextField mount 943 940 5000
ThemeProvider mount 823 821 5000
ThemeProvider virtual-rerender 590 577 5000
ThemeProvider virtual-rerender-with-unmount 1281 1264 5000
Toggle mount 601 611 5000
buttonNative mount 201 191 5000

fabricteam avatar Jan 08 '24 17:01 fabricteam

Asset size changes

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

Baseline commit: 50176a643b2d47f9e45d6694293a7bc6dfac3dd7 (build)

size-auditor[bot] avatar Jan 08 '24 17:01 size-auditor[bot]

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam avatar Feb 05 '24 10:02 fabricteam