feat(scripts): improve API violation reporting #25356

Hotell · 2022-10-24T17:04:56Z

Current Behavior

copyCompiled task dosen't work for node packages ( no module field present )
reporting for API violations
- is hard to follow
- is printed at the beginning
fully manual TS config creation

New Behavior

copyCompiled task works for both web and node packages
improved API violations reporting
- aggregated reports
- printed at the bottom
tsconfig.lib.json is used with simple/explicit overrides

CLI Example:

Missing package dependencies rolluped files

yarn workspace @fluentui/react-provider generate-api

↓↓↓

Using internal API's from dependencies as part of public API

yarn workspace @fluentui/react-provider generate-api

↓↓↓

Related Issue(s)

Follows #23369

…fter check

codesandbox-ci · 2022-10-24T17:17:19Z

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 d8e1e82:

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

size-auditor · 2022-10-24T17:18:49Z

Asset size changes

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

Baseline commit: f43aae1493a49053f7fe866a5c56056e73b1d709 (build)

fabricteam · 2022-10-24T17:19:12Z

📊 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.243 kB` `24.436 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.664 kB` `19.635 kB`
`react-card` Card	`63.346 kB` `18.539 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.85 kB` `24.632 kB`
`react-combobox` Dropdown (including child components)	`75.579 kB` `24.594 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.603 kB` `52.909 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-dialog` Dialog (including children components)	`83.147 kB` `24.799 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	`24.428 kB` `7.899 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.78 kB` `36.112 kB`
`react-menu` Menu (including selectable components)	`119.849 kB` `36.635 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`53.992 kB` `15.25 kB`
`react-popover` Popover	`103.342 kB` `31.82 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	`13.131 kB` `5.039 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	`21.61 kB` `7.568 kB`
`react-slider` Slider	`31.805 kB` `10.085 kB`
`react-spinbutton` SpinButton	`45.826 kB` `12.858 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.687 kB` `8.331 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 f43aae1493a49053f7fe866a5c56056e73b1d709}

fabricteam · 2022-10-24T17:20:55Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1520	1592	5000
Button	mount	1144	1129	5000
FluentProvider	mount	1873	1905	5000
FluentProviderWithTheme	mount	771	769	10
FluentProviderWithTheme	virtual-rerender	735	699	10
FluentProviderWithTheme	virtual-rerender-with-unmount	763	744	10
MakeStyles	mount	2205	2246	50000
SpinButton	mount	2994	3023	5000

fabricteam · 2022-10-24T17:24:58Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	177	151	1.17:1
PortalMinimalPerf.default	188	166	1.13:1
TreeMinimalPerf.default	840	769	1.09:1
HeaderMinimalPerf.default	371	343	1.08:1
ListWith60ListItems.default	643	593	1.08:1
HeaderSlotsPerf.default	796	745	1.07:1
CardMinimalPerf.default	546	513	1.06:1
CarouselMinimalPerf.default	462	437	1.06:1
DialogMinimalPerf.default	800	757	1.06:1
ImageMinimalPerf.default	377	354	1.06:1
RefMinimalPerf.default	221	208	1.06:1
IconMinimalPerf.default	643	608	1.06:1
TextMinimalPerf.default	355	336	1.06:1
ChatMinimalPerf.default	739	707	1.05:1
DropdownManyItemsPerf.default	666	633	1.05:1
RosterPerf.default	2175	2077	1.05:1
AnimationMinimalPerf.default	555	533	1.04:1
SkeletonMinimalPerf.default	370	355	1.04:1
BoxMinimalPerf.default	352	341	1.03:1
ButtonSlotsPerf.default	567	548	1.03:1
DividerMinimalPerf.default	361	349	1.03:1
FlexMinimalPerf.default	279	270	1.03:1
StatusMinimalPerf.default	691	668	1.03:1
TableMinimalPerf.default	390	380	1.03:1
ButtonOverridesMissPerf.default	1351	1326	1.02:1
ItemLayoutMinimalPerf.default	1205	1186	1.02:1
LabelMinimalPerf.default	372	365	1.02:1
ListNestedPerf.default	537	525	1.02:1
MenuMinimalPerf.default	859	841	1.02:1
RadioGroupMinimalPerf.default	431	422	1.02:1
ReactionMinimalPerf.default	389	383	1.02:1
TextAreaMinimalPerf.default	477	469	1.02:1
ButtonMinimalPerf.default	157	156	1.01:1
InputMinimalPerf.default	1141	1132	1.01:1
LayoutMinimalPerf.default	355	352	1.01:1
MenuButtonMinimalPerf.default	1754	1730	1.01:1
TableManyItemsPerf.default	1906	1880	1.01:1
CustomToolbarPrototype.default	2711	2689	1.01:1
ChatWithPopoverPerf.default	358	358	1:1
CheckboxMinimalPerf.default	2131	2132	1:1
PopupMinimalPerf.default	642	644	1:1
ProviderMergeThemesPerf.default	1309	1314	1:1
SegmentMinimalPerf.default	329	328	1:1
SplitButtonMinimalPerf.default	4421	4426	1:1
AccordionMinimalPerf.default	147	148	0.99:1
AvatarMinimalPerf.default	189	190	0.99:1
GridMinimalPerf.default	321	325	0.99:1
ListMinimalPerf.default	521	526	0.99:1
LoaderMinimalPerf.default	666	674	0.99:1
ProviderMinimalPerf.default	402	407	0.99:1
VideoMinimalPerf.default	727	738	0.99:1
ChatDuplicateMessagesPerf.default	285	290	0.98:1
DropdownMinimalPerf.default	2674	2724	0.98:1
SliderMinimalPerf.default	1600	1634	0.98:1
TooltipMinimalPerf.default	2313	2355	0.98:1
AttachmentSlotsPerf.default	1106	1140	0.97:1
DatepickerMinimalPerf.default	5754	5959	0.97:1
EmbedMinimalPerf.default	3630	3739	0.97:1
FormMinimalPerf.default	359	369	0.97:1
ListCommonPerf.default	628	661	0.95:1
AttachmentMinimalPerf.default	136	144	0.94:1
ToolbarMinimalPerf.default	911	965	0.94:1
AlertMinimalPerf.default	244	265	0.92:1

