chore: new eslint rule `ban-context-export` by ling1726 · Pull Request #23141 · microsoft/fluentui

ling1726 · 2022-05-23T15:06:27Z

chore: new eslint rule: ban-context-export
This PR introduces a new eslint rule to ban exporting context objects
from Fluent UI you can read more detailed documentation here

This PR introduces a new eslint rule to ban exporting context objects from Fluent UI [you can read more detailed documentation here]()

…ntext-export

ling1726 · 2022-05-23T15:10:45Z

Once #23092 gets merged (it removes some already exported contexts) CI should be green

codesandbox-ci · 2022-05-23T15:21:39Z

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

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

fabricteam · 2022-05-23T15:27:13Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	849	903	5000
Button	mount	517	554	5000
FluentProvider	mount	1828	1810	5000
FluentProviderWithTheme	mount	263	290	10
FluentProviderWithTheme	virtual-rerender	244	235	10
FluentProviderWithTheme	virtual-rerender-with-unmount	320	306	10
MakeStyles	mount	1533	1547	50000

size-auditor · 2022-05-23T15:28:06Z

Asset size changes

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

Baseline commit: de233f964c22b5d61d40fca656762bad66f77f6b (build)

fabricteam · 2022-05-23T15:30:36Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`74.251 kB` `22.683 kB`
`react-avatar` Avatar	`45.588 kB` `13.32 kB`
`react-badge` Badge	`20.985 kB` `6.62 kB`
`react-badge` CounterBadge	`21.898 kB` `6.925 kB`
`react-badge` PresenceBadge	`22.21 kB` `6.672 kB`
`react-button` Button	`32.927 kB` `9.036 kB`
`react-button` CompoundButton	`39.854 kB` `10.26 kB`
`react-button` MenuButton	`35.11 kB` `9.783 kB`
`react-button` SplitButton	`42.369 kB` `11.085 kB`
`react-button` ToggleButton	`47.52 kB` `10.603 kB`
`react-card` Card - All	`60.746 kB` `17.41 kB`
`react-card` Card	`56.031 kB` `16.147 kB`
`react-card` CardFooter	`7.793 kB` `3.327 kB`
`react-card` CardHeader	`9.363 kB` `3.841 kB`
`react-card` CardPreview	`7.765 kB` `3.35 kB`
`react-combobox` Combobox	`61.412 kB` `20.982 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`181.156 kB` `50.603 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.078 kB` `11.098 kB`
`react-divider` Divider	`15.55 kB` `5.595 kB`
`react-image` Image	`10.012 kB` `3.982 kB`
`react-input` Input	`22.163 kB` `7.295 kB`
`react-label` Label	`8.546 kB` `3.574 kB`
`react-link` Link	`11.422 kB` `4.648 kB`
`react-menu` Menu (including children components)	`111.638 kB` `34.054 kB`
`react-menu` Menu (including selectable components)	`114.813 kB` `34.527 kB`
`react-overflow` hooks only	`10.792 kB` `4.124 kB`
`react-popover` Popover	`103.74 kB` `31.544 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-positioning` usePositioning	`23.828 kB` `8.283 kB`
`react-provider` FluentProvider	`14.127 kB` `5.299 kB`
`react-radio` Radio	`29.483 kB` `10.098 kB`
`react-radio` RadioGroup	`13.664 kB` `5.486 kB`
`react-select` Select	`17.138 kB` `6.367 kB`
`react-slider` Slider	`25.557 kB` `8.266 kB`
`react-spinbutton` SpinButton	`42.132 kB` `11.895 kB`
`react-spinner` Spinner	`18.158 kB` `6.029 kB`
`react-switch` Switch	`25.439 kB` `8.247 kB`
`react-text` Text - Default	`10.904 kB` `4.298 kB`
`react-text` Text - Wrappers	`14.226 kB` `4.714 kB`
`react-textarea` Textarea	`21.207 kB` `7.165 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.584 kB` `14.992 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 2c84c4f1ad43819325ee0aafa57d42a1f8239113}

