fix(CI): include type-check in lage config to have all packages type checked again by TristanWatanabe · Pull Request #25249 · microsoft/fluentui

TristanWatanabe · 2022-10-14T21:57:01Z

Current Behavior

Right now, whenever lage type-check is ran, only the react-18-tests-v8 package's type-check executes so other packages are not getting proper type checking in local builds or CI. It seems we need to explicitly declare a type-check for all packages in the lage.config before having one scoped to just a single package to ensure proper type-checking for all packages.

New Behavior

Re-enables type-check of packages in the repo
Fixes type-check errors that were introduced to master

Related Issue(s)

Fixes #25245

… type check

…e-check

… before running type-check

TristanWatanabe · 2022-10-14T22:04:05Z

    "@types/lerna__project": "5.1.0",
    "@types/loader-utils": "2.0.3",
    "@types/markdown-table": "2.0.0",
+    "@types/micromatch": "4.0.2",


Added to fix this error in scripts:

TristanWatanabe · 2022-10-14T22:04:52Z

    forceUpdate: jest.fn(),
    observe: jest.fn(),
    removeItem: jest.fn(),
+    removeOverflowMenu: jest.fn(),


fixes error below:

TristanWatanabe · 2022-10-14T22:05:27Z


 // TODO: this should be replaced with `'@storybook/core-server';` API
-// @ts-expect-error - standalone.js is basically private API/thus doesn't ship types. NOTE: Storybook can be run standalone from Node, although it should be noted this isn't officially supported any more. - https://github.com/storybookjs/storybook/blob/master/lib/core/docs/standalone.md#standalone-mode
+// @ts-ignore- standalone.js is basically private API/thus doesn't ship types. NOTE: Storybook can be run standalone from Node, although it should be noted this isn't officially supported any more. - https://github.com/storybookjs/storybook/blob/master/lib/core/docs/standalone.md#standalone-mode


Was throwing this error:

codesandbox-ci · 2022-10-14T22:08:40Z

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 97d7fc0:

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

fabricteam · 2022-10-14T22:10:33Z

📊 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	`3.153 kB` `1.299 kB`
`react-accordion` Accordion (including children components)	`79.083 kB` `24.079 kB`
`react-alert` Alert	`84.688 kB` `21.233 kB`
`react-avatar` Avatar	`48.874 kB` `13.864 kB`
`react-avatar` AvatarGroup	`14.996 kB` `6.013 kB`
`react-avatar` AvatarGroupItem	`68.842 kB` `19.205 kB`
`react-badge` Badge	`22.646 kB` `7.228 kB`
`react-badge` CounterBadge	`23.536 kB` `7.512 kB`
`react-badge` PresenceBadge	`24.096 kB` `7.09 kB`
`react-button` Button	`36.849 kB` `9.907 kB`
`react-button` CompoundButton	`43.874 kB` `11.123 kB`
`react-button` MenuButton	`39.543 kB` `10.807 kB`
`react-button` SplitButton	`46.989 kB` `12.192 kB`
`react-button` ToggleButton	`52.716 kB` `11.381 kB`
`react-card` Card - All	`67.216 kB` `19.304 kB`
`react-card` Card	`62.898 kB` `18.22 kB`
`react-card` CardFooter	`8.607 kB` `3.622 kB`
`react-card` CardHeader	`9.65 kB` `3.962 kB`
`react-card` CardPreview	`8.708 kB` `3.678 kB`
`react-combobox` Combobox (including child components)	`75.141 kB` `24.428 kB`
`react-combobox` Dropdown (including child components)	`74.869 kB` `24.385 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.94 kB` `17.663 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.488 kB` `52.587 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-dialog` Dialog (including children components)	`82.626 kB` `24.504 kB`
`react-divider` Divider	`16.505 kB` `5.925 kB`
`react-image` Image	`10.826 kB` `4.286 kB`
`react-infobutton` InfoButton	`7.742 kB` `3.265 kB`
`react-input` Input	`23.808 kB` `7.729 kB`
`react-label` Label	`9.384 kB` `3.883 kB`
`react-link` Link	`11.852 kB` `4.888 kB`
`react-menu` Menu (including children components)	`116.668 kB` `35.792 kB`
`react-menu` Menu (including selectable components)	`119.737 kB` `36.316 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`53.992 kB` `15.25 kB`
`react-popover` Popover	`102.864 kB` `31.542 kB`
`react-portal` Portal	`10.628 kB` `3.899 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.724 kB` `7.415 kB`
`react-progress` Progress	`12.789 kB` `4.927 kB`
`react-provider` FluentProvider	`15.807 kB` `5.909 kB`
`react-radio` Radio	`36.436 kB` `12.126 kB`
`react-radio` RadioGroup	`14.294 kB` `5.723 kB`
`react-select` Select	`20.892 kB` `7.367 kB`
`react-slider` Slider	`31.805 kB` `10.085 kB`
`react-spinbutton` SpinButton	`44.228 kB` `12.454 kB`
`react-spinner` Spinner	`20.023 kB` `6.461 kB`
`react-switch` Switch	`33.388 kB` `10.578 kB`
`react-text` Text - Default	`11.828 kB` `4.627 kB`
`react-text` Text - Wrappers	`15.138 kB` `5.064 kB`
`react-textarea` Textarea	`25.064 kB` `8.158 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.718 kB` `14.687 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 0d8be37486ff052856f4c7751c85ee7ed9816098}

