chore: add Babel plugins for more components by layershifter · Pull Request #18968 · microsoft/fluentui

layershifter · 2021-07-16T09:13:14Z

Pull request checklist

~~Addresses an existing issue: Fixes #0000~~
Include a change request file using $ yarn change

Description of changes

This PR adds required Babel plugins (see #18037 for details). Also added .babelrc.json into scripts/create-package/plop-templates-react to have these files automatically.

fabricteam · 2021-07-16T09:16:37Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`161.387 kB` `43.898 kB`	`179.138 kB` `50.762 kB`	`-17.751 kB` `-6.864 kB`
`react-label` Label	`-9.828 kB` `-2.976 kB`	`9.397 kB` `3.839 kB`	`-19.225 kB` `-6.815 kB`
`react-popover` Popover	`106.108 kB` `29.865 kB`	`123.523 kB` `35.92 kB`	`-17.415 kB` `-6.055 kB`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`78.492 kB` `23.211 kB`
`react-avatar` Avatar	`54.242 kB` `14.662 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	`24.934 kB` `8.001 kB`
`react-button` CompoundButton	`30.226 kB` `8.878 kB`
`react-button` MenuButton	`26.521 kB` `8.509 kB`
`react-button` ToggleButton	`34.531 kB` `8.637 kB`
`react-components` react-components: FluentProvider & webLightTheme	`35.659 kB` `11.467 kB`
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 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)	`113.952 kB` `34.39 kB`
`react-menu` Menu (including selectable components)	`115.964 kB` `34.653 kB`
`react-portal` Portal	`7.78 kB` `2.672 kB`
`react-positioning` usePopper	`23.155 kB` `7.94 kB`
`react-provider` FluentProvider	`16.235 kB` `5.972 kB`
`react-theme` Teams: all themes	`32.367 kB` `6.546 kB`
`react-theme` Teams: Light theme	`19.673 kB` `5.532 kB`
`react-tooltip` Tooltip	`45.279 kB` `15.45 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against 17c38c14b8b57d0150341cb914fb78c8e295443c}

codesandbox-ci · 2021-07-16T09:20:08Z

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 0d75442:

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-07-16T09:24:28Z

Asset size changes

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

Baseline commit: 17c38c14b8b57d0150341cb914fb78c8e295443c (build)