fabricteam · 2022-05-23T15:36:46Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ImageMinimalPerf.default	326	291	1.12:1
ChatMinimalPerf.default	628	567	1.11:1
DropdownManyItemsPerf.default	549	502	1.09:1
AnimationMinimalPerf.default	434	401	1.08:1
FlexMinimalPerf.default	244	228	1.07:1
ButtonSlotsPerf.default	450	425	1.06:1
InputMinimalPerf.default	1086	1023	1.06:1
ListWith60ListItems.default	511	488	1.05:1
RefMinimalPerf.default	201	191	1.05:1
SegmentMinimalPerf.default	273	261	1.05:1
StatusMinimalPerf.default	577	550	1.05:1
ButtonMinimalPerf.default	140	134	1.04:1
DividerMinimalPerf.default	304	292	1.04:1
ListMinimalPerf.default	431	416	1.04:1
DropdownMinimalPerf.default	2503	2422	1.03:1
HeaderMinimalPerf.default	269	262	1.03:1
ItemLayoutMinimalPerf.default	972	946	1.03:1
LayoutMinimalPerf.default	296	288	1.03:1
MenuMinimalPerf.default	701	683	1.03:1
SkeletonMinimalPerf.default	279	270	1.03:1
SplitButtonMinimalPerf.default	3592	3496	1.03:1
ButtonOverridesMissPerf.default	1238	1214	1.02:1
CarouselMinimalPerf.default	394	386	1.02:1
DatepickerMinimalPerf.default	4728	4617	1.02:1
ListCommonPerf.default	518	506	1.02:1
TableManyItemsPerf.default	1564	1537	1.02:1
BoxMinimalPerf.default	243	240	1.01:1
ChatWithPopoverPerf.default	305	302	1.01:1
EmbedMinimalPerf.default	3356	3336	1.01:1
LabelMinimalPerf.default	311	309	1.01:1
ProviderMinimalPerf.default	339	336	1.01:1
RadioGroupMinimalPerf.default	370	368	1.01:1
IconMinimalPerf.default	525	521	1.01:1
CustomToolbarPrototype.default	2280	2247	1.01:1
ToolbarMinimalPerf.default	795	788	1.01:1
ChatDuplicateMessagesPerf.default	230	229	1:1
ListNestedPerf.default	455	455	1:1
RosterPerf.default	875	875	1:1
PortalMinimalPerf.default	142	142	1:1
ReactionMinimalPerf.default	278	279	1:1
DialogMinimalPerf.default	630	635	0.99:1
PopupMinimalPerf.default	520	523	0.99:1
SliderMinimalPerf.default	1343	1360	0.99:1
AttachmentSlotsPerf.default	848	866	0.98:1
HeaderSlotsPerf.default	629	644	0.98:1
TextMinimalPerf.default	278	284	0.98:1
TextAreaMinimalPerf.default	381	389	0.98:1
TreeMinimalPerf.default	647	668	0.97:1
CardMinimalPerf.default	443	462	0.96:1
CheckboxMinimalPerf.default	2141	2227	0.96:1
LoaderMinimalPerf.default	495	513	0.96:1
TableMinimalPerf.default	317	331	0.96:1
ProviderMergeThemesPerf.default	995	1044	0.95:1
FormMinimalPerf.default	303	321	0.94:1
AttachmentMinimalPerf.default	107	116	0.92:1
AlertMinimalPerf.default	191	209	0.91:1
MenuButtonMinimalPerf.default	1297	1419	0.91:1
TooltipMinimalPerf.default	854	937	0.91:1
VideoMinimalPerf.default	503	556	0.9:1
TreeWith60ListItems.default	122	138	0.88:1
AvatarMinimalPerf.default	141	162	0.87:1
GridMinimalPerf.default	245	293	0.84:1
AccordionMinimalPerf.default	102	127	0.8:1

