feat(scripts): establish ts solution config and initial package boundaries by Hotell · Pull Request #24345 · microsoft/fluentui

Hotell · 2022-08-11T12:47:24Z

Current Behavior

scripts/ contain non trivial complexity which is hard to maintain/reason about without proper API ( type safety ) and integration tests

scripts/ are only partially type checked
not all JS files are type checked
there are no proper "package" boundaries within scripts

New Behavior

type check all files via solution config setup
fixes all TS errors in all JS files
enables strict type checks in
- beachball,
- storybook,
- cypress,
- monorepo
- screener

Related Issue(s)

Fixes partially #24349

scripts/logging.js

Hotell · 2022-08-11T12:51:21Z

scripts/monorepo/runTo.js


  if (result.status !== 0) {
-    process.exit(result.status);
+    process.exit(result.status ?? undefined);


status is number or null , process.exit cannot accept null

size-auditor · 2022-08-11T13:08:30Z

Asset size changes

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

Baseline commit: 86cb0feac9945da4989ab905dc7328a2d1d9a385 (build)

fabricteam · 2022-08-11T13:09:27Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1149	1188	5000
Button	mount	851	913	5000
FluentProvider	mount	1539	1390	5000
FluentProviderWithTheme	mount	556	630	10
FluentProviderWithTheme	virtual-rerender	594	597	10
FluentProviderWithTheme	virtual-rerender-with-unmount	568	637	10
MakeStyles	mount	1831	1907	50000
SpinButton	mount	2319	2429	5000

fabricteam · 2022-08-11T13:15:29Z

📊 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.349 kB` `24.053 kB`
`react-alert` Alert	`83.79 kB` `20.841 kB`
`react-avatar` Avatar	`48.283 kB` `13.644 kB`
`react-avatar` AvatarGroup	`14.85 kB` `5.942 kB`
`react-avatar` AvatarGroupItem	`68.251 kB` `18.987 kB`
`react-badge` Badge	`22.503 kB` `7.153 kB`
`react-badge` CounterBadge	`23.406 kB` `7.449 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-button` Button	`36.396 kB` `9.579 kB`
`react-button` CompoundButton	`43.469 kB` `10.812 kB`
`react-button` MenuButton	`39.014 kB` `10.456 kB`
`react-button` SplitButton	`46.544 kB` `11.84 kB`
`react-button` ToggleButton	`51.91 kB` `11.003 kB`
`react-card` Card - All	`67.458 kB` `19.264 kB`
`react-card` Card	`63.14 kB` `18.176 kB`
`react-card` CardFooter	`8.461 kB` `3.555 kB`
`react-card` CardHeader	`9.504 kB` `3.896 kB`
`react-card` CardPreview	`8.562 kB` `3.61 kB`
`react-combobox` Combobox (including child components)	`72.549 kB` `23.686 kB`
`react-combobox` Dropdown (including child components)	`71.741 kB` `23.559 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.818 kB` `51.901 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.19 kB` `10.921 kB`
`react-dialog` Dialog (including children components)	`85.361 kB` `25.458 kB`
`react-divider` Divider	`16.359 kB` `5.853 kB`
`react-image` Image	`10.68 kB` `4.215 kB`
`react-input` Input	`23.498 kB` `7.617 kB`
`react-label` Label	`9.238 kB` `3.815 kB`
`react-link` Link	`12.231 kB` `4.925 kB`
`react-menu` Menu (including children components)	`115.697 kB` `35.316 kB`
`react-menu` Menu (including selectable components)	`118.896 kB` `35.806 kB`
`react-overflow` hooks only	`10.685 kB` `4.104 kB`
`react-popover` Popover	`102.837 kB` `31.496 kB`
`react-portal` Portal	`10.576 kB` `3.875 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-provider` FluentProvider	`15.655 kB` `5.835 kB`
`react-radio` Radio	`36.025 kB` `11.914 kB`
`react-radio` RadioGroup	`14.148 kB` `5.654 kB`
`react-select` Select	`20.746 kB` `7.299 kB`
`react-slider` Slider	`32.07 kB` `10.033 kB`
`react-spinbutton` SpinButton	`43.843 kB` `12.336 kB`
`react-spinner` Spinner	`19.855 kB` `6.384 kB`
`react-switch` Switch	`32.562 kB` `10.253 kB`
`react-text` Text - Default	`11.682 kB` `4.561 kB`
`react-text` Text - Wrappers	`14.992 kB` `4.995 kB`
`react-textarea` Textarea	`23.674 kB` `7.83 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.479 kB` `6.396 kB`
`react-theme` Teams: Light theme	`17.385 kB` `5.024 kB`
`react-tooltip` Tooltip	`41.504 kB` `14.622 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 86cb0feac9945da4989ab905dc7328a2d1d9a385}

