feat(workspace-plugin): split-library-in-two migration generator and other tweaks by Hotell · Pull Request #30866 · microsoft/fluentui

Hotell · 2024-03-25T10:06:27Z

Previous Behavior

New Behavior

nx generator which will split existing STABLE UI v9 package into library and stories packages under the same folder name.

|- react-components/
|- |- react-text/

↓↓↓

|- react-components/
|- |- react-text/
|- |- |- library/
|- |- |- stories/

Implements https://github.com/microsoft/fluentui/pull/30514/files#diff-fd1f65124cb8a5f905a337bf23e6dd67b607808793d84f21178c25c80b3a8028R283

Related Issue(s)

Partially implements [Feature]: improve type-checking performance #30516

NOTES (remove)

generate api:

still uses pathAliases !

remove and measure improvements

e2e issues:

Seems cypress setups are broken in some packages

this generator will parse those files and accordingly add those ghost dependencies as package devDependency in order to make type-check work/pass

DATA:

command	Before (package only/command)	After
`lage type-check --to react-drawer`	20.64s / 69.37s	8.49s + 6.02s(stories) / 76.96 (new deps added which were ghosted before)
`lage type-check --to react-menu`	20.26s / 65.24s.	7.83s + 6.52s(stories) / 62.66s (new deps added which were ghosted before)
`lage type-check --to react-table`	28.55s / 90.87s	10.22s + 6.73s(stories) / 83.57s (new deps added which were ghosted before)
Cell	Cell	Cell
Cell	Cell	Cell

tsPath alias turned off for tsc -p:

command	Before	After
`nx run-many -t build --projects='packages/react-components/*' --skip-nx-cache`	416s	347s 𝚫 16.5% faster

fabricteam · 2024-03-25T10:12:03Z

📊 Bundle size report

✅ No changes found

codesandbox-ci · 2024-03-25T10:19:41Z

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-03-25T17:05:50Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-03-25T17:15:01Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2024-04-05T18:29:23Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	35	29	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	662	626	5000
Button	mount	298	315	5000
Field	mount	1145	1156	5000
FluentProvider	mount	721	729	5000
FluentProviderWithTheme	mount	76	88	10
FluentProviderWithTheme	virtual-rerender	35	29	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	76	84	10
MakeStyles	mount	867	868	50000
Persona	mount	1800	1726	5000
SpinButton	mount	1420	1428	5000

fabricteam · 2024-04-05T18:32:31Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	93	79	1.18:1
ButtonMinimalPerf.default	93	84	1.11:1
AlertMinimalPerf.default	171	156	1.1:1
GridMinimalPerf.default	201	184	1.09:1
AttachmentMinimalPerf.default	88	82	1.07:1
TextMinimalPerf.default	200	188	1.06:1
MenuMinimalPerf.default	505	482	1.05:1
AvatarMinimalPerf.default	117	113	1.04:1
FlexMinimalPerf.default	161	155	1.04:1
SliderMinimalPerf.default	742	716	1.04:1
TreeMinimalPerf.default	482	463	1.04:1
AnimationMinimalPerf.default	305	297	1.03:1
CarouselMinimalPerf.default	271	264	1.03:1
ChatDuplicateMessagesPerf.default	150	145	1.03:1
ListMinimalPerf.default	302	293	1.03:1
RadioGroupMinimalPerf.default	264	257	1.03:1
ReactionMinimalPerf.default	216	209	1.03:1
SegmentMinimalPerf.default	197	191	1.03:1
TableMinimalPerf.default	243	235	1.03:1
CustomToolbarPrototype.default	1485	1448	1.03:1
VideoMinimalPerf.default	454	441	1.03:1
AttachmentSlotsPerf.default	646	632	1.02:1
BoxMinimalPerf.default	198	194	1.02:1
ChatMinimalPerf.default	436	429	1.02:1
DropdownManyItemsPerf.default	388	381	1.02:1
DropdownMinimalPerf.default	1437	1406	1.02:1
HeaderSlotsPerf.default	466	458	1.02:1
ItemLayoutMinimalPerf.default	700	687	1.02:1
LayoutMinimalPerf.default	195	191	1.02:1
MenuButtonMinimalPerf.default	962	942	1.02:1
ProviderMergeThemesPerf.default	661	648	1.02:1
ProviderMinimalPerf.default	204	200	1.02:1
HeaderMinimalPerf.default	204	201	1.01:1
ImageMinimalPerf.default	225	222	1.01:1
RefMinimalPerf.default	107	106	1.01:1
SkeletonMinimalPerf.default	199	198	1.01:1
AccordionMinimalPerf.default	83	83	1:1
ButtonSlotsPerf.default	299	300	1:1
CheckboxMinimalPerf.default	1143	1141	1:1
EmbedMinimalPerf.default	1902	1893	1:1
InputMinimalPerf.default	541	540	1:1
ListNestedPerf.default	317	317	1:1
SplitButtonMinimalPerf.default	2263	2266	1:1
TextAreaMinimalPerf.default	280	281	1:1
ChatWithPopoverPerf.default	189	191	0.99:1
DatepickerMinimalPerf.default	3559	3585	0.99:1
DialogMinimalPerf.default	438	444	0.99:1
DividerMinimalPerf.default	203	206	0.99:1
LoaderMinimalPerf.default	187	189	0.99:1
RosterPerf.default	1535	1558	0.99:1
PopupMinimalPerf.default	345	349	0.99:1
StatusMinimalPerf.default	398	401	0.99:1
TableManyItemsPerf.default	1082	1090	0.99:1
ToolbarMinimalPerf.default	531	539	0.99:1
TooltipMinimalPerf.default	1255	1268	0.99:1
ButtonOverridesMissPerf.default	642	658	0.98:1
PortalMinimalPerf.default	87	89	0.98:1
IconMinimalPerf.default	366	375	0.98:1
FormMinimalPerf.default	224	231	0.97:1
LabelMinimalPerf.default	216	222	0.97:1
CardMinimalPerf.default	302	313	0.96:1
ListWith60ListItems.default	356	374	0.95:1
ListCommonPerf.default	367	403	0.91:1