fabricteam · 2021-07-16T09:37:50Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Text	mount	467	477	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	850	838	5000
BaseButton	mount	963	981	5000
Breadcrumb	mount	2656	2689	1000
ButtonNext	mount	471	455	5000
Checkbox	mount	1625	1603	5000
CheckboxBase	mount	1431	1501	5000
ChoiceGroup	mount	5145	5094	5000
ComboBox	mount	999	1013	1000
CommandBar	mount	10661	10239	1000
ContextualMenu	mount	6351	6640	1000
DefaultButton	mount	1270	1231	5000
DetailsRow	mount	3988	4086	5000
DetailsRowFast	mount	3952	4033	5000
DetailsRowNoStyles	mount	3847	3834	5000
Dialog	mount	2307	2263	1000
DocumentCardTitle	mount	157	144	1000
Dropdown	mount	3484	3468	5000
FluentProviderNext	mount	6996	6986	5000
FocusTrapZone	mount	1861	1796	5000
FocusZone	mount	1801	1920	5000
IconButton	mount	1841	1824	5000
Label	mount	347	363	5000
Layer	mount	1905	1974	5000
Link	mount	496	506	5000
MakeStyles	mount	1869	1857	50000
MenuButton	mount	1564	1583	5000
MessageBar	mount	2036	2113	5000
Nav	mount	3470	3463	1000
OverflowSet	mount	1087	1043	5000
Panel	mount	2129	2076	1000
Persona	mount	871	923	1000
Pivot	mount	1469	1501	1000
PrimaryButton	mount	1354	1421	5000
Rating	mount	8281	8334	5000
SearchBox	mount	1443	1496	5000
Shimmer	mount	2732	2790	5000
Slider	mount	2048	2045	5000
SpinButton	mount	5272	5184	5000
Spinner	mount	444	435	5000
SplitButton	mount	3361	3451	5000
Stack	mount	550	538	5000
StackWithIntrinsicChildren	mount	1672	1662	5000
StackWithTextChildren	mount	5108	4978	5000
SwatchColorPicker	mount	10888	10904	5000
Tabs	mount	1469	1491	1000
TagPicker	mount	2592	2585	5000
TeachingBubble	mount	12300	11949	5000
Text	mount	467	477	5000	Possible regression
TextField	mount	1477	1493	5000
ThemeProvider	mount	1261	1233	5000
ThemeProvider	virtual-rerender	629	641	5000
Toggle	mount	839	842	5000
buttonNative	mount	105	112	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
SegmentMinimalPerf.default	408	376	1.09:1
FormMinimalPerf.default	470	436	1.08:1
StatusMinimalPerf.default	787	729	1.08:1
TableMinimalPerf.default	462	429	1.08:1
AccordionMinimalPerf.default	176	164	1.07:1
AvatarMinimalPerf.default	217	202	1.07:1
ListCommonPerf.default	735	689	1.07:1
ButtonSlotsPerf.default	615	579	1.06:1
ChatDuplicateMessagesPerf.default	324	307	1.06:1
ImageMinimalPerf.default	443	417	1.06:1
TextMinimalPerf.default	388	365	1.06:1
BoxMinimalPerf.default	387	369	1.05:1
CarouselMinimalPerf.default	526	501	1.05:1
TreeWith60ListItems.default	199	189	1.05:1
ItemLayoutMinimalPerf.default	1370	1312	1.04:1
ChatMinimalPerf.default	719	697	1.03:1
DialogMinimalPerf.default	841	817	1.03:1
HeaderMinimalPerf.default	410	399	1.03:1
RefMinimalPerf.default	253	246	1.03:1
AttachmentSlotsPerf.default	1198	1169	1.02:1
DropdownMinimalPerf.default	3310	3257	1.02:1
FlexMinimalPerf.default	324	318	1.02:1
LabelMinimalPerf.default	430	423	1.02:1
ListMinimalPerf.default	563	553	1.02:1
ListWith60ListItems.default	711	700	1.02:1
MenuMinimalPerf.default	937	922	1.02:1
IconMinimalPerf.default	681	669	1.02:1
CardMinimalPerf.default	631	625	1.01:1
ChatWithPopoverPerf.default	391	386	1.01:1
DatepickerMinimalPerf.default	5895	5862	1.01:1
DropdownManyItemsPerf.default	787	777	1.01:1
LoaderMinimalPerf.default	754	750	1.01:1
MenuButtonMinimalPerf.default	1756	1734	1.01:1
ProviderMinimalPerf.default	1079	1067	1.01:1
TableManyItemsPerf.default	2106	2082	1.01:1
TextAreaMinimalPerf.default	551	548	1.01:1
AnimationMinimalPerf.default	441	439	1:1
HeaderSlotsPerf.default	865	868	1:1
InputMinimalPerf.default	1340	1342	1:1
LayoutMinimalPerf.default	415	417	1:1
PopupMinimalPerf.default	601	601	1:1
ReactionMinimalPerf.default	424	426	1:1
SliderMinimalPerf.default	1635	1631	1:1
SplitButtonMinimalPerf.default	4109	4119	1:1
CustomToolbarPrototype.default	4052	4033	1:1
TooltipMinimalPerf.default	1083	1088	1:1
VideoMinimalPerf.default	704	702	1:1
AlertMinimalPerf.default	302	305	0.99:1
ButtonOverridesMissPerf.default	1819	1839	0.99:1
CheckboxMinimalPerf.default	2893	2920	0.99:1
DividerMinimalPerf.default	418	421	0.99:1
PortalMinimalPerf.default	175	177	0.99:1
RadioGroupMinimalPerf.default	490	494	0.99:1
ToolbarMinimalPerf.default	1001	1010	0.99:1
TreeMinimalPerf.default	844	853	0.99:1
ButtonMinimalPerf.default	190	193	0.98:1
EmbedMinimalPerf.default	4424	4503	0.98:1
ListNestedPerf.default	589	600	0.98:1
ProviderMergeThemesPerf.default	1679	1714	0.98:1
SkeletonMinimalPerf.default	394	402	0.98:1
GridMinimalPerf.default	365	377	0.97:1
RosterPerf.default	1248	1309	0.95:1
AttachmentMinimalPerf.default	162	178	0.91:1

ling1726

Can you just add this file in the create-package script ?

layershifter · 2021-07-16T11:02:18Z

Can you just add this file in the create-package script ?

Will do 👍

…hore/add-missing-babel-plugins

layershifter · 2021-07-16T12:59:36Z

Can you just add this file in the create-package script ?

@ling1726 I added .babelrc.json in ee8ff1b. Do I correctly get the suggestion?

ling1726 · 2021-07-16T13:01:52Z

Can you just add this file in the create-package script ?

@ling1726 Lingfan Gao FTE I added .babelrc.json in ee8ff1b. Do I correctly get the suggestion?