fabricteam · 2022-10-14T22:17:52Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1305	1247	5000
Button	mount	918	931	5000
FluentProvider	mount	1475	1485	5000
FluentProviderWithTheme	mount	579	579	10
FluentProviderWithTheme	virtual-rerender	535	549	10
FluentProviderWithTheme	virtual-rerender-with-unmount	579	578	10
MakeStyles	mount	1959	2076	50000
SpinButton	mount	2390	2382	5000

fabricteam · 2022-10-14T22:19:07Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	155	139	1.12:1
AvatarMinimalPerf.default	174	157	1.11:1
TreeWith60ListItems.default	140	127	1.1:1
AttachmentMinimalPerf.default	133	125	1.06:1
SkeletonMinimalPerf.default	302	288	1.05:1
AlertMinimalPerf.default	233	226	1.03:1
ButtonMinimalPerf.default	141	137	1.03:1
ButtonSlotsPerf.default	435	422	1.03:1
ChatMinimalPerf.default	640	624	1.03:1
FlexMinimalPerf.default	258	250	1.03:1
HeaderMinimalPerf.default	325	316	1.03:1
LayoutMinimalPerf.default	318	309	1.03:1
ProviderMinimalPerf.default	326	318	1.03:1
RefMinimalPerf.default	187	182	1.03:1
TextAreaMinimalPerf.default	414	400	1.03:1
HeaderSlotsPerf.default	694	681	1.02:1
ItemLayoutMinimalPerf.default	986	963	1.02:1
MenuMinimalPerf.default	735	722	1.02:1
RosterPerf.default	1741	1712	1.02:1
AnimationMinimalPerf.default	467	463	1.01:1
BoxMinimalPerf.default	296	292	1.01:1
CheckboxMinimalPerf.default	1536	1526	1.01:1
GridMinimalPerf.default	295	293	1.01:1
ListCommonPerf.default	520	516	1.01:1
ListMinimalPerf.default	458	454	1.01:1
PopupMinimalPerf.default	561	555	1.01:1
RadioGroupMinimalPerf.default	391	388	1.01:1
SplitButtonMinimalPerf.default	3287	3256	1.01:1
TableMinimalPerf.default	358	354	1.01:1
ToolbarMinimalPerf.default	809	801	1.01:1
TooltipMinimalPerf.default	1843	1821	1.01:1
CarouselMinimalPerf.default	355	356	1:1
DropdownMinimalPerf.default	2196	2193	1:1
EmbedMinimalPerf.default	2639	2632	1:1
InputMinimalPerf.default	858	855	1:1
ListNestedPerf.default	472	470	1:1
ReactionMinimalPerf.default	330	331	1:1
IconMinimalPerf.default	552	552	1:1
TableManyItemsPerf.default	1567	1568	1:1
CustomToolbarPrototype.default	2153	2162	1:1
VideoMinimalPerf.default	632	631	1:1
AttachmentSlotsPerf.default	852	860	0.99:1
CardMinimalPerf.default	459	465	0.99:1
DatepickerMinimalPerf.default	4693	4727	0.99:1
DialogMinimalPerf.default	692	696	0.99:1
DividerMinimalPerf.default	319	321	0.99:1
ImageMinimalPerf.default	340	343	0.99:1
LoaderMinimalPerf.default	532	535	0.99:1
SegmentMinimalPerf.default	294	298	0.99:1
SliderMinimalPerf.default	1240	1252	0.99:1
TextMinimalPerf.default	295	299	0.99:1
TreeMinimalPerf.default	703	708	0.99:1
ButtonOverridesMissPerf.default	1012	1033	0.98:1
DropdownManyItemsPerf.default	531	544	0.98:1
LabelMinimalPerf.default	332	338	0.98:1
MenuButtonMinimalPerf.default	1354	1383	0.98:1
ProviderMergeThemesPerf.default	985	1004	0.98:1
AccordionMinimalPerf.default	124	128	0.97:1
ChatDuplicateMessagesPerf.default	213	219	0.97:1
StatusMinimalPerf.default	602	618	0.97:1
FormMinimalPerf.default	319	332	0.96:1
ListWith60ListItems.default	485	506	0.96:1
ChatWithPopoverPerf.default	272	287	0.95:1

