feat(workspace-plugin): implement split-library-in-two migration generator #31086

Hotell · 2024-04-17T13:13:04Z

Previous Behavior

New Behavior

Based on RFC https://github.com/microsoft/fluentui/pull/30514/files#diff-fd1f65124cb8a5f905a337bf23e6dd67b607808793d84f21178c25c80b3a8028R283

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

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

↓↓↓

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

generator also parses source AST and adds ghost dependencies as devDependencies to library project for cypress/jest test files in order to create proper dependency graph ( without this type-check would fail )
CLI options:
- project (runs on specified project)
- all (runs on all applicable projects)

Related Issue(s)

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

…s within /stories project

…oject

…ctor if present and run yanr install after generator finished

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

…n library/api-extractor config

…h.relative when constructing new file path during moves

…split-in-two --all flag

fabricteam · 2024-04-17T13:22:24Z

📊 Bundle size report

✅ No changes found

fabricteam · 2024-04-17T13:25:12Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	645	641	5000
Button	mount	322	291	5000
Field	mount	1147	1110	5000
FluentProvider	mount	715	709	5000
FluentProviderWithTheme	mount	86	86	10
FluentProviderWithTheme	virtual-rerender	34	35	10
FluentProviderWithTheme	virtual-rerender-with-unmount	76	72	10
MakeStyles	mount	860	855	50000
Persona	mount	1733	1690	5000
SpinButton	mount	1384	1395	5000
SwatchPicker	mount	1554	1560	5000

fabricteam · 2024-04-17T13:30:55Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	121	103	1.17:1
AvatarMinimalPerf.default	120	106	1.13:1
ButtonMinimalPerf.default	94	86	1.09:1
DropdownManyItemsPerf.default	404	371	1.09:1
PortalMinimalPerf.default	92	85	1.08:1
IconMinimalPerf.default	400	379	1.06:1
LayoutMinimalPerf.default	203	194	1.05:1
MenuMinimalPerf.default	525	498	1.05:1
PopupMinimalPerf.default	357	341	1.05:1
ReactionMinimalPerf.default	218	207	1.05:1
SegmentMinimalPerf.default	205	195	1.05:1
AnimationMinimalPerf.default	302	289	1.04:1
ChatDuplicateMessagesPerf.default	156	152	1.03:1
DialogMinimalPerf.default	434	421	1.03:1
GridMinimalPerf.default	188	183	1.03:1
SplitButtonMinimalPerf.default	2322	2245	1.03:1
CustomToolbarPrototype.default	1484	1440	1.03:1
AlertMinimalPerf.default	162	159	1.02:1
ButtonOverridesMissPerf.default	654	642	1.02:1
CardMinimalPerf.default	310	303	1.02:1
ListMinimalPerf.default	305	298	1.02:1
ListNestedPerf.default	327	322	1.02:1
MenuButtonMinimalPerf.default	951	934	1.02:1
RadioGroupMinimalPerf.default	263	258	1.02:1
SkeletonMinimalPerf.default	206	201	1.02:1
TableManyItemsPerf.default	1119	1093	1.02:1
ToolbarMinimalPerf.default	557	547	1.02:1
CarouselMinimalPerf.default	267	265	1.01:1
ChatMinimalPerf.default	437	432	1.01:1
ImageMinimalPerf.default	232	230	1.01:1
ItemLayoutMinimalPerf.default	704	696	1.01:1
LoaderMinimalPerf.default	191	189	1.01:1
RosterPerf.default	1583	1564	1.01:1
ProviderMinimalPerf.default	203	201	1.01:1
SliderMinimalPerf.default	747	741	1.01:1
StatusMinimalPerf.default	397	392	1.01:1
AttachmentSlotsPerf.default	626	629	1:1
BoxMinimalPerf.default	191	191	1:1
ButtonSlotsPerf.default	315	314	1:1
ChatWithPopoverPerf.default	196	196	1:1
FormMinimalPerf.default	219	218	1:1
InputMinimalPerf.default	542	543	1:1
ListWith60ListItems.default	365	365	1:1
TooltipMinimalPerf.default	1312	1307	1:1
TreeMinimalPerf.default	489	490	1:1
VideoMinimalPerf.default	435	434	1:1
CheckboxMinimalPerf.default	1121	1131	0.99:1
DatepickerMinimalPerf.default	3485	3527	0.99:1
DividerMinimalPerf.default	199	202	0.99:1
DropdownMinimalPerf.default	1417	1431	0.99:1
EmbedMinimalPerf.default	1854	1865	0.99:1
HeaderMinimalPerf.default	203	205	0.99:1
ListCommonPerf.default	383	386	0.99:1
ProviderMergeThemesPerf.default	652	658	0.99:1
TableMinimalPerf.default	234	237	0.99:1
HeaderSlotsPerf.default	466	477	0.98:1
FlexMinimalPerf.default	147	151	0.97:1
AttachmentMinimalPerf.default	77	80	0.96:1
TextAreaMinimalPerf.default	289	300	0.96:1
LabelMinimalPerf.default	209	219	0.95:1
TreeWith60ListItems.default	83	88	0.94:1
TextMinimalPerf.default	190	204	0.93:1
AccordionMinimalPerf.default	69	77	0.9:1

