chore: unify build:local for all vnext packages by Hotell · Pull Request #19486 · microsoft/fluentui

Hotell · 2021-08-23T20:08:52Z

Pull request checklist

Addresses an existing issue: Fixes tools: set build:local and api-extractor based on package context #19110, new dx (1st stage): api-extractor issue for node packages #18747
~~[ ] Include a change request file using $ yarn change~~

Description of changes

nx migrate-converged-pkg:

unifies all build:local scripts in migration generator
- note after this is merged nx migration with --all needs to be run otherwise it will fail)
fixes setting platform tags based on context

vNext packages:

unifies babel-make-styles, jest-serializer-make-styles, make-styles-webpack-loader build and distribution setup with rest of vNext

just scripts and other tooling:

adds rootDir to tsconfig.base.json
fixes broken ts:compile just task
update plop node template to use unified build just script

Focus areas to test

NOTE:

this PR mixes various things that could have been submitted via smaller PRs (in normal circumstances). I can de-chunked those into separate PR's if requested. To better understand the changes please check commits where every one is self contained.

fabricteam · 2021-08-23T20:10:58Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`75.787 kB` `22.366 kB`
`react-avatar` Avatar	`56.558 kB` `15.66 kB`
`react-badge` Badge	`24.343 kB` `7.165 kB`
`react-badge` CounterBadge	`27.156 kB` `7.851 kB`
`react-badge` PresenseBadge	`237 B` `177 B`
`react-button` Button	`25.016 kB` `8.035 kB`
`react-button` CompoundButton	`30.308 kB` `8.911 kB`
`react-button` MenuButton	`26.603 kB` `8.543 kB`
`react-button` ToggleButton	`34.613 kB` `8.671 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`177.666 kB` `50.281 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.288 kB` `11.615 kB`
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-label` Label	`9.397 kB` `3.839 kB`
`react-link` Link	`14.715 kB` `6.012 kB`
`react-make-styles` makeStaticStyles (runtime)	`7.59 kB` `3.321 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`22.135 kB` `8.356 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.557 kB` `1.202 kB`
`react-menu` Menu (including children components)	`115.15 kB` `34.665 kB`
`react-menu` Menu (including selectable components)	`117.88 kB` `35.217 kB`
`react-popover` Popover	`124.599 kB` `36.198 kB`
`react-portal` Portal	`7.78 kB` `2.672 kB`
`react-positioning` usePopper	`23.145 kB` `7.942 kB`
`react-provider` FluentProvider	`16.286 kB` `5.991 kB`
`react-text` Text - Default	`11.798 kB` `4.452 kB`
`react-text` Text - Wrappers	`15.414 kB` `4.734 kB`
`react-theme` Teams: all themes	`32.941 kB` `6.674 kB`
`react-theme` Teams: Light theme	`20.247 kB` `5.662 kB`
`react-tooltip` Tooltip	`46.054 kB` `15.658 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against 00df799963bbb5e8bbfe8b2244ab2b69d0d86de1}

codesandbox-ci · 2021-08-23T20:15:17Z

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 8fc6a5c:

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-08-23T21:17:53Z

Asset size changes

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

Baseline commit: 00df799963bbb5e8bbfe8b2244ab2b69d0d86de1 (build)

