Chore: Fix custom eslint rule typechecking (#85886)

packages/grafana-eslint-rules/package.json

@@ -5,6 +5,9 @@
   "main": "./index.cjs",
   "author": "Grafana Labs",
   "license": "Apache-2.0",
+  "scripts": {
+    "typecheck": "tsc --emitDeclarationOnly false --noEmit"
+  },
   "repository": {
     "type": "git",
     "url": "http://github.com/grafana/grafana.git",

packages/grafana-eslint-rules/rules/no-aria-label-e2e-selectors.cjs

@@ -2,15 +2,15 @@
 const { ESLintUtils } = require('@typescript-eslint/utils');
 
 /**
- * @typedef {import("@typescript-eslint/types/dist/generated/ast-spec").Expression} Expression
+ * @typedef {import("@typescript-eslint/utils").TSESTree.Expression} Expression
- * @typedef {import("@typescript-eslint/types/dist/generated/ast-spec").JSXEmptyExpression } JSXEmptyExpression
+ * @typedef {import('@typescript-eslint/utils').TSESTree.JSXEmptyExpression } JSXEmptyExpression
- * @typedef {import("@typescript-eslint/types/dist/generated/ast-spec").PrivateIdentifier } PrivateIdentifier
+ * @typedef {import('@typescript-eslint/utils').TSESTree.PrivateIdentifier } PrivateIdentifier
- * @typedef {import("@typescript-eslint/types/dist/generated/ast-spec").MemberExpressionComputedName } MemberExpressionComputedName
+ * @typedef {import('@typescript-eslint/utils').TSESTree.MemberExpressionComputedName } MemberExpressionComputedName
- * @typedef {import("@typescript-eslint/types/dist/generated/ast-spec").MemberExpressionNonComputedName } MemberExpressionNonComputedName
+ * @typedef {import('@typescript-eslint/utils').TSESTree.MemberExpressionNonComputedName } MemberExpressionNonComputedName
- * @typedef {import('@typescript-eslint/types/dist/generated/ast-spec').Identifier} Identifier
+ * @typedef {import('@typescript-eslint/utils').TSESTree.Identifier} Identifier
  *
- * @typedef {import("@typescript-eslint/utils/dist/ts-eslint/Scope").Scope.Scope } Scope
+ * @typedef {import('@typescript-eslint/utils').TSESLint.Scope.Scope} Scope
- * @typedef {import("@typescript-eslint/utils/dist/ts-eslint/Scope").Scope.Variable } Variable
+ * @typedef {import('@typescript-eslint/utils').TSESLint.Scope.Variable} Variable
  */
 
 const GRAFANA_E2E_PACKAGE_NAME = '@grafana/e2e-selectors';
@@ -69,7 +69,7 @@ const rule = createRule({
   meta: {
     docs: {
       description: 'aria-label should not contain e2e selectors',
-      recommended: 'error',
+      // recommended: 'error',
     },
     messages: {
       useDataTestId: 'Use data-testid for E2E selectors instead of aria-label',
@@ -145,4 +145,6 @@ function findVariableInScope(initialScope, variableName) {
 
     scope = scope.upper;
   }
+
+  return undefined;
 }

packages/grafana-eslint-rules/rules/no-border-radius-literal.cjs

@@ -7,23 +7,20 @@ const borderRadiusRule = createRule({
   create(context) {
     return {
       CallExpression(node) {
-        if (
+        if (node.callee.type === AST_NODE_TYPES.Identifier && node.callee.name === 'css') {
-          node.callee.type === AST_NODE_TYPES.Identifier &&
-          node.callee.name === 'css'
-        ) {
           const cssObjects = node.arguments.flatMap((node) => {
             switch (node.type) {
               case AST_NODE_TYPES.ObjectExpression:
                 return [node];
               case AST_NODE_TYPES.ArrayExpression:
-                return node.elements.filter(v => v.type === AST_NODE_TYPES.ObjectExpression);
+                return node.elements.filter((v) => v?.type === AST_NODE_TYPES.ObjectExpression);
               default:
                 return [];
             }
           });
 
           for (const cssObject of cssObjects) {
-            if (cssObject.type === AST_NODE_TYPES.ObjectExpression) {
+            if (cssObject?.type === AST_NODE_TYPES.ObjectExpression) {
               for (const property of cssObject.properties) {
                 if (
                   property.type === AST_NODE_TYPES.Property &&
@@ -48,7 +45,6 @@ const borderRadiusRule = createRule({
     type: 'problem',
     docs: {
       description: 'Check if border-radius theme tokens are used',
-      recommended: false,
     },
     messages: {
       borderRadiusId: 'Prefer using theme.shape.radius tokens instead of literal values.',

packages/grafana-eslint-rules/rules/theme-token-usage.cjs

@@ -12,8 +12,11 @@ const themeTokenUsage = createRule({
           const paths = [];
           let lastAncestor = null;
           for (const ancestor of ancestors) {
-            if (ancestor.type === AST_NODE_TYPES.MemberExpression && ancestor.property.type === AST_NODE_TYPES.Identifier) {
+            if (
-              paths.push(ancestor.property.name)
+              ancestor.type === AST_NODE_TYPES.MemberExpression &&
+              ancestor.property.type === AST_NODE_TYPES.Identifier
+            ) {
+              paths.push(ancestor.property.name);
               lastAncestor = ancestor;
             } else {
               break;
@@ -23,14 +26,14 @@ const themeTokenUsage = createRule({
             paths.unshift('theme');
             context.report({
               node: lastAncestor,
-              messageId: "themeTokenUsed",
+              messageId: 'themeTokenUsed',
               data: {
-                identifier: paths.join('.')
+                identifier: paths.join('.'),
-              }
+              },
-            })
+            });
           }
         }
-      }
+      },
     };
   },
   name: 'theme-token-usage',
@@ -38,7 +41,6 @@ const themeTokenUsage = createRule({
     type: 'problem',
     docs: {
       description: 'Check for theme token usage',
-      recommended: false,
     },
     messages: {
       themeTokenUsed: '{{ identifier }}',

packages/grafana-eslint-rules/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "declaration": false,
+    "allowJs": true,
+    "outDir": "./dist"
+  },
+  "extends": "@grafana/tsconfig"
+}