refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries #25738

Hotell · 2022-11-21T17:57:16Z

Pre-requirements

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

Previous Behavior

v0,v8 and some v9 tooling setups are used cross boundary. This makes decoupling our tools to standalone packages with proper scope impossible. Also some files cannot be packaged properly and are left in scripts/ root.

New Behavior

One of final step for enabling packaging sub-folder within ./scripts (only few leftower modules are now within scripts/ root.

v0,v8 has been decoupled to isolated boundaries in 2 areas:

within /scripts major refactoring

domain independent functionality has been moved to existing boundaries
- sh from gulp/ to utils/
- getDefaultEnvironmentVars from webpack/ to monorepo/
- lernaNorthstarAlias.js has been refactored to generic getLernaAliases within monorepo/
- config.ts has been removed from usage outside gulp/ and moved to gulp/ (v0 usage only)

within apps/packages

removal of scripts/config.ts dependency (unnecessary module abstraction that crosses boundaries in wrong way - its scope is v0 but is used everywhere for no benefit)

Related Issue(s)

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

DustyTheBot · 2022-11-21T18:01:10Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against ad0754a

size-auditor · 2022-11-21T18:09:38Z

Asset size changes

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

Baseline commit: a5ea64ce03f9292af9f799283bbd022ef037fbc1 (build)

fabricteam · 2022-11-21T18:10:08Z

📊 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.294 kB` `24.443 kB`
`react-alert` Alert	`82.967 kB` `21.022 kB`
`react-avatar` Avatar	`51.076 kB` `14.285 kB`
`react-avatar` AvatarGroup	`15.006 kB` `6.009 kB`
`react-avatar` AvatarGroupItem	`67.306 kB` `18.581 kB`
`react-badge` Badge	`23.357 kB` `7.361 kB`
`react-badge` CounterBadge	`24.247 kB` `7.643 kB`
`react-badge` PresenceBadge	`24.001 kB` `7.049 kB`
`react-button` Button	`32.923 kB` `8.61 kB`
`react-button` CompoundButton	`39.953 kB` `9.933 kB`
`react-button` MenuButton	`37.611 kB` `9.942 kB`
`react-button` SplitButton	`45.057 kB` `11.323 kB`
`react-button` ToggleButton	`48.753 kB` `10.715 kB`
`react-card` Card - All	`71.873 kB` `20.936 kB`
`react-card` Card	`67.651 kB` `19.892 kB`
`react-card` CardFooter	`8.617 kB` `3.62 kB`
`react-card` CardHeader	`9.792 kB` `3.995 kB`
`react-card` CardPreview	`8.718 kB` `3.674 kB`
`react-combobox` Combobox (including child components)	`78.244 kB` `25.015 kB`
`react-combobox` Dropdown (including child components)	`77.531 kB` `24.927 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`59.018 kB` `16.371 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`186.456 kB` `52.327 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.48 kB` `11.037 kB`
`react-dialog` Dialog (including children components)	`83.036 kB` `24.754 kB`
`react-divider` Divider	`16.515 kB` `5.921 kB`
`react-image` Image	`10.836 kB` `4.283 kB`
`react-infobutton` InfoButton	`117.922 kB` `35.391 kB`
`react-input` Input	`24.194 kB` `7.89 kB`
`react-label` Label	`9.394 kB` `3.88 kB`
`react-link` Link	`11.862 kB` `4.885 kB`
`react-menu` Menu (including children components)	`117.61 kB` `36.287 kB`
`react-menu` Menu (including selectable components)	`120.679 kB` `36.82 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`57.131 kB` `15.951 kB`
`react-popover` Popover	`103.666 kB` `31.858 kB`
`react-portal` Portal	`10.495 kB` `3.851 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.826 kB` `7.417 kB`
`react-progress` Progress	`13.536 kB` `5.107 kB`
`react-provider` FluentProvider	`15.817 kB` `5.905 kB`
`react-radio` Radio	`36.446 kB` `12.123 kB`
`react-radio` RadioGroup	`14.304 kB` `5.72 kB`
`react-select` Select	`23.474 kB` `8.017 kB`
`react-slider` Slider	`32.118 kB` `10.192 kB`
`react-spinbutton` SpinButton	`44.502 kB` `12.812 kB`
`react-spinner` Spinner	`20.013 kB` `6.446 kB`
`react-switch` Switch	`33.453 kB` `10.581 kB`
`react-text` Text - Default	`11.838 kB` `4.625 kB`
`react-text` Text - Wrappers	`15.148 kB` `5.06 kB`
`react-textarea` Textarea	`25.733 kB` `8.328 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.722 kB` `6.462 kB`
`react-theme` Teams: Light theme	`17.51 kB` `5.075 kB`
`react-tooltip` Tooltip	`42.032 kB` `14.739 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against a5ea64ce03f9292af9f799283bbd022ef037fbc1}

codesandbox-ci · 2022-11-21T18:12:23Z

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

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

fabricteam · 2022-11-21T18:12:44Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1277	1269	5000
Button	mount	923	909	5000
FluentProvider	mount	1481	1471	5000
FluentProviderWithTheme	mount	575	585	10
FluentProviderWithTheme	virtual-rerender	541	542	10
FluentProviderWithTheme	virtual-rerender-with-unmount	576	575	10
MakeStyles	mount	1963	1978	50000
SpinButton	mount	2320	2321	5000

fabricteam · 2022-11-21T18:16:53Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2022-11-21T18:20:23Z

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 2 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1752 screenshots unchanged, 0 screenshots with different dimensions and 2 screenshots with visible difference.

unknown 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.size+active+badge.normal.chromium.png	7	Changed
Avatar Converged.size+active+ring-shadow.normal.chromium.png	7	Changed

fabricteam · 2022-11-21T18:22:00Z

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

⚠️ No perf measurements available

fabricteam · 2022-11-21T18:26:24Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
GroupedList	mount	1832	2019	2	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1201	1202	5000
Breadcrumb	mount	2815	2872	1000
Checkbox	mount	2642	2629	5000
CheckboxBase	mount	2362	2371	5000
ChoiceGroup	mount	4294	4303	5000
ComboBox	mount	1152	1158	1000
CommandBar	mount	9241	9317	1000
ContextualMenu	mount	10103	10043	1000
DefaultButton	mount	1374	1388	5000
DetailsRow	mount	3407	3376	5000
DetailsRowFast	mount	3364	3368	5000
DetailsRowNoStyles	mount	3224	3230	5000
Dialog	mount	2920	2932	1000
DocumentCardTitle	mount	589	579	1000
Dropdown	mount	3185	3151	5000
FocusTrapZone	mount	1972	1964	5000
FocusZone	mount	1925	1957	5000
GroupedList	mount	1832	2019	2	Possible regression
GroupedList	virtual-rerender	1096	1101	2
GroupedList	virtual-rerender-with-unmount	1638	1627	2
GroupedListV2	mount	566	575	2
GroupedListV2	virtual-rerender	557	548	2
GroupedListV2	virtual-rerender-with-unmount	555	571	2
IconButton	mount	1791	1786	5000
Label	mount	758	765	5000
Layer	mount	4195	4181	5000
Link	mount	835	849	5000
MenuButton	mount	1618	1610	5000
MessageBar	mount	2392	2333	5000
Nav	mount	3050	3073	1000
OverflowSet	mount	1417	1393	5000
Panel	mount	2513	2485	1000
Persona	mount	1235	1290	1000
Pivot	mount	1521	1530	1000
PrimaryButton	mount	1486	1475	5000
Rating	mount	6972	6964	5000
SearchBox	mount	1509	1504	5000
Shimmer	mount	2926	2882	5000
Slider	mount	2099	2085	5000
SpinButton	mount	4265	4334	5000
Spinner	mount	828	827	5000
SplitButton	mount	2843	2835	5000
Stack	mount	875	873	5000
StackWithIntrinsicChildren	mount	2312	2310	5000
StackWithTextChildren	mount	5020	5032	5000
SwatchColorPicker	mount	9447	9509	5000
TagPicker	mount	2321	2380	5000
TeachingBubble	mount	74752	74631	5000
Text	mount	824	832	5000
TextField	mount	1567	1553	5000
ThemeProvider	mount	1454	1448	5000
ThemeProvider	virtual-rerender	1146	1144	5000
ThemeProvider	virtual-rerender-with-unmount	2004	2002	5000
Toggle	mount	1143	1121	5000
buttonNative	mount	541	537	5000

packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts

packages/fluentui/projects-test/src/rollup.ts

scripts/gulp/config.ts

Hotell · 2022-11-29T11:44:47Z

scripts/gulp/plugins/gulp-webpack.ts

 const DEV_SKIP_ERRORS = __DEV__ && __SKIP_ERRORS__;

-const webpackPlugin = (webpackConfig: any, cb: (errror?: any) => void, onComplete = (err: any, stats: any) => {}) => {
+const webpackPlugin = (webpackConfig: any, cb: (error?: any) => void, onComplete = (err: any, stats: any) => {}) => {


scripts/gulp/tsconfig.json

Hotell · 2022-11-29T11:47:07Z

scripts/gulp/webpack/webpack.config.stats.ts

 import TerserWebpackPlugin from 'terser-webpack-plugin';
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

+import config from '../config';


style: separate relative import with absolute

Hotell · 2022-11-29T11:48:32Z

scripts/monorepo/get-lerna-aliases.js

+ *
+ * @param {{excludedPackages:string[];type:keyof typeof lernaAlias} & lernaAlias.Options} options
+ */
+function getLernaAliases(options) {


generic helper that replaces lernaAliasNorthstar.js

Hotell · 2022-11-29T11:49:56Z

scripts/projects-test/utils.ts

  fsExtra.copySync(srcFolder, target, { recursive: true });
 }
+
+export { workspaceRoot };


re-exporting for convenience, apps using this domain dont have to import anything else

Hotell · 2022-11-29T11:51:05Z

scripts/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { findConfig } from './find-config';


this pattern provides proper typings in TS scope, without need of manually duplicating definitions like we do in scripts/monorepo/index.d.ts

…undaries

… setup

* master: BREAKING: `useTable` renamed to `useTableFeatures` (microsoft#25797) chore: add retries for navigation in ssr-tests-v9 (microsoft#25844) fix: Cell actions should have correct background when row focused within (microsoft#25790) applying package updates Disable 3 Avatar Converged active stories (microsoft#25765) chore: introduce TS path aliases for improved DX in v8 (microsoft#25778) chore: prepare release react-northstar 0.65.0 (microsoft#25446) refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries (microsoft#25738) Support single point in area chart (microsoft#25842) chore: enable isolateModules in all v8 packages (microsoft#25774) chore: refactor styles for Button (microsoft#25216) feat: Improve docs for `DataGrid`, export as unstable (microsoft#25805) applying package updates fix: Allow data-selection-disabled to be respected by DetailsRow (microsoft#25836) docs(rfcs): Update recipes rfc with chosen option and add more details (microsoft#25823) chore(react-textarea): migrate to new package structure (microsoft#25820) chore(react-switch): migrate to new package structure (microsoft#25819) fix(react-avatar): AvatarGroup's pie layout places inline items correctly in rtl (microsoft#25822) chore: add few improvements to toolbar stories (microsoft#25635)

…undaries (microsoft#25738) * refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries * refactor(project-tests): use generateFiles to unify and simplify test setup

msft-fluent-ui-bot assigned ling1726 Nov 21, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 21, 2022

Hotell changed the title ~~Hotell/build/scripts/ts solution config v5~~ refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries Nov 21, 2022

Hotell unassigned ling1726 Nov 21, 2022

Hotell force-pushed the hotell/build/scripts/ts-solution-config-v5 branch from 515071a to 7040adf Compare November 21, 2022 18:48

Hotell removed this from the October Project Cycle Q4 2022 milestone Nov 22, 2022

msft-fluent-ui-bot added the Area: Build System label Nov 22, 2022

Hotell mentioned this pull request Nov 22, 2022

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

Closed

18 tasks

Hotell added the Status: Blocked Resolution blocked by another issue label Nov 28, 2022

Hotell force-pushed the hotell/build/scripts/ts-solution-config-v5 branch from 6d57850 to 5fc9eb7 Compare November 29, 2022 11:34

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 29, 2022

Hotell commented Nov 29, 2022

View reviewed changes

Hotell removed the Status: Blocked Resolution blocked by another issue label Nov 30, 2022

Hotell marked this pull request as ready for review November 30, 2022 10:00

Hotell requested review from a team as code owners November 30, 2022 10:00

Hotell removed this from the October Project Cycle Q4 2022 milestone Nov 30, 2022

layershifter approved these changes Nov 30, 2022

View reviewed changes

ling1726 approved these changes Nov 30, 2022

View reviewed changes

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 30, 2022

refactor(scripts): encapsulate v0 and v8 tooling within its domain bo…

4e5084c

…undaries

refactor(project-tests): use generateFiles to unify and simplify test…

ad0754a

… setup

Hotell force-pushed the hotell/build/scripts/ts-solution-config-v5 branch from f04d9fb to ad0754a Compare November 30, 2022 13:38

Hotell enabled auto-merge (squash) November 30, 2022 13:39

Hotell merged commit b3b0d78 into microsoft:master Nov 30, 2022

refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries #25738

refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries #25738

Uh oh!

Conversation

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

Uh oh!

Pre-requirements

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

DustyTheBot commented Nov 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

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

Uh oh!

Uh oh!

fabricteam commented Nov 21, 2022

Perf Analysis (@fluentui/react-northstar)

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Hotell commented Nov 21, 2022 •

edited

Loading

DustyTheBot commented Nov 21, 2022 •

edited

Loading

size-auditor bot commented Nov 21, 2022 •

edited

Loading

fabricteam commented Nov 21, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 21, 2022 •

edited

Loading

fabricteam commented Nov 21, 2022 •

edited

Loading

fabricteam commented Nov 21, 2022 •

edited

Loading

fabricteam commented Nov 21, 2022 •

edited

Loading

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

fabricteam commented Nov 21, 2022 •

edited

Loading