ci: improve v9 type-checking speed by ~80% with imperative ghost dependencies type generation #30577

Hotell · 2024-02-20T13:10:31Z

Previous Behavior

New Behavior

A more deterministic implementation of #28002

🚨 we are running into race conditions that make this solution invalid ATM
- looks like the cause is lage is not handling caching properly when those manual task invocations are happening in sub-process. need to verify with nx , but that should not happen as there is deamon process which should handle this as expected.

Flow:

Before running type-check we run generate-circular-dependencies-types which will create dependency list of packages used within stories (ghost circular dependencies), and it will run generate-api for them. After that's done we have 100% guarantees all type definitions exist and we can disable TS path aliases and invoke tsc -b which will be significantly faster.

During 1st invocation there is gonna be huge CPU usage peak as it will the first time when all react-components suite packages will run generate-api task.

Related Issue(s)

Fixes partially [Feature]: improve type-checking performance #30516

…mponents if any v9 package is affected

…check task

…n use cache and /unstable apis work

…rts package that is not a dep nor v9 suite dep

…o be build instead hardcoding strings

…ck hack

…e-generation build

… to package.json

…ncy type-generation build

…ckages

fabricteam · 2024-02-20T13:20:36Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	617	645	5000
Button	mount	308	298	5000
Field	mount	1146	1122	5000
FluentProvider	mount	707	709	5000
FluentProviderWithTheme	mount	75	90	10
FluentProviderWithTheme	virtual-rerender	56	59	10
FluentProviderWithTheme	virtual-rerender-with-unmount	76	71	10
MakeStyles	mount	839	849	50000
Persona	mount	1736	1731	5000
SpinButton	mount	1420	1427	5000

codesandbox-ci · 2024-02-20T13:23:59Z

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.

fabricteam · 2024-02-20T13:25:34Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	98	87	1.13:1
FormMinimalPerf.default	237	213	1.11:1
AttachmentMinimalPerf.default	88	81	1.09:1
ListCommonPerf.default	398	365	1.09:1
MenuMinimalPerf.default	515	477	1.08:1
IconMinimalPerf.default	409	380	1.08:1
VideoMinimalPerf.default	446	414	1.08:1
ImageMinimalPerf.default	234	220	1.06:1
LoaderMinimalPerf.default	197	188	1.05:1
PopupMinimalPerf.default	355	337	1.05:1
PortalMinimalPerf.default	88	84	1.05:1
AccordionMinimalPerf.default	84	81	1.04:1
AvatarMinimalPerf.default	105	101	1.04:1
CarouselMinimalPerf.default	261	252	1.04:1
ChatWithPopoverPerf.default	202	195	1.04:1
InputMinimalPerf.default	526	506	1.04:1
LabelMinimalPerf.default	226	218	1.04:1
TextMinimalPerf.default	199	192	1.04:1
TreeWith60ListItems.default	84	81	1.04:1
SliderMinimalPerf.default	752	733	1.03:1
TableMinimalPerf.default	249	241	1.03:1
AnimationMinimalPerf.default	300	293	1.02:1
ListNestedPerf.default	318	312	1.02:1
MenuButtonMinimalPerf.default	965	945	1.02:1
ReactionMinimalPerf.default	213	208	1.02:1
SegmentMinimalPerf.default	200	196	1.02:1
TreeMinimalPerf.default	474	463	1.02:1
BoxMinimalPerf.default	192	191	1.01:1
DatepickerMinimalPerf.default	3568	3539	1.01:1
DividerMinimalPerf.default	205	202	1.01:1
EmbedMinimalPerf.default	1863	1853	1.01:1
ItemLayoutMinimalPerf.default	715	709	1.01:1
LayoutMinimalPerf.default	199	197	1.01:1
ListMinimalPerf.default	300	298	1.01:1
ProviderMinimalPerf.default	199	197	1.01:1
SplitButtonMinimalPerf.default	2231	2211	1.01:1
CustomToolbarPrototype.default	1469	1453	1.01:1
TooltipMinimalPerf.default	1261	1246	1.01:1
ChatDuplicateMessagesPerf.default	153	153	1:1
DialogMinimalPerf.default	445	445	1:1
FlexMinimalPerf.default	150	150	1:1
ProviderMergeThemesPerf.default	653	655	1:1
StatusMinimalPerf.default	389	389	1:1
ButtonOverridesMissPerf.default	637	642	0.99:1
ChatMinimalPerf.default	423	429	0.99:1
DropdownManyItemsPerf.default	387	390	0.99:1
DropdownMinimalPerf.default	1402	1412	0.99:1
TableManyItemsPerf.default	1123	1135	0.99:1
TextAreaMinimalPerf.default	288	290	0.99:1
AttachmentSlotsPerf.default	624	636	0.98:1
ButtonSlotsPerf.default	300	306	0.98:1
CardMinimalPerf.default	299	305	0.98:1
CheckboxMinimalPerf.default	1123	1146	0.98:1
ListWith60ListItems.default	359	365	0.98:1
RadioGroupMinimalPerf.default	256	260	0.98:1
ToolbarMinimalPerf.default	520	529	0.98:1
RefMinimalPerf.default	113	116	0.97:1
GridMinimalPerf.default	183	191	0.96:1
RosterPerf.default	1580	1641	0.96:1
AlertMinimalPerf.default	146	154	0.95:1
HeaderMinimalPerf.default	200	210	0.95:1
HeaderSlotsPerf.default	465	488	0.95:1
SkeletonMinimalPerf.default	192	203	0.95:1

