Skip to content

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Oct 19, 2023

Previous Behavior

we dont know 100% what we actually ship to npm. this caused a lot of headaches in the past while migrating to new major versions of nodejs or in general config tweaks ( see linked epic for more info )

New Behavior

  • implements verify-packaging just-script task ( has nothing in particular with just-scripts and will be migrated to nx executor once we will start migration from lage/just).

  • new task is being added to 1 v9 and 1 v8 package

  • this is a pre-requirement for safe migration to node v18

  • v9 (probably v8 should as well) will switch to"files" specifier in package.json -> thus the logic will of the task will be updated

Related Issue(s)

@Hotell Hotell changed the title Hotell/build/verify packaging feat(scripts-task): implement initial verify-packaging task Oct 19, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 63 71 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 628 643 5000
Button mount 308 307 5000
Field mount 1081 1108 5000
FluentProvider mount 702 695 5000
FluentProviderWithTheme mount 78 85 10
FluentProviderWithTheme virtual-rerender 63 71 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 76 72 10
InfoButton mount 9 17 5000
MakeStyles mount 837 852 50000
Persona mount 1703 1697 5000
SpinButton mount 1342 1309 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 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 b355d28:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 118 100 1.18:1
LoaderMinimalPerf.default 193 173 1.12:1
IconMinimalPerf.default 391 350 1.12:1
ButtonSlotsPerf.default 336 306 1.1:1
SkeletonMinimalPerf.default 200 184 1.09:1
AttachmentSlotsPerf.default 687 637 1.08:1
CarouselMinimalPerf.default 265 246 1.08:1
ChatWithPopoverPerf.default 197 186 1.06:1
ImageMinimalPerf.default 217 206 1.05:1
SliderMinimalPerf.default 741 709 1.05:1
TextAreaMinimalPerf.default 296 283 1.05:1
ChatMinimalPerf.default 432 415 1.04:1
DatepickerMinimalPerf.default 3803 3659 1.04:1
HeaderSlotsPerf.default 477 457 1.04:1
TreeMinimalPerf.default 471 453 1.04:1
AttachmentMinimalPerf.default 79 77 1.03:1
DividerMinimalPerf.default 206 200 1.03:1
FormMinimalPerf.default 225 219 1.03:1
ListMinimalPerf.default 304 295 1.03:1
ListNestedPerf.default 320 312 1.03:1
ToolbarMinimalPerf.default 533 517 1.03:1
VideoMinimalPerf.default 435 423 1.03:1
AlertMinimalPerf.default 155 152 1.02:1
CardMinimalPerf.default 302 297 1.02:1
DialogMinimalPerf.default 444 434 1.02:1
FlexMinimalPerf.default 157 154 1.02:1
GridMinimalPerf.default 186 183 1.02:1
InputMinimalPerf.default 566 554 1.02:1
ItemLayoutMinimalPerf.default 686 674 1.02:1
MenuButtonMinimalPerf.default 960 938 1.02:1
ProviderMergeThemesPerf.default 648 637 1.02:1
RadioGroupMinimalPerf.default 261 257 1.02:1
ReactionMinimalPerf.default 207 203 1.02:1
EmbedMinimalPerf.default 1870 1850 1.01:1
ListWith60ListItems.default 373 369 1.01:1
MenuMinimalPerf.default 505 498 1.01:1
SegmentMinimalPerf.default 195 193 1.01:1
SplitButtonMinimalPerf.default 2239 2209 1.01:1
CustomToolbarPrototype.default 1470 1456 1.01:1
TooltipMinimalPerf.default 1269 1255 1.01:1
ChatDuplicateMessagesPerf.default 152 152 1:1
AnimationMinimalPerf.default 296 298 0.99:1
ButtonMinimalPerf.default 87 88 0.99:1
DropdownManyItemsPerf.default 392 394 0.99:1
DropdownMinimalPerf.default 1414 1429 0.99:1
LabelMinimalPerf.default 213 216 0.99:1
PortalMinimalPerf.default 82 83 0.99:1
TableMinimalPerf.default 228 230 0.99:1
ListCommonPerf.default 376 385 0.98:1
ProviderMinimalPerf.default 201 205 0.98:1
StatusMinimalPerf.default 377 383 0.98:1
TableManyItemsPerf.default 1091 1115 0.98:1
BoxMinimalPerf.default 184 189 0.97:1
CheckboxMinimalPerf.default 1107 1143 0.97:1
HeaderMinimalPerf.default 197 203 0.97:1
PopupMinimalPerf.default 342 353 0.97:1
ButtonOverridesMissPerf.default 634 657 0.96:1
RosterPerf.default 1474 1530 0.96:1
RefMinimalPerf.default 109 113 0.96:1
TextMinimalPerf.default 188 195 0.96:1
TreeWith60ListItems.default 81 84 0.96:1
AccordionMinimalPerf.default 74 78 0.95:1
LayoutMinimalPerf.default 193 203 0.95:1

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
priority-overflow
createOverflowManager
4.162 kB
1.735 kB
react-accordion
Accordion (including children components)
92.983 kB
28.418 kB
react-alert
Alert
84.293 kB
23.456 kB
react-avatar
Avatar
50.534 kB
15.923 kB
react-avatar
AvatarGroup
20.064 kB
7.894 kB
react-avatar
AvatarGroupItem
65.19 kB
20.259 kB
react-badge
Badge
27.264 kB
8.808 kB
react-badge
CounterBadge
28.165 kB
9.101 kB
react-badge
PresenceBadge
25.67 kB
9.313 kB
react-button
Button
40.074 kB
11.292 kB
react-button
CompoundButton
47.43 kB
12.787 kB
react-button
MenuButton
44.848 kB
12.668 kB
react-button
SplitButton
52.862 kB
14.254 kB
react-button
ToggleButton
57.122 kB
13.194 kB
react-calendar-compat
Calendar Compat
141.288 kB
36.81 kB
react-card
Card - All
92.955 kB
26.977 kB
react-card
Card
87.781 kB
25.462 kB
react-card
CardFooter
13.423 kB
5.481 kB
react-card
CardHeader
15.666 kB
6.235 kB
react-card
CardPreview
14.374 kB
5.854 kB
react-checkbox
Checkbox
37.505 kB
12.327 kB
react-combobox
Combobox (including child components)
91.781 kB
29.935 kB
react-combobox
Dropdown (including child components)
90.223 kB
29.601 kB
react-components
react-components: Button, FluentProvider & webLightTheme
70.002 kB
20.161 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
207.417 kB
59.289 kB
react-components
react-components: FluentProvider & webLightTheme
42.286 kB
14 kB
react-datepicker-compat
DatePicker Compat
212.464 kB
59.301 kB
react-dialog
Dialog (including children components)
90.18 kB
26.891 kB
react-divider
Divider
21.179 kB
7.839 kB
react-field
Field
22.788 kB
8.639 kB
react-image
Image
16.096 kB
6.317 kB
react-infobutton
InfoButton
130.729 kB
41.194 kB
react-infobutton
InfoLabel
134.413 kB
42.351 kB
react-input
Input
27.247 kB
9.194 kB
react-jsx-runtime
Classic Pragma
1.049 kB
531 B
react-jsx-runtime
JSX Dev Runtime
4.14 kB
1.741 kB
react-jsx-runtime
JSX Runtime
4.734 kB
1.983 kB
react-label
Label
14.508 kB
5.857 kB
react-link
Link
17.4 kB
6.977 kB
react-menu
Menu (including children components)
140.176 kB
43.004 kB
react-menu
Menu (including selectable components)
142.862 kB
43.51 kB
react-message-bar
MessageBar (all components)
25.54 kB
9.102 kB
react-overflow
hooks only
12.419 kB
4.687 kB
react-persona
Persona
57.425 kB
17.798 kB
react-popover
Popover
119.46 kB
37.714 kB
react-portal
Portal
12.4 kB
4.541 kB
react-portal-compat
PortalCompatProvider
6.651 kB
2.252 kB
react-positioning
usePositioning
25.305 kB
9.162 kB
react-progress
ProgressBar
17.788 kB
6.986 kB
react-provider
FluentProvider
22.831 kB
8.429 kB
react-radio
Radio
31.266 kB
10.267 kB
react-radio
RadioGroup
15.704 kB
6.35 kB
react-select
Select
28.968 kB
10.269 kB
react-slider
Slider
38.349 kB
12.595 kB
react-spinbutton
SpinButton
37.133 kB
11.856 kB
react-spinner
Spinner
23.762 kB
8.556 kB
react-switch
Switch
33.731 kB
10.899 kB
react-table
DataGrid
156.996 kB
43.893 kB
react-table
Table (Primitives only)
43.941 kB
13.76 kB
react-table
Table as DataGrid
130.165 kB
35.174 kB
react-table
Table (Selection only)
75.777 kB
20.477 kB
react-table
Table (Sort only)
74.384 kB
20.075 kB
react-tags
InteractionTag
15.618 kB
6.152 kB
react-tags
Tag
30.341 kB
9.505 kB
react-tags
TagGroup
73.816 kB
22.097 kB
react-text
Text - Default
17.065 kB
6.645 kB
react-text
Text - Wrappers
20.237 kB
6.965 kB
react-textarea
Textarea
31.306 kB
10.549 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.611 kB
7.295 kB
react-theme
Teams: Light theme
19.282 kB
5.486 kB
react-toast
Toast (including Toaster)
92.545 kB
27.805 kB
react-tooltip
Tooltip
52.466 kB
18.466 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against b5d527237289d185bd58e4500a04f9d3d495662a

