feat(scripts-babel): implement v9 babel preset to properly resolve griffel module mappings #27313

Hotell · 2023-03-23T18:01:11Z

Previous Behavior

v9 packages that use babelrc preset-v9 trigger warnings caused by invalid module path created by module-resolver within griffel preset transform.

New Behavior

v9 packages trigger no warnings.

preset-v9 has been completely refactored to match true mappings based on tsconfig.base.json.

Performance:

Processing tsconfig json within babel execution adds some perf owerhead ( around 500ms ) but this is acceptable taking into consideration that mappings are 100% correct all the time. When griffel will migrate to linaria 4 this overhead will be mitigated as griffel will be able to transrorm swc commonjs module output.

Related Issue(s)

Fixes build: babel-postprocess triggers warnings for packages using swc #27304

codesandbox-ci · 2023-03-23T18:17:53Z

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 2b292b0:

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

size-auditor · 2023-03-23T18:21:24Z

Asset size changes

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

Baseline commit: 7c5c363d818caa8c02a3e598e4931b1e79f24829 (build)

fabricteam · 2023-03-23T18:26:09Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	885	882	5000
Button	mount	589	593	5000
Field	mount	1571	1529	5000
FluentProvider	mount	1083	1095	5000
FluentProviderWithTheme	mount	294	298	10
FluentProviderWithTheme	virtual-rerender	266	283	10
FluentProviderWithTheme	virtual-rerender-with-unmount	291	286	10
InfoButton	mount	200	195	5000
MakeStyles	mount	1361	1368	50000
Persona	mount	2120	2055	5000
SpinButton	mount	1803	1838	5000

fabricteam · 2023-03-23T18:30:38Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`560 B` `352 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.314 kB`
`react-accordion` Accordion (including children components)	`88.882 kB` `26.551 kB`
`react-alert` Alert	`96.647 kB` `23.133 kB`
`react-avatar` Avatar	`60.312 kB` `15.579 kB`
`react-avatar` AvatarGroup	`18.178 kB` `6.683 kB`
`react-avatar` AvatarGroupItem	`76.573 kB` `20.086 kB`
`react-badge` Badge	`25.85 kB` `7.585 kB`
`react-badge` CounterBadge	`26.833 kB` `7.889 kB`
`react-badge` PresenceBadge	`34.458 kB` `8.693 kB`
`react-button` Button	`39.749 kB` `9.959 kB`
`react-button` CompoundButton	`46.921 kB` `11.428 kB`
`react-button` MenuButton	`44.437 kB` `11.306 kB`
`react-button` SplitButton	`52.931 kB` `12.872 kB`
`react-button` ToggleButton	`58.121 kB` `11.878 kB`
`react-card` Card - All	`83.489 kB` `23.894 kB`
`react-card` Card	`78.308 kB` `22.431 kB`
`react-card` CardFooter	`9.035 kB` `3.799 kB`
`react-card` CardHeader	`10.959 kB` `4.503 kB`
`react-card` CardPreview	`9.84 kB` `4.153 kB`
`react-checkbox` Checkbox	`36.067 kB` `10.856 kB`
`react-checkbox` CheckboxField	`43.019 kB` `12.787 kB`
`react-combobox` Combobox (including child components)	`88.73 kB` `28.105 kB`
`react-combobox` ComboboxField	`85.147 kB` `27.871 kB`
`react-combobox` Dropdown (including child components)	`87.428 kB` `27.853 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.994 kB` `18.395 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.4 kB` `57.516 kB`
`react-components` react-components: FluentProvider & webLightTheme	`38.819 kB` `12.351 kB`
`react-dialog` Dialog (including children components)	`93.616 kB` `27.452 kB`
`react-divider` Divider	`19.863 kB` `6.697 kB`
`react-field` Field	`20.552 kB` `7.092 kB`
`react-image` Image	`14.011 kB` `4.993 kB`
`react-infobutton` InfoButton	`130.577 kB` `39.439 kB`
`react-infobutton` InfoLabel	`133.874 kB` `40.488 kB`
`react-input` Input	`25.747 kB` `7.697 kB`
`react-input` InputField	`35.723 kB` `10.637 kB`
`react-label` Label	`12.57 kB` `4.586 kB`
`react-link` Link	`12.301 kB` `5.07 kB`
`react-menu` Menu (including children components)	`130.926 kB` `39.629 kB`
`react-menu` Menu (including selectable components)	`134.062 kB` `40.161 kB`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-persona` Persona	`67.338 kB` `17.524 kB`
`react-popover` Popover	`117.58 kB` `35.828 kB`
`react-portal` Portal	`11.649 kB` `4.263 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`
`react-progress` ProgressBar	`15.961 kB` `5.675 kB`
`react-progress` ProgressField	`26.435 kB` `8.859 kB`
`react-provider` FluentProvider	`20.766 kB` `7.119 kB`
`react-radio` Radio	`35.48 kB` `11.126 kB`
`react-radio` RadioGroup	`17.988 kB` `6.544 kB`
`react-radio` RadioGroupField	`28.166 kB` `9.735 kB`
`react-select` Select	`26.957 kB` `8.766 kB`
`react-select` SelectField	`36.293 kB` `11.316 kB`
`react-slider` Slider	`35.919 kB` `11.059 kB`
`react-slider` SliderField	`45.847 kB` `14.005 kB`
`react-spinbutton` SpinButton	`35.648 kB` `10.348 kB`
`react-spinbutton` SpinButtonField	`44.671 kB` `12.812 kB`
`react-spinner` Spinner	`23.425 kB` `7.195 kB`
`react-switch` Switch	`31.413 kB` `9.294 kB`
`react-switch` SwitchField	`38.317 kB` `11.21 kB`
`react-table` DataGrid	`149.878 kB` `40.662 kB`
`react-table` Table (Primitives only)	`47.119 kB` `12.703 kB`
`react-table` Table as DataGrid	`138.018 kB` `35.282 kB`
`react-table` Table (Selection only)	`85.849 kB` `21.303 kB`
`react-table` Table (Sort only)	`85.179 kB` `21.113 kB`
`react-text` Text - Default	`15.018 kB` `5.327 kB`
`react-text` Text - Wrappers	`15.572 kB` `5.23 kB`
`react-textarea` Textarea	`29.07 kB` `9.081 kB`
`react-textarea` TextareaField	`39.454 kB` `12.055 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.33 kB` `6.764 kB`
`react-theme` Teams: Light theme	`17.895 kB` `5.162 kB`
`react-tooltip` Tooltip	`49.388 kB` `16.815 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 7c5c363d818caa8c02a3e598e4931b1e79f24829}

