feat: enable JSX types enforcement and explicit return types lint rules to v8 react config, sync flat configs and resolve all v8 lint errors (#35303)

Author: Hotell

apps/perf-test/.eslintrc.json

@@ -3,6 +3,7 @@
   "root": true,
   "rules": {
     "no-console": "off",
-    "no-restricted-globals": "off"
+    "no-restricted-globals": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 }

apps/perf-test/src/scenarios/OverflowSet.tsx

@@ -3,12 +3,12 @@ import { OverflowSet, IOverflowSetItemProps } from '@fluentui/react';
 
 const noOp = () => undefined;
 
-const onRenderItem = (item: IOverflowSetItemProps): React.JSX.Element => {
+const onRenderItem = (item: IOverflowSetItemProps): React.ReactElement => {
   return <div>{item.name}</div>;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const onRenderOverflowButton = (overflowItems: any[] | undefined): React.JSX.Element => {
+const onRenderOverflowButton = (overflowItems: any[] | undefined): React.ReactElement => {
   return <button> ... </button>;
 };
 

apps/public-docsite-resources/.eslintrc.json

@@ -6,6 +6,7 @@
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/member-ordering": "off",
     "no-restricted-globals": "off",
-    "@typescript-eslint/no-deprecated": "off"
+    "@typescript-eslint/no-deprecated": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 }

apps/public-docsite-resources/src/components/pages/ColorsPage.tsx

@@ -63,7 +63,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     ThemeGenerator.insureSlots(themeRules, isDark(themeRules[BaseSlots[BaseSlots.backgroundColor]].color!));
 
     this.state = {
-      themeRules: themeRules,
+      themeRules,
       colorPickerSlotRule: null,
       colorPickerElement: null,
       colorPickerVisible: false,
@@ -86,7 +86,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     this._async.dispose();
   }
 
-  public render(): JSX.Element {
+  public render(): React.ReactElement {
     const { colorPickerVisible, colorPickerSlotRule, colorPickerElement } = this.state;
 
     const fabricThemeSlots = [
@@ -270,7 +270,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
         true,
         true,
       );
-      this.setState({ themeRules: themeRules }, this._makeNewTheme);
+      this.setState({ themeRules }, this._makeNewTheme);
     }, 20);
     // 20ms is low enough that you can slowly drag to change color and see that theme,
     // but high enough that quick changes don't get bogged down by a million changes inbetween
@@ -298,7 +298,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     }
   };
 
-  private _slotWidget = (slotRule: IThemeSlotRule): JSX.Element => {
+  private _slotWidget = (slotRule: IThemeSlotRule): React.ReactElement => {
     return (
       <div key={slotRule.name} className="ms-themer-slot">
         {this._colorSquareSwatchWidget(slotRule)}
@@ -310,11 +310,11 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     );
   };
 
-  private _fabricSlotWidget = (fabricSlot: FabricSlots): JSX.Element => {
+  private _fabricSlotWidget = (fabricSlot: FabricSlots): React.ReactElement => {
     return this._slotWidget(this.state.themeRules[FabricSlots[fabricSlot]]);
   };
 
-  private _colorSquareSwatchWidget(slotRule: IThemeSlotRule): JSX.Element {
+  private _colorSquareSwatchWidget(slotRule: IThemeSlotRule): React.ReactElement {
     return (
       <div
         key={slotRule.name}
@@ -325,7 +325,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     );
   }
 
-  private _accessibilityRow = (foreground: FabricSlots, background: FabricSlots): JSX.Element => {
+  private _accessibilityRow = (foreground: FabricSlots, background: FabricSlots): React.ReactElement => {
     const themeRules = this.state.themeRules;
     const bgc: IColor = themeRules[FabricSlots[background]].color!;
     const fgc: IColor = themeRules[FabricSlots[foreground]].color!;
@@ -346,8 +346,8 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     );
   };
 
-  private _accessibilityTableBody = (): JSX.Element => {
-    const accessibilityRows: JSX.Element[] = [
+  private _accessibilityTableBody = (): React.ReactElement => {
+    const accessibilityRows: React.ReactElement[] = [
       this._accessibilityRow(FabricSlots.neutralPrimary, FabricSlots.white), // default
       // primary color also needs to be accessible, this is also strong variant default
       this._accessibilityRow(FabricSlots.white, FabricSlots.themePrimary),
@@ -375,7 +375,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     return <tbody>{accessibilityRows}</tbody>;
   };
 
-  private _outputSection = (): JSX.Element => {
+  private _outputSection = (): React.ReactElement => {
     const themeRules = this.state.themeRules;
 
     // strip out the unnecessary shade slots from the final output theme
@@ -453,7 +453,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
     console.log('New theme:', finalTheme);
   };
 
-  private _baseColorSlotPicker = (baseSlot: BaseSlots, title: string): JSX.Element => {
+  private _baseColorSlotPicker = (baseSlot: BaseSlots, title: string): React.ReactElement => {
     let colorChangeTimeout: number;
 
     const onChange = (ev: React.MouseEvent<HTMLElement>, newColor: IColor): void => {
@@ -468,7 +468,7 @@ export class ColorsPage extends React.Component<{}, IColorsPageState> {
           // isInverted got swapped, so need to refresh slots with new shading rules
           ThemeGenerator.insureSlots(themeRules, !currentIsDark);
         }
-        this.setState({ themeRules: themeRules }, this._makeNewTheme);
+        this.setState({ themeRules }, this._makeNewTheme);
       }, 20);
       // 20ms is low enough that you can slowly drag to change color and see that theme,
       // but high enough that quick changes don't get bogged down by a million changes inbetween

apps/public-docsite-resources/src/components/pages/ThemePage.tsx

@@ -63,7 +63,7 @@ export class ThemePage extends React.Component<IThemePageProps, IThemePageState>
     };
   }
 
-  public render(): JSX.Element {
+  public render(): React.ReactElement {
     // Don't mutate state to display lists
     const palette = [...this.state.palette];
     const semanticColors = [...this.state.semanticColors];
@@ -152,7 +152,7 @@ export class ThemePage extends React.Component<IThemePageProps, IThemePageState>
       colorPickerProps: {
         targetElement: (ev.currentTarget as HTMLElement).children[0] as HTMLElement,
         value: item.value,
-        index: index,
+        index,
       },
       activeList: list,
     });

apps/public-docsite/.eslintrc.json

@@ -7,6 +7,7 @@
     "prefer-const": "off",
     "react/jsx-no-bind": "off",
     "no-restricted-globals": "off",
-    "@typescript-eslint/no-deprecated": "off"
+    "@typescript-eslint/no-deprecated": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 }

apps/public-docsite/src/components/IconGrid/IconGrid.tsx

@@ -96,7 +96,7 @@ export class IconGrid extends React.Component<IIconGridProps, IIconGridState> {
     }
   }
 
-  public render(): JSX.Element {
+  public render(): React.ReactElement {
     const areIconsLoaded = !!this.state.resolvedIcons;
     const icons = this._getItems();
 
@@ -132,8 +132,8 @@ export class IconGrid extends React.Component<IIconGridProps, IIconGridState> {
     return resolvedIcons.filter(icon => icon.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1);
   };
 
-  private _renderIcon = (icon: IIconDefinition, index?: number): JSX.Element => {
-    let renderedIcon: JSX.Element;
+  private _renderIcon = (icon: IIconDefinition, index?: number): React.ReactElement => {
+    let renderedIcon: React.ReactElement;
     switch (icon.iconType) {
       case 'core-font':
         let iconClassName = `ms-Icon ms-Icon--${icon.name}`;

apps/public-docsite/src/components/Nav/Nav.tsx

@@ -79,7 +79,7 @@ export class Nav extends React.Component<INavProps, INavState> {
     }
   }
 
-  public render(): JSX.Element | null {
+  public render(): React.ReactElement | null {
     const { pages, searchablePageTitle } = this.props;
     const { sortState } = this.state;
     if (!pages) {
@@ -100,7 +100,7 @@ export class Nav extends React.Component<INavProps, INavState> {
     );
   }
 
-  private _renderLinkList = (pages: INavPage[], isSubMenu: boolean): JSX.Element => {
+  private _renderLinkList = (pages: INavPage[], isSubMenu: boolean): React.ReactElement => {
     const { searchablePageTitle } = this.props;
     const { sortState } = this.state;
 
@@ -127,7 +127,7 @@ export class Nav extends React.Component<INavProps, INavState> {
     );
   };
 
-  private _renderLink = (page: INavPage, linkIndex: number): JSX.Element => {
+  private _renderLink = (page: INavPage, linkIndex: number): React.ReactElement => {
     const searchQuery = this.state.searchQuery.toLowerCase();
     const childLinks = page.pages ? this._renderLinkList(page.pages, true) : null;
     const text = page.title;

apps/public-docsite/src/components/Site/Site.tsx

@@ -246,12 +246,12 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     };
   }
 
-  private _renderMessageBar(): JSX.Element | null {
+  private _renderMessageBar(): React.ReactElement | null {
     const { pagePath } = this.state;
     const { siteDefinition } = this.props;
     const { messageBars } = siteDefinition;
 
-    let _messageBar: JSX.Element | null = null;
+    let _messageBar: React.ReactElement | null = null;
 
     if (messageBars && pagePath) {
       for (const messageBar of messageBars) {
@@ -277,7 +277,7 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     return _messageBar;
   }
 
-  private _renderPageNav(): JSX.Element | null {
+  private _renderPageNav(): React.ReactElement | null {
     const { activePages, searchablePageTitle, isContentFullBleed } = this.state;
 
     if (!isContentFullBleed && activePages) {
@@ -315,7 +315,7 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     return 'default' as TPlatforms;
   };
 
-  private _renderTopNav = (): JSX.Element | undefined => {
+  private _renderTopNav = (): React.ReactElement | undefined => {
     const { platform } = this.state;
     const { siteDefinition, hasUHF } = this.props;
 
@@ -333,11 +333,11 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     }
   };
 
-  private _renderTopBanner = (): JSX.Element | undefined => {
+  private _renderTopBanner = (): React.ReactElement | undefined => {
     return <TopBanner cdnUrl={cdnUrl} />;
   };
 
-  private _renderPlatformPicker = (): JSX.Element | null => {
+  private _renderPlatformPicker = (): React.ReactElement | null => {
     const { siteDefinition } = this.props;
     const { hasPlatformPicker, platform, pagePlatforms } = this.state;
 
@@ -354,7 +354,7 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     return null;
   };
 
-  private _renderPlatformBar = (): JSX.Element | null => {
+  private _renderPlatformBar = (): React.ReactElement | null => {
     const { siteDefinition } = this.props;
     const { platform, pagePlatforms, hasPlatformPicker } = this.state;
 

apps/public-docsite/src/components/Table/Table.tsx

@@ -41,7 +41,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
     window.removeEventListener('resize', this._handleResize);
   }
 
-  public render(): JSX.Element {
+  public render(): React.ReactElement {
     let { content } = this.props;
     return this.state.currentBreakpoint === 'mobile' && this.props.responsive
       ? this._renderMobile(content)
@@ -52,7 +52,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
    * Render Table cell.  Cell content is either cell's value property, or cell's html property
    * (if value is an empty string).
    */
-  private _renderCell(cell: ITableCell, index: number): JSX.Element {
+  private _renderCell(cell: ITableCell, index: number): React.ReactElement {
     return cell.value.length ? (
       <td className={cell.className} key={index}>
         {cell.value}
@@ -63,7 +63,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
     );
   }
 
-  private _renderDesktop(content: ITableContent): JSX.Element {
+  private _renderDesktop(content: ITableContent): React.ReactElement {
     return (
       <table className={styles.table}>
         <thead>
@@ -82,7 +82,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
     );
   }
 
-  private _renderMobile(content: ITableContent): JSX.Element {
+  private _renderMobile(content: ITableContent): React.ReactElement {
     const headers = this.props.content.headers;
     return (
       <div>