feat(tools): implement ts solution file config in migration generator #20478

Hotell · 2021-11-03T15:12:25Z

Pull request checklist

Addresses an existing issue: implements partially Implement solution-style tsconfigs #19866
~~[ ] Include a change request file using $ yarn change~~

Description of changes

implements solution style configs migrations within migrate-converged-pkg generator
implements context aware addition of @testing-library/jest-dom
adds context aware setup if conformance setup is being used
adds js support to package scaffolding
adds e2e setup support
adds type-check npm script that uses TS build mode
- requirement for solution style config implementation
- properly runs tsc per environment setup without leaking globals
- type checks all code in one run

Demos

Exec migration:

yarn nx workspace-generator migrate-converged-pkg --name @fluentui/react-menu

running-migration.mov

No leaking globals/proper isolated environment type checking:

proper-env-type-checking.mov

new transpilation emit:

Focus areas to test

(optional)

size-auditor · 2021-11-03T15:28:02Z

Asset size changes

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

Baseline commit: b4955b47d766ad8085f86d86ffe7b5add590888b (build)

codesandbox-ci · 2021-11-03T15:30:18Z

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 5887ab5:

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

Hotell · 2021-11-03T15:31:55Z

blocked by #20479

fabricteam · 2021-11-03T15:35:37Z

📊 Bundle size report

_{🤖 This report was generated against b4955b47d766ad8085f86d86ffe7b5add590888b}

