Convert the next three eslint rules to TypeScript.

* enforce-custom-element-definitions-location
* html-tagged-template
* jslog-context-list

Bug: 397586315
Change-Id: I001213294dd094abe1281c81595ecd8bd9dd7c29
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6434122
Reviewed-by: Nikolay Vitkov <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

scripts/eslint_rules/lib/enforce-custom-element-definitions-location.js renamed to scripts/eslint_rules/lib/enforce-custom-element-definitions-location.ts

@@ -1,29 +1,25 @@
 // Copyright 2021 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-'use strict';
+import path from 'node:path';
 
-const path = require('path');
+import {createRule} from './tsUtils.ts';
 
-/**
- * @type {import('eslint').Rule.RuleModule}
- */
-module.exports = {
+export default createRule<[{rootFrontendDirectory: string}], 'definitionInWrongFolder'>({
+  name: 'enforce-custom-element-definitions-location',
   meta: {
     type: 'problem',
 
     docs: {
-      description:
-        'ensure that custom element definitions are in the correct folders.',
+      description: 'ensure that custom element definitions are in the correct folders.',
       category: 'Possible Errors',
     },
     fixable: 'code',
     messages: {
-      definitionInWrongFolder:
-        'A custom element definition was found in a folder that ' +
-        'should not contain element definitions. If you want to define a custom element, ' +
-        'either place it in `ui/components/` or in a `components` sub-folder of a panel. ' +
-        'E.g. `panels/elements/components/`.',
+      definitionInWrongFolder: 'A custom element definition was found in a folder that ' +
+          'should not contain element definitions. If you want to define a custom element, ' +
+          'either place it in `ui/components/` or in a `components` sub-folder of a panel. ' +
+          'E.g. `panels/elements/components/`.',
     },
     schema: [
       {
@@ -37,17 +33,18 @@ module.exports = {
       },
     ],
   },
-  create: function (context) {
+  defaultOptions: [{rootFrontendDirectory: ''}],
+  create: function(context) {
     const filename = context.filename ?? context.getFilename();
     const classDefiningFileName = path.resolve(filename);
 
     let frontEndDirectory = '';
-    if (context.options?.[0]?.rootFrontendDirectory) {
+    if (context.options[0]?.rootFrontendDirectory) {
       frontEndDirectory = context.options[0].rootFrontendDirectory;
     }
     if (!frontEndDirectory) {
       throw new Error(
-        'rootFrontEndDirectory must be provided to custom_elements_definitions_location.',
+          'rootFrontEndDirectory must be provided to custom_elements_definitions_location.',
       );
     }
 
@@ -77,10 +74,10 @@ module.exports = {
 
         if (classDefiningFileName.startsWith(PANELS_DIRECTORY)) {
           const filePathWithPanelName = classDefiningFileName.substring(
-            PANELS_DIRECTORY.length + 1,
+              PANELS_DIRECTORY.length + 1,
           );
           const filePathWithoutPanelName = filePathWithPanelName.substring(
-            filePathWithPanelName.indexOf(path.sep) + 1,
+              filePathWithPanelName.indexOf(path.sep) + 1,
           );
 
           if (filePathWithoutPanelName.includes(`components${path.sep}`)) {
@@ -95,4 +92,4 @@ module.exports = {
       },
     };
   },
-};
+});

scripts/eslint_rules/lib/html-tagged-template.js renamed to scripts/eslint_rules/lib/html-tagged-template.ts

@@ -1,24 +1,32 @@
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import type {TSESLint, TSESTree} from '@typescript-eslint/utils';
 
-/**
- * @type {import('eslint').Rule.RuleModule}
- */
-module.exports = {
+import {createRule} from './tsUtils.ts';
+
+type ImportDeclaration = TSESTree.ImportDeclaration;
+type RuleFix = TSESLint.RuleFix;
+
+export default createRule({
+  name: 'html-tagged-template',
   meta: {
     type: 'problem',
 
     docs: {
       description: 'Usage of Lit.html',
       category: 'Possible Errors',
     },
+    messages: {
+      useUnqualifiedHtmlTaggedTemplate: 'Use unqualified html tagged template for compatibility with lit-analyzer',
+    },
     fixable: 'code',
-    schema: [], // no options
+    schema: [],  // no options
   },
-  create: function (context) {
+  defaultOptions: [],
+  create: function(context) {
     const sourceCode = context.sourceCode ?? context.getSourceCode();
-    let lastImport = null;
+    let lastImport: ImportDeclaration|null = null;
     let shorthandDefined = false;
     return {
       ImportDeclaration(node) {
@@ -49,9 +57,9 @@ module.exports = {
             tag.property.type === 'Identifier' && tag.property.name === 'html') {
           context.report({
             node,
-            message: 'Use unqualified html tagged template for compatibility with lit-analyzer',
+            messageId: 'useUnqualifiedHtmlTaggedTemplate',
             fix(fixer) {
-              const result = [];
+              const result: RuleFix[] = [];
               if (tag.object?.range?.[0] && tag.property?.range?.[0]) {
                 result.push(
                     fixer.removeRange([
@@ -63,7 +71,7 @@ module.exports = {
 
               if (lastImport && !shorthandDefined) {
                 result.push(
-                  fixer.insertTextAfter(lastImport, '\n\nconst {html} = Lit;'),
+                    fixer.insertTextAfter(lastImport, '\n\nconst {html} = Lit;'),
                 );
                 shorthandDefined = true;
               }
@@ -74,4 +82,4 @@ module.exports = {
       },
     };
   },
-};
+});

scripts/eslint_rules/lib/jslog-context-list.js renamed to scripts/eslint_rules/lib/jslog-context-list.ts

@@ -2,13 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
 
-const fs = require('fs');
-const path = require('path');
+import {createRule} from './tsUtils.ts';
 
+// @ts-expect-error
+const filename = fileURLToPath(import.meta.url);
 const FILE = 'front_end/ui/visual_logging/KnownContextValues.ts';
-const FRONT_END_PARENT_FOLDER = path.join(__filename, '..', '..', '..', '..');
+const FRONT_END_PARENT_FOLDER = path.join(filename, '..', '..', '..', '..');
 const ABSOLUTE_FILE_PATH = path.join(FRONT_END_PARENT_FOLDER, FILE);
 const LICENSE_HEADER = `// Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
@@ -20,49 +23,47 @@ const formattedValues = new Set(
     fs.readFileSync(ABSOLUTE_FILE_PATH, 'utf-8').split('\n').filter(l => l.startsWith('  \'')),
 );
 
-/**
- * @type {import('eslint').Rule.RuleModule}
- */
-module.exports = {
+export default createRule({
+  name: 'jslog-context-list',
   meta: {
     type: 'problem',
 
     docs: {
       description: 'Puts jslog context values into KnownContextValues.ts file',
       category: 'Possible Errors',
     },
+    messages: {
+      unknownJslogContextValue: 'Found jslog context value \'{{ value }}\' that is not listed in ' + FILE,
+    },
     fixable: 'code',
-    schema: [], // no options
+    schema: [],  // no options
   },
   defaultOptions: [],
-  create: function (context) {
+  create: function(context) {
     const checkValue = (value, node) => {
       if (typeof value !== 'string') {
         return;
       }
       if (!value.length) {
         return;
       }
-      const formattedValue =
-        '  ' + JSON.stringify(value).replaceAll('"', '\'') + ',';
+      const formattedValue = '  ' + JSON.stringify(value).replaceAll('"', '\'') + ',';
       if (formattedValues.has(formattedValue)) {
         return;
       }
       formattedValues.add(formattedValue);
       if (process.env.ESLINT_FAIL_ON_UNKNOWN_JSLOG_CONTEXT_VALUE) {
         context.report({
           node,
-          message: `Found jslog context value '${value}' that is not listed in ${FILE}`,
+          messageId: 'unknownJslogContextValue',
+          data: {value},
         });
       }
     };
 
     const checkPropertyValue = (propertyName, node) => {
       for (const property of node?.properties || []) {
-        if (
-          property.key?.name === propertyName ||
-          property.key?.value === propertyName
-        ) {
+        if (property.key?.name === propertyName || property.key?.value === propertyName) {
           checkValue(property.value?.value, node);
         }
       }
@@ -74,18 +75,12 @@ module.exports = {
           return;
         }
 
-        if (
-          node.callee.type === 'MemberExpression' &&
-          node.callee.object.type === 'Identifier' &&
-          node.callee.object.name === 'VisualLogging'
-        ) {
+        if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' &&
+            node.callee.object.name === 'VisualLogging') {
           if (firstArg.type === 'Literal') {
             checkValue(firstArg.value, node);
           }
-        } else if (
-          node.callee.type === 'MemberExpression' &&
-          node.callee.property.type === 'Identifier'
-        ) {
+        } else if (node.callee.type === 'MemberExpression' && node.callee.property.type === 'Identifier') {
           const propertyName = node.callee.property.name;
           if (propertyName === 'registerActionExtension') {
             checkPropertyValue('actionId', firstArg);
@@ -104,29 +99,19 @@ module.exports = {
         checkPropertyValue('jslogContext', node);
       },
       VariableDeclarator(node) {
-        if (
-          node.id.type === 'Identifier' &&
-          node.id.name === 'generatedProperties' &&
-          node.init?.type === 'ArrayExpression'
-        ) {
+        if (node.id.type === 'Identifier' && node.id.name === 'generatedProperties' &&
+            node.init?.type === 'ArrayExpression') {
           for (const element of node.init.elements) {
             checkPropertyValue('name', element);
           }
         }
-        if (
-          node.id.type === 'Identifier' &&
-          node.id.name === 'generatedAliasesFor' &&
-          node.init?.type === 'NewExpression'
-        ) {
+        if (node.id.type === 'Identifier' && node.id.name === 'generatedAliasesFor' &&
+            node.init?.type === 'NewExpression') {
           const firstArg = node.init?.arguments?.[0];
-          const elements =
-            firstArg.type === 'ArrayExpression' ? firstArg.elements : [];
+          const elements = firstArg.type === 'ArrayExpression' ? firstArg.elements : [];
 
           for (const outerElement of elements) {
-            const innerElements =
-              outerElement?.type === 'ArrayExpression'
-                ? outerElement.elements
-                : [];
+            const innerElements = outerElement?.type === 'ArrayExpression' ? outerElement.elements : [];
             for (const innerElement of innerElements) {
               if (innerElement && 'value' in innerElement) {
                 checkValue(innerElement.value, innerElement);
@@ -139,13 +124,10 @@ module.exports = {
         if (process.env.ESLINT_FAIL_ON_UNKNOWN_JSLOG_CONTEXT_VALUE) {
           return;
         }
-        const finalContents =
-          LICENSE_HEADER +
-          'export const knownContextValues = new Set([\n' +
-          [...formattedValues].sort().join('\n') +
-          '\n]);\n';
+        const finalContents = LICENSE_HEADER + 'export const knownContextValues = new Set([\n' +
+            [...formattedValues].sort().join('\n') + '\n]);\n';
         fs.writeFileSync(ABSOLUTE_FILE_PATH, finalContents, 'utf-8');
       },
     };
   },
-};
+});