fabricteam · 2022-05-23T15:42:36Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	683	697	5000
Breadcrumb	mount	2213	2161	1000
Checkbox	mount	1270	1174	5000
CheckboxBase	mount	1039	1045	5000
ChoiceGroup	mount	3591	3720	5000
ComboBox	mount	776	819	1000
CommandBar	mount	8590	8492	1000
ContextualMenu	mount	9963	9791	1000
DefaultButton	mount	895	940	5000
DetailsRow	mount	3014	2994	5000
DetailsRowFast	mount	3103	3046	5000
DetailsRowNoStyles	mount	3097	2897	5000
Dialog	mount	1857	1907	1000
DocumentCardTitle	mount	144	141	1000
Dropdown	mount	2757	2572	5000
FocusTrapZone	mount	1474	1466	5000
FocusZone	mount	1346	1451	5000
IconButton	mount	1406	1349	5000
Label	mount	303	271	5000
Layer	mount	2350	2430	5000
Link	mount	365	396	5000
MenuButton	mount	1281	1144	5000
MessageBar	mount	1757	1808	5000
Nav	mount	2696	2543	1000
OverflowSet	mount	908	949	5000
Panel	mount	1709	1685	1000
Persona	mount	814	769	1000
Pivot	mount	1198	1218	1000
PrimaryButton	mount	1011	1073	5000
Rating	mount	6263	6316	5000
SearchBox	mount	1098	1064	5000
Shimmer	mount	1952	2132	5000
Slider	mount	1498	1538	5000
SpinButton	mount	4156	4023	5000
Spinner	mount	377	342	5000
SplitButton	mount	2616	2517	5000
Stack	mount	406	395	5000
StackWithIntrinsicChildren	mount	1829	1957	5000
StackWithTextChildren	mount	4273	4171	5000
SwatchColorPicker	mount	9456	9691	5000
TagPicker	mount	2372	2296	5000
TeachingBubble	mount	85579	82661	5000
Text	mount	370	371	5000
TextField	mount	1167	1133	5000
ThemeProvider	mount	969	961	5000
ThemeProvider	virtual-rerender	495	495	5000
ThemeProvider	virtual-rerender-with-unmount	1607	1587	5000
Toggle	mount	643	695	5000
buttonNative	mount	106	107	5000

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

…ling1726/fluentui into chore/eslint-ban-context-export

layershifter · 2022-05-25T08:05:12Z

 } from './hooks/index';

+// eslint-disable-next-line @fluentui/ban-context-export
 export { canUseDOM, defaultSSRContextValue, useIsSSR, useSSRContext, SSRContext, SSRProvider } from './ssr/index';


Suggested change

export { canUseDOM, defaultSSRContextValue, useIsSSR, useSSRContext, SSRContext, SSRProvider } from './ssr/index';

export { canUseDOM, defaultSSRContextValue, useIsSSR, useSSRContext, SSRProvider } from './ssr/index';

Well, we probably don't want to export SSRContext

will do in a follow up PR, don't want to increase the scope right now

layershifter

