Skip to content

feat(react-conformance): add new TS config api to be able to specify configName and configDir#27664

Merged
Hotell merged 3 commits intomicrosoft:masterfrom
Hotell:hotell/build/faster-ci/conformance-tests-fix-1
Apr 25, 2023
Merged

feat(react-conformance): add new TS config api to be able to specify configName and configDir#27664
Hotell merged 3 commits intomicrosoft:masterfrom
Hotell:hotell/build/faster-ci/conformance-tests-fix-1

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Apr 24, 2023 •
edited
Loading

Previous Behavior

Conformance test used within projects that use TS path aliases are slow and cause various OOMemory leaks on CI.

This is caused by:

  • bad architecture / technology constraints (jest as conformance env)
  • creation of TS Program, which in case of solution config file is forced to construct huge TS tree (all cy,unit,implementation,stories)

New Behavior

This PR adds new generic conformance config API which needs to be used for projects with ts solution configs. By leveraging this new API we get following benchmark improvements:

Demo:

const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+  tsConfig: { configName: 'tsconfig.spec.json' },
   componentPath: require.main?.filename.replace('.test', ''),
     ...
}

Speed metrics::

Legend:

  • optimization v1 = fixing react-conformance to consume tsconfig.lib.json for ts solution projects
command: yarn workspace @fluentui/react-text --no-cache --runInBand time delta remarks
1) ts-jest (current state) 69s BASE
2) optimization v1 + ts-jest 37.43 46%
3) optimization v1 + swc 28.79 58% not part of this PR

Related Issue(s)

@github-actions github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 24, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)		 88.891 kB
26.6 kB
react-alert
Alert		 95.74 kB
23.13 kB
react-avatar
Avatar		 59.494 kB
15.587 kB
react-avatar
AvatarGroup		 18.223 kB
6.7 kB
react-avatar
AvatarGroupItem		 75.719 kB
20.079 kB
react-badge
Badge		 26.099 kB
7.632 kB
react-badge
CounterBadge		 27.084 kB
7.943 kB
react-badge
PresenceBadge		 34.573 kB
8.739 kB
react-button
Button		 39.864 kB
9.996 kB
react-button
CompoundButton		 47.012 kB
11.471 kB
react-button
MenuButton		 44.55 kB
11.357 kB
react-button
SplitButton		 52.961 kB
12.932 kB
react-button
ToggleButton		 58.243 kB
11.927 kB
react-card
Card - All		 86.061 kB
24.345 kB
react-card
Card		 80.997 kB
22.895 kB
react-card
CardFooter		 9.158 kB
3.844 kB
react-card
CardHeader		 11.048 kB
4.538 kB
react-card
CardPreview		 9.963 kB
4.192 kB
react-checkbox
Checkbox		 37.083 kB
11.285 kB
react-combobox
Combobox (including child components)		 89.775 kB
28.537 kB
react-combobox
Dropdown (including child components)		 88.459 kB
28.262 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 67.986 kB
18.429 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 207.27 kB
57.634 kB
react-components
react-components: FluentProvider & webLightTheme		 38.773 kB
12.375 kB
react-datepicker-compat
DatePicker Compat		 223.13 kB
58.944 kB
react-dialog
Dialog (including children components)		 93.747 kB
27.527 kB
react-divider
Divider		 20.072 kB
6.742 kB
react-field
Field		 21.537 kB
7.454 kB
react-image
Image		 14.067 kB
5.012 kB
react-infobutton
InfoButton		 130.761 kB
39.509 kB
react-infobutton
InfoLabel		 133.987 kB
40.517 kB
react-input
Input		 26.806 kB
8.151 kB
react-label
Label		 12.693 kB
4.626 kB
react-link
Link		 12.357 kB
5.091 kB
react-menu
Menu (including children components)		 131.068 kB
39.705 kB
react-menu
Menu (including selectable components)		 134.074 kB
40.243 kB
react-persona
Persona		 66.426 kB
17.533 kB
react-popover
Popover		 117.744 kB
35.886 kB
react-portal
Portal		 11.649 kB
4.263 kB
react-portal-compat
PortalCompatProvider		 6.446 kB
2.186 kB
react-progress
ProgressBar		 16.445 kB
5.865 kB
react-provider
FluentProvider		 20.72 kB
7.14 kB
react-radio
Radio		 29.897 kB
9.112 kB
react-radio
RadioGroup		 13.984 kB
5.154 kB
react-select
Select		 28.03 kB
9.235 kB
react-slider
Slider		 36.947 kB
11.506 kB
react-spinbutton
SpinButton		 36.718 kB
10.802 kB
react-spinner
Spinner		 23.498 kB
7.244 kB
react-switch
Switch		 32.503 kB
9.732 kB
react-table
DataGrid		 150.617 kB
41.075 kB
react-table
Table (Primitives only)		 47.03 kB
12.784 kB
react-table
Table as DataGrid		 133.181 kB
33.644 kB
react-table
Table (Selection only)		 81.092 kB
19.641 kB
react-table
Table (Sort only)		 80.422 kB
19.453 kB
react-text
Text - Default		 15.08 kB
5.353 kB
react-text
Text - Wrappers		 15.63 kB
5.25 kB
react-textarea
Textarea		 30.235 kB
9.521 kB
react-tooltip
Tooltip		 49.492 kB
16.862 kB
🤖 This report was generated against 51767fd6bcd9fedcfe6e4b4735fdf13a1f1174bb