…l v9 packages

fabricteam · 2024-02-20T13:28:45Z

📊 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-accordion` Accordion (including children components)	`100.12 kB` `30.422 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-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.067 kB` `39.826 kB`
`react-dialog` Dialog (including children components)	`100.923 kB` `29.928 kB`
`react-divider` Divider	`20.82 kB` `7.763 kB`
`react-field` Field	`22.544 kB` `8.61 kB`
`react-image` Image	`15.745 kB` `6.23 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-overflow` hooks only	`12.862 kB` `4.827 kB`
`react-portal` Portal	`13.629 kB` `4.875 kB`
`react-positioning` usePositioning	`26.398 kB` `9.539 kB`
`react-provider` FluentProvider	`23.751 kB` `8.66 kB`
`react-spinner` Spinner	`23.517 kB` `8.512 kB`
`react-text` Text - Default	`16.705 kB` `6.569 kB`
`react-text` Text - Wrappers	`19.878 kB` `6.896 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.616 kB` `7.317 kB`
`react-theme` Teams: Light theme	`19.287 kB` `5.498 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against ae149271e4b71ba21bcde2f3910f35389aeecb54}

fabricteam · 2024-02-20T13:36:06Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	640	641	5000
Breadcrumb	mount	1737	1800	1000
Checkbox	mount	1723	1731	5000
CheckboxBase	mount	1514	1515	5000
ChoiceGroup	mount	2976	3027	5000
ComboBox	mount	699	678	1000
CommandBar	mount	6543	6526	1000
ContextualMenu	mount	16994	16665	1000
DefaultButton	mount	779	776	5000
DetailsRow	mount	2255	2223	5000
DetailsRowFast	mount	2223	2211	5000
DetailsRowNoStyles	mount	2058	2075	5000
Dialog	mount	2829	2823	1000
DocumentCardTitle	mount	246	236	1000
Dropdown	mount	2038	2027	5000
FocusTrapZone	mount	1179	1166	5000
FocusZone	mount	1090	1084	5000
GroupedList	mount	42730	42808	2
GroupedList	virtual-rerender	20350	20481	2
GroupedList	virtual-rerender-with-unmount	51669	51701	2
GroupedListV2	mount	238	237	2
GroupedListV2	virtual-rerender	223	225	2
GroupedListV2	virtual-rerender-with-unmount	226	259	2
IconButton	mount	1100	1085	5000
Label	mount	351	339	5000
Layer	mount	2791	2769	5000
Link	mount	398	407	5000
MenuButton	mount	955	967	5000
MessageBar	mount	22030	21863	5000
Nav	mount	1962	1940	1000
OverflowSet	mount	802	788	5000
Panel	mount	2092	1831	1000
Persona	mount	762	732	1000
Pivot	mount	879	909	1000
PrimaryButton	mount	867	904	5000
Rating	mount	4686	4689	5000
SearchBox	mount	934	961	5000
Shimmer	mount	1941	1943	5000
Slider	mount	1357	1353	5000
SpinButton	mount	2910	2919	5000
Spinner	mount	395	398	5000
SplitButton	mount	1878	1880	5000
Stack	mount	408	424	5000
StackWithIntrinsicChildren	mount	909	873	5000
StackWithTextChildren	mount	2601	2620	5000
SwatchColorPicker	mount	6303	6289	5000
TagPicker	mount	1521	1485	5000
Text	mount	372	372	5000
TextField	mount	962	961	5000
ThemeProvider	mount	848	864	5000
ThemeProvider	virtual-rerender	589	589	5000
ThemeProvider	virtual-rerender-with-unmount	1282	1269	5000
Toggle	mount	625	609	5000
buttonNative	mount	197	200	5000

fabricteam · 2024-02-20T13:52:45Z

🕵 fluentuiv9 No visual regressions between this PR and main

…k to all v9 packages

…npm task to all v9 packages

…-types npm task to all v9 packages

…sk to depend on build in order to make it work cross framework

…dencies-types npm task to all v9 packages

… no longer issuew with lerna + comment leaking test to unblock MVP testing for type-checking

fabricteam · 2024-02-21T11:20:01Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-02-21T11:24:59Z

🕵 FluentUIV0 No visual regressions between this PR and main

…te-api task

… generate-api task

…ead path aliases

layershifter · 2024-08-13T13:56:19Z