Yeah, thanks 👍 it's the only we can know that at least it should be there

layershifter · 2021-07-16T13:20:57Z

ERR! [1:02:11 PM] x Error: /mnt/work/2/s/packages/react-text/lib/components/Display/Display.js: We intentionally do not support serialization of functions, this branch should be never executed
ERR!     at Object.astify (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/astify.js:14:19)
ERR!     at Object.evaluatePathsInVM (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/evaluatePathsInVM.js:102:39)
ERR!     at Object.evaluatePaths (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/evaluatePaths.js:22:29)
ERR!     at PluginPass.exit (/mnt/work/2/s/packages/babel-make-styles/lib/src/plugin.js:385:41)
ERR!     at newFn (/mnt/work/2/s/node_modules/@babel/traverse/lib/visitors.js:171:21)

Another unhandled issue in Babel plugin, will fix it in a separate PR.

Hotell · 2021-07-16T15:25:09Z

can we add it to nx migration generator instead of plop ?

we will migrate those generators to nx in the future (current workflow is to boot new package with old way(plop) and then run migration generator

Hotell · 2021-07-16T15:25:40Z

ERR! [1:02:11 PM] x Error: /mnt/work/2/s/packages/react-text/lib/components/Display/Display.js: We intentionally do not support serialization of functions, this branch should be never executed
ERR!     at Object.astify (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/astify.js:14:19)
ERR!     at Object.evaluatePathsInVM (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/evaluatePathsInVM.js:102:39)
ERR!     at Object.evaluatePaths (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/evaluatePaths.js:22:29)
ERR!     at PluginPass.exit (/mnt/work/2/s/packages/babel-make-styles/lib/src/plugin.js:385:41)
ERR!     at newFn (/mnt/work/2/s/node_modules/@babel/traverse/lib/visitors.js:171:21)

Another unhandled issue in Babel plugin, will fix it in a separate PR.

do we have issue for that ?

Hotell · 2021-07-16T15:27:39Z

scripts/create-package/plop-templates-react/.babelrc.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"]


this will add "module:@fluentui/babel-make-styles" plugin no matter if it's needed or not. I don't think that's the way we wanna go forward -> one of reasons why I asked to implement this within nx migration generator

That would make sense for the entire create-package utility to be an nx generator. Generally the packages we create will be for components. Even with an nx generator we would have no way of enforcing that a component package will have the babel config.

This is a good place to have until we can leverage nx fully IMO

That would make sense for the entire create-package

yeah that's the plan

Generally the packages we create will be for components.

thats fine, again we can distinguish accordingly this info in migration generator. In future every package should use .babelrc.json no matter for what platform it is.

Even with an nx generator we would have no way of enforcing that a component package will have the babel config.

hmm not sure I follow ?

We can easily distinguish what plugins should be added for particular converged package or not via nx generator.

also this is not blocking, just pointing out what needs to be done (here or another PR) ideally at one place (which is the primary source of truth at the moment - nx migration generator)

I meant that it is a sufficient solution to leverage create-package so we make sure new packages are created with approriate babel config before an nx generator is ready (more complicated and longer to do)

Adding the file to all new react packages seems like a "good enough" approach in the short term (until someone has time to convert create-package to a generator). Most new react packages will be component packages which need this file (if I'm understanding right), and if the file wasn't in the template we'd need another round of these manual fixes. If there's some package where the plugins aren't needed, that can be caught in the PR review.

created issue for what was discussed #19109

layershifter · 2021-07-16T15:55:29Z

ERR! [1:02:11 PM] x Error: /mnt/work/2/s/packages/react-text/lib/components/Display/Display.js: We intentionally do not support serialization of functions, this branch should be never executed
ERR!     at Object.astify (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/astify.js:14:19)
ERR!     at Object.evaluatePathsInVM (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/evaluatePathsInVM.js:102:39)
ERR!     at Object.evaluatePaths (/mnt/work/2/s/packages/babel-make-styles/lib/src/utils/evaluatePaths.js:22:29)
ERR!     at PluginPass.exit (/mnt/work/2/s/packages/babel-make-styles/lib/src/plugin.js:385:41)
ERR!     at newFn (/mnt/work/2/s/node_modules/@babel/traverse/lib/visitors.js:171:21)

Another unhandled issue in Babel plugin, will fix it in a separate PR.

do we have issue for that ?

This PR cannot be merged without this fix. I am working on it... 🛠

layershifter · 2021-07-16T15:58:39Z

can we add it to nx migration generator instead of plop ?

we will migrate those generators to nx in the future (current workflow is to boot new package with old way(plop) and then run migration generator

IMO this is out of scope this PR, but feel free to create an issue to track it 👍

layershifter · 2021-07-19T16:02:13Z

The build issue was fixed in #18995, build is passing ✅

layershifter · 2021-07-21T11:39:52Z

@microsoft/cxe-prg @sopranopillow can you please check this PR?

layershifter · 2021-07-23T08:43:48Z

@microsoft/cxe-prg @sopranopillow can you please check this PR?

@microsoft/cxe-prg friendly reminder 😊

…hore/add-missing-babel-plugins

msft-fluent-ui-bot · 2021-07-26T07:39:55Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:40:10Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:40:13Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:40:19Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:40:31Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:40:34Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:40:40Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:40:46Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:41:04Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:41:13Z

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

Handy links:

msft-fluent-ui-bot · 2021-07-26T07:41:22Z

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

Handy links:

* chore: add Babel plugins for more components * Change files * add babel plugins to template * fix deps * fix versions

layershifter added 2 commits July 16, 2021 11:01

chore: add Babel plugins for more components

fdaa4e3

Change files

b14c9fb

layershifter requested review from a team, bsunderhus and sopranopillow as code owners July 16, 2021 09:13

msft-fluent-ui-bot assigned ling1726 Jul 16, 2021

layershifter added the Status: Blocked Resolution blocked by another issue label Jul 16, 2021

ling1726 approved these changes Jul 16, 2021

View reviewed changes

layershifter mentioned this pull request Jul 16, 2021

fix(babel-make-styles): handle member expressions #18973

Merged

2 tasks

layershifter removed the Status: Blocked Resolution blocked by another issue label Jul 16, 2021

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

3ea1301

…hore/add-missing-babel-plugins

layershifter added the Fluent UI react-components (v9) label Jul 16, 2021

add babel plugins to template

ee8ff1b

layershifter requested a review from a team as a code owner July 16, 2021 12:58

layershifter added the Status: Blocked Resolution blocked by another issue label Jul 16, 2021

Hotell reviewed Jul 16, 2021

View reviewed changes

Hotell added this to the July Project Cycle Q2 2021 milestone Jul 16, 2021

ecraig12345 approved these changes Jul 16, 2021

View reviewed changes

layershifter requested review from a team as code owners July 19, 2021 15:13

fix deps

1da4df9

layershifter removed the Status: Blocked Resolution blocked by another issue label Jul 19, 2021

bsunderhus approved these changes Jul 21, 2021

View reviewed changes

sopranopillow approved these changes Jul 21, 2021

View reviewed changes

khmakoto approved these changes Jul 21, 2021

View reviewed changes

theerebuss added the Area: Build System label Jul 23, 2021

Hotell approved these changes Jul 23, 2021

View reviewed changes

Hotell mentioned this pull request Jul 23, 2021

tools: add proper babel setup to migration generator #19109

Closed

layershifter added 2 commits July 23, 2021 15:44

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

48a513c

…hore/add-missing-babel-plugins

fix versions

0d75442

layershifter enabled auto-merge (squash) July 23, 2021 13:47

layershifter merged commit 19db6cb into master Jul 23, 2021

layershifter deleted the chore/add-missing-babel-plugins branch July 23, 2021 20:46

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021

chore: add Babel plugins for more components (microsoft#18968)

6af0dc9

* chore: add Babel plugins for more components * Change files * add babel plugins to template * fix deps * fix versions

		@@ -0,0 +1,3 @@
		{
		"plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"]

Conversation

layershifter commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

ling1726 left a comment

Choose a reason for hiding this comment

Uh oh!

layershifter commented Jul 16, 2021

Uh oh!

layershifter commented Jul 16, 2021

Uh oh!

ling1726 commented Jul 16, 2021

Uh oh!

layershifter commented Jul 16, 2021

Uh oh!

Hotell commented Jul 16, 2021

Uh oh!

Hotell commented Jul 16, 2021

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!

layershifter commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

layershifter commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

layershifter commented Jul 19, 2021

Uh oh!

layershifter commented Jul 21, 2021

Uh oh!

layershifter commented Jul 23, 2021

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

layershifter commented Jul 16, 2021 •

edited

Loading

fabricteam commented Jul 16, 2021 •

edited

Loading

codesandbox-ci bot commented Jul 16, 2021 •

edited

Loading

size-auditor bot commented Jul 16, 2021 •

edited

Loading

fabricteam commented Jul 16, 2021 •

edited

Loading

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

layershifter commented Jul 16, 2021 •

edited

Loading

layershifter commented Jul 16, 2021 •

edited

Loading