fabricteam · 2023-03-23T18:33:15Z

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

⚠️ No perf measurements available

fabricteam · 2023-03-23T18:36:52Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-03-23T18:46:00Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	990	983	5000
Breadcrumb	mount	2328	2380	1000
Checkbox	mount	2259	2272	5000
CheckboxBase	mount	2001	2014	5000
ChoiceGroup	mount	3847	3915	5000
ComboBox	mount	1042	1058	1000
CommandBar	mount	8395	8394	1000
ContextualMenu	mount	18127	18087	1000
DefaultButton	mount	1158	1177	5000
DetailsRow	mount	3097	3076	5000
DetailsRowFast	mount	3087	3106	5000
DetailsRowNoStyles	mount	2829	2862	5000
Dialog	mount	3413	3472	1000
DocumentCardTitle	mount	445	469	1000
Dropdown	mount	2745	2755	5000
FocusTrapZone	mount	1664	1652	5000
FocusZone	mount	1559	1587	5000
GroupedList	mount	51133	59678	2
GroupedList	virtual-rerender	24861	24738	2
GroupedList	virtual-rerender-with-unmount	76490	76513	2
GroupedListV2	mount	456	457	2
GroupedListV2	virtual-rerender	440	421	2
GroupedListV2	virtual-rerender-with-unmount	444	448	2
IconButton	mount	1600	1583	5000
Label	mount	556	573	5000
Layer	mount	3672	3764	5000
Link	mount	666	660	5000
MenuButton	mount	1399	1398	5000
MessageBar	mount	27459	27454	5000
Nav	mount	2734	2731	1000
OverflowSet	mount	1130	1156	5000
Panel	mount	2167	2197	1000
Persona	mount	1125	1111	1000
Pivot	mount	1373	1354	1000
PrimaryButton	mount	1277	1266	5000
Rating	mount	5863	5877	5000
SearchBox	mount	1283	1279	5000
Shimmer	mount	2465	2468	5000
Slider	mount	1831	1802	5000
SpinButton	mount	3925	3948	5000
Spinner	mount	637	649	5000
SplitButton	mount	2673	2702	5000
Stack	mount	674	665	5000
StackWithIntrinsicChildren	mount	1263	1257	5000
StackWithTextChildren	mount	3384	3387	5000
SwatchColorPicker	mount	8393	8483	5000
TagPicker	mount	2172	2132	5000
Text	mount	635	629	5000
TextField	mount	1316	1353	5000
ThemeProvider	mount	1244	1240	5000
ThemeProvider	virtual-rerender	893	903	5000
ThemeProvider	virtual-rerender-with-unmount	1799	1853	5000
Toggle	mount	923	922	5000
buttonNative	mount	413	413	5000