Approving changes in packages (haven't checked the rule itself)

* fix: Syncpack after releasing v9 * chore: new eslint rule: `ban-context-export` This PR introduces a new eslint rule to ban exporting context objects from Fluent UI [you can read more detailed documentation here]() * changefile * improve variable name * test on CI * fix type * Update packages/eslint-plugin/src/rules/ban-context-export/index.js Co-authored-by: Sean Monahan <seanmonahan@microsoft.com> * fix ts * better message * exclude fixtures * add exclude option * fix syncpack * add ignore * changefile * add eslint ignore * changefile * rule should only apply to v9 * type aware rules for base Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

ling1726 added 2 commits May 23, 2022 14:31

fix: Syncpack after releasing v9

7fc669b

chore: new eslint rule: ban-context-export

b93d830

This PR introduces a new eslint rule to ban exporting context objects from Fluent UI [you can read more detailed documentation here]()

ling1726 requested review from a team as code owners May 23, 2022 15:06

msft-fluent-ui-bot assigned smhigley May 23, 2022

Merge remote-tracking branch 'origin/master' into chore/eslint-ban-co…

f91004a

…ntext-export

ling1726 removed request for a team May 23, 2022 15:07

changefile

876d63f

ling1726 added 3 commits May 23, 2022 17:12

improve variable name

b9d4df1

test on CI

e7513a8

fix type

c6ee257

ling1726 changed the title ~~Chore/eslint ban context export~~ chore: new eslint rule ban-context-export May 23, 2022

spmonahan reviewed May 23, 2022

View reviewed changes

Comment thread packages/eslint-plugin/src/rules/ban-context-export/index.js Outdated

theerebuss approved these changes May 23, 2022

View reviewed changes

ling1726 and others added 5 commits May 23, 2022 18:10

Update packages/eslint-plugin/src/rules/ban-context-export/index.js

a956eea

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

fix ts

1961dc3

Merge branch 'chore/eslint-ban-context-export' of https://github.com/…

026cefa

…ling1726/fluentui into chore/eslint-ban-context-export

better message

dd9fd2a

exclude fixtures

a91c537

ling1726 added 4 commits May 24, 2022 19:59

Merge branch 'master' into chore/eslint-ban-context-export

a6ac771

add exclude option

886fd68

fix syncpack

073e6b1

add ignore

7afdf23

ling1726 requested a review from a team as a code owner May 24, 2022 19:16

ling1726 added 5 commits May 24, 2022 21:28

changefile

bece35a

add eslint ignore

5721861

changefile

a5aea56

rule should only apply to v9

36a4b77

type aware rules for base

fdf2022

Hotell added Package: eslint-plugin Area: Build System labels May 25, 2022

layershifter reviewed May 25, 2022

View reviewed changes

layershifter approved these changes May 25, 2022

View reviewed changes

ling1726 enabled auto-merge (squash) May 25, 2022 08:26

ling1726 merged commit fff6a01 into microsoft:master May 25, 2022

Hotell mentioned this pull request May 25, 2022

fix(eslint-plugin): move ban-context to react config from base #23240

Merged

Hotell mentioned this pull request Jun 2, 2022

eslint-plugin: setup testing infra #21262

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: new eslint rule `ban-context-export`#23141

chore: new eslint rule `ban-context-export`#23141
ling1726 merged 21 commits into
microsoft:masterfrom
ling1726:chore/eslint-ban-context-export

ling1726 commented May 23, 2022

Uh oh!

ling1726 commented May 23, 2022

Uh oh!

codesandbox-ci Bot commented May 23, 2022 •

edited

Loading

Uh oh!

Uh oh!

fabricteam commented May 23, 2022 •

edited

Loading

Uh oh!

size-auditor Bot commented May 23, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 23, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 23, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 23, 2022 •

edited

Loading

Uh oh!

layershifter May 25, 2022

Uh oh!

ling1726 May 25, 2022

Uh oh!

layershifter left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

	export { canUseDOM, defaultSSRContextValue, useIsSSR, useSSRContext, SSRContext, SSRProvider } from './ssr/index';
	export { canUseDOM, defaultSSRContextValue, useIsSSR, useSSRContext, SSRProvider } from './ssr/index';

Uh oh!

Conversation

ling1726 commented May 23, 2022

Uh oh!

ling1726 commented May 23, 2022

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

layershifter May 25, 2022

Choose a reason for hiding this comment

Uh oh!

ling1726 May 25, 2022

Choose a reason for hiding this comment

Uh oh!

layershifter left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

codesandbox-ci Bot commented May 23, 2022 •

edited

Loading

fabricteam commented May 23, 2022 •

edited

Loading

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

size-auditor Bot commented May 23, 2022 •

edited

Loading

fabricteam commented May 23, 2022 •

edited

Loading

fabricteam commented May 23, 2022 •

edited

Loading

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

fabricteam commented May 23, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)