fabricteam · 2021-11-03T15:49:42Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	973	971	5000
BaseButton	mount	997	967	5000
Breadcrumb	mount	2566	2599	1000
ButtonNext	mount	538	536	5000
Checkbox	mount	1618	1593	5000
CheckboxBase	mount	1361	1439	5000
ChoiceGroup	mount	4980	4863	5000
ComboBox	mount	981	1039	1000
CommandBar	mount	10095	10197	1000
ContextualMenu	mount	8324	8558	1000
DefaultButton	mount	1183	1179	5000
DetailsRow	mount	3946	3961	5000
DetailsRowFast	mount	4045	4021	5000
DetailsRowNoStyles	mount	3856	3816	5000
Dialog	mount	2725	2727	1000
DocumentCardTitle	mount	179	165	1000
Dropdown	mount	3451	3503	5000
FluentProviderNext	mount	3654	3716	5000
FluentProviderWithTheme	mount	216	223	10
FluentProviderWithTheme	virtual-rerender	94	95	10
FluentProviderWithTheme	virtual-rerender-with-unmount	245	241	10
FocusTrapZone	mount	1852	1839	5000
FocusZone	mount	1823	1866	5000
IconButton	mount	1899	1873	5000
Label	mount	365	353	5000
Layer	mount	3184	3049	5000
Link	mount	517	497	5000
MakeStyles	mount	1761	1814	50000
MenuButton	mount	1596	1603	5000
MessageBar	mount	2059	2187	5000
Nav	mount	3562	3462	1000
OverflowSet	mount	1135	1178	5000
Panel	mount	2497	2600	1000
Persona	mount	921	894	1000
Pivot	mount	1520	1543	1000
PrimaryButton	mount	1365	1456	5000
Rating	mount	8363	8518	5000
SearchBox	mount	1417	1436	5000
Shimmer	mount	2671	2738	5000
Slider	mount	2055	2033	5000
SpinButton	mount	5130	5191	5000
Spinner	mount	436	432	5000
SplitButton	mount	3303	3284	5000
Stack	mount	562	546	5000
StackWithIntrinsicChildren	mount	1883	1827	5000
StackWithTextChildren	mount	5041	5091	5000
SwatchColorPicker	mount	10900	11023	5000
TagPicker	mount	2726	2788	5000
TeachingBubble	mount	13067	13328	5000
Text	mount	463	458	5000
TextField	mount	1508	1441	5000
ThemeProvider	mount	1200	1231	5000
ThemeProvider	virtual-rerender	600	611	5000
ThemeProvider	virtual-rerender-with-unmount	2053	1978	5000
Toggle	mount	869	863	5000
buttonNative	mount	143	143	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	181	159	1.14:1
AttachmentMinimalPerf.default	182	164	1.11:1
PortalMinimalPerf.default	189	171	1.11:1
FlexMinimalPerf.default	313	286	1.09:1
TextMinimalPerf.default	386	354	1.09:1
AvatarMinimalPerf.default	221	205	1.08:1
IconMinimalPerf.default	669	625	1.07:1
AnimationMinimalPerf.default	439	414	1.06:1
CardMinimalPerf.default	615	581	1.06:1
ChatWithPopoverPerf.default	435	411	1.06:1
FormMinimalPerf.default	464	438	1.06:1
HeaderMinimalPerf.default	402	379	1.06:1
HeaderSlotsPerf.default	839	790	1.06:1
TableMinimalPerf.default	453	429	1.06:1
ListMinimalPerf.default	561	533	1.05:1
RefMinimalPerf.default	238	227	1.05:1
ChatMinimalPerf.default	701	672	1.04:1
SkeletonMinimalPerf.default	392	376	1.04:1
TooltipMinimalPerf.default	1094	1057	1.04:1
TreeWith60ListItems.default	199	192	1.04:1
LayoutMinimalPerf.default	395	382	1.03:1
ListNestedPerf.default	600	581	1.03:1
PopupMinimalPerf.default	616	599	1.03:1
ButtonOverridesMissPerf.default	1860	1829	1.02:1
CheckboxMinimalPerf.default	2850	2807	1.02:1
DialogMinimalPerf.default	817	800	1.02:1
InputMinimalPerf.default	1346	1322	1.02:1
MenuMinimalPerf.default	889	869	1.02:1
SplitButtonMinimalPerf.default	4501	4433	1.02:1
ToolbarMinimalPerf.default	1004	982	1.02:1
TreeMinimalPerf.default	845	826	1.02:1
VideoMinimalPerf.default	674	658	1.02:1
AttachmentSlotsPerf.default	1126	1116	1.01:1
BoxMinimalPerf.default	373	369	1.01:1
ButtonSlotsPerf.default	592	584	1.01:1
DividerMinimalPerf.default	380	376	1.01:1
DropdownManyItemsPerf.default	753	748	1.01:1
EmbedMinimalPerf.default	4413	4387	1.01:1
ItemLayoutMinimalPerf.default	1316	1300	1.01:1
ListCommonPerf.default	687	683	1.01:1
MenuButtonMinimalPerf.default	1748	1729	1.01:1
ProviderMinimalPerf.default	1172	1158	1.01:1
CarouselMinimalPerf.default	491	490	1:1
ChatDuplicateMessagesPerf.default	311	312	1:1
DatepickerMinimalPerf.default	5768	5745	1:1
DropdownMinimalPerf.default	3225	3229	1:1
GridMinimalPerf.default	364	365	1:1
LoaderMinimalPerf.default	704	706	1:1
ProviderMergeThemesPerf.default	1709	1712	1:1
TableManyItemsPerf.default	2054	2057	1:1
TextAreaMinimalPerf.default	543	541	1:1
ImageMinimalPerf.default	408	413	0.99:1
LabelMinimalPerf.default	410	416	0.99:1
RosterPerf.default	1354	1362	0.99:1
SliderMinimalPerf.default	1743	1754	0.99:1
StatusMinimalPerf.default	720	730	0.99:1
CustomToolbarPrototype.default	4076	4125	0.99:1
ListWith60ListItems.default	671	686	0.98:1
SegmentMinimalPerf.default	363	371	0.98:1
AlertMinimalPerf.default	290	299	0.97:1
RadioGroupMinimalPerf.default	479	503	0.95:1
ReactionMinimalPerf.default	408	439	0.93:1
ButtonMinimalPerf.default	171	191	0.9:1

ling1726 · 2021-11-10T09:06:16Z

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