scripts/babel/preset-v9.spec.ts

…iffel module mappings

.babelrc-v9.json

fabricteam · 2023-03-28T16:00:54Z

🕵 FluentUI-v0 No visual regressions between this PR and main

Modify the change from #27313 to use path.resolve to ensure the slashes are in the correct direction on Windows.

msft-fluent-ui-bot assigned behowell Mar 23, 2023

msft-fluent-ui-bot added the Area: Build System label Mar 23, 2023

github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 23, 2023

Hotell changed the title ~~feat(scripts-babel): implement v9 babel preset to properly resolve gr…~~ feat(scripts-babel): implement v9 babel preset to properly resolve griffel module mappings Mar 23, 2023

Hotell force-pushed the hotell/build/fix/27304 branch from 9f203c8 to 9825bc2 Compare March 23, 2023 18:02

Hotell unassigned behowell Mar 23, 2023

Hotell force-pushed the hotell/build/fix/27304 branch from 9825bc2 to aad247d Compare March 23, 2023 18:06

Hotell marked this pull request as ready for review March 24, 2023 07:48

Hotell requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners March 24, 2023 07:48

ling1726 reviewed Mar 24, 2023

View reviewed changes

scripts/babel/preset-v9.spec.ts Outdated Show resolved Hide resolved

layershifter approved these changes Mar 27, 2023

View reviewed changes

feat(scripts-babel): implement v9 babel preset to properly resolve gr…

2b292b0

…iffel module mappings

Hotell force-pushed the hotell/build/fix/27304 branch from aad247d to 2b292b0 Compare March 28, 2023 15:31

Hotell requested a review from ling1726 March 28, 2023 15:31

fabricteam reviewed Mar 28, 2023

View reviewed changes

.babelrc-v9.json Show resolved Hide resolved

JustSlone approved these changes Mar 28, 2023

View reviewed changes

Hotell enabled auto-merge (squash) March 29, 2023 09:24

ling1726 approved these changes Mar 29, 2023

View reviewed changes

Hotell merged commit 33a032b into microsoft:master Mar 29, 2023

behowell mentioned this pull request Mar 31, 2023

fix: Fix babel build error on Windows #27406

Merged

behowell added a commit that referenced this pull request Mar 31, 2023

fix: Fix babel build error on windows (#27406)

34d6188

Modify the change from #27313 to use path.resolve to ensure the slashes are in the correct direction on Windows.

Hotell mentioned this pull request Apr 3, 2023

fix(scripts-storybook): make sure to exclude our custom v9 babel preset from storybook babel-loader #27417

Merged

Hotell mentioned this pull request Jun 27, 2023

[Bug]: build task broken on local env after introducing swc and babel module aliases setup #27519

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(scripts-babel): implement v9 babel preset to properly resolve griffel module mappings #27313

feat(scripts-babel): implement v9 babel preset to properly resolve griffel module mappings #27313

Uh oh!

Hotell commented Mar 23, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Mar 23, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Mar 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Mar 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Mar 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Mar 23, 2023

Uh oh!

fabricteam commented Mar 23, 2023 •

edited

Loading

Uh oh!

fabricteam commented Mar 23, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Mar 28, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

feat(scripts-babel): implement v9 babel preset to properly resolve griffel module mappings #27313

feat(scripts-babel): implement v9 babel preset to properly resolve griffel module mappings #27313

Uh oh!

Conversation

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

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Mar 23, 2023

Perf Analysis (@fluentui/react-northstar)

Uh oh!

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

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Mar 28, 2023

🕵 FluentUI-v0 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Hotell commented Mar 23, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 23, 2023 •

edited

Loading

size-auditor bot commented Mar 23, 2023 •

edited

Loading

fabricteam commented Mar 23, 2023 •

edited

Loading

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

fabricteam commented Mar 23, 2023 •

edited

Loading

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

fabricteam commented Mar 23, 2023 •

edited

Loading

fabricteam commented Mar 23, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)