chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks #24458

TristanWatanabe · 2022-08-22T21:39:34Z

Implements generator changes needed to execute v9 package restructure outlined by this RFC

Changes

removes old moveStories function which was used to move stories from src/stories to src/stories/{ComponentName} since that entire migration is now complete.
Adds moveStoriesToPackageRoot function which will move existing stories from src/stories to /stories. Any new components created with the create-component script will now have their story templates populated in the /stories/{ComponentName} directory.
Adds moveDocsToSubfolder which moves existing MIGRATION.md and SPEC.md files to the /docs folder.
Adds migrateE2ESetupToCypress function which moves files within the e2e/ folder to appropriate location
- moves tsconfig.json to root of package renamed as tsconfig.cy.json. This is then added to base tsconfig.json's path references.
- moves any file with .e2e. suffix to src/components/{ComponentName} with filename updated to use .cy. suffix.
- moves any selector.ts helper files to src/testing and updates any import paths of files that require it.
Adds migrateCommonFolderToTesting function which moves any file present in the src/common folder to src/testing and updates the import paths of files that require moved files.
Updates npm.ignore file to ignore /docs and /stories subfolders and any files with .cy. in its path.
Renames instances where function names are referred to as e2e in favor of cypress

Example Usage:

Draft PR which uses generator: #25015

Related Issues:

Part of #24129

…o-root

