fix(babel-make-styles): handle cases when MemberExpression is a function by layershifter · Pull Request #18995 · microsoft/fluentui

layershifter · 2021-07-19T09:50:58Z

Pull request checklist

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

Description of changes

This PR fixes an issue that was discovered in #18968:

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)

In #18973 I added handling for MemberExpressions, but it was not enough as they can be represented by objects (original PR added handling for them) or functions:

export const useStyles = makeStyles({
  // 👇 it's a MemberExpression, can be a function or an object 😮
  label: typography.text,
})

We also don't know in advance what kind of an expression we will get, that's why check is moved to runtime code 😅 This PR adds handling for a function case and removes redundant static checks.

codesandbox-ci · 2021-07-19T09:56:47Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

fabricteam · 2021-07-19T09:58:39Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-menu` Menu - Default	`113.947 kB` `34.389 kB`
`react-menu` Menu - Selectable	`115.959 kB` `34.649 kB`

_{🤖 This report was generated against 63f7b2dc6293e7ea4e4f5484c6c81af1c01d80ec}

size-auditor · 2021-07-19T10:01:43Z

Asset size changes

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

Baseline commit: 63f7b2dc6293e7ea4e4f5484c6c81af1c01d80ec (build)

fabricteam · 2021-07-19T10:14:10Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	774	800	5000
BaseButton	mount	886	900	5000
Breadcrumb	mount	2589	2660	1000
ButtonNext	mount	547	532	5000
Checkbox	mount	1505	1504	5000
CheckboxBase	mount	1280	1307	5000
ChoiceGroup	mount	4753	4748	5000
ComboBox	mount	1015	1024	1000
CommandBar	mount	10105	10083	1000
ContextualMenu	mount	6257	6216	1000
DefaultButton	mount	1121	1170	5000
DetailsRow	mount	3741	3735	5000
DetailsRowFast	mount	3686	3725	5000
DetailsRowNoStyles	mount	3537	3577	5000
Dialog	mount	2158	2207	1000
DocumentCardTitle	mount	154	149	1000
Dropdown	mount	3267	3269	5000
FluentProviderNext	mount	7299	7230	5000
FocusTrapZone	mount	1804	1815	5000
FocusZone	mount	1854	1824	5000
IconButton	mount	1716	1688	5000
Label	mount	339	356	5000
Layer	mount	1806	1795	5000
Link	mount	446	448	5000
MakeStyles	mount	1814	1783	50000
MenuButton	mount	1468	1467	5000
MessageBar	mount	1991	2012	5000
Nav	mount	3283	3205	1000
OverflowSet	mount	1060	1056	5000
Panel	mount	2078	2073	1000
Persona	mount	816	830	1000
Pivot	mount	1399	1409	1000
PrimaryButton	mount	1295	1306	5000
Rating	mount	7546	7582	5000
SearchBox	mount	1331	1308	5000
Shimmer	mount	2507	2544	5000
Slider	mount	1956	1945	5000
SpinButton	mount	4955	4944	5000
Spinner	mount	417	412	5000
SplitButton	mount	3161	3116	5000
Stack	mount	508	485	5000
StackWithIntrinsicChildren	mount	1530	1560	5000
StackWithTextChildren	mount	4511	4516	5000
SwatchColorPicker	mount	10196	10183	5000
Tabs	mount	1397	1540	1000
TagPicker	mount	2466	2435	5000
TeachingBubble	mount	11977	11816	5000
Text	mount	422	435	5000
TextField	mount	1362	1351	5000
ThemeProvider	mount	1202	1189	5000
ThemeProvider	virtual-rerender	608	609	5000
Toggle	mount	793	803	5000
buttonNative	mount	108	121	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	160	146	1.1:1
SegmentMinimalPerf.default	365	340	1.07:1
ButtonSlotsPerf.default	553	529	1.05:1
HeaderSlotsPerf.default	777	739	1.05:1
ListCommonPerf.default	625	601	1.04:1
ListWith60ListItems.default	626	602	1.04:1
RefMinimalPerf.default	237	228	1.04:1
CarouselMinimalPerf.default	454	441	1.03:1
ChatDuplicateMessagesPerf.default	301	292	1.03:1
LoaderMinimalPerf.default	698	678	1.03:1
IconMinimalPerf.default	613	594	1.03:1
AnimationMinimalPerf.default	404	395	1.02:1
AvatarMinimalPerf.default	190	187	1.02:1
BoxMinimalPerf.default	346	340	1.02:1
PopupMinimalPerf.default	595	581	1.02:1
TextAreaMinimalPerf.default	511	500	1.02:1
TreeMinimalPerf.default	799	783	1.02:1
VideoMinimalPerf.default	648	633	1.02:1
ButtonOverridesMissPerf.default	1680	1664	1.01:1
ChatMinimalPerf.default	641	635	1.01:1
CheckboxMinimalPerf.default	2745	2723	1.01:1
DialogMinimalPerf.default	760	752	1.01:1
DropdownMinimalPerf.default	3107	3089	1.01:1
EmbedMinimalPerf.default	4120	4080	1.01:1
MenuButtonMinimalPerf.default	1629	1620	1.01:1
ProviderMergeThemesPerf.default	1683	1660	1.01:1
ProviderMinimalPerf.default	1015	1000	1.01:1
RadioGroupMinimalPerf.default	439	436	1.01:1
StatusMinimalPerf.default	671	666	1.01:1
TableMinimalPerf.default	397	394	1.01:1
CustomToolbarPrototype.default	3857	3828	1.01:1
AttachmentMinimalPerf.default	152	152	1:1
AttachmentSlotsPerf.default	1051	1048	1:1
FlexMinimalPerf.default	282	282	1:1
GridMinimalPerf.default	338	338	1:1
ItemLayoutMinimalPerf.default	1212	1208	1:1
LayoutMinimalPerf.default	365	365	1:1
ListMinimalPerf.default	511	513	1:1
ListNestedPerf.default	555	553	1:1
RosterPerf.default	1117	1121	1:1
PortalMinimalPerf.default	185	185	1:1
SplitButtonMinimalPerf.default	3745	3730	1:1
TableManyItemsPerf.default	1846	1849	1:1
CardMinimalPerf.default	537	541	0.99:1
DropdownManyItemsPerf.default	669	678	0.99:1
FormMinimalPerf.default	386	388	0.99:1
InputMinimalPerf.default	1247	1255	0.99:1
SliderMinimalPerf.default	1550	1572	0.99:1
ToolbarMinimalPerf.default	909	918	0.99:1
TooltipMinimalPerf.default	993	1003	0.99:1
ChatWithPopoverPerf.default	372	380	0.98:1
DatepickerMinimalPerf.default	5244	5326	0.98:1
DividerMinimalPerf.default	345	353	0.98:1
HeaderMinimalPerf.default	352	358	0.98:1
MenuMinimalPerf.default	827	842	0.98:1
SkeletonMinimalPerf.default	337	347	0.97:1
AlertMinimalPerf.default	255	267	0.96:1
LabelMinimalPerf.default	376	390	0.96:1
TextMinimalPerf.default	346	359	0.96:1
TreeWith60ListItems.default	158	164	0.96:1
ReactionMinimalPerf.default	349	367	0.95:1
ButtonMinimalPerf.default	152	161	0.94:1
ImageMinimalPerf.default	353	374	0.94:1

ling1726 · 2021-07-19T11:47:43Z

packages/babel-make-styles/src/utils/evaluatePathsInVM.ts

+ * }
+ */
+const expressionTpl = template.expression(
+  `%%wrapName%%(() => typeof %%expression%% === 'function' ? %%expression%%(%%themeVariableName%%) : %%expression%%)`,


do you mind adding an example of the expression once it has been formatted ?

Added in cf52f5f, also added a test 👍

msft-fluent-ui-bot · 2021-07-20T22:27:08Z

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

Handy links:

…ion (microsoft#18995) * fix(babel-make-styles): handle cases when MemberExpression is a function * Change files * add comment, add test

layershifter added 2 commits July 19, 2021 11:41

fix(babel-make-styles): handle cases when MemberExpression is a function

9d0de39

Change files

9991780

layershifter requested a review from a team as a code owner July 19, 2021 09:50

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

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

ling1726 reviewed Jul 19, 2021

View reviewed changes

ling1726 approved these changes Jul 19, 2021

View reviewed changes

add comment, add test

cf52f5f

layershifter enabled auto-merge (squash) July 19, 2021 13:11

layershifter merged commit d8eaeba into master Jul 19, 2021

layershifter mentioned this pull request Jul 19, 2021

chore: add Babel plugins for more components #18968

Merged

2 tasks

layershifter deleted the fix/bmk-member-expression-fn branch July 22, 2021 16:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(babel-make-styles): handle cases when MemberExpression is a function#18995

fix(babel-make-styles): handle cases when MemberExpression is a function#18995
layershifter merged 3 commits intomasterfrom
fix/bmk-member-expression-fn

layershifter commented Jul 19, 2021

Uh oh!

codesandbox-ci bot commented Jul 19, 2021 •

edited

Loading

Uh oh!

fabricteam commented Jul 19, 2021 •

edited

Loading

Uh oh!

size-auditor bot commented Jul 19, 2021 •

edited

Loading

Uh oh!

fabricteam commented Jul 19, 2021 •

edited

Loading

Uh oh!

ling1726 Jul 19, 2021

Uh oh!

layershifter Jul 19, 2021

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

layershifter commented Jul 19, 2021

Pull request checklist

Description of changes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Jul 19, 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 19, 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!

ling1726 Jul 19, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Jul 19, 2021

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codesandbox-ci bot commented Jul 19, 2021 •

edited

Loading

fabricteam commented Jul 19, 2021 •

edited

Loading

size-auditor bot commented Jul 19, 2021 •

edited

Loading

fabricteam commented Jul 19, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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