feat: create core/base for react/node/legacy lint configs #22128

Hotell · 2022-03-16T18:25:10Z

Current Behavior

react lint config causes various issues when we wanna extend/change existing rules, as any kind of change in react config is applied everywhere else.

our eslint plugin configuration inheritance hierarchy:

flowchart TD
   RL["react-legacy v8"] --> R
   NL["node-legacy v8"] --> N
   N["node v9"] --> R
   subgraph react
   R["react v9"] --> RR["react plugins"]
   end

New Behavior

inheritance is fixed and newly added rules will affect only what's really necessary
removing react family rules from core this also from nodejs configurations as that's not needed
adds new opt in import rules config / feat(eslint-plugin): add autofixable import rules #22050
- can be used by teams individually/gradually to not introduce warning overload on CI
moves export-all rules only to v9 / feat(eslint-plugin): enable no-export-all:all for all packages public… #22073
removes usage of whole airbnb config and uses only airbnb/base

our eslint plugin configuration inheritance hierarchy:

flowchart TD
   subgraph public-api-configs
   RL
   R
   N
   NL
   I
   end

   RL["react-legacy v8"] --> BL
   R["react v9"] --> B
   NL["node-legacy v8"] --> BL
   N["node v9"] --> B
   I["imports"]
   RL --> RR
   R --> RR
   B["base"] --> C
   BL["base-legacy"] --> C
   C["core"]
   RR["react family rules/plugiins"]

Lint speed comparison

yarn workspace @fluentui/react-text eslint --ext=.ts,.tsx src

Before	After
16.16s	14.00s

Related Issue(s)

Fixes #22127

Hotell · 2022-03-16T18:39:02Z

packages/eslint-plugin/src/configs/core.js

+  root: true,
+  extends: [
+    // Provides both rules and some parser options and other settings
+    'airbnb',


as follow up should be removed / tweaked only for legacy

Hotell · 2022-03-16T18:40:00Z

packages/eslint-plugin/src/configs/react-config.js

+const configHelpers = require('../utils/configHelpers');
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {


config that handles only react family of plugins

Hotell · 2022-03-16T18:40:57Z

packages/eslint-plugin/src/configs/react.js

@@ -1,440 +1,42 @@
 // @ts-check
-const configHelpers = require('../utils/configHelpers');
+


contains only rules applied in v9 react packages

Hotell · 2022-03-16T18:41:11Z

packages/eslint-plugin/src/configs/react-legacy.js

@@ -5,7 +5,7 @@ const configHelpers = require('../utils/configHelpers');

 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: [path.join(__dirname, 'react')],
+  extends: [path.join(__dirname, 'core'), path.join(__dirname, 'react-config')],


contains only rules applied in v7,8 react packages

Hotell · 2022-03-16T18:41:50Z

packages/eslint-plugin/src/configs/core.js

@@ -0,0 +1,360 @@
+// @ts-check


NOTE: this whole config is copy-paste of original react.js file , cleaned up by removing react family specific rules/plugins setup

codesandbox-ci · 2022-03-16T18:47:16Z

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

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

fabricteam · 2022-03-16T18:47:54Z

📊 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)	`73.907 kB` `22.555 kB`
`react-avatar` Avatar	`45.314 kB` `13.175 kB`
`react-badge` Badge	`21.1 kB` `6.671 kB`
`react-badge` CounterBadge	`22.015 kB` `6.976 kB`
`react-badge` PresenceBadge	`22.15 kB` `6.642 kB`
`react-button` Button	`32.591 kB` `9.056 kB`
`react-button` CompoundButton	`38.836 kB` `10.221 kB`
`react-button` MenuButton	`34.381 kB` `9.645 kB`
`react-button` SplitButton	`41.662 kB` `10.95 kB`
`react-button` ToggleButton	`43.518 kB` `9.984 kB`
`react-card` Card - All	`59.095 kB` `16.954 kB`
`react-card` Card	`54.38 kB` `15.703 kB`
`react-card` CardFooter	`7.891 kB` `3.363 kB`
`react-card` CardHeader	`9.463 kB` `3.881 kB`
`react-card` CardPreview	`7.863 kB` `3.391 kB`
`react-combobox` Combobox	`60.681 kB` `20.728 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`179.813 kB` `50.19 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.178 kB` `11.138 kB`
`react-divider` Divider	`15.65 kB` `5.636 kB`
`react-image` Image	`10.314 kB` `4.06 kB`
`react-input` Input	`22.274 kB` `7.336 kB`
`react-label` Label	`8.644 kB` `3.614 kB`
`react-link` Link	`11.52 kB` `4.69 kB`
`react-menu` Menu (including children components)	`110.335 kB` `33.584 kB`
`react-menu` Menu (including selectable components)	`113.51 kB` `34.053 kB`
`react-overflow` hooks only	`10.792 kB` `4.124 kB`
`react-popover` Popover	`101.258 kB` `30.847 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`
`react-provider` FluentProvider	`14.227 kB` `5.336 kB`
`react-radio` Radio	`29.427 kB` `10.101 kB`
`react-radio` RadioGroup	`13.751 kB` `5.515 kB`
`react-select` Select	`17.176 kB` `6.408 kB`
`react-slider` Slider	`25.657 kB` `8.302 kB`
`react-spinbutton` SpinButton	`41.985 kB` `11.908 kB`
`react-spinner` Spinner	`17.895 kB` `5.988 kB`
`react-switch` Switch	`25.372 kB` `8.26 kB`
`react-text` Text - Default	`11.002 kB` `4.336 kB`
`react-text` Text - Wrappers	`14.324 kB` `4.749 kB`
`react-textarea` Textarea	`21.318 kB` `7.211 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.039 kB` `14.819 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 96f4f78efbb3178eb2183fa4b70cabb8f3b87fbd}

fabricteam · 2022-03-16T18:53:01Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1079	1080	5000
Button	mount	672	704	5000
FluentProvider	mount	2204	2223	5000
FluentProviderWithTheme	mount	355	350	10
FluentProviderWithTheme	virtual-rerender	298	311	10
FluentProviderWithTheme	virtual-rerender-with-unmount	357	370	10
MakeStyles	mount	1928	1876	50000

size-auditor · 2022-03-16T19:01:47Z

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 96f4f78

Possible causes

The baseline build 96f4f78 is broken
The Size Auditor run for the baseline build 96f4f78 was not triggered

Recommendations

Please merge your branch for this Pull request with the latest master build and commit your changes once again

fabricteam · 2022-03-16T19:03:39Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatDuplicateMessagesPerf.default	372	311	1.2:1
RefMinimalPerf.default	274	238	1.15:1
SegmentMinimalPerf.default	420	375	1.12:1
FormMinimalPerf.default	532	478	1.11:1
ProviderMinimalPerf.default	451	410	1.1:1
TextMinimalPerf.default	403	369	1.09:1
TextAreaMinimalPerf.default	627	577	1.09:1
MenuMinimalPerf.default	1016	938	1.08:1
PortalMinimalPerf.default	188	174	1.08:1
AttachmentMinimalPerf.default	188	176	1.07:1
TreeWith60ListItems.default	204	191	1.07:1
AttachmentSlotsPerf.default	1290	1216	1.06:1
ButtonMinimalPerf.default	199	188	1.06:1
CarouselMinimalPerf.default	532	504	1.06:1
LabelMinimalPerf.default	446	421	1.06:1
TooltipMinimalPerf.default	1395	1321	1.06:1
AccordionMinimalPerf.default	176	167	1.05:1
AvatarMinimalPerf.default	237	226	1.05:1
ChatWithPopoverPerf.default	440	419	1.05:1
HeaderMinimalPerf.default	433	414	1.05:1
ListWith60ListItems.default	758	723	1.05:1
LoaderMinimalPerf.default	768	728	1.05:1
MenuButtonMinimalPerf.default	2019	1922	1.05:1
ProviderMergeThemesPerf.default	1360	1306	1.04:1
CheckboxMinimalPerf.default	3097	3018	1.03:1
EmbedMinimalPerf.default	4724	4567	1.03:1
FlexMinimalPerf.default	346	335	1.03:1
InputMinimalPerf.default	1521	1479	1.03:1
StatusMinimalPerf.default	831	803	1.03:1
AnimationMinimalPerf.default	617	604	1.02:1
ButtonOverridesMissPerf.default	1735	1707	1.02:1
ChatMinimalPerf.default	874	860	1.02:1
DialogMinimalPerf.default	859	842	1.02:1
SkeletonMinimalPerf.default	426	416	1.02:1
DatepickerMinimalPerf.default	6574	6512	1.01:1
ItemLayoutMinimalPerf.default	1394	1376	1.01:1
SliderMinimalPerf.default	1850	1838	1.01:1
SplitButtonMinimalPerf.default	4983	4958	1.01:1
ListNestedPerf.default	642	641	1:1
CustomToolbarPrototype.default	2919	2918	1:1
DropdownManyItemsPerf.default	788	794	0.99:1
DropdownMinimalPerf.default	3268	3292	0.99:1
RadioGroupMinimalPerf.default	506	512	0.99:1
TableManyItemsPerf.default	2266	2291	0.99:1
TreeMinimalPerf.default	934	942	0.99:1
ButtonSlotsPerf.default	614	626	0.98:1
GridMinimalPerf.default	371	380	0.98:1
ListCommonPerf.default	761	774	0.98:1
PopupMinimalPerf.default	681	693	0.98:1
TableMinimalPerf.default	470	480	0.98:1
VideoMinimalPerf.default	742	759	0.98:1
AlertMinimalPerf.default	304	314	0.97:1
ToolbarMinimalPerf.default	1076	1105	0.97:1
BoxMinimalPerf.default	375	394	0.95:1
CardMinimalPerf.default	650	684	0.95:1
ImageMinimalPerf.default	459	485	0.95:1
RosterPerf.default	1245	1311	0.95:1
ListMinimalPerf.default	572	606	0.94:1
LayoutMinimalPerf.default	389	418	0.93:1
IconMinimalPerf.default	699	755	0.93:1
HeaderSlotsPerf.default	879	967	0.91:1
ReactionMinimalPerf.default	413	475	0.87:1
DividerMinimalPerf.default	390	454	0.86:1

fabricteam · 2022-03-16T19:11:26Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	879	917	5000
Breadcrumb	mount	2696	2688	1000
Checkbox	mount	1440	1481	5000
CheckboxBase	mount	1221	1226	5000
ChoiceGroup	mount	4719	4622	5000
ComboBox	mount	958	965	1000
CommandBar	mount	10302	10416	1000
ContextualMenu	mount	11157	11393	1000
DefaultButton	mount	1112	1138	5000
DetailsRow	mount	3772	3806	5000
DetailsRowFast	mount	3761	3744	5000
DetailsRowNoStyles	mount	3623	3570	5000
Dialog	mount	2238	2227	1000
DocumentCardTitle	mount	165	166	1000
Dropdown	mount	3192	3243	5000
FocusTrapZone	mount	1839	1793	5000
FocusZone	mount	1809	1822	5000
IconButton	mount	1731	1728	5000
Label	mount	340	354	5000
Layer	mount	2873	2958	5000
Link	mount	465	455	5000
MenuButton	mount	1489	1456	5000
MessageBar	mount	2173	2213	5000
Nav	mount	3429	3492	1000
OverflowSet	mount	1135	1172	5000
Panel	mount	2240	2265	1000
Persona	mount	1070	993	1000
Pivot	mount	1479	1535	1000
PrimaryButton	mount	1347	1355	5000
Rating	mount	7911	8066	5000
SearchBox	mount	1285	1314	5000
Shimmer	mount	2476	2474	5000
Slider	mount	1934	2005	5000
SpinButton	mount	5033	5035	5000
Spinner	mount	422	434	5000
SplitButton	mount	3173	3231	5000
Stack	mount	496	517	5000
StackWithIntrinsicChildren	mount	2255	2247	5000
StackWithTextChildren	mount	5184	5221	5000
SwatchColorPicker	mount	11537	11616	5000
TagPicker	mount	2710	2738	5000
TeachingBubble	mount	92709	93418	5000
Text	mount	434	439	5000
TextField	mount	1399	1405	5000
ThemeProvider	mount	1211	1213	5000
ThemeProvider	virtual-rerender	648	645	5000
ThemeProvider	virtual-rerender-with-unmount	1919	1964	5000
Toggle	mount	811	794	5000
buttonNative	mount	131	135	5000

Hotell · 2022-03-16T21:28:11Z

packages/codemods/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/node"],
+  "extends": ["plugin:@fluentui/eslint-plugin/node", "plugin:@fluentui/eslint-plugin/react"],


looks like --legacy isn't being used as it should. this is v8 package so it shouldn't use v9 lint rules at all.

This will need additional refactoring/checking across whole monorepo

Hotell · 2022-03-16T21:28:37Z

packages/codemods/src/command.ts

@@ -73,8 +73,10 @@ export class CommandParser {
    }
    if (parsed.list) {
      const mods = getEnabledMods(console, getModsPaths);
+      // eslint-disable-next-line no-console


lint errors that appeared during config reshuffling

ling1726 · 2022-03-17T09:25:03Z

packages/eslint-plugin/src/configs/node-legacy.js

  rules: {
-    ...configHelpers.getNamingConventionRule(true /* prefixWithI */),
+    ...configHelpers.getNamingConventionRule(true),


Suggested change

...configHelpers.getNamingConventionRule(true),

/* prefix interfaces with I */

...configHelpers.getNamingConventionRule(true),

might be worth keeping the comment ?
m

question is why? are we providing comments for all function call arguments?
note that IDE will provide you with correct intellisense.

in general using booleans flags as positional arguments is bad API design, what I'd suggest as followup is to refactor that

Hotell · 2022-03-17T09:37:52Z

having second thoughts on the core, this will be still tightly coupled to legacy and next, thus we should dechunk even further

base.js / base config for vNext
base-legacy.js / base config for v7,8

WDYT? @ling1726

UPDATE:

updated the implementation
update the api for naming convetion

packages/eslint-plugin/src/configs/base-legacy.js

andrefcdias · 2022-03-17T17:23:03Z

/azp run

azure-pipelines · 2022-03-17T17:23:25Z

Azure Pipelines successfully started running 3 pipeline(s).

ling1726 · 2022-03-17T19:41:42Z

packages/eslint-plugin/src/configs/core.js

@@ -0,0 +1,357 @@
+// @ts-check
+const configHelpers = require('../utils/configHelpers');


seems that this should be the base and then have core and core-legacy. At least that makes more sense to me.

Not blocking tho

hmm you mean changing the names only or the inheritance chain as well ?

ling1726 · 2022-03-17T19:43:06Z

change/@fluentui-eslint-plugin-54a8dcfd-724c-4111-a35e-1320a6dd6cae.json

+  "comment": "feat: create core base for react/node/legacy lint configs",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"


Awesome that you set dependentChangeType to none

learned my lesson from the best ;)

packages/eslint-plugin/src/configs/react-config.js

…22128) * feat: create core base for react/node/legacy lint configs * style: fix lint errors * generate change files * create base and base-legacy configs * feat: make imports config public * undo changes * docs(eslint-plugin): update docs

msft-fluent-ui-bot added Area: Build System Package: eslint-plugin labels Mar 16, 2022

msft-fluent-ui-bot assigned andrefcdias Mar 16, 2022

Hotell commented Mar 16, 2022

View reviewed changes

Hotell mentioned this pull request Mar 16, 2022

feat(eslint-plugin): add autofixable import rules #22050

Closed

Hotell commented Mar 16, 2022

View reviewed changes

Hotell marked this pull request as ready for review March 16, 2022 22:14

Hotell requested a review from a team as a code owner March 16, 2022 22:14

Hotell added this to the March Project Cycle Q1 2022 milestone Mar 16, 2022

ling1726 reviewed Mar 17, 2022

View reviewed changes

Hotell force-pushed the hotell/eslint-plugin/reshufle-inheritance branch from 63f14a6 to 6f2cf22 Compare March 17, 2022 10:18

Hotell commented Mar 17, 2022

View reviewed changes

packages/eslint-plugin/src/configs/base-legacy.js Outdated Show resolved Hide resolved

Hotell changed the title ~~feat: create core base for react/node/legacy lint configs~~ feat: create core/base for react/node/legacy lint configs Mar 17, 2022

andrefcdias approved these changes Mar 17, 2022

View reviewed changes

ling1726 reviewed Mar 17, 2022

View reviewed changes

ling1726 approved these changes Mar 17, 2022

View reviewed changes

Hotell force-pushed the hotell/eslint-plugin/reshufle-inheritance branch from 449ff00 to cdce639 Compare March 18, 2022 20:03

andrefcdias removed their assignment Mar 24, 2022

Hotell mentioned this pull request Mar 30, 2022

feat(eslint-plugin): replacace deprecation/deprecation with etc/no-deprecated #22251

Closed

1 task

raghavthind2005 approved these changes Apr 5, 2022

View reviewed changes

Hotell mentioned this pull request May 12, 2022

chore: enable ESLint plugin for Griffel #22961

Merged

Hotell added 7 commits May 16, 2022 14:44

feat: create core base for react/node/legacy lint configs

0c0d289

style: fix lint errors

d0cf279

generate change files

459a2f5

create base and base-legacy configs

f2bb71e

feat: make imports config public

a4e0b2a

undo changes

3fa8c72

docs(eslint-plugin): update docs

7428691

Hotell force-pushed the hotell/eslint-plugin/reshufle-inheritance branch from cdce639 to 7428691 Compare May 16, 2022 12:45

Hotell commented May 16, 2022

View reviewed changes

packages/eslint-plugin/src/configs/react-config.js Show resolved Hide resolved

Hotell modified the milestones: March Project Cycle Q1 2022, May Project Cycle Q2 2022 May 17, 2022

Hotell merged commit 8d6c673 into microsoft:master May 17, 2022

Hotell deleted the hotell/eslint-plugin/reshufle-inheritance branch May 17, 2022 13:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: create core/base for react/node/legacy lint configs #22128

feat: create core/base for react/node/legacy lint configs #22128

Hotell commented Mar 16, 2022 •

edited

Loading

Hotell Mar 16, 2022

Hotell Mar 16, 2022

Hotell Mar 16, 2022

Hotell Mar 16, 2022

Hotell Mar 16, 2022

codesandbox-ci bot commented Mar 16, 2022 •

edited

Loading

fabricteam commented Mar 16, 2022 •

edited

Loading

fabricteam commented Mar 16, 2022 •

edited

Loading

size-auditor bot commented Mar 16, 2022 •

edited

Loading

fabricteam commented Mar 16, 2022 •

edited

Loading

fabricteam commented Mar 16, 2022 •

edited

Loading

Hotell Mar 16, 2022 •

edited

Loading

Hotell Mar 16, 2022

ling1726 Mar 17, 2022

Hotell Mar 17, 2022

Hotell commented Mar 17, 2022 •

edited

Loading

andrefcdias commented Mar 17, 2022

azure-pipelines bot commented Mar 17, 2022

ling1726 Mar 17, 2022

Hotell Mar 28, 2022

ling1726 Mar 17, 2022

Hotell Mar 28, 2022

		@@ -1,440 +1,42 @@
		// @ts-check
		const configHelpers = require('../utils/configHelpers');

	...configHelpers.getNamingConventionRule(true),
	/* prefix interfaces with I */
	...configHelpers.getNamingConventionRule(true),

		@@ -0,0 +1,357 @@
		// @ts-check
		const configHelpers = require('../utils/configHelpers');

feat: create core/base for react/node/legacy lint configs #22128

feat: create core/base for react/node/legacy lint configs #22128

Conversation

Hotell commented Mar 16, 2022 • edited Loading

Current Behavior

New Behavior

Lint speed comparison

Related Issue(s)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codesandbox-ci bot commented Mar 16, 2022 • edited Loading

fabricteam commented Mar 16, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Mar 16, 2022 • edited Loading

size-auditor bot commented Mar 16, 2022 • edited Loading

Asset size changes

fabricteam commented Mar 16, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Mar 16, 2022 • edited Loading

Hotell Mar 16, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hotell commented Mar 17, 2022 • edited Loading

andrefcdias commented Mar 17, 2022

azure-pipelines bot commented Mar 17, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hotell commented Mar 16, 2022 •

edited

Loading

codesandbox-ci bot commented Mar 16, 2022 •

edited

Loading

fabricteam commented Mar 16, 2022 •

edited

Loading

fabricteam commented Mar 16, 2022 •

edited

Loading

size-auditor bot commented Mar 16, 2022 •

edited

Loading

fabricteam commented Mar 16, 2022 •

edited

Loading

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

fabricteam commented Mar 16, 2022 •

edited

Loading

Hotell Mar 16, 2022 •

edited

Loading

Hotell commented Mar 17, 2022 •

edited

Loading