fabricteam · 2022-08-11T13:16:44Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	133	119	1.12:1
RefMinimalPerf.default	190	175	1.09:1
PortalMinimalPerf.default	147	138	1.07:1
CarouselMinimalPerf.default	389	367	1.06:1
AccordionMinimalPerf.default	125	119	1.05:1
ButtonMinimalPerf.default	138	131	1.05:1
ChatWithPopoverPerf.default	331	314	1.05:1
FlexMinimalPerf.default	239	228	1.05:1
RadioGroupMinimalPerf.default	372	355	1.05:1
TableMinimalPerf.default	342	325	1.05:1
DividerMinimalPerf.default	299	288	1.04:1
FormMinimalPerf.default	306	293	1.04:1
TooltipMinimalPerf.default	1989	1915	1.04:1
BoxMinimalPerf.default	277	270	1.03:1
GridMinimalPerf.default	280	272	1.03:1
HeaderMinimalPerf.default	294	286	1.03:1
ProviderMinimalPerf.default	346	335	1.03:1
SegmentMinimalPerf.default	285	276	1.03:1
SkeletonMinimalPerf.default	282	275	1.03:1
StatusMinimalPerf.default	560	544	1.03:1
TextAreaMinimalPerf.default	392	382	1.03:1
TreeMinimalPerf.default	679	658	1.03:1
VideoMinimalPerf.default	620	601	1.03:1
ListNestedPerf.default	463	452	1.02:1
TreeWith60ListItems.default	134	131	1.02:1
AnimationMinimalPerf.default	442	439	1.01:1
AvatarMinimalPerf.default	154	153	1.01:1
CardMinimalPerf.default	433	427	1.01:1
ChatDuplicateMessagesPerf.default	240	237	1.01:1
ChatMinimalPerf.default	607	601	1.01:1
DropdownManyItemsPerf.default	551	547	1.01:1
InputMinimalPerf.default	1087	1075	1.01:1
LayoutMinimalPerf.default	294	290	1.01:1
MenuMinimalPerf.default	704	697	1.01:1
RosterPerf.default	1782	1772	1.01:1
ProviderMergeThemesPerf.default	1063	1054	1.01:1
SliderMinimalPerf.default	1414	1401	1.01:1
TableManyItemsPerf.default	1565	1554	1.01:1
CustomToolbarPrototype.default	2458	2426	1.01:1
AttachmentSlotsPerf.default	910	909	1:1
CheckboxMinimalPerf.default	2228	2234	1:1
DialogMinimalPerf.default	643	644	1:1
DropdownMinimalPerf.default	2629	2630	1:1
EmbedMinimalPerf.default	3464	3463	1:1
ItemLayoutMinimalPerf.default	980	982	1:1
ListCommonPerf.default	510	512	1:1
ListMinimalPerf.default	423	423	1:1
ListWith60ListItems.default	512	512	1:1
MenuButtonMinimalPerf.default	1414	1412	1:1
PopupMinimalPerf.default	525	525	1:1
SplitButtonMinimalPerf.default	3681	3672	1:1
TextMinimalPerf.default	285	284	1:1
ButtonOverridesMissPerf.default	1243	1254	0.99:1
ButtonSlotsPerf.default	457	461	0.99:1
HeaderSlotsPerf.default	625	629	0.99:1
IconMinimalPerf.default	548	553	0.99:1
ToolbarMinimalPerf.default	758	762	0.99:1
DatepickerMinimalPerf.default	4816	4910	0.98:1
LabelMinimalPerf.default	305	311	0.98:1
LoaderMinimalPerf.default	567	577	0.98:1
ReactionMinimalPerf.default	303	309	0.98:1
AlertMinimalPerf.default	216	224	0.96:1
ImageMinimalPerf.default	307	322	0.95:1

