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

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

Merged

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented Apr 24, 2023

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)

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023

📊 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

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

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

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

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

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

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 24, 2023

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

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@Hotell Hotell mentioned this pull request Apr 24, 2023
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
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
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 27, 2023
* 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

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

Handy links:

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