@Hotell Hotell force-pushed the hotell/build/faster-ci/conformance-tests-fix-1 branch from a6d9ad6 to 22ce33a Compare April 24, 2023 08:15
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 835 817 5000
Button mount 451 429 5000
Field mount 1505 1540 5000
FluentProvider mount 1070 1095 5000
FluentProviderWithTheme mount 139 128 10
FluentProviderWithTheme virtual-rerender 108 113 10
FluentProviderWithTheme virtual-rerender-with-unmount 126 126 10
InfoButton mount 25 19 5000
MakeStyles mount 1328 1323 50000
Persona mount 2374 2329 5000
SpinButton mount 1897 1866 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 131 115 1.14:1
TooltipMinimalPerf.default 1939 1820 1.07:1
AlertMinimalPerf.default 235 221 1.06:1
LabelMinimalPerf.default 336 318 1.06:1
ButtonSlotsPerf.default 490 467 1.05:1
LoaderMinimalPerf.default 285 272 1.05:1
PortalMinimalPerf.default 133 127 1.05:1
RefMinimalPerf.default 166 158 1.05:1
TextMinimalPerf.default 289 275 1.05:1
VideoMinimalPerf.default 618 589 1.05:1
AvatarMinimalPerf.default 157 151 1.04:1
ListMinimalPerf.default 446 429 1.04:1
ChatDuplicateMessagesPerf.default 230 224 1.03:1
ChatMinimalPerf.default 612 596 1.03:1
FlexMinimalPerf.default 238 232 1.03:1
ListWith60ListItems.default 549 535 1.03:1
IconMinimalPerf.default 549 531 1.03:1
TreeMinimalPerf.default 677 658 1.03:1
AnimationMinimalPerf.default 428 419 1.02:1
CardMinimalPerf.default 443 436 1.02:1
EmbedMinimalPerf.default 2807 2758 1.02:1
PopupMinimalPerf.default 527 516 1.02:1
ProviderMergeThemesPerf.default 1147 1123 1.02:1
AttachmentSlotsPerf.default 951 945 1.01:1
ButtonOverridesMissPerf.default 982 968 1.01:1
DropdownMinimalPerf.default 2088 2068 1.01:1
FormMinimalPerf.default 317 315 1.01:1
HeaderSlotsPerf.default 677 670 1.01:1
InputMinimalPerf.default 845 837 1.01:1
ListNestedPerf.default 482 476 1.01:1
ReactionMinimalPerf.default 311 307 1.01:1
SkeletonMinimalPerf.default 297 294 1.01:1
SplitButtonMinimalPerf.default 3520 3482 1.01:1
CustomToolbarPrototype.default 2196 2177 1.01:1
AccordionMinimalPerf.default 115 115 1:1
CheckboxMinimalPerf.default 1854 1853 1:1
DatepickerMinimalPerf.default 5157 5132 1:1
DialogMinimalPerf.default 663 665 1:1
DropdownManyItemsPerf.default 570 568 1:1
GridMinimalPerf.default 290 289 1:1
ItemLayoutMinimalPerf.default 1048 1051 1:1
MenuButtonMinimalPerf.default 1448 1454 1:1
RosterPerf.default 2157 2156 1:1
AttachmentMinimalPerf.default 114 115 0.99:1
BoxMinimalPerf.default 284 287 0.99:1
CarouselMinimalPerf.default 396 399 0.99:1
ChatWithPopoverPerf.default 274 278 0.99:1
LayoutMinimalPerf.default 300 302 0.99:1
MenuMinimalPerf.default 712 717 0.99:1
ProviderMinimalPerf.default 317 320 0.99:1
StatusMinimalPerf.default 585 589 0.99:1
TableManyItemsPerf.default 1652 1661 0.99:1
TextAreaMinimalPerf.default 394 396 0.99:1
HeaderMinimalPerf.default 301 307 0.98:1
ToolbarMinimalPerf.default 757 775 0.98:1
DividerMinimalPerf.default 291 301 0.97:1
ImageMinimalPerf.default 318 328 0.97:1
RadioGroupMinimalPerf.default 377 388 0.97:1
SliderMinimalPerf.default 1037 1070 0.97:1
TreeWith60ListItems.default 119 123 0.97:1
ListCommonPerf.default 578 602 0.96:1
SegmentMinimalPerf.default 276 292 0.95:1
TableMinimalPerf.default 325 341 0.95:1

@size-auditor
Copy link

