feat: Add babel preset for global context by ling1726 · Pull Request #23367 · microsoft/fluentui

ling1726 · 2022-06-02T11:17:12Z

Adds a babel preset that will transform all createContext calls to use their equivalents in @fluentui/global-context

Autogenerates a new node package for global context babel preset

…lobal-context

Adds a babel preset that will transform all `createContext` calls to use their equivalents in `@fluentui/global-context`

codesandbox-ci · 2022-06-02T11:27:48Z

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 11991bb:

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

fabricteam · 2022-06-02T11:32:07Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1197	1106	5000
Button	mount	739	680	5000
FluentProvider	mount	2325	2368	5000
FluentProviderWithTheme	mount	332	361	10
FluentProviderWithTheme	virtual-rerender	305	279	10
FluentProviderWithTheme	virtual-rerender-with-unmount	404	387	10
MakeStyles	mount	1960	1918	50000

size-auditor · 2022-06-02T11:35:28Z

Asset size changes

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

Baseline commit: 02a787b91c08a09e688f6c02261d321c6b9b516d (build)

fabricteam · 2022-06-02T11:38:48Z

📊 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	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`74.947 kB` `22.722 kB`
`react-avatar` Avatar	`45.538 kB` `13.298 kB`
`react-badge` Badge	`20.929 kB` `6.554 kB`
`react-badge` CounterBadge	`21.833 kB` `6.861 kB`
`react-badge` PresenceBadge	`22.23 kB` `6.673 kB`
`react-button` Button	`33.796 kB` `9.151 kB`
`react-button` CompoundButton	`40.703 kB` `10.403 kB`
`react-button` MenuButton	`35.968 kB` `9.893 kB`
`react-button` SplitButton	`43.209 kB` `11.195 kB`
`react-button` ToggleButton	`48.279 kB` `10.573 kB`
`react-card` Card - All	`63.222 kB` `17.946 kB`
`react-card` Card	`58.378 kB` `16.819 kB`
`react-card` CardFooter	`7.737 kB` `3.264 kB`
`react-card` CardHeader	`9.302 kB` `3.779 kB`
`react-card` CardPreview	`7.838 kB` `3.316 kB`
`react-combobox` Combobox	`61.494 kB` `21.019 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`184.781 kB` `51.176 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.988 kB` `11.108 kB`
`react-divider` Divider	`15.485 kB` `5.534 kB`
`react-image` Image	`9.956 kB` `3.922 kB`
`react-input` Input	`22.009 kB` `7.194 kB`
`react-label` Label	`8.514 kB` `3.526 kB`
`react-link` Link	`11.358 kB` `4.58 kB`
`react-menu` Menu (including children components)	`113.605 kB` `34.444 kB`
`react-menu` Menu (including selectable components)	`116.78 kB` `34.908 kB`
`react-overflow` hooks only	`10.839 kB` `4.146 kB`
`react-popover` Popover	`103.84 kB` `31.603 kB`
`react-portal` Portal	`9.267 kB` `3.417 kB`
`react-positioning` usePositioning	`23.846 kB` `8.29 kB`
`react-provider` FluentProvider	`14.037 kB` `5.307 kB`
`react-radio` Radio	`29.397 kB` `10.049 kB`
`react-radio` RadioGroup	`13.595 kB` `5.42 kB`
`react-select` Select	`18.673 kB` `6.702 kB`
`react-slider` Slider	`25.173 kB` `8.12 kB`
`react-spinbutton` SpinButton	`41.967 kB` `11.816 kB`
`react-spinner` Spinner	`18.159 kB` `5.99 kB`
`react-switch` Switch	`25.37 kB` `8.208 kB`
`react-text` Text - Default	`10.848 kB` `4.239 kB`
`react-text` Text - Wrappers	`14.158 kB` `4.659 kB`
`react-textarea` Textarea	`21.057 kB` `7.079 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.363 kB` `7.043 kB`
`react-theme` Teams: Light theme	`19.806 kB` `5.699 kB`
`react-tooltip` Tooltip	`43.766 kB` `15.075 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 02a787b91c08a09e688f6c02261d321c6b9b516d}