…d dts after check

fabricteam · 2022-10-24T17:39:39Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1202	1200	5000
Breadcrumb	mount	2881	2963	1000
Checkbox	mount	2632	2641	5000
CheckboxBase	mount	2351	2296	5000
ChoiceGroup	mount	4395	4361	5000
ComboBox	mount	1250	1250	1000
CommandBar	mount	9310	9316	1000
ContextualMenu	mount	11282	11546	1000
DefaultButton	mount	1372	1387	5000
DetailsRow	mount	3454	3626	5000
DetailsRowFast	mount	3622	3592	5000
DetailsRowNoStyles	mount	3447	3452	5000
Dialog	mount	3101	3119	1000
DocumentCardTitle	mount	573	576	1000
Dropdown	mount	3238	3242	5000
FocusTrapZone	mount	2006	2014	5000
FocusZone	mount	1983	1966	5000
GroupedList	mount	53085	61122	2
GroupedList	virtual-rerender	24890	24730	2
GroupedList	virtual-rerender-with-unmount	92457	93552	2
GroupedListV2	mount	558	560	2
GroupedListV2	virtual-rerender	511	529	2
GroupedListV2	virtual-rerender-with-unmount	559	538	2
IconButton	mount	1895	1914	5000
Label	mount	725	733	5000
Layer	mount	4213	4251	5000
Link	mount	827	753	5000
MenuButton	mount	1679	1590	5000
MessageBar	mount	2261	2188	5000
Nav	mount	3171	3047	1000
OverflowSet	mount	1362	1304	5000
Panel	mount	2458	2394	1000
Persona	mount	1223	1165	1000
Pivot	mount	1561	1539	1000
PrimaryButton	mount	1519	1448	5000
Rating	mount	7074	6949	5000
SearchBox	mount	1481	1525	5000
Shimmer	mount	2795	2764	5000
Slider	mount	2010	2076	5000
SpinButton	mount	4528	4685	5000
Spinner	mount	814	796	5000
SplitButton	mount	3041	3056	5000
Stack	mount	802	860	5000
StackWithIntrinsicChildren	mount	2332	2192	5000
StackWithTextChildren	mount	4627	4587	5000
SwatchColorPicker	mount	10432	10287	5000
TagPicker	mount	2598	2574	5000
TeachingBubble	mount	97498	98137	5000
Text	mount	715	775	5000
TextField	mount	1566	1559	5000
ThemeProvider	mount	1508	1515	5000
ThemeProvider	virtual-rerender	1066	1088	5000
ThemeProvider	virtual-rerender-with-unmount	2064	2057	5000
Toggle	mount	1115	1071	5000
buttonNative	mount	509	556	5000

…rolluped dts after check

…nd add rolluped dts after check

ling1726 · 2022-10-25T10:13:16Z

scripts/tasks/utils.ts

+      /**
+       * needs to be explicitly set to `false` so errors propagate to api-extractor
+       */
+      skipLibCheck: false,


will this affect libraries that are not in the monorepo ?

can you elaborate more on your question pls ? what libraries are you referring to.