fabricteam · 2022-08-22T21:46:26Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`79.037 kB` `24.059 kB`
`react-alert` Alert	`84.117 kB` `21.07 kB`
`react-avatar` Avatar	`48.828 kB` `13.842 kB`
`react-avatar` AvatarGroup	`14.95 kB` `5.989 kB`
`react-avatar` AvatarGroupItem	`68.796 kB` `19.182 kB`
`react-badge` Badge	`22.6 kB` `7.205 kB`
`react-badge` CounterBadge	`23.49 kB` `7.489 kB`
`react-badge` PresenceBadge	`24.05 kB` `7.067 kB`
`react-button` Button	`36.278 kB` `9.636 kB`
`react-button` CompoundButton	`43.303 kB` `10.852 kB`
`react-button` MenuButton	`38.972 kB` `10.536 kB`
`react-button` SplitButton	`46.418 kB` `11.916 kB`
`react-button` ToggleButton	`52.145 kB` `11.108 kB`
`react-card` Card - All	`67.17 kB` `19.281 kB`
`react-card` Card	`62.852 kB` `18.198 kB`
`react-card` CardFooter	`8.561 kB` `3.601 kB`
`react-card` CardHeader	`9.604 kB` `3.94 kB`
`react-card` CardPreview	`8.662 kB` `3.656 kB`
`react-combobox` Combobox (including child components)	`74.642 kB` `24.19 kB`
`react-combobox` Dropdown (including child components)	`74.242 kB` `24.089 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.815 kB` `52.287 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.4 kB` `11.008 kB`
`react-dialog` Dialog (including children components)	`82.465 kB` `24.447 kB`
`react-divider` Divider	`16.459 kB` `5.902 kB`
`react-image` Image	`10.78 kB` `4.264 kB`
`react-input` Input	`23.762 kB` `7.706 kB`
`react-label` Label	`9.338 kB` `3.86 kB`
`react-link` Link	`11.806 kB` `4.868 kB`
`react-menu` Menu (including children components)	`116.558 kB` `35.725 kB`
`react-menu` Menu (including selectable components)	`119.627 kB` `36.246 kB`
`react-overflow` hooks only	`10.685 kB` `4.104 kB`
`react-persona` Persona	`53.946 kB` `15.225 kB`
`react-popover` Popover	`102.756 kB` `31.5 kB`
`react-portal` Portal	`10.582 kB` `3.875 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-progress` Progress	`13.44 kB` `5.247 kB`
`react-provider` FluentProvider	`15.761 kB` `5.885 kB`
`react-radio` Radio	`36.39 kB` `12.103 kB`
`react-radio` RadioGroup	`14.248 kB` `5.7 kB`
`react-select` Select	`20.846 kB` `7.346 kB`
`react-slider` Slider	`31.759 kB` `10.064 kB`
`react-spinbutton` SpinButton	`44.102 kB` `12.425 kB`
`react-spinner` Spinner	`19.977 kB` `6.438 kB`
`react-switch` Switch	`33.342 kB` `10.557 kB`
`react-text` Text - Default	`11.782 kB` `4.605 kB`
`react-text` Text - Wrappers	`15.092 kB` `5.044 kB`
`react-textarea` Textarea	`25.018 kB` `8.133 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.65 kB` `6.444 kB`
`react-theme` Teams: Light theme	`17.486 kB` `5.057 kB`
`react-tooltip` Tooltip	`41.566 kB` `14.644 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 93f154ac2821be1fd408fa98943a641f9d3dc464}

codesandbox-ci · 2022-08-22T21:55:49Z

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 5d001f0:

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

size-auditor · 2022-08-22T21:57:43Z

Asset size changes

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

Baseline commit: 93f154ac2821be1fd408fa98943a641f9d3dc464 (build)

tools/generators/migrate-converged-pkg/index.ts

fabricteam · 2022-08-26T17:21:54Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1683	1633	5000
Button	mount	1113	1164	5000
FluentProvider	mount	1958	1926	5000
FluentProviderWithTheme	mount	700	723	10
FluentProviderWithTheme	virtual-rerender	652	671	10
FluentProviderWithTheme	virtual-rerender-with-unmount	712	714	10
MakeStyles	mount	2269	2255	50000
SpinButton	mount	3240	3247	5000

fabricteam · 2022-08-26T17:25:03Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	196	176	1.11:1
CardMinimalPerf.default	611	555	1.1:1
FlexMinimalPerf.default	315	287	1.1:1
AttachmentMinimalPerf.default	180	170	1.06:1
ButtonSlotsPerf.default	615	579	1.06:1
GridMinimalPerf.default	373	352	1.06:1
ItemLayoutMinimalPerf.default	1323	1246	1.06:1
RefMinimalPerf.default	230	218	1.06:1
FormMinimalPerf.default	430	409	1.05:1
RadioGroupMinimalPerf.default	509	487	1.05:1
TreeWith60ListItems.default	179	170	1.05:1
ChatMinimalPerf.default	802	771	1.04:1
EmbedMinimalPerf.default	4062	3916	1.04:1
ImageMinimalPerf.default	435	420	1.04:1
SliderMinimalPerf.default	1847	1773	1.04:1
AnimationMinimalPerf.default	577	561	1.03:1
ButtonMinimalPerf.default	179	174	1.03:1
HeaderMinimalPerf.default	391	378	1.03:1
ListMinimalPerf.default	559	545	1.03:1
MenuButtonMinimalPerf.default	1867	1817	1.03:1
TableMinimalPerf.default	449	434	1.03:1
BoxMinimalPerf.default	364	357	1.02:1
DialogMinimalPerf.default	826	808	1.02:1
DropdownMinimalPerf.default	2904	2837	1.02:1
ListNestedPerf.default	626	615	1.02:1
SegmentMinimalPerf.default	379	370	1.02:1
CheckboxMinimalPerf.default	2268	2253	1.01:1
DatepickerMinimalPerf.default	6260	6195	1.01:1
ListWith60ListItems.default	671	665	1.01:1
MenuMinimalPerf.default	901	889	1.01:1
ProviderMinimalPerf.default	412	409	1.01:1
ReactionMinimalPerf.default	404	400	1.01:1
SkeletonMinimalPerf.default	372	367	1.01:1
SplitButtonMinimalPerf.default	4827	4772	1.01:1
TextMinimalPerf.default	379	377	1.01:1
TextAreaMinimalPerf.default	546	538	1.01:1
ToolbarMinimalPerf.default	1020	1008	1.01:1
TooltipMinimalPerf.default	2550	2526	1.01:1
AvatarMinimalPerf.default	196	196	1:1
CarouselMinimalPerf.default	519	518	1:1
ChatWithPopoverPerf.default	429	430	1:1
HeaderSlotsPerf.default	846	850	1:1
TreeMinimalPerf.default	874	874	1:1
AttachmentSlotsPerf.default	1199	1210	0.99:1
ChatDuplicateMessagesPerf.default	310	314	0.99:1
DividerMinimalPerf.default	380	382	0.99:1
InputMinimalPerf.default	1197	1215	0.99:1
LoaderMinimalPerf.default	701	705	0.99:1
PopupMinimalPerf.default	664	674	0.99:1
ProviderMergeThemesPerf.default	1262	1280	0.99:1
CustomToolbarPrototype.default	2744	2771	0.99:1
DropdownManyItemsPerf.default	739	751	0.98:1
StatusMinimalPerf.default	714	731	0.98:1
TableManyItemsPerf.default	2091	2142	0.98:1
LayoutMinimalPerf.default	373	383	0.97:1
ListCommonPerf.default	695	717	0.97:1
RosterPerf.default	2337	2404	0.97:1
IconMinimalPerf.default	693	714	0.97:1
VideoMinimalPerf.default	798	825	0.97:1
AlertMinimalPerf.default	285	298	0.96:1
LabelMinimalPerf.default	403	421	0.96:1
ButtonOverridesMissPerf.default	1423	1491	0.95:1
AccordionMinimalPerf.default	162	175	0.93:1

fabricteam · 2022-08-26T17:39:22Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1559	1567	5000
Breadcrumb	mount	3600	3628	1000
Checkbox	mount	3391	3380	5000
CheckboxBase	mount	3033	3035	5000
ChoiceGroup	mount	5785	5847	5000
ComboBox	mount	1556	1604	1000
CommandBar	mount	11771	11768	1000
ContextualMenu	mount	13299	13236	1000
DefaultButton	mount	1804	1804	5000
DetailsRow	mount	4662	4697	5000
DetailsRowFast	mount	4667	4635	5000
DetailsRowNoStyles	mount	4440	4493	5000
Dialog	mount	3840	3874	1000
DocumentCardTitle	mount	735	732	1000
Dropdown	mount	4210	4206	5000
FocusTrapZone	mount	2478	2524	5000
FocusZone	mount	2447	2445	5000
GroupedList	mount	68846	80166	2
GroupedList	virtual-rerender	32956	32776	2
GroupedList	virtual-rerender-with-unmount	110051	111476	2
GroupedListV2	mount	708	692	2
GroupedListV2	virtual-rerender	654	648	2
GroupedListV2	virtual-rerender-with-unmount	686	688	2
IconButton	mount	2462	2521	5000
Label	mount	874	876	5000
Layer	mount	5348	5357	5000
Link	mount	1037	1074	5000
MenuButton	mount	2194	2197	5000
MessageBar	mount	2858	2838	5000
Nav	mount	4188	4266	1000
OverflowSet	mount	1684	1720	5000
Panel	mount	3103	3123	1000
Persona	mount	1643	1629	1000
Pivot	mount	2054	2100	1000
PrimaryButton	mount	1932	1937	5000
Rating	mount	9340	9379	5000
SearchBox	mount	1972	1971	5000
Shimmer	mount	3605	3730	5000
Slider	mount	2663	2614	5000
SpinButton	mount	5987	6062	5000
Spinner	mount	975	1013	5000
SplitButton	mount	3977	3929	5000
Stack	mount	1101	1092	5000
StackWithIntrinsicChildren	mount	3235	3330	5000
StackWithTextChildren	mount	6611	6534	5000
SwatchColorPicker	mount	13379	13516	5000
TagPicker	mount	3374	3386	5000
TeachingBubble	mount	105350	104755	5000
Text	mount	1020	1018	5000
TextField	mount	2064	2051	5000
ThemeProvider	mount	1905	1934	5000
ThemeProvider	virtual-rerender	1325	1362	5000
ThemeProvider	virtual-rerender-with-unmount	2699	2703	5000
Toggle	mount	1409	1395	5000
buttonNative	mount	681	678	5000

scripts/tasks/eslint.ts

…o-root

…ctions to cypress, updates tests

…kage file restructuring tasks (microsoft#24458)

TristanWatanabe added 7 commits August 10, 2022 13:04

migrate-converged: move stories to root

34fa55d

migrate-converged: update tests

d861740

migrate-converged:npmignore docs & stories folders

c0c0ca0

migrate-converged: move docs to docs subfolder

e812659

Merge branch 'master' into update-migrate-converged-to-move-stories-t…

fb00d26

…o-root

fix missing import

b80675f

fix: ensure doc file is .md

503956f

TristanWatanabe added the Area: Build System label Aug 22, 2022

TristanWatanabe self-assigned this Aug 22, 2022

github-actions bot added this to the July Project Cycle Q3 2022 milestone Aug 22, 2022

TristanWatanabe mentioned this pull request Aug 22, 2022

Defined standard for v9 package file organization #24129

Closed

59 tasks

Remove unintentional format change

3c50e6f

TristanWatanabe marked this pull request as ready for review August 22, 2022 21:57

TristanWatanabe requested a review from a team as a code owner August 22, 2022 21:57

tudorpopams requested a review from Hotell August 23, 2022 12:16

Hotell reviewed Aug 23, 2022

View reviewed changes

tools/generators/migrate-converged-pkg/index.ts Outdated Show resolved Hide resolved

tools/generators/migrate-converged-pkg/index.ts Outdated Show resolved Hide resolved

TristanWatanabe added 3 commits August 23, 2022 08:15

fix: update sb TS config to point to new stories folder for compilation

240795d

update test

2611f71

fix: linting now re-enabled for stories that live in new stories/ folder

d31acbb

feedback: add stories to paths and utilize it

4df11ac

ling1726 reviewed Sep 13, 2022

View reviewed changes

scripts/tasks/eslint.ts Show resolved Hide resolved

TristanWatanabe added the Status: Blocked Resolution blocked by another issue label Sep 16, 2022

TristanWatanabe added 2 commits September 28, 2022 08:52

Merge branch 'master' into update-migrate-converged-to-move-stories-t…

d24f98b

…o-root

migrateE2eSetupToCypress function added, renames instances of e2e fun…

41a5a60

…ctions to cypress, updates tests

NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022

chore(migrate-converged): add functionality to execute various v9 pac…

de20ad6

…kage file restructuring tasks (microsoft#24458)

TristanWatanabe mentioned this pull request Dec 7, 2022

chore(react-toolbar): migrate to new package structure #25920

Merged

This was referenced Dec 19, 2022

chore(react-combobox): migrate to new package structure #26037

Merged

chore(react-components): migrate to new package structure #26051

Merged

TristanWatanabe mentioned this pull request Dec 27, 2022

chore(react-infobutton): migrate to new package structure #26111

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks #24458

chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks #24458

TristanWatanabe commented Aug 22, 2022 •

edited

Loading

fabricteam commented Aug 22, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 22, 2022 •

edited

Loading

size-auditor bot commented Aug 22, 2022 •

edited

Loading

fabricteam commented Aug 26, 2022 •

edited

Loading

fabricteam commented Aug 26, 2022 •

edited

Loading

fabricteam commented Aug 26, 2022 •

edited

Loading

chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks #24458

chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks #24458

Conversation

TristanWatanabe commented Aug 22, 2022 • edited Loading

Changes

Example Usage:

Related Issues:

fabricteam commented Aug 22, 2022 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Aug 22, 2022 • edited Loading

size-auditor bot commented Aug 22, 2022 • edited Loading

Asset size changes

fabricteam commented Aug 26, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Aug 26, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Aug 26, 2022 • edited Loading

Perf Analysis (@fluentui/react)

TristanWatanabe commented Aug 22, 2022 •

edited

Loading

fabricteam commented Aug 22, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 22, 2022 •

edited

Loading

size-auditor bot commented Aug 22, 2022 •

edited

Loading

fabricteam commented Aug 26, 2022 •

edited

Loading

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

fabricteam commented Aug 26, 2022 •

edited

Loading

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

fabricteam commented Aug 26, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)