fabricteam · 2021-08-23T21:27:09Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	924	936	5000
BaseButton	mount	968	961	5000
Breadcrumb	mount	2630	2636	1000
ButtonNext	mount	444	460	5000
Checkbox	mount	1667	1679	5000
CheckboxBase	mount	1376	1463	5000
ChoiceGroup	mount	5025	4930	5000
ComboBox	mount	983	1023	1000
CommandBar	mount	10500	10367	1000
ContextualMenu	mount	6355	6323	1000
DefaultButton	mount	1218	1219	5000
DetailsRow	mount	3890	3849	5000
DetailsRowFast	mount	3899	3897	5000
DetailsRowNoStyles	mount	3724	3660	5000
Dialog	mount	2188	2180	1000
DocumentCardTitle	mount	146	159	1000
Dropdown	mount	3425	3424	5000
FluentProviderNext	mount	7107	7198	5000
FocusTrapZone	mount	1863	1861	5000
FocusZone	mount	1853	1780	5000
IconButton	mount	1868	1847	5000
Label	mount	342	340	5000
Layer	mount	1915	1864	5000
Link	mount	480	485	5000
MakeStyles	mount	1777	1812	50000
MenuButton	mount	1558	1553	5000
MessageBar	mount	2063	2041	5000
Nav	mount	3379	3392	1000
OverflowSet	mount	1156	1098	5000
Panel	mount	2159	2078	1000
Persona	mount	888	887	1000
Pivot	mount	1432	1517	1000
PrimaryButton	mount	1354	1305	5000
Rating	mount	8245	8166	5000
SearchBox	mount	1404	1389	5000
Shimmer	mount	2696	2740	5000
Slider	mount	2039	1960	5000
SpinButton	mount	5486	5182	5000
Spinner	mount	421	424	5000
SplitButton	mount	3346	3327	5000
Stack	mount	518	522	5000
StackWithIntrinsicChildren	mount	1690	1643	5000
StackWithTextChildren	mount	4864	4852	5000
SwatchColorPicker	mount	10636	10717	5000
Tabs	mount	1498	1418	1000
TagPicker	mount	2705	2755	5000
TeachingBubble	mount	12002	12129	5000
Text	mount	459	446	5000
TextField	mount	1442	1470	5000
ThemeProvider	mount	1205	1191	5000
ThemeProvider	virtual-rerender	608	613	5000
Toggle	mount	830	836	5000
buttonNative	mount	117	111	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	177	155	1.14:1
AccordionMinimalPerf.default	180	162	1.11:1
TextMinimalPerf.default	390	354	1.1:1
ChatDuplicateMessagesPerf.default	317	290	1.09:1
TreeWith60ListItems.default	178	164	1.09:1
ImageMinimalPerf.default	428	397	1.08:1
MenuMinimalPerf.default	937	874	1.07:1
AnimationMinimalPerf.default	442	418	1.06:1
RefMinimalPerf.default	247	234	1.06:1
AvatarMinimalPerf.default	212	201	1.05:1
FlexMinimalPerf.default	306	292	1.05:1
FormMinimalPerf.default	449	429	1.05:1
TreeMinimalPerf.default	870	825	1.05:1
CardMinimalPerf.default	610	586	1.04:1
DropdownManyItemsPerf.default	746	719	1.04:1
HeaderMinimalPerf.default	398	384	1.04:1
InputMinimalPerf.default	1307	1261	1.04:1
PortalMinimalPerf.default	175	169	1.04:1
SegmentMinimalPerf.default	377	364	1.04:1
VideoMinimalPerf.default	673	647	1.04:1
BoxMinimalPerf.default	371	360	1.03:1
CarouselMinimalPerf.default	505	491	1.03:1
ListNestedPerf.default	594	574	1.03:1
ListWith60ListItems.default	689	667	1.03:1
LoaderMinimalPerf.default	749	725	1.03:1
IconMinimalPerf.default	654	635	1.03:1
ButtonOverridesMissPerf.default	1799	1760	1.02:1
DialogMinimalPerf.default	806	788	1.02:1
DividerMinimalPerf.default	401	393	1.02:1
HeaderSlotsPerf.default	818	804	1.02:1
LabelMinimalPerf.default	419	411	1.02:1
LayoutMinimalPerf.default	397	389	1.02:1
PopupMinimalPerf.default	615	604	1.02:1
TableManyItemsPerf.default	2060	2023	1.02:1
TableMinimalPerf.default	443	435	1.02:1
TooltipMinimalPerf.default	1089	1069	1.02:1
ChatMinimalPerf.default	687	680	1.01:1
ChatWithPopoverPerf.default	393	390	1.01:1
DatepickerMinimalPerf.default	5628	5591	1.01:1
ItemLayoutMinimalPerf.default	1316	1308	1.01:1
ListMinimalPerf.default	542	538	1.01:1
CustomToolbarPrototype.default	3963	3941	1.01:1
AttachmentSlotsPerf.default	1111	1112	1:1
ButtonMinimalPerf.default	182	182	1:1
ButtonSlotsPerf.default	586	588	1:1
CheckboxMinimalPerf.default	2838	2845	1:1
RadioGroupMinimalPerf.default	460	458	1:1
ReactionMinimalPerf.default	401	403	1:1
SplitButtonMinimalPerf.default	4033	4051	1:1
AlertMinimalPerf.default	290	293	0.99:1
EmbedMinimalPerf.default	4266	4295	0.99:1
TextAreaMinimalPerf.default	550	556	0.99:1
ToolbarMinimalPerf.default	983	990	0.99:1
DropdownMinimalPerf.default	3114	3176	0.98:1
MenuButtonMinimalPerf.default	1737	1764	0.98:1
ProviderMinimalPerf.default	1073	1092	0.98:1
StatusMinimalPerf.default	728	743	0.98:1
GridMinimalPerf.default	339	349	0.97:1
ListCommonPerf.default	681	702	0.97:1
RosterPerf.default	1283	1316	0.97:1
ProviderMergeThemesPerf.default	1651	1700	0.97:1
SliderMinimalPerf.default	1618	1667	0.97:1
SkeletonMinimalPerf.default	357	374	0.95:1

…ages build output

…er packages build output

Hotell · 2021-08-24T09:42:20Z

packages/babel-make-styles/tsconfig.json