we need strict library checking turned on when generating rolluped type so we give customers 100% guarantee we ship correct API's. if there is some 3rd party library that has some type violations only we will be affected as that will fail the api generation(pipeline). One example of such a violation is storybook as it uses synthetic default exports. This is handled here https://github.com/microsoft/fluentui/blob/master/scripts/tasks/utils.ts#L22-L27

oh my bad, I misread and thought that we would be type checking 3rd party libraries

ling1726 · 2022-10-25T10:14:07Z

scripts/tasks/utils.ts

+       *
+       * NOTE: Some v8 packages (font-icons-mdl2) use `preserveConstEnums: false` which clashes with isolateModules - TSC will error
+       */
+      isolatedModules: false,


in v9 packages it would be nice to set this to true, but I guess our build already takes that into account too anyway

it is set to true in all v9 packages already.

isn't the documentation on this property clear ? that it has no effect on declaration files ?

the v8 context:

issue #7110

I was digging more into the icons-mdl2 issue but changing that to emit cons enums would lead to increased js payload size which we dont know what implications that might bring. ATM the problematic api is marked as @deprecated which is ofc not stopping consumers using it.

Removing the deprecated would be breaking change unfortunately.

yeah, but it would be nice to be consistent with the compiler options we use in our own tsconfigs. I can see the problem with v8 and const enums tho. thx for explaining

ling1726 · 2022-10-25T10:14:32Z

scripts/tasks/utils.ts

-    ...(options.tsConfig.files ? { files: options.tsConfig.files } : null),
+    ...options.tsConfig,
    compilerOptions: {
+      ...options.tsConfig.compilerOptions,


shouldn't options be spread at the end to override the defaults?

no. those are "The defaults" from tsconfig.lib.json . we override those

ah ok that makes sense

* master: feat(scripts): improve API violation reporting (microsoft#25356) applying package updates fix: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop (microsoft#25453) feat(react-infobutton): Add initial implementation (microsoft#25247) chore(react-avatar, avatar-context): migrate to new package structure (microsoft#25473) chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure (microsoft#25481) docs(react-infobutton): Adding component's spec (microsoft#25251) fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf (microsoft#25494) chore(vr-tests-v9): Convert Button VR tests to CSF (microsoft#25108)

* fix(script): make copy-compiled task work with packages without 'module' * fix(scripts): make internal api stripping work and add rolluped dts after check

Hotell added 2 commits October 24, 2022 19:03

fix(script): make copy-compiled task work with packages without 'module'

f0d759b

fix(scripts): make internal api stripping work and add rolluped dts a…

7f85801

…fter check

msft-fluent-ui-bot added the Area: Build System label Oct 24, 2022

msft-fluent-ui-bot assigned GeoffCoxMSFT Oct 24, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Oct 24, 2022

Hotell changed the title ~~Hotell/build/api stripping migration extraction tweaks~~ feat(scripts): improve API violation reporting Oct 24, 2022

Hotell unassigned GeoffCoxMSFT Oct 24, 2022

Hotell mentioned this pull request Oct 24, 2022

feat: enable @internal api stripping in all packages and fix export maps #25319

Closed

5 tasks

fixup! fix(scripts): make internal api stripping work and add rollupe…

3faca13

…d dts after check

Hotell added the Fluent UI react-components (v9) label Oct 24, 2022

Hotell added 2 commits October 24, 2022 19:44

fixup! fixup! fix(scripts): make internal api stripping work and add …

e1376fb

…rolluped dts after check

fixup! fixup! fixup! fix(scripts): make internal api stripping work a…

d8e1e82

…nd add rolluped dts after check

Hotell marked this pull request as ready for review October 25, 2022 10:01

Hotell requested a review from a team as a code owner October 25, 2022 10:01

ling1726 reviewed Oct 25, 2022

View reviewed changes

Hotell requested a review from ling1726 October 25, 2022 12:27

ling1726 approved these changes Oct 25, 2022

View reviewed changes

Hotell merged commit 6ce378e into microsoft:master Nov 3, 2022

Hotell deleted the hotell/build/api-stripping-migration-extraction-tweaks branch November 3, 2022 09:17

feat(scripts): improve API violation reporting #25356

feat(scripts): improve API violation reporting #25356

Uh oh!

Conversation

Hotell commented Oct 24, 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!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hotell Oct 25, 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!

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!

5 participants

Hotell commented Oct 24, 2022 •

edited

Loading

codesandbox-ci bot commented Oct 24, 2022 •

edited

Loading

size-auditor bot commented Oct 24, 2022 •

edited

Loading

fabricteam commented Oct 24, 2022 •

edited

Loading

fabricteam commented Oct 24, 2022 •

edited

Loading

fabricteam commented Oct 24, 2022 •

edited

Loading

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

fabricteam commented Oct 24, 2022 •

edited

Loading

Hotell Oct 25, 2022 •

edited

Loading