size-auditor · 2022-10-14T22:21:55Z

Asset size changes

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

Baseline commit: 0d8be37486ff052856f4c7751c85ee7ed9816098 (build)

fabricteam · 2022-10-14T22:41:26Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1593	1564	5000
Breadcrumb	mount	3659	3689	1000
Checkbox	mount	3404	3432	5000
CheckboxBase	mount	3076	3075	5000
ChoiceGroup	mount	5838	5904	5000
ComboBox	mount	1599	1592	1000
CommandBar	mount	12084	12098	1000
ContextualMenu	mount	14056	14101	1000
DefaultButton	mount	1792	1844	5000
DetailsRow	mount	4765	4802	5000
DetailsRowFast	mount	4843	4857	5000
DetailsRowNoStyles	mount	4606	4634	5000
Dialog	mount	3987	4010	1000
DocumentCardTitle	mount	736	744	1000
Dropdown	mount	4280	4608	5000
FocusTrapZone	mount	2557	2612	5000
FocusZone	mount	2467	2501	5000
GroupedList	mount	70532	81750	2
GroupedList	virtual-rerender	33843	33343	2
GroupedList	virtual-rerender-with-unmount	113049	111888	2
GroupedListV2	mount	716	692	2
GroupedListV2	virtual-rerender	661	644	2
GroupedListV2	virtual-rerender-with-unmount	713	711	2
IconButton	mount	2516	2567	5000
Label	mount	932	930	5000
Layer	mount	5473	5446	5000
Link	mount	1062	1084	5000
MenuButton	mount	2253	2228	5000
MessageBar	mount	2961	2929	5000
Nav	mount	4289	4279	1000
OverflowSet	mount	1742	1732	5000
Panel	mount	3244	3179	1000
Persona	mount	1652	1659	1000
Pivot	mount	2124	2168	1000
PrimaryButton	mount	1951	1984	5000
Rating	mount	9604	9494	5000
SearchBox	mount	2010	2029	5000
Shimmer	mount	3862	3809	5000
Slider	mount	2677	2751	5000
SpinButton	mount	6091	6157	5000
Spinner	mount	1014	1007	5000
SplitButton	mount	4118	4053	5000
Stack	mount	1123	1093	5000
StackWithIntrinsicChildren	mount	3352	3296	5000
StackWithTextChildren	mount	6651	6628	5000
SwatchColorPicker	mount	13516	13671	5000
TagPicker	mount	3484	3498	5000
TeachingBubble	mount	109296	109548	5000
Text	mount	1019	1012	5000
TextField	mount	2064	2047	5000
ThemeProvider	mount	1968	1946	5000
ThemeProvider	virtual-rerender	1342	1366	5000
ThemeProvider	virtual-rerender-with-unmount	2741	2751	5000
Toggle	mount	1472	1472	5000
buttonNative	mount	697	688	5000

TristanWatanabe · 2022-10-14T23:57:15Z

    lint: ['build'],
    clean: [],
    test: ['build'],
+    'type-check': ['build'],


ensures that before running type-check for each package, that it and all of its dependencies have been properly built first