fabricteam · 2024-04-05T18:40:47Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	625	632	5000
Breadcrumb	mount	1679	1669	1000
Checkbox	mount	1707	1718	5000
CheckboxBase	mount	1484	1464	5000
ChoiceGroup	mount	2939	2936	5000
ComboBox	mount	660	652	1000
CommandBar	mount	6232	6205	1000
ContextualMenu	mount	12241	12421	1000
DefaultButton	mount	745	764	5000
DetailsRow	mount	2242	2267	5000
DetailsRowFast	mount	2226	2210	5000
DetailsRowNoStyles	mount	2048	2026	5000
Dialog	mount	2686	2645	1000
DocumentCardTitle	mount	231	232	1000
Dropdown	mount	1993	1999	5000
FocusTrapZone	mount	1135	1149	5000
FocusZone	mount	1102	1070	5000
GroupedList	mount	42346	42725	2
GroupedList	virtual-rerender	20426	20267	2
GroupedList	virtual-rerender-with-unmount	51310	52137	2
GroupedListV2	mount	228	226	2
GroupedListV2	virtual-rerender	221	206	2
GroupedListV2	virtual-rerender-with-unmount	234	236	2
IconButton	mount	1108	1088	5000
Label	mount	334	348	5000
Layer	mount	2718	2754	5000
Link	mount	395	397	5000
MenuButton	mount	953	946	5000
MessageBar	mount	21369	21507	5000
Nav	mount	1970	1985	1000
OverflowSet	mount	763	804	5000
Panel	mount	1811	1774	1000
Persona	mount	739	745	1000
Pivot	mount	866	875	1000
PrimaryButton	mount	842	833	5000
Rating	mount	4717	4642	5000
SearchBox	mount	910	929	5000
Shimmer	mount	1902	1897	5000
Slider	mount	1315	1338	5000
SpinButton	mount	2877	2868	5000
Spinner	mount	398	388	5000
SplitButton	mount	1886	1876	5000
Stack	mount	407	410	5000
StackWithIntrinsicChildren	mount	865	858	5000
StackWithTextChildren	mount	2622	2676	5000
SwatchColorPicker	mount	6319	6336	5000
TagPicker	mount	1480	1538	5000
Text	mount	375	378	5000
TextField	mount	957	947	5000
ThemeProvider	mount	837	834	5000
ThemeProvider	virtual-rerender	583	594	5000
ThemeProvider	virtual-rerender-with-unmount	1274	1289	5000
Toggle	mount	610	618	5000
buttonNative	mount	196	196	5000

fabricteam · 2024-04-08T13:01:20Z

🕵 FluentUIV0 No visual regressions between this PR and main

… split into /library and /stories within getPackageStoriesGlob()

…s within /stories project

…oject

…ctor if present and run yanr install after generator finished

…react-*/lib|stories

…ation and type-checking

…ake isUsingPathAliasesForDx lazy => improve d.ts generation by ~60%

…-api task

…within source code

…test files within /library package, emit error if there are circular dep present

…n library/api-extractor config

github-actions bot added this to the March Project Cycle Q1 2024 milestone Mar 25, 2024

Hotell force-pushed the type-checking-perf/migration-generator branch from 465cfd0 to 1e4e40f Compare March 25, 2024 12:23

Hotell mentioned this pull request Mar 26, 2024

[Feature]: improve type-checking performance #30516

Closed

17 tasks