@@ -1,6 +1,6 @@
 {
  "extends": "../../tsconfig.base.json",
-  "include": ["__fixtures__/**/code.ts", "src"],


this violates standardised build outputs when builds are executed with tsc. While we will loose IDE DX/type-checking, those non package implementation (production) files are being checked on CI via type-check for now.

This issue will be properly resolved via #19044

Hotell · 2021-08-24T09:46:13Z

scripts/just.config.ts


    return args.commonjs
-      ? 'ts:commonjs-only'
+      ? series('ts:commonjs-only')


returning string didn't work -> this was broken (never invoked if user specified --commonjs

Hotell · 2021-08-24T09:46:53Z

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


 function updateNpmScripts(tree: Tree, options: NormalizedSchema) {
+  /* eslint-disable @fluentui/max-len */
+  const scripts = {


hoisted updated scripts to one common dictionary for better readability and updated build:local

packages/babel-make-styles/package.json

msft-fluent-ui-bot · 2021-08-26T07:37:26Z

🎉@fluentui/react-tooltip@v9.0.0-alpha.72 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:32Z

🎉@fluentui/react-text@v9.0.0-alpha.6 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:35Z

🎉@fluentui/react-image@v9.0.0-alpha.69 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:38Z

🎉@fluentui/react-provider@v9.0.0-alpha.68 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:41Z

🎉@fluentui/react-popover@v9.0.0-alpha.32 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:44Z

🎉@fluentui/react-components@v9.0.0-alpha.96 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:47Z

🎉@fluentui/react-divider@v9.0.0-alpha.58 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:50Z

🎉@fluentui/react-menu@v9.0.0-alpha.67 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:53Z

🎉@fluentui/react-checkbox@v9.0.0-alpha.26 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:37:56Z

🎉@fluentui/react-button@v9.0.0-alpha.74 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:38:02Z

🎉@fluentui/react-badge@v9.0.0-alpha.70 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:38:05Z

🎉@fluentui/react-avatar@v9.0.0-alpha.70 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:38:08Z

🎉@fluentui/make-styles-webpack-loader@v9.0.0-alpha.12 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:38:11Z

🎉@fluentui/react-link@v9.0.0-alpha.72 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:38:14Z

🎉@fluentui/react-accordion@v9.0.0-alpha.65 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:38:20Z

🎉@fluentui/react-label@v9.0.0-alpha.30 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-08-26T07:38:38Z

🎉@fluentui/babel-make-styles@v9.0.0-alpha.39 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot assigned smhigley Aug 23, 2021

msft-fluent-ui-bot added the Area: Build System label Aug 23, 2021

Hotell changed the title ~~Hotell/build system/unify build local for all vnext~~ chore: unify build:local for all vnext packages Aug 23, 2021

Hotell added 6 commits August 24, 2021 11:32

refactor(tools): unify build:local npm scripts for vNext

63ae2d9

feat(scripts): make just ts tasks work with rootDir

ea10f2a

refactor: unify babel-make-styles and make-styles-webpack-loader pack…

82d9b3f

…ages build output

Change files

a3bf285

fix(scripts): make ts:compile work with --commonjs arg

753db73

feat(scripts): unify build task execution for web and node templates

c3a0ed9

Hotell force-pushed the hotell/build-system/unify-build-local-for-all-vnext branch from 5e6859b to c3a0ed9 Compare August 24, 2021 09:33

Hotell added 2 commits August 24, 2021 11:35

Change files

84c271f

fixup! refactor: unify babel-make-styles and make-styles-webpack-load…

9553463

…er packages build output

Hotell commented Aug 24, 2021

View reviewed changes

feat(tools): set platform tags based on context

8fc6a5c

Hotell marked this pull request as ready for review August 24, 2021 11:24

Hotell requested review from a team as code owners August 24, 2021 11:24

Hotell added this to the August Project Cycle Q3 2021 milestone Aug 24, 2021

theerebuss approved these changes Aug 24, 2021

View reviewed changes

packages/babel-make-styles/package.json Show resolved Hide resolved

Hotell linked an issue Aug 25, 2021 that may be closed by this pull request

new dx (1st stage): api-extractor issue for node packages #18747

Closed

Hotell enabled auto-merge (squash) August 25, 2021 09:54

layershifter approved these changes Aug 25, 2021

View reviewed changes

Hotell merged commit 210a7de into microsoft:master Aug 25, 2021

msft-fluent-ui-bot mentioned this pull request Aug 26, 2021

tools: set build:local and api-extractor based on package context #19110

Closed

Conversation

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

Uh oh!

Pull request checklist

Description of changes

Focus areas to test

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Hotell Aug 24, 2021 • 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 Aug 24, 2021

Choose a reason for hiding this comment

Uh oh!

Hotell Aug 24, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

msft-fluent-ui-bot commented Aug 26, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Hotell commented Aug 23, 2021 •

edited

Loading

fabricteam commented Aug 23, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 23, 2021 •

edited

Loading

size-auditor bot commented Aug 23, 2021 •

edited

Loading

fabricteam commented Aug 23, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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

Hotell Aug 24, 2021 •

edited

Loading