while this is a good enough hot fix we need to do better, as this will slow down whole CI. type checks are most expensive operation ATM.

This issues will be mitigated be new task orchestrator in the future, but for now can we create issue to track this ? ty

New issue here: #25256

…checked again (microsoft#25249)

TristanWatanabe added 10 commits October 13, 2022 13:22

fix: include type-check in lage config to have all packages type checked

4bef51b

fix(pr-deploy-site): type-check errors fixed

bf324b9

fix(stress-test): fix type-check issue

70f02c8

fix(react-migration-v8-v9): fix type-check errors

aa1d97c

fix(react-overflow): fix type-check errors

b8ebc8c

fix(scripts): fix type-check errors, add micromatch types to root

e024b56

fix: make sure v8 and web-components build before running stress-test…

bb00905

… type check

fix(react-migration): ensure v8 is built before running type-check

bf04216

fix(button and link): ensure a11y-testing is built before running typ…

4fd1345

…e-check

refactor: lage config ensures that a package's dependencies are built…

82a9a2d

… before running type-check

TristanWatanabe self-assigned this Oct 14, 2022

github-actions Bot added this to the October Project Cycle Q4 2022 milestone Oct 14, 2022

TristanWatanabe changed the title ~~fix: include type-check in lage config to have all packages type checked~~ fix(repo): include type-check in lage config to have all packages type checked again Oct 14, 2022

TristanWatanabe commented Oct 14, 2022

View reviewed changes

Comment thread apps/stress-test/src/shared/react/TestMount.tsx Outdated

TristanWatanabe commented Oct 14, 2022

View reviewed changes

TristanWatanabe marked this pull request as ready for review October 15, 2022 02:10

TristanWatanabe requested review from a team, GeoffCoxMSFT and spmonahan as code owners October 15, 2022 02:10

TristanWatanabe requested review from a team and micahgodbolt as code owners October 15, 2022 02:10

TristanWatanabe changed the title ~~fix(repo): include type-check in lage config to have all packages type checked again~~ fix(CI): include type-check in lage config to have all packages type checked again Oct 15, 2022

TristanWatanabe added 3 commits October 15, 2022 05:36

feedback: use window.settimeout

70b9b4c

feedback: remove explicit index import

a463052

fix: explicitly import from index

97d7fc0

Hotell reviewed Oct 17, 2022

View reviewed changes

Comment thread apps/stress-test/src/shared/react/TestMount.tsx Outdated

layershifter approved these changes Oct 17, 2022

View reviewed changes

Hotell approved these changes Oct 17, 2022

View reviewed changes

Comment thread packages/react-migration-v8-v9/src/stories/ThemeShim/createBrandVariants/index.stories.tsx

Hotell reviewed Oct 17, 2022

View reviewed changes

Comment thread scripts/lint-staged/tsconfig.json

TristanWatanabe mentioned this pull request Oct 17, 2022

Improve type checking speeds as it slows down CI pipeline #25256

Closed

spmonahan approved these changes Oct 17, 2022

View reviewed changes

micahgodbolt approved these changes Oct 17, 2022

View reviewed changes

TristanWatanabe merged commit a0e0565 into microsoft:master Oct 17, 2022

TristanWatanabe deleted the fix-no-type-checking branch October 17, 2022 16:14

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

fix(CI): include type-check in lage config to have all packages type …

966a6f7

…checked again (microsoft#25249)

Uh oh!

Conversation

TristanWatanabe commented Oct 14, 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!

TristanWatanabe Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

TristanWatanabe Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

TristanWatanabe Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

codesandbox-ci Bot commented Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

size-auditor Bot commented Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

TristanWatanabe Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hotell Oct 17, 2022

Choose a reason for hiding this comment

Uh oh!

TristanWatanabe Oct 17, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

TristanWatanabe commented Oct 14, 2022 •

edited

Loading

codesandbox-ci Bot commented Oct 14, 2022 •

edited

Loading

fabricteam commented Oct 14, 2022 •

edited

Loading

fabricteam commented Oct 14, 2022 •

edited

Loading

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

fabricteam commented Oct 14, 2022 •

edited

Loading

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

size-auditor Bot commented Oct 14, 2022 •

edited

Loading

fabricteam commented Oct 14, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

TristanWatanabe Oct 14, 2022 •

edited

Loading