codesandbox-ci · 2024-04-17T13:33:27Z

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-04-17T13:40:56Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	626	619	5000
Breadcrumb	mount	1692	1698	1000
Checkbox	mount	1699	1681	5000
CheckboxBase	mount	1489	1487	5000
ChoiceGroup	mount	2915	2975	5000
ComboBox	mount	653	668	1000
CommandBar	mount	6175	6183	1000
ContextualMenu	mount	12632	12658	1000
DefaultButton	mount	750	748	5000
DetailsRow	mount	2199	2202	5000
DetailsRowFast	mount	2244	2231	5000
DetailsRowNoStyles	mount	2072	2041	5000
Dialog	mount	2701	2659	1000
DocumentCardTitle	mount	230	223	1000
Dropdown	mount	1970	2022	5000
FocusTrapZone	mount	1173	1159	5000
FocusZone	mount	1067	1072	5000
GroupedList	mount	41938	42135	2
GroupedList	virtual-rerender	20196	20187	2
GroupedList	virtual-rerender-with-unmount	50833	51179	2
GroupedListV2	mount	222	223	2
GroupedListV2	virtual-rerender	214	210	2
GroupedListV2	virtual-rerender-with-unmount	223	220	2
IconButton	mount	1090	1067	5000
Label	mount	326	325	5000
Layer	mount	2762	2763	5000
Link	mount	389	393	5000
MenuButton	mount	961	944	5000
MessageBar	mount	21217	21306	5000
Nav	mount	1952	1962	1000
OverflowSet	mount	800	781	5000
Panel	mount	2092	1757	1000
Persona	mount	735	744	1000
Pivot	mount	848	880	1000
PrimaryButton	mount	858	842	5000
Rating	mount	4562	4615	5000
SearchBox	mount	906	932	5000
Shimmer	mount	1902	1887	5000
Slider	mount	1343	1268	5000
SpinButton	mount	2863	2904	5000
Spinner	mount	386	383	5000
SplitButton	mount	1798	1833	5000
Stack	mount	414	404	5000
StackWithIntrinsicChildren	mount	864	851	5000
StackWithTextChildren	mount	2605	2603	5000
SwatchColorPicker	mount	6083	6191	5000
TagPicker	mount	1474	1452	5000
Text	mount	375	376	5000
TextField	mount	914	928	5000
ThemeProvider	mount	827	824	5000
ThemeProvider	virtual-rerender	597	580	5000
ThemeProvider	virtual-rerender-with-unmount	1281	1281	5000
Toggle	mount	602	607	5000
buttonNative	mount	188	193	5000

tools/workspace-plugin/src/generators/split-library-in-two/generator.ts