The original issue have been closed, closing for housekeeping 🏡 Feel free to re-open

Hotell added 17 commits February 19, 2024 17:20

feat(scripts-executors): add utility to run generate-api for react-co…

62f20a2

…mponents if any v9 package is affected

perf: use type-check task to improve type-checking speeds up to 60%

10013c7

generate changefiles

647460e

feat(tools): update migrate-converged-pkg generator to set just type-…

bd2e132

…check task

ci: add generate-api task dependency to lage

2d9e57e

feat(scripts-executors): use build instead of generate-api so lage ca…

8a498f0

…n use cache and /unstable apis work

fix(react-dialog): remove circular dependency from /testing

48d805d

feat(scripts-executors): handle special cases where v9 pkg story impo…

3e3121e

…rts package that is not a dep nor v9 suite dep

feat(scripts-executors): use nx-graph to resolve packages that need t…

3581433

…o be build instead hardcoding strings

refactor(scripts-executors): polish type-check ci hack implementation

041e50a

ci: move hack to new pipeline definition after rebase

3c16c43

generate change files after rebase

a5cdb6a

chore: update types and imports after nx 17 migration within type che…

781bd76

…ck hack

feat(executors): implement per package on demand ghost dependency typ…

8a05e09

…e-generation build

feat(workspace-plugin): add generate-circular-dependencies-types task…

093cad1

… to package.json

fixup! feat(executors): implement per package on demand ghost depende…

f9bac67

…ncy type-generation build

chore: add generate-circular-dependencies-types npm task to all v9 pa…

a30d577

…ckages

github-actions bot added this to the February Project Cycle Q1 2024 milestone Feb 20, 2024

Hotell added the Status: Do Not Merge 🚫 label Feb 20, 2024

Hotell changed the title ~~Hotell/build/faster ci/type check temporary boost hack 2~~ ci: improve v9 type-checking speed by ~80% with imperative ghost dependencies type generation Feb 20, 2024

Hotell added 2 commits February 20, 2024 14:27

fixup! chore: add generate-circular-dependencies-types npm task to al…

af59d24

…l v9 packages

ci: disable running ghost deps generation hack as initial pipeline step

d27f60a

Hotell added 2 commits February 20, 2024 16:26

fixup! fixup! chore: add generate-circular-dependencies-types npm tas…

aaedd8f

…k to all v9 packages

fixup! fixup! fixup! chore: add generate-circular-dependencies-types …

532ceb7

…npm task to all v9 packages

Hotell added 7 commits February 20, 2024 16:49

Change files

c8b4c5a

fixup! fixup! fixup! fixup! chore: add generate-circular-dependencies…

9d24404

…-types npm task to all v9 packages

feat: change task dependency definition to run build and circulars ta…

6c98601

…sk to depend on build in order to make it work cross framework

fixup! fixup! fixup! fixup! fixup! chore: add generate-circular-depen…

8849bc9

…dencies-types npm task to all v9 packages

test(scripts-monorepo): change getDependendies spec to ts as there is…

6ff2398

… no longer issuew with lerna + comment leaking test to unblock MVP testing for type-checking

executors: build manually storybook addons

3f3d469

ci: scope test to only react-text

15768fe

Hotell added 4 commits February 21, 2024 12:54

fixup! executors: build manually storybook addons

ac2267e

feat(tasks): always turn off path aliases for better speed for genera…

b770130

…te-api task

fixup! feat(tasks): always turn off path aliases for better speed for…

0de3456

… generate-api task

chore: re-generate api.md after transpilation changes agains dts inst…

105f1cb

…ead path aliases

layershifter closed this Aug 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ci: improve v9 type-checking speed by ~80% with imperative ghost dependencies type generation #30577

ci: improve v9 type-checking speed by ~80% with imperative ghost dependencies type generation #30577

Hotell commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

codesandbox-ci bot commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 21, 2024 •

edited

Loading

fabricteam commented Feb 21, 2024 •

edited

Loading

layershifter commented Aug 13, 2024

ci: improve v9 type-checking speed by ~80% with imperative ghost dependencies type generation #30577

ci: improve v9 type-checking speed by ~80% with imperative ghost dependencies type generation #30577

Conversation

Hotell commented Feb 20, 2024 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Feb 20, 2024 • edited Loading

Perf Analysis (@fluentui/react-components)

codesandbox-ci bot commented Feb 20, 2024 • edited Loading

fabricteam commented Feb 20, 2024 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Feb 20, 2024 • edited Loading

📊 Bundle size report

fabricteam commented Feb 20, 2024 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Feb 20, 2024 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Feb 21, 2024 • edited Loading

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Feb 21, 2024 • edited Loading

🕵 FluentUIV0 No visual regressions between this PR and main

layershifter commented Aug 13, 2024

Hotell commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 20, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 20, 2024 •

edited

Loading

fabricteam commented Feb 21, 2024 •

edited

Loading

fabricteam commented Feb 21, 2024 •

edited

Loading