fabricteam · 2022-06-02T11:40:39Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	175	158	1.11:1
ImageMinimalPerf.default	369	350	1.05:1
ItemLayoutMinimalPerf.default	1229	1172	1.05:1
TreeWith60ListItems.default	160	152	1.05:1
ChatMinimalPerf.default	759	730	1.04:1
LayoutMinimalPerf.default	360	347	1.04:1
RadioGroupMinimalPerf.default	454	435	1.04:1
EmbedMinimalPerf.default	4219	4094	1.03:1
FormMinimalPerf.default	416	402	1.03:1
ListNestedPerf.default	546	532	1.03:1
ReactionMinimalPerf.default	373	361	1.03:1
RefMinimalPerf.default	232	226	1.03:1
SplitButtonMinimalPerf.default	4423	4309	1.03:1
TextMinimalPerf.default	340	329	1.03:1
ToolbarMinimalPerf.default	952	928	1.03:1
ButtonSlotsPerf.default	546	536	1.02:1
ChatDuplicateMessagesPerf.default	292	286	1.02:1
ChatWithPopoverPerf.default	394	388	1.02:1
ListMinimalPerf.default	503	494	1.02:1
SliderMinimalPerf.default	1714	1678	1.02:1
StatusMinimalPerf.default	662	652	1.02:1
IconMinimalPerf.default	576	566	1.02:1
TableMinimalPerf.default	392	385	1.02:1
AttachmentSlotsPerf.default	1088	1076	1.01:1
CarouselMinimalPerf.default	474	468	1.01:1
CheckboxMinimalPerf.default	2761	2724	1.01:1
DatepickerMinimalPerf.default	6407	6351	1.01:1
DropdownManyItemsPerf.default	701	691	1.01:1
PortalMinimalPerf.default	172	171	1.01:1
TableManyItemsPerf.default	1918	1901	1.01:1
CustomToolbarPrototype.default	2676	2659	1.01:1
TreeMinimalPerf.default	804	793	1.01:1
AnimationMinimalPerf.default	533	532	1:1
AttachmentMinimalPerf.default	143	143	1:1
BoxMinimalPerf.default	325	324	1:1
ButtonOverridesMissPerf.default	1490	1496	1:1
CardMinimalPerf.default	550	550	1:1
DropdownMinimalPerf.default	3211	3202	1:1
GridMinimalPerf.default	342	343	1:1
LabelMinimalPerf.default	375	374	1:1
MenuMinimalPerf.default	839	838	1:1
MenuButtonMinimalPerf.default	1680	1676	1:1
ProviderMergeThemesPerf.default	1255	1257	1:1
ProviderMinimalPerf.default	411	409	1:1
TextAreaMinimalPerf.default	474	473	1:1
AvatarMinimalPerf.default	184	185	0.99:1
DialogMinimalPerf.default	777	786	0.99:1
ListCommonPerf.default	621	629	0.99:1
LoaderMinimalPerf.default	663	668	0.99:1
TooltipMinimalPerf.default	1100	1106	0.99:1
AlertMinimalPerf.default	253	258	0.98:1
HeaderSlotsPerf.default	769	788	0.98:1
InputMinimalPerf.default	1297	1323	0.98:1
PopupMinimalPerf.default	618	630	0.98:1
VideoMinimalPerf.default	627	640	0.98:1
RosterPerf.default	1082	1116	0.97:1
SkeletonMinimalPerf.default	327	336	0.97:1
AccordionMinimalPerf.default	135	141	0.96:1
DividerMinimalPerf.default	351	364	0.96:1
HeaderMinimalPerf.default	353	366	0.96:1
ListWith60ListItems.default	583	607	0.96:1
SegmentMinimalPerf.default	332	345	0.96:1
FlexMinimalPerf.default	271	289	0.94:1

