Extract "subrules" out of preferTemplateLiterals

Bug: 400353541
Change-Id: I068797f4ed37071a655b767f2d22e65b3dd8e72b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6394682
Reviewed-by: Nikolay Vitkov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

scripts/eslint_rules/lib/no-imperative-dom-api.js

@@ -9,8 +9,13 @@
  */
 'use strict';
 
-const {isIdentifier, isMemberExpression, getEnclosingExpression} = require('./no-imperative-dom-api/ast.js');
+const adorner = require('./no-imperative-dom-api/adorner.js');
+const {isIdentifier, getEnclosingExpression} = require('./no-imperative-dom-api/ast.js');
+const domApiDevtoolsExtensions = require('./no-imperative-dom-api/dom-api-devtools-extensions.js');
+const domApi = require('./no-imperative-dom-api/dom-api.js');
 const {DomFragment} = require('./no-imperative-dom-api/dom-fragment.js');
+const toolbar = require('./no-imperative-dom-api/toolbar.js');
+const widget = require('./no-imperative-dom-api/widget.js');
 
 /** @typedef {import('eslint').Rule.Node} Node */
 /** @typedef {import('eslint').AST.SourceLocation} SourceLocation */
@@ -33,22 +38,29 @@ module.exports = {
   create : function(context) {
     const sourceCode = context.getSourceCode();
 
+    const subrules = [
+      adorner.create(context),
+      domApi.create(context),
+      domApiDevtoolsExtensions.create(context),
+      toolbar.create(context),
+      widget.create(context),
+    ];
+
     /**
      * @param {Node} event
      * @return {string|null}
      */
     function getEvent(event) {
-      switch (sourceCode.getText(event)) {
-        case 'UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED':
-          return 'change';
-        case 'UI.Toolbar.ToolbarInput.Event.ENTER_PRESSED':
-          return 'submit';
-        default:
-          if (event.type === 'Literal') {
-            return event.value.toString();
-          }
-          return null;
+      for (const rule of subrules) {
+        const result = rule.getEvent?.(event);
+        if (result) {
+          return result;
+        }
+      }
+      if (event.type === 'Literal') {
+        return event.value.toString();
       }
+      return null;
     }
 
     /**
@@ -77,76 +89,24 @@ module.exports = {
       const subproperty =
           isSubpropertyAssignment && grandParent.property.type === 'Identifier' ? grandParent.property : null;
       const subpropertyValue = isSubpropertyAssignment ? /** @type {Node} */ (grandGrandParent.right) : null;
-      if (isPropertyAssignment && isIdentifier(property, 'className')) {
-        domFragment.classList.push(propertyValue);
-      } else if (isPropertyAssignment && isIdentifier(property, ['textContent', 'innerHTML'])) {
-        domFragment.textContent = propertyValue;
-      } else if (
-          isPropertyAssignment && domFragment.tagName === 'devtools-adorner' && isIdentifier(property, 'data') &&
-          propertyValue.type === 'ObjectExpression') {
-        for (const property of propertyValue.properties) {
-          if (property.type !== 'Property') {
-            continue;
-          }
-          const key = /** @type {Node} */ (property.key);
-          if (isIdentifier(key, 'name')) {
-            domFragment.attributes.push({
-              key: 'aria-label',
-              value: /** @type {Node} */ (property.value),
-            });
-          }
-          if (isIdentifier(key, 'jslogContext')) {
-            domFragment.attributes.push(
-                {key: 'jslog', value: '${VisualLogging.adorner(' + sourceCode.getText(property.value) + ')}'});
-          }
-          if (isIdentifier(key, 'content')) {
-            const childFragment = DomFragment.getOrCreate(/** @type {Node} */ (property.value), sourceCode);
-            childFragment.parent = domFragment;
-            domFragment.children.push(childFragment);
-          }
-        }
-      } else if (isMethodCall && isIdentifier(property, 'setAttribute')) {
-        const attribute = firstArg;
-        const value = secondArg;
-        if (attribute.type === 'Literal' && value.type !== 'SpreadElement') {
-          domFragment.attributes.push({key: attribute.value.toString(), value});
-        }
-      } else if (isMethodCall && isIdentifier(property, 'addEventListener')) {
-        const event = getEvent(firstArg);
-        const value = secondArg;
-        if (event && value.type !== 'SpreadElement') {
-          domFragment.eventListeners.push({key: event, value});
-        }
-      } else if (isMethodCall && isIdentifier(property, 'appendToolbarItem')) {
-        const childFragment = DomFragment.getOrCreate(firstArg, sourceCode);
-        childFragment.parent = domFragment;
-        domFragment.children.push(childFragment);
-      } else if (
-          isPropertyMethodCall && isIdentifier(property, 'classList') &&
-          isIdentifier(/** @type {Node} */ (grandParent.property), 'add')) {
-        domFragment.classList.push(propertyMethodArgument);
-      } else if (isSubpropertyAssignment && isIdentifier(property, 'style')) {
-        const property = subproperty.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        if (subpropertyValue.type !== 'SpreadElement') {
-          domFragment.style.push({
-            key: property,
-            value: subpropertyValue,
-          });
-        }
-      } else if (isMethodCall && isIdentifier(property, 'createChild')) {
-        if (firstArg?.type === 'Literal') {
-          const childFragment = DomFragment.getOrCreate(grandParent, sourceCode);
-          childFragment.tagName = String(firstArg.value);
-          childFragment.parent = domFragment;
-          domFragment.children.push(childFragment);
-          if (secondArg) {
-            childFragment.classList.push(secondArg);
+      for (const rule of subrules) {
+        if (isPropertyAssignment) {
+          rule.propertyAssignment?.(property, propertyValue, domFragment);
+        } else if (isMethodCall) {
+          if (isIdentifier(property, 'addEventListener')) {
+            const event = getEvent(firstArg);
+            const value = secondArg;
+            if (event && value.type !== 'SpreadElement') {
+              domFragment.eventListeners.push({key: event, value});
+            }
+            return;
           }
+          rule.methodCall?.(property, firstArg, secondArg, domFragment, grandParent);
+        } else if (isPropertyMethodCall) {
+          rule.propertyMethodCall?.(property, grandParent.property, propertyMethodArgument, domFragment);
+        } else if (isSubpropertyAssignment) {
+          rule.subpropertyAssignment?.(property, subproperty, subpropertyValue, domFragment);
         }
-      } else if (isMethodCall && isIdentifier(property, 'appendChild')) {
-        const childFragment = DomFragment.getOrCreate(firstArg, sourceCode);
-        childFragment.parent = domFragment;
-        domFragment.children.push(childFragment);
       }
     }
 
@@ -214,133 +174,18 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     return {
       MemberExpression(node) {
         if (node.object.type === 'ThisExpression') {
-          const domFragment = DomFragment.getOrCreate(node, sourceCode);
-          if (isIdentifier(node.property, 'contentElement')) {
-            domFragment.tagName = 'div';
-          }
+          DomFragment.getOrCreate(node, sourceCode);
         }
-        if (isIdentifier(node.object, 'document') && isIdentifier(node.property, 'createElement')
-            && node.parent.type === 'CallExpression' && node.parent.callee === node) {
-          const domFragment = DomFragment.getOrCreate(node.parent, sourceCode);
-          if (node.parent.arguments.length >= 1 && node.parent.arguments[0].type === 'Literal') {
-            domFragment.tagName = node.parent.arguments[0].value;
+        for (const rule of subrules) {
+          if ('MemberExpression' in rule) {
+            rule.MemberExpression(node);
           }
         }
       },
       NewExpression(node) {
-        if (isMemberExpression(
-                node.callee, n => isMemberExpression(n, n => isIdentifier(n, 'UI'), n => isIdentifier(n, 'Toolbar')),
-                n => isIdentifier(n, ['ToolbarFilter', 'ToolbarInput']))) {
-          const domFragment = DomFragment.getOrCreate(node, sourceCode);
-          domFragment.tagName = 'devtools-toolbar-input';
-          const type = isIdentifier(node.callee.property, 'ToolbarFilter') ? 'filter' : 'text';
-          domFragment.attributes.push({
-            key: 'type',
-            value: type,
-          });
-          const args = [...node.arguments];
-          const placeholder = args.shift();
-          if (placeholder && !isIdentifier(placeholder, 'undefined')) {
-            domFragment.attributes.push({
-              key: 'placeholder',
-              value: placeholder,
-            });
-          }
-          if (type === 'text') {
-            const accesiblePlaceholder = args.shift();
-            if (accesiblePlaceholder && !isIdentifier(accesiblePlaceholder, 'undefined')) {
-              domFragment.attributes.push({
-                key: 'aria-label',
-                value: accesiblePlaceholder,
-              });
-            }
-          }
-          const flexGrow = args.shift();
-          if (flexGrow && !isIdentifier(flexGrow, 'undefined')) {
-            domFragment.style.push({
-              key: 'flex-grow',
-              value: flexGrow,
-            });
-          }
-          const flexShrink = args.shift();
-          if (flexShrink && !isIdentifier(flexShrink, 'undefined')) {
-            domFragment.style.push({
-              key: 'flex-shrink',
-              value: flexShrink,
-            });
-          }
-          const title = args.shift();
-          if (title && !isIdentifier(title, 'undefined')) {
-            domFragment.attributes.push({
-              key: 'title',
-              value: title,
-            });
-          }
-          const completions = args.shift();
-          if (completions && !isIdentifier(completions, 'undefined')) {
-            domFragment.attributes.push({
-              key: 'list',
-              value: 'completions',
-            });
-            const dataList = DomFragment.getOrCreate(completions, sourceCode);
-            dataList.tagName = 'datalist';
-            dataList.attributes.push({
-              key: 'id',
-              value: 'completions',
-            });
-            dataList.textContent = completions;
-            domFragment.children.push(dataList);
-            dataList.parent = domFragment;
-          }
-          args.shift();  // dynamicCompletions is not supported
-          const jslogContext = args.shift();
-          if (jslogContext && !isIdentifier(jslogContext, 'undefined')) {
-            domFragment.attributes.push({
-              key: 'id',
-              value: jslogContext,
-            });
-          }
-        }
-        if (isMemberExpression(
-                node.callee,
-                n => isMemberExpression(n, n => isIdentifier(n, 'Adorners'), n => isIdentifier(n, 'Adorner')),
-                n => isIdentifier(n, 'Adorner'))) {
-          const domFragment = DomFragment.getOrCreate(node, sourceCode);
-          domFragment.tagName = 'devtools-adorner';
-        }
-        if (isMemberExpression(
-                node.callee, n => isMemberExpression(n, n => isIdentifier(n, 'UI'), n => isIdentifier(n, 'Toolbar')),
-                n => isIdentifier(n, 'ToolbarButton'))) {
-          const domFragment = DomFragment.getOrCreate(node, sourceCode);
-          domFragment.tagName = 'devtools-button';
-          const title = node.arguments[0];
-          domFragment.bindings.push({
-            key: 'variant',
-            value: '${Buttons.Button.Variant.TOOLBAR}',
-          });
-          if (title && !isIdentifier(title, 'undefined')) {
-            domFragment.attributes.push({
-              key: 'title',
-              value: title,
-            });
-          }
-          const glyph = node.arguments[1];
-          if (glyph && !isIdentifier(glyph, 'undefined')) {
-            domFragment.bindings.push({
-              key: 'iconName',
-              value: glyph,
-            });
-          }
-          const text = node.arguments[2];
-          if (text && !isIdentifier(text, 'undefined')) {
-            domFragment.textContent = text;
-          }
-          const jslogContext = node.arguments[3];
-          if (jslogContext && !isIdentifier(jslogContext, 'undefined')) {
-            domFragment.bindings.push({
-              key: 'jslogContext',
-              value: jslogContext,
-            });
+        for (const rule of subrules) {
+          if ('NewExpression' in rule) {
+            rule.NewExpression(node);
           }
         }
       },

scripts/eslint_rules/lib/no-imperative-dom-api/adorner.js

@@ -0,0 +1,60 @@
+// Copyright 2025 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.
+/**
+ * @fileoverview A library to identify and templatize manually constructed Adorner.
+ */
+'use strict';
+
+const {isIdentifier, isMemberExpression} = require('./ast.js');
+const {DomFragment} = require('./dom-fragment.js');
+
+/** @typedef {import('eslint').Rule.Node} Node */
+
+module.exports = {
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    return {
+      /**
+       * @param {Node} property
+       * @param {Node} propertyValue
+       * @param {DomFragment} domFragment
+       */
+      propertyAssignment(property, propertyValue, domFragment) {
+        if (domFragment.tagName === 'devtools-adorner' && isIdentifier(property, 'data') &&
+            propertyValue.type === 'ObjectExpression') {
+          for (const property of propertyValue.properties) {
+            if (property.type !== 'Property') {
+              continue;
+            }
+            const key = /** @type {Node} */ (property.key);
+            if (isIdentifier(key, 'name')) {
+              domFragment.attributes.push({
+                key: 'aria-label',
+                value: /** @type {Node} */ (property.value),
+              });
+            }
+            if (isIdentifier(key, 'jslogContext')) {
+              domFragment.attributes.push(
+                  {key: 'jslog', value: '${VisualLogging.adorner(' + sourceCode.getText(property.value) + ')}'});
+            }
+            if (isIdentifier(key, 'content')) {
+              const childFragment = DomFragment.getOrCreate(/** @type {Node} */ (property.value), sourceCode);
+              childFragment.parent = domFragment;
+              domFragment.children.push(childFragment);
+            }
+          }
+        }
+      },
+      NewExpression(node) {
+        if (isMemberExpression(
+                node.callee,
+                n => isMemberExpression(n, n => isIdentifier(n, 'Adorners'), n => isIdentifier(n, 'Adorner')),
+                n => isIdentifier(n, 'Adorner'))) {
+          const domFragment = DomFragment.getOrCreate(node, sourceCode);
+          domFragment.tagName = 'devtools-adorner';
+        }
+      },
+    };
+  }
+};

scripts/eslint_rules/lib/no-imperative-dom-api/dom-api-devtools-extensions.js

@@ -0,0 +1,41 @@
+// Copyright 2025 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.
+/**
+ * @fileoverview Library to identify and templatize manually calls to DevTools DOM API extensions.
+ */
+'use strict';
+
+const {isIdentifier} = require('./ast.js');
+const {DomFragment} = require('./dom-fragment.js');
+
+/** @typedef {import('eslint').Rule.Node} Node */
+
+module.exports = {
+  create : function(context) {
+    const sourceCode = context.getSourceCode();
+
+    return {
+      /**
+       * @param {Node} property
+       * @param {Node} firstArg
+       * @param {Node} secondArg
+       * @param {DomFragment} domFragment
+       * @param {Node} call
+       */
+      methodCall(property, firstArg, secondArg, domFragment, call) {
+        if (isIdentifier(property, 'createChild')) {
+          if (firstArg?.type === 'Literal') {
+            const childFragment = DomFragment.getOrCreate(call, sourceCode);
+            childFragment.tagName = String(firstArg.value);
+            childFragment.parent = domFragment;
+            domFragment.children.push(childFragment);
+            if (secondArg) {
+              childFragment.classList.push(secondArg);
+            }
+          }
+        }
+      }
+    };
+  }
+};