@@ -291,7 +374,7 @@ describe('migrate-converged-pkg generator', () => {
        preset: '../../jest.preset.js',
        globals: {
        'ts-jest': {
-        tsConfig: '<rootDir>/tsconfig.json',
+        tsConfig: '<rootDir>/tsconfig.spec.json',


since our test extensions are _.test.tsx should we use tsconfig.test.json instead ?

Suggested change

tsConfig: '<rootDir>/tsconfig.spec.json',

tsConfig: '<rootDir>/tsconfig.test.json',

We can do that, although we use spec as well. My aim was to follow same patterns like community uses (nx) and to mirror what was agreed in RFC.

in general whenever we'll come to naming agreement which will be ratified as part of contributing guidelines and generators we can change it to anything basically without big effort. WDYT?

Sidenote:

using .test.* doesn't make much sense as we are using behaviour driven approach describe/it etc

I tried to address this long time ago without success/lack of understanding (https://github.com/microsoft/fluentui/pull/16870/files#diff-cd6a8ca4fbad83f1a14b9277bc20c3261f3eb9a00685e52a485f9fd5ef822ab3R111)

ling1726

Big changeset, but it more or less LGTM and big pro that it can be adopted incrementally with our current setup 👍, we've been waiting for the benefits of this for a while now, so let's try get this in a start migrating packages at a time to figure out the actual issues

…microsoft#20478)

msft-fluent-ui-bot added the Area: Build System label Nov 3, 2021

msft-fluent-ui-bot assigned khmakoto Nov 3, 2021

Hotell added the Status: Blocked Resolution blocked by another issue label Nov 3, 2021

Hotell changed the title ~~Hotell/build system/ts solution cfg 1~~ feat(tools): implement ts solution file config in migration generator Nov 4, 2021

This was referenced Nov 4, 2021

feat(scripts): use solution ts config when enabled within tsc just task #20515

Merged

Implement solution-style tsconfigs #19866

Closed

Hotell force-pushed the hotell/build-system/ts-solution-cfg-1 branch 2 times, most recently from f234197 to a715436 Compare November 9, 2021 13:18

Hotell removed the Status: Blocked Resolution blocked by another issue label Nov 9, 2021

feat(tools): implement ts solution file config in migration generator

5887ab5

Hotell force-pushed the hotell/build-system/ts-solution-cfg-1 branch from a715436 to 5887ab5 Compare November 9, 2021 15:17

Hotell marked this pull request as ready for review November 9, 2021 15:53

Hotell requested a review from a team as a code owner November 9, 2021 15:53

Hotell added Area: Typescript Fluent UI react-components (v9) labels Nov 9, 2021

Hotell added this to the November Project Cycle Q4 2021 milestone Nov 9, 2021

Hotell mentioned this pull request Nov 9, 2021

tools: add @ts-ignore removal from stories to migrate-converged-pkg #20560

Closed

ling1726 reviewed Nov 10, 2021

View reviewed changes

ling1726 approved these changes Nov 10, 2021

View reviewed changes

Hotell mentioned this pull request Nov 10, 2021

feat(tools): remove ts-ignore pragmas from stories during migration #20575

Merged

2 tasks

Hotell merged commit 7e24bdf into microsoft:master Nov 10, 2021

mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022

feat(tools): implement ts solution file config in migration generator (…

0c2e67a

…microsoft#20478)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tools): implement ts solution file config in migration generator #20478

feat(tools): implement ts solution file config in migration generator #20478

Hotell commented Nov 3, 2021 •

edited

Loading

size-auditor bot commented Nov 3, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 3, 2021 •

edited

Loading

Hotell commented Nov 3, 2021

fabricteam commented Nov 3, 2021 •

edited

Loading

fabricteam commented Nov 3, 2021 •

edited

Loading

ling1726 Nov 10, 2021

Hotell Nov 10, 2021

ling1726 left a comment

	tsConfig: '<rootDir>/tsconfig.spec.json',
	tsConfig: '<rootDir>/tsconfig.test.json',

feat(tools): implement ts solution file config in migration generator #20478

feat(tools): implement ts solution file config in migration generator #20478

Conversation

Hotell commented Nov 3, 2021 • edited Loading

Pull request checklist

Description of changes

Demos

Focus areas to test

size-auditor bot commented Nov 3, 2021 • edited Loading

Asset size changes

codesandbox-ci bot commented Nov 3, 2021 • edited Loading

Hotell commented Nov 3, 2021

fabricteam commented Nov 3, 2021 • edited Loading

📊 Bundle size report

fabricteam commented Nov 3, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

ling1726 Nov 10, 2021

Choose a reason for hiding this comment

Hotell Nov 10, 2021

Choose a reason for hiding this comment

ling1726 left a comment

Choose a reason for hiding this comment

Hotell commented Nov 3, 2021 •

edited

Loading

size-auditor bot commented Nov 3, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 3, 2021 •

edited

Loading

fabricteam commented Nov 3, 2021 •

edited

Loading

fabricteam commented Nov 3, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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