fabricteam · 2022-06-02T11:53:26Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	931	941	5000
Breadcrumb	mount	2777	2811	1000
Checkbox	mount	1521	1529	5000
CheckboxBase	mount	1314	1325	5000
ChoiceGroup	mount	4871	4780	5000
ComboBox	mount	987	1039	1000
CommandBar	mount	10787	10662	1000
ContextualMenu	mount	11801	11798	1000
DefaultButton	mount	1155	1157	5000
DetailsRow	mount	3893	3871	5000
DetailsRowFast	mount	3937	3951	5000
DetailsRowNoStyles	mount	3799	3746	5000
Dialog	mount	2327	2349	1000
DocumentCardTitle	mount	194	191	1000
Dropdown	mount	3405	3368	5000
FocusTrapZone	mount	1892	1855	5000
FocusZone	mount	1850	1814	5000
IconButton	mount	1807	1792	5000
Label	mount	348	367	5000
Layer	mount	3065	3092	5000
Link	mount	481	493	5000
MenuButton	mount	1499	1534	5000
MessageBar	mount	2154	2177	5000
Nav	mount	3359	3364	1000
OverflowSet	mount	1112	1127	5000
Panel	mount	2234	2286	1000
Persona	mount	1061	1067	1000
Pivot	mount	1486	1472	1000
PrimaryButton	mount	1321	1331	5000
Rating	mount	7959	7879	5000
SearchBox	mount	1313	1306	5000
Shimmer	mount	2480	2509	5000
Slider	mount	1985	1963	5000
SpinButton	mount	5113	5156	5000
Spinner	mount	452	421	5000
SplitButton	mount	3276	3243	5000
Stack	mount	527	555	5000
StackWithIntrinsicChildren	mount	2277	2321	5000
StackWithTextChildren	mount	5378	5335	5000
SwatchColorPicker	mount	11959	11825	5000
TagPicker	mount	2744	2799	5000
TeachingBubble	mount	95333	94051	5000
Text	mount	443	427	5000
TextField	mount	1438	1436	5000
ThemeProvider	mount	1254	1226	5000
ThemeProvider	virtual-rerender	648	646	5000
ThemeProvider	virtual-rerender-with-unmount	1969	1964	5000
Toggle	mount	818	800	5000
buttonNative	mount	135	145	5000

bsunderhus

LGTM, I'd just add more alerts on how much this package usage is not recommended 😅

layershifter · 2022-06-02T13:30:22Z

+  // tests: [{
+  //   only: true,
+  //   fixture: path.resolve(fixturesDir, 'native-and-context-selector/code.ts'),
+  //   outputFixture: path.resolve(fixturesDir, 'native-and-context-selector/output.ts'),
+  // }],


Suggested change

// tests: [{

// only: true,

// fixture: path.resolve(fixturesDir, 'native-and-context-selector/code.ts'),

// outputFixture: path.resolve(fixturesDir, 'native-and-context-selector/output.ts'),

// }],

?

it's just a comment helper to isolate tests, I'll add some extra comment to relect as such. The syntax is not clear how to isolate tests in the plugin tester, so I would consider the commented code helpful

Let's delete it and a comment (link tester docs) on how to isolate tests instead.

layershifter · 2022-06-02T13:31:08Z

+// False positive - missing dependency on @types/babel__core which is a dev dependency
+// eslint-disable-next-line import/no-extraneous-dependencies


It's not false, @babel/core should be declared in packages/react-components/babel-preset-global-context/package.json.

good catch, the error was not clear

Hotell

this is amazing , well done !

added few comments and chores. approving to get this in quickly but lets address those here or in followup up PR

Hotell · 2022-06-07T09:15:37Z

+          },
+        },
+        // Targets all @fluentui scoped packages
+        include: [/node_modules\/@fluentui\/*/],


can we extend the comment why this is actually needed with fluent + how to set this up for any package ?

Hotell · 2022-06-07T09:21:37Z

    "@fluentui/scripts": "^1.0.0"
  },
  "dependencies": {
+    "@babel/core": "^7.10.4",


wondering if we should also add @fluentui/global-context as dep or peerDep.
If dep - one less step needed for installation
if peerDep - explicit "enforcement" of manual install

wdyt ?

peerDep sounds better since then apps would be explicitly including it into their production code and not via the 'hidden' dev dependency

Hotell · 2022-06-07T10:10:06Z

+import type { NodePath, PluginObj, PluginPass, types as t } from '@babel/core';
+import { types } from '@babel/core';
+import { declare } from '@babel/helper-plugin-utils';
+import hash from '@emotion/hash';


q: can't we use nodejs crypto for this?

to keep the string small, we use murmur hash from emotion. I think crypto only has sha256 or md5

is that hash length a big concern ?

it will be in partners' bundles so I think smaller the better

* init: @fluentui/babel-preset-global-context Autogenerates a new node package for global context babel preset * remove unnecessary * remove unnecessary deps * feat: Add babel preset for global context Adds a babel preset that will transform all `createContext` calls to use their equivalents in `@fluentui/global-context` * change constant names * add README * add dependency * update deps * pr suggestions * update md * single babel types import

ling1726 added 5 commits June 2, 2022 12:26

init: @fluentui/babel-preset-global-context

93df651

Autogenerates a new node package for global context babel preset

remove unnecessary

9f38431

remove unnecessary deps

ea4c0b7

Merge remote-tracking branch 'origin/master' into feat/babel-preset-g…

d4669e3

…lobal-context

feat: Add babel preset for global context

06e27ef

Adds a babel preset that will transform all `createContext` calls to use their equivalents in `@fluentui/global-context`

ling1726 marked this pull request as ready for review June 2, 2022 11:17

ling1726 requested review from a team as code owners June 2, 2022 11:17

msft-fluent-ui-bot assigned ling1726 Jun 2, 2022

github-actions Bot added this to the June Project Cycle Q2 2022 milestone Jun 2, 2022

change constant names

3101650

add README

acf4d97

tudorpopams requested a review from Hotell June 2, 2022 12:11

bsunderhus approved these changes Jun 2, 2022

View reviewed changes

layershifter reviewed Jun 2, 2022

View reviewed changes

layershifter approved these changes Jun 2, 2022

View reviewed changes

ling1726 added 2 commits June 2, 2022 15:49

add dependency

3a95bb9

update deps

3fc45d6

Hotell approved these changes Jun 7, 2022

View reviewed changes

ling1726 added 3 commits June 7, 2022 14:20

pr suggestions

4b42efc

update md

947c64f

single babel types import

11991bb

ling1726 merged commit b409bc4 into microsoft:master Jun 7, 2022

ling1726 mentioned this pull request Jun 21, 2022

Internal context default values should support forwards compat with global-context #23624

Closed

2 tasks

		// False positive - missing dependency on @types/babel__core which is a dev dependency
		// eslint-disable-next-line import/no-extraneous-dependencies

Uh oh!

Conversation

ling1726 commented Jun 2, 2022

Uh oh!

codesandbox-ci Bot commented Jun 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

size-auditor Bot commented Jun 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

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

Uh oh!

Uh oh!

bsunderhus left a comment

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!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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!

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!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codesandbox-ci Bot commented Jun 2, 2022 •

edited

Loading

fabricteam commented Jun 2, 2022 •

edited

Loading

size-auditor Bot commented Jun 2, 2022 •

edited

Loading

fabricteam commented Jun 2, 2022 •

edited

Loading

fabricteam commented Jun 2, 2022 •

edited

Loading

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

fabricteam commented Jun 2, 2022 •

edited

Loading