@size-auditor
Copy link

size-auditor bot commented Oct 19, 2023

Asset size changes

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

Baseline commit: b5d527237289d185bd58e4500a04f9d3d495662a (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 639 611 5000
Breadcrumb mount 1664 1670 1000
Checkbox mount 1663 1657 5000
CheckboxBase mount 1470 1430 5000
ChoiceGroup mount 2899 2914 5000
ComboBox mount 662 675 1000
CommandBar mount 6149 6118 1000
ContextualMenu mount 11349 11926 1000
DefaultButton mount 733 741 5000
DetailsRow mount 2206 2209 5000
DetailsRowFast mount 2134 2125 5000
DetailsRowNoStyles mount 2005 1987 5000
Dialog mount 2600 2790 1000
DocumentCardTitle mount 223 230 1000
Dropdown mount 1944 1961 5000
FocusTrapZone mount 1169 1124 5000
FocusZone mount 1049 1058 5000
GroupedList mount 40687 41387 2
GroupedList virtual-rerender 17515 19826 2
GroupedList virtual-rerender-with-unmount 50299 50059 2
GroupedListV2 mount 218 226 2
GroupedListV2 virtual-rerender 207 213 2
GroupedListV2 virtual-rerender-with-unmount 241 231 2
IconButton mount 1066 1088 5000
Label mount 332 325 5000
Layer mount 2680 2696 5000
Link mount 396 390 5000
MenuButton mount 929 951 5000
MessageBar mount 21423 21433 5000
Nav mount 1906 1947 1000
OverflowSet mount 764 782 5000
Panel mount 2047 1760 1000
Persona mount 743 717 1000
Pivot mount 877 863 1000
PrimaryButton mount 842 843 5000
Rating mount 4560 4527 5000
SearchBox mount 914 898 5000
Shimmer mount 1856 1871 5000
Slider mount 1308 1287 5000
SpinButton mount 2870 2853 5000
Spinner mount 383 402 5000
SplitButton mount 1785 1781 5000
Stack mount 401 405 5000
StackWithIntrinsicChildren mount 845 846 5000
StackWithTextChildren mount 2600 2632 5000
SwatchColorPicker mount 6138 6139 5000
TagPicker mount 1435 1478 5000
Text mount 370 365 5000
TextField mount 917 918 5000
ThemeProvider mount 819 827 5000
ThemeProvider virtual-rerender 579 593 5000
ThemeProvider virtual-rerender-with-unmount 1255 1236 5000
Toggle mount 612 613 5000
buttonNative mount 192 199 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 19, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@Hotell Hotell force-pushed the hotell/build/verify-packaging branch from e5f8e76 to b355d28 Compare October 19, 2023 15:52
@Hotell Hotell mentioned this pull request Oct 19, 2023
1 task
@Hotell Hotell marked this pull request as ready for review October 20, 2023 08:09
@Hotell Hotell requested review from a team and marcosmoura as code owners October 20, 2023 08:09
@Hotell Hotell added Fluent UI react (v8) Issues about @fluentui/react (v8) Area: Build System labels Oct 24, 2023
@Hotell
Copy link
Contributor Author

Hotell commented Oct 25, 2023

review ping @TristanWatanabe @marcosmoura 🙏

@Hotell Hotell merged commit d22e99a into microsoft:master Oct 25, 2023
@Hotell Hotell deleted the hotell/build/verify-packaging branch October 25, 2023 16:48
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 25, 2023
* master:
  feat(scripts-task): implement initial verify-packaging task (microsoft#29595)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 26, 2023
* master:
  chore: migrate to nx 16.10 (microsoft#29617)
  fix(react-drawer): accessibility tweaks (microsoft#29627)
  Fixing few legend colors not visible in dark mode (microsoft#29652)
  applying package updates
  Fixing dark mode bug for xAxis for Vertical Stacked bar chart (microsoft#29427)
  chore: Refactor RadioGroup stories to use Field, and remove individual storybook page for Radio (microsoft#29268)
  docs: fix description of SelectInitialValue story (microsoft#26493)
  chore: fix specs location (microsoft#29642)
  feat(scripts-task): implement initial verify-packaging task (microsoft#29595)
  feat(tools): replace npmignore with package.json#files for robust control over what we ship to npm (microsoft#29616)
  fix(workspace-plugin): fix storybook and vr-test issues wihtin prepare-initial-release generator (microsoft#29577)
  feat(react-breadcrumb): removed non-interactive item  (microsoft#29623)
  fix(react-motion): prevent from breaking the rule of hooks (microsoft#29628)
  fix(react-toast): invoke useCustomStyleHook_unstable() (microsoft#29632)
  feat: Deprecate Alert component (microsoft#29615)
  chore(react-infobutton, react-components): Deprecate InfoButton and InfoLabel from react-infobutton (microsoft#29605)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants