feat(eslint-rules): add consistent-callback-type rule for event callback typing for react-components and enable it in all v9 packages

change/@fluentui-eslint-plugin-bc33d2c9-cfd7-44bb-a8de-04bf3fb7b14f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add new rule consistent-callback-type",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-accordion-74970004-bc83-461d-a43c-3758c0c429b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-card-26618c50-93dc-4116-8d0a-90c4f1566875.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-checkbox-61435c59-fe06-4b4a-a1b1-f0a318fd8c87.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-combobox-536f8d48-97f5-47a6-8328-e9359bc62c1e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-datepicker-compat-583ce0d7-9840-431b-8056-91f5991ef562.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-dialog-285527f9-bb4d-41d5-b6f4-1b57ab4f8ced.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-input-b337e912-5bde-4162-9a26-201fcc5347ee.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-menu-ba500681-bcdd-4437-aaa3-002bf617b009.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-migration-v0-v9-2af1c3a5-5f09-4ead-80b6-c7370457d6c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-popover-6de680db-0afe-4131-a96c-9ef10d14c997.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-radio-6a06b070-1df9-4416-92fd-8f4de71b1759.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-radio",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-rating-preview-be1073d4-f244-4c68-8db6-12d4e897bc68.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-rating-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-select-6c0bfff0-b7e4-46a6-a4d3-ca79eada2d17.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-slider-a79b527f-6529-4b9e-92ef-fca325b162db.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-spinbutton-2becfac8-c8ca-4ecb-b961-dfad3e44f878.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-switch-a4f6ce47-4fdb-421d-8229-ec4e30dd9d6b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-switch",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-table-ea92aa04-54e5-4f63-936e-e37fe9a4f2f7.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabs-e928b3f8-e533-4e3c-960d-b62cd1b6661b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tags-b38fc107-b805-4f7b-bc94-18852cee65c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tags",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-teaching-popover-preview-d2a6cc93-7e92-4bce-bbf4-44aa4fc67376.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-teaching-popover-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-textarea-a9dcf4be-9061-4e14-aeac-2299e8f2a02e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-textarea",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-timepicker-compat-459ec9f4-1fb6-43f4-ae67-ab03757ed9c1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-timepicker-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-toast-32f33ebb-12ce-4009-9088-06208e6bc563.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-8707f19b-076b-41da-ad95-246744dc3cce.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tooltip-486e2f8e-d4ef-49e6-865a-128e020396f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tree-6f3593c4-9155-4a86-8cdf-653b8992e6a1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-virtualizer-7344c6de-f2e4-4795-bd41-06f3bba0406c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

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

@@ -58,5 +58,11 @@ module.exports = {
         'react/jsx-no-bind': 'off',
       },
     },
+    {
+      files: ['**/src/**/*.{ts,tsx}'],
+      rules: {
+        '@fluentui/consistent-callback-type': 'error',
+      },
+    },
   ],
 };

packages/eslint-plugin/src/index.js

@@ -19,6 +19,7 @@ module.exports = {
     'no-visibility-modifiers': require('./rules/no-visibility-modifiers'),
     'no-restricted-imports': require('./rules/no-restricted-imports'),
     'no-context-default-value': require('./rules/no-context-default-value'),
+    'consistent-callback-type': require('./rules/consistent-callback-type'),
   },
 
   // Not a standard eslint thing, just exported for convenience

packages/eslint-plugin/src/rules/consistent-callback-type/index.js

@@ -0,0 +1,82 @@
+// @ts-check
+const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
+const createRule = require('../../utils/createRule');
+
+module.exports = createRule({
+  name: 'consistent-callback-type',
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce callback props to be typed with `EventHandler`',
+      category: 'Best Practices',
+      recommended: 'error',
+    },
+    messages: {
+      invalidType: 'callback props should be typed with @fluentui/react-utilities#EventHandler<T>',
+    },
+    schema: [],
+  },
+  defaultOptions: [],
+  create(context) {
+    /**
+     * @type {{
+     *   node: import('@typescript-eslint/experimental-utils').TSESTree.TSTypeAliasDeclaration,
+     *   hasInnerTypeLiteral: boolean
+     * }[]}
+     */
+    const typeAliasStack = []; // use a stack to match the first TSTypeLiteral node within TSTypeAliasDeclaration node
+
+    return {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'TSTypeAliasDeclaration[id.name=/.*Props$/]': function (node) {
+        typeAliasStack.push({ node, hasInnerTypeLiteral: false });
+      },
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      TSTypeLiteral: (/** @type {import('@typescript-eslint/experimental-utils').TSESTree.TSTypeLiteral}*/ node) => {
+        if (typeAliasStack.length > 0) {
+          const top = typeAliasStack[typeAliasStack.length - 1];
+          if (!top.hasInnerTypeLiteral) {
+            /**
+             * This is the first TSTypeLiteral node within the current TSTypeAliasDeclaration
+             * For this example:
+             * `type SomeProps3 = SomeArgBag & { someFunction?: (args: SomeArgBag) => void; };`
+             * it matches                     `{ someFunction?: (args: SomeArgBag) => void; }`
+             */
+            top.hasInnerTypeLiteral = true;
+
+            node.members.forEach(member => {
+              if (
+                member.type === AST_NODE_TYPES.TSPropertySignature &&
+                member.key.type === AST_NODE_TYPES.Identifier &&
+                /^on[A-Z]/.test(member.key.name)
+              ) {
+                const typeAnnotation = member.typeAnnotation?.typeAnnotation;
+                // Check if typeAnnotation is of type EventHandler
+                if (
+                  !(
+                    typeAnnotation &&
+                    typeAnnotation.type === AST_NODE_TYPES.TSTypeReference &&
+                    typeAnnotation.typeName.type === AST_NODE_TYPES.Identifier &&
+                    typeAnnotation.typeName.name === 'EventHandler' &&
+                    typeAnnotation.typeParameters
+                  )
+                ) {
+                  context.report({
+                    node: member,
+                    messageId: 'invalidType',
+                  });
+                }
+              }
+            });
+          }
+        }
+      },
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'TSTypeAliasDeclaration:exit': function () {
+        typeAliasStack.pop();
+      },
+    };
+  },
+});

packages/eslint-plugin/src/rules/consistent-callback-type/index.test.js

@@ -0,0 +1,69 @@
+// @ts-nocheck
+const { ESLintUtils } = require('@typescript-eslint/experimental-utils');
+const rule = require('./index');
+
+const ruleTester = new ESLintUtils.RuleTester({
+  parser: '@typescript-eslint/parser',
+});
+
+ruleTester.run('consistent-callback-type', rule, {
+  valid: [
+    // Valid when prop is TSTypeAliasDeclaration and the callback uses EventHandler
+    {
+      code: `
+        import { EventHandler, EventData } from '@fluentui/react-utilities';
+        export type OnSomeEventData = EventData<'focus', React.FocusEvent<HTMLElement>> & {
+          open: boolean,
+        };
+        export type SomeProps = {
+          onSomeEvent?: EventHandler<OnSomeEventData>,
+        };
+      `,
+      filename: 'src/components/SomeComponent/SomeComponent.type.ts',
+    },
+    // Valid when prop is TSIntersectionType and the callback uses EventHandler
+    {
+      code: `
+        import { EventHandler, EventData } from '@fluentui/react-utilities';
+        export type OnSomeEventData = EventData<'focus', React.FocusEvent<HTMLElement>> & {
+          open: boolean,
+        };
+        export type SomeProps = SomeType & {
+          onSomeEvent?: EventHandler<OnSomeEventData>,
+        };
+      `,
+      filename: 'src/components/SomeComponent/SomeComponent.type.ts',
+    },
+    // Valid when prop has a function that is not callback, and not using EventHandler type
+    {
+      code: `
+        type SomeArgBag = { one: number };
+        export type SomeProps = {
+          someFunction?: (args: SomeArgBag) => void;
+          someFunction2?: (args: { onSomething: string }) => void; // test nested TSTypeLiteral node that starts with 'on'
+        };
+      `,
+      filename: 'src/components/SomeComponent/SomeComponent.type.ts',
+    },
+  ],
+  invalid: [
+    // Invalid when callback in props is not using EventHandler
+    {
+      code: `
+        export type SomeProps = {
+          onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: {}) => void;
+        };
+      `,
+      errors: [{ messageId: 'invalidType' }],
+    },
+    // Invalid when callback in props is not using EventHandler, and the props is TSIntersectionType
+    {
+      code: `
+        export type SomeProps = SomeType & {
+          onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: {}) => void;
+        };
+      `,
+      errors: [{ messageId: 'invalidType' }],
+    },
+  ],
+});