* master: (416 commits) fix: remove relative imports within stories which are invalid for creating 'show docs' and circular dep imports from cypress files (microsoft#31087) Fix overlapping bars on continuous axes (microsoft#31035) feat(scripts-tasks): implement ~36% faster type-check task (microsoft#31116) feat(workspace-plugin): implement split-library-in-two migration generator (microsoft#31086) applying package updates Sankey diagram: Support number formatting (microsoft#31113) Fix wrong position of hover callout in case of single data AreaChart (microsoft#30256) Combobox filtering bug fix (microsoft#31141) chore(react-tag-picker): adds text elliptical clipping example (microsoft#31114) docs: command cheat sheet (microsoft#30685) chore: refactor tests for createPresenceComponent() (microsoft#31137) Stable Release: TeachingPopover (microsoft#31112) applying package updates fix: SpinButton buttons now show correct visuals at bounds (microsoft#31126) feat: add accessibility docs to Link about color/underlines (microsoft#31121) fix: Table and DataGrid should not remove cells from the accessibility tree (microsoft#31068) Add shadow DOM support to `@fluentui/react` (Fluent v8) (microsoft#30689) fix(react-swatch-picker): fixes after bug bash (microsoft#31097) feat: unify v9 babel preset in all packages (microsoft#31088) applying package updates ...

…rator (microsoft#31086)

github-actions bot added this to the April Project Cycle Q1 2024 milestone Apr 17, 2024

Hotell added 7 commits April 17, 2024 15:13

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

8cd97c0

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

6de8694

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

b42df3f

…s within /stories project

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

4ce12f0

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

1687445

…oject

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

6ad2e21

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

d095a39

…ctor if present and run yanr install after generator finished

Hotell force-pushed the type-checking-perf/migration-generator-impl branch from 262897a to ef169d5 Compare April 17, 2024 13:14

Hotell added 2 commits April 17, 2024 15:15

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

10de41d

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

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

234e281

…n library/api-extractor config

Hotell force-pushed the type-checking-perf/migration-generator-impl branch from ef169d5 to 301813e Compare April 17, 2024 13:16

Hotell added 2 commits April 17, 2024 15:20

fix(workspace-plugin): avoid using live string references and use pat…

f39158d

…h.relative when constructing new file path during moves

feat(workspace-plugin): improve performance and terminal outputs for …

5a6689b

…split-in-two --all flag

Hotell force-pushed the type-checking-perf/migration-generator-impl branch from 301813e to 5a6689b Compare April 17, 2024 13:21

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

Hotell marked this pull request as ready for review April 17, 2024 14:08

Hotell requested a review from a team as a code owner April 17, 2024 14:08

This was referenced Apr 17, 2024

fix: remove relative imports within stories which are invalid for creating 'show docs' and circular dep imports from cypress files #31087

Merged

[Feature]: improve type-checking performance #30516

Closed

ling1726 reviewed Apr 22, 2024

View reviewed changes

tools/workspace-plugin/src/generators/split-library-in-two/generator.ts Show resolved Hide resolved

ling1726 approved these changes Apr 22, 2024

View reviewed changes

docs: add generator readme

187bb82

Hotell enabled auto-merge (squash) April 23, 2024 09:26

Hotell merged commit 4a551ed into microsoft:master Apr 23, 2024
17 of 18 checks passed

Hotell deleted the type-checking-perf/migration-generator-impl branch April 23, 2024 09:39

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024

feat(workspace-plugin): implement split-library-in-two migration gene…

55f4605

…rator (microsoft#31086)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(workspace-plugin): implement split-library-in-two migration generator #31086

feat(workspace-plugin): implement split-library-in-two migration generator #31086

Hotell commented Apr 17, 2024 •

edited

Loading

fabricteam commented Apr 17, 2024 •

edited

Loading

fabricteam commented Apr 17, 2024

fabricteam commented Apr 17, 2024

codesandbox-ci bot commented Apr 17, 2024 •

edited

Loading

fabricteam commented Apr 17, 2024

feat(workspace-plugin): implement split-library-in-two migration generator #31086

feat(workspace-plugin): implement split-library-in-two migration generator #31086

Conversation

Hotell commented Apr 17, 2024 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Apr 17, 2024 • edited Loading

📊 Bundle size report

fabricteam commented Apr 17, 2024

Perf Analysis (@fluentui/react-components)

fabricteam commented Apr 17, 2024

Perf Analysis (@fluentui/react-northstar)

codesandbox-ci bot commented Apr 17, 2024 • edited Loading

fabricteam commented Apr 17, 2024

Perf Analysis (@fluentui/react)

Hotell commented Apr 17, 2024 •

edited

Loading

fabricteam commented Apr 17, 2024 •

edited

Loading

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

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

codesandbox-ci bot commented Apr 17, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)