fabricteam · 2022-08-11T13:23:29Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	890	897	5000
Breadcrumb	mount	2846	2872	1000
Checkbox	mount	2649	2667	5000
CheckboxBase	mount	2316	2290	5000
ChoiceGroup	mount	4717	4668	5000
ComboBox	mount	971	985	1000
CommandBar	mount	11211	10736	1000
ContextualMenu	mount	12369	12233	1000
DefaultButton	mount	1156	1113	5000
DetailsRow	mount	3811	3842	5000
DetailsRowFast	mount	3831	3831	5000
DetailsRowNoStyles	mount	3714	3671	5000
Dialog	mount	3175	3198	1000
DocumentCardTitle	mount	180	186	1000
Dropdown	mount	3404	3342	5000
FocusTrapZone	mount	1892	1900	5000
FocusZone	mount	1817	1787	5000
IconButton	mount	1773	1804	5000
Label	mount	359	370	5000
Layer	mount	4521	4590	5000
Link	mount	480	476	5000
MenuButton	mount	1475	1480	5000
MessageBar	mount	2226	2229	5000
Nav	mount	3393	3387	1000
OverflowSet	mount	1144	1139	5000
Panel	mount	2522	2546	1000
Persona	mount	1000	1004	1000
Pivot	mount	1459	1452	1000
PrimaryButton	mount	1292	1320	5000
Rating	mount	7698	7712	5000
SearchBox	mount	1281	1282	5000
Shimmer	mount	2893	2913	5000
Slider	mount	1976	1965	5000
SpinButton	mount	5046	4991	5000
Spinner	mount	432	452	5000
SplitButton	mount	3188	3191	5000
Stack	mount	513	502	5000
StackWithIntrinsicChildren	mount	2296	2299	5000
StackWithTextChildren	mount	5179	5189	5000
SwatchColorPicker	mount	11925	11897	5000
TagPicker	mount	2638	2624	5000
TeachingBubble	mount	95494	96841	5000
Text	mount	425	424	5000
TextField	mount	1394	1415	5000
ThemeProvider	mount	1322	1314	5000
ThemeProvider	virtual-rerender	754	773	5000
ThemeProvider	virtual-rerender-with-unmount	2025	2060	5000
Toggle	mount	808	822	5000
buttonNative	mount	136	113	5000

codesandbox-ci · 2022-08-12T08:01:10Z

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 3eaf52c:

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

layershifter

🚀

sopranopillow

Approving for 'react-avatar'

TristanWatanabe

This is awesome! Just a couple of non-blocking Qs and nits below

scripts/tasks/merge.js

TristanWatanabe · 2022-08-24T16:31:14Z

scripts/monorepo/getDependencies.js

- * @param {string} options.dev include dev dependencies
- * @param {string} options.production include production dependencies
+ * @param {Object} options
+ * @param {string=} options.dev include dev dependencies


Suggested change

* @param {string=} options.dev include dev dependencies

* @param {string} options.dev include dev dependencies

this is incorrect as all properties are optional, speaking of which I forgot to mark production optional as well.

fixed d54541b#diff-52ddc0ac2e681b9add19d5cb346d5bd5f4bf62b83952c7d1a66e77851e324849R29-R31

TristanWatanabe · 2022-08-24T16:40:15Z

scripts/cypress.js

@@ -1,82 +0,0 @@
-#!/usr/bin/env node


I dont have much context with cypress stuff so curious as to why was this file removed?

I talked with @ling1726 and its a leftover, this is not used at all - that's why removing

TristanWatanabe · 2022-08-24T16:42:19Z