Hotell changed the title ~~Type checking perf/migration generator~~ feat(workspace-plugin): implement split-in-two migration generator Mar 28, 2024

Hotell changed the title ~~feat(workspace-plugin): implement split-in-two migration generator~~ feat(workspace-plugin): implement split-library-in-two migration generator Mar 28, 2024

Hotell added NX: workspace generators Fluent UI react-components (v9) labels Mar 28, 2024

Hotell force-pushed the type-checking-perf/migration-generator branch from 49f7d2d to 50603c2 Compare April 5, 2024 09:33

github-actions bot modified the milestones: March Project Cycle Q1 2024, April Project Cycle Q1 2024 Apr 5, 2024

Hotell force-pushed the type-checking-perf/migration-generator branch from bad4cf2 to 8e5d96c Compare April 8, 2024 12:42

Hotell force-pushed the type-checking-perf/migration-generator branch from 309ac1a to 9d5e504 Compare April 8, 2024 13:09

This was referenced Apr 8, 2024

chore: update project tags to proper platform type #30986

Merged

perf: exclude cypress test files from tsc Program for .d.ts generation and type-checking #30989

Merged

Hotell force-pushed the type-checking-perf/migration-generator branch from 9c4aeb6 to 2222dce Compare April 8, 2024 16:00

Hotell mentioned this pull request Apr 9, 2024

fix(react-drawer): remove circular dependency from cypress test files #31005

Merged

Hotell added 6 commits April 11, 2024 11:30

feat(workspace-library): initial split-library-in-two implementation

f848fd9

feat(scrtips-storybook): resolve stories properly if project has been…

816dd49

… split into /library and /stories within getPackageStoriesGlob()

feat(workspace-plugin): add --all flag support to split-library-in-two

50eede5

feat(workspace-plugin): setup correctly eslint extraneous dependencie…

51cd1e1

…s within /stories project

feat(workspace-plugin): dont add test-ssr target to /stories project

6234a80

fix(workspace-plugin): exit flow when assetProject catches invalid pr…

604f15e

…oject

Hotell added 9 commits April 11, 2024 11:30

fix(workspace-plugin): update test-ssr target only if present

8bf9be5

feat(workspace-plugin): update paths in tsconfigLib,babelrc,api-extra…

e7fb451

…ctor if present and run yanr install after generator finished

chore: add new workspace path resolution for nested react-components/…

2fd08ce

…react-*/lib|stories

perf: speed up tsc by not running on cypress files during .d.ts gener…

61389c8

…ation and type-checking

perf(scripts-task): turn off path aliases within generate-api task, m…

2450216

…ake isUsingPathAliasesForDx lazy => improve d.ts generation by ~60%

chore: re-genearate api.md as result of perf improvements to generate…

bd3a93c

…-api task

feat(eslint-plugin): add triple-slash-reference rule to ban TS '///' …

22e1a7f

…within source code

feat(workspace-plugin): build proper dep graph from jest and cypress …

dd88b3e

…test files within /library package, emit error if there are circular dep present

fix(react-drawer): remove circular dependency from cypress test files

115c688

Hotell force-pushed the type-checking-perf/migration-generator branch from 19279ca to 115c688 Compare April 11, 2024 09:31

Hotell added 2 commits April 11, 2024 13:40

style(react-tag-picker-preview): fix lint violations

e77a5b3

fix(workspace-plugin): properly set mainEntryPointFilePath path withi…

f39270e

…n library/api-extractor config

Hotell changed the title ~~feat(workspace-plugin): implement split-library-in-two migration generator~~ feat(workspace-plugin): split-library-in-two migration generator and other tweaks Apr 17, 2024

Hotell closed this May 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(workspace-plugin): split-library-in-two migration generator and other tweaks#30866

feat(workspace-plugin): split-library-in-two migration generator and other tweaks#30866
Hotell wants to merge 17 commits intomicrosoft:masterfrom
Hotell:type-checking-perf/migration-generator

Hotell commented Mar 25, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 25, 2024 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Mar 25, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 25, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 25, 2024 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2024 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2024 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2024 •

edited

Loading

Uh oh!

fabricteam commented Apr 8, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Hotell commented Mar 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

NOTES (remove)

Uh oh!

fabricteam commented Mar 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Mar 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Mar 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Mar 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Apr 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Apr 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Apr 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Apr 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Hotell commented Mar 25, 2024 •

edited

Loading

fabricteam commented Mar 25, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 25, 2024 •

edited

Loading

fabricteam commented Mar 25, 2024 •

edited

Loading

fabricteam commented Mar 25, 2024 •

edited

Loading

fabricteam commented Apr 5, 2024 •

edited

Loading

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

fabricteam commented Apr 5, 2024 •

edited

Loading

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

fabricteam commented Apr 5, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Apr 8, 2024 •

edited

Loading