size-auditor bot commented Apr 24, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: 51767fd6bcd9fedcfe6e4b4735fdf13a1f1174bb (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 24, 2023 •
edited
Loading

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

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

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1062 1083 5000
Breadcrumb mount 2733 2731 1000
Checkbox mount 2737 2745 5000
CheckboxBase mount 2449 2534 5000
ChoiceGroup mount 5101 4874 5000
ComboBox mount 1151 1125 1000
CommandBar mount 9926 10028 1000
ContextualMenu mount 22577 22556 1000
DefaultButton mount 1229 1266 5000
DetailsRow mount 3732 3729 5000
DetailsRowFast mount 3766 3776 5000
DetailsRowNoStyles mount 3515 3473 5000
Dialog mount 4382 4323 1000
DocumentCardTitle mount 382 401 1000
Dropdown mount 3273 3223 5000
FocusTrapZone mount 1883 1942 5000
FocusZone mount 1867 1888 5000
GroupedList mount 71275 85049 2
GroupedList virtual-rerender 34661 34689 2
GroupedList virtual-rerender-with-unmount 91600 91053 2
GroupedListV2 mount 381 378 2
GroupedListV2 virtual-rerender 351 357 2
GroupedListV2 virtual-rerender-with-unmount 385 380 2
IconButton mount 1862 1895 5000
Label mount 552 557 5000
Layer mount 4657 4573 5000
Link mount 646 670 5000
MenuButton mount 1629 1613 5000
MessageBar mount 34375 33392 5000
Nav mount 3324 3347 1000
OverflowSet mount 1310 1300 5000
Panel mount 2788 2792 1000
Persona mount 1251 1221 1000
Pivot mount 1467 1479 1000
PrimaryButton mount 1381 1415 5000
Rating mount 7620 7698 5000
SearchBox mount 1539 1523 5000
Shimmer mount 3088 3237 5000
Slider mount 2321 2294 5000
SpinButton mount 4767 4960 5000
Spinner mount 613 651 5000
SplitButton mount 3242 3231 5000
Stack mount 664 693 5000
StackWithIntrinsicChildren mount 1472 1428 5000
StackWithTextChildren mount 4269 4314 5000
SwatchColorPicker mount 10447 10321 5000
TagPicker mount 2645 2699 5000
Text mount 619 616 5000
TextField mount 1580 1635 5000
ThemeProvider mount 1470 1426 5000
ThemeProvider virtual-rerender 949 916 5000
ThemeProvider virtual-rerender-with-unmount 2289 2252 5000
Toggle mount 1013 1027 5000
buttonNative mount 345 328 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023 •
edited
Loading

🕵 FluentUI-v0 No visual regressions between this PR and main

@Hotell Hotell mentioned this pull request Apr 24, 2023
Merged
@Hotell Hotell force-pushed the hotell/build/faster-ci/conformance-tests-fix-1 branch from 22ce33a to e12ed12 Compare April 24, 2023 13:22
@Hotell Hotell mentioned this pull request Apr 24, 2023
Merged
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@Hotell Hotell mentioned this pull request Apr 24, 2023
Closed
11 tasks
@Hotell Hotell marked this pull request as ready for review April 24, 2023 14:13
@Hotell Hotell mentioned this pull request Apr 25, 2023
Open
9 tasks
@Hotell Hotell merged commit 3a6bbb0 into microsoft:master Apr 25, 2023
@Hotell Hotell deleted the hotell/build/faster-ci/conformance-tests-fix-1 branch April 25, 2023 12:53
@Hotell Hotell mentioned this pull request Apr 25, 2023
Merged
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 27, 2023
@marcosmoura
Merge branch 'master' into feat/drawer-components
cbca31c 
* master:
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  chore: migrate to NodeJS v16 (microsoft#27711)
  remove react-avatar-context package (microsoft#27709)
  test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669)
  chore: Add caret to react-datepicker-compat dependencies (microsoft#27671)
  test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661)
  chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702)
  chore: enforce files naming to use .styles.ts (microsoft#27698)
  feat: adds lazy loading example (microsoft#27587)
  feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025)
  chore(react-tree): updates useOpenItemsState internals (microsoft#27697)
  feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668)
  test: use `isolatedModules` for all ts-jest configs to lower memory footprint on CI (microsoft#27670)
  chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming (microsoft#27687)
  feat(react-tree): makes useFlatTree generic (microsoft#27682)
  Enable export to codepen for charting library (microsoft#27539)
  Overflow: added useOverflowCount to exports (microsoft#27678)
  fix: Menu should not steal focus on re-render (microsoft#27688)
  feat(react-conformance): add new TS config api to be able to specify configName and configDir (microsoft#27664)
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 5, 2023

🎉@fluentui/react-conformance@v0.16.0 has been released which incorporates this pull request.:tada:

Handy links:

@Hotell Hotell mentioned this pull request Sep 21, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JustSlone JustSlone JustSlone approved these changes

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

@tudorpopams tudorpopams Awaiting requested review from tudorpopams tudorpopams is a code owner

+1 more reviewer

@ling1726 ling1726 ling1726 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Area: Testing

Projects

None yet

Milestone

April Project Cycle Q2 2023

Development

Successfully merging this pull request may close these issues.

5 participants

@Hotell @fabricteam @msft-fluent-ui-bot @ling1726 @JustSlone