package.json

    "satisfied": "^1.1.1",
    "scheduler": "0.20.2",
    "schema-utils": "3.1.1",
+    "screener-storybook": "0.23.0",


Why was this added?

the commit describes it a577dff

to align with our single version policy in monorepo. it's not related to scope of this PR but I did it anyway :D

…ders to package like structure

Co-authored-by: Tristan Watanabe <tristan.watanabe@gmail.com>

msft-fluent-ui-bot assigned layershifter Aug 11, 2022

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

Hotell unassigned layershifter Aug 11, 2022

Hotell force-pushed the hotell/build/scripts-initiative/establish-ts-solution-config branch from 013ddfc to ba5b1c5 Compare August 11, 2022 12:54

Hotell commented Aug 11, 2022

View reviewed changes

Hotell mentioned this pull request Aug 12, 2022

feat: make backbone of our tooling compliant with package standards (packaging /scripts) #24349

Closed

18 tasks

Hotell self-assigned this Aug 12, 2022

Hotell force-pushed the hotell/build/scripts-initiative/establish-ts-solution-config branch 4 times, most recently from f337c6a to ce63b01 Compare August 22, 2022 13:58

Hotell marked this pull request as ready for review August 22, 2022 15:07

Hotell requested review from a team, behowell, chpalac, khmakoto, ling1726 and sopranopillow as code owners August 22, 2022 15:07

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

layershifter approved these changes Aug 22, 2022

View reviewed changes

tudorpopams self-requested a review August 23, 2022 12:15

Hotell force-pushed the hotell/build/scripts-initiative/establish-ts-solution-config branch from ce63b01 to a577dff Compare August 23, 2022 14:33

sopranopillow approved these changes Aug 24, 2022

View reviewed changes

TristanWatanabe approved these changes Aug 24, 2022

View reviewed changes

Hotell and others added 7 commits August 25, 2022 11:28

feat(scripts): establish ts-solution config files and migrate few fol…

d54541b

…ders to package like structure

chore: consume cypress.config from it's package boundary

884abab

generate changefiles

8732f21

chore(scripts): enable screener/ with ts solution config

3a20128

perf(scripts): turn off ts-jest diagnostic

129302c

chore: add screener-storybook to root to follow single version policy

c11d9c8

Update scripts/tasks/merge.js

3eaf52c

Co-authored-by: Tristan Watanabe <tristan.watanabe@gmail.com>

Hotell force-pushed the hotell/build/scripts-initiative/establish-ts-solution-config branch from 255a483 to 3eaf52c Compare August 25, 2022 09:28

Hotell enabled auto-merge (squash) August 25, 2022 10:54

Hotell mentioned this pull request Aug 25, 2022

feat(scripts): enable strict checking for additional sub-folders(packages) #24526

Merged

1 task

marcosmoura approved these changes Aug 29, 2022

View reviewed changes

Hotell merged commit ba9444d into microsoft:master Aug 29, 2022

Hotell deleted the hotell/build/scripts-initiative/establish-ts-solution-config branch August 29, 2022 12:00

ralucapelin mentioned this pull request Aug 30, 2022

Remove check for commit existence and make it optional #24587

Merged

	* @param {string=} options.dev include dev dependencies
	* @param {string} options.dev include dev dependencies

Conversation

Hotell commented Aug 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

size-auditor bot commented Aug 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Aug 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Aug 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Aug 11, 2022 • 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 Aug 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Aug 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

layershifter left a comment

Choose a reason for hiding this comment

Uh oh!

sopranopillow left a comment

Choose a reason for hiding this comment

Uh oh!

TristanWatanabe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Hotell commented Aug 11, 2022 •

edited

Loading

size-auditor bot commented Aug 11, 2022 •

edited

Loading

fabricteam commented Aug 11, 2022 •

edited

Loading

fabricteam commented Aug 11, 2022 •

edited

Loading

fabricteam commented Aug 11, 2022 •

edited

Loading

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

fabricteam commented Aug 11, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 12, 2022 •

edited

Loading