An abstraction to track class members and distinguish the class they belong to

Bug: 400353541
Change-Id: I5f8c6577407299d2c91980b40e1cc93ca74ef043
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6403237
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

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

@@ -11,6 +11,7 @@
 
 const adorner = require('./no-imperative-dom-api/adorner.js');
 const {isIdentifier, getEnclosingExpression} = require('./no-imperative-dom-api/ast.js');
+const {ClassMember} = require('./no-imperative-dom-api/class-member.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');
@@ -175,7 +176,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     return {
       MemberExpression(node) {
         if (node.object.type === 'ThisExpression') {
-          DomFragment.getOrCreate(node, sourceCode);
+          ClassMember.getOrCreate(node, sourceCode);
         }
         for (const rule of subrules) {
           if ('MemberExpression' in rule) {

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

@@ -42,6 +42,9 @@ function getEnclosingExpression(estreeNode) {
 /** @param {Node} estreeNode */
 function getEnclosingProperty(estreeNode) {
   const node = /** @type {EsLintNode} */ (estreeNode);
+  if (isMemberExpression(node, n => n.type === 'ThisExpression', n => n.type === 'Identifier')) {
+    return node;
+  }
   if (node.parent.type === 'AssignmentExpression' && node.parent.right === node &&
       isMemberExpression(node.parent.left, n => n.type === 'ThisExpression', n => n.type === 'Identifier')) {
     return node.parent.left;

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

@@ -0,0 +1,51 @@
+// 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 associate class members with their parent class.
+ */
+'use strict';
+
+const {getEnclosingClassDeclaration} = require('./ast.js');
+
+/** @typedef {import('estree').Node} Node */
+/** @typedef {import('eslint').SourceCode} SourceCode */
+
+/** @type {Map<Node, Map<string, ClassMember>>} */
+const classes = new Map();
+
+class ClassMember {
+  /** @type {Set<Node>} */
+  references = new Set();
+
+  /** @type {Node} */
+  classDeclaration;
+
+  /**
+   * @param {Node} node
+   * @param {SourceCode} sourceCode
+   * @return {ClassMember}
+   */
+  static getOrCreate(node, sourceCode) {
+    const classDeclaration = getEnclosingClassDeclaration(node);
+    if (!classDeclaration) {
+      return null;
+    }
+    let classMembers = classes.get(classDeclaration);
+    if (!classMembers) {
+      classMembers = new Map();
+      classes.set(classDeclaration, classMembers);
+    }
+    const memberName = sourceCode.getText(node);
+    let classMember = classMembers.get(memberName);
+    if (!classMember) {
+      classMember = new ClassMember();
+      classMember.classDeclaration = classDeclaration;
+      classMembers.set(memberName, classMember);
+    }
+    classMember.references.add(node);
+    return classMember;
+  }
+}
+
+exports.ClassMember = ClassMember;

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

@@ -6,14 +6,15 @@
  */
 'use strict';
 
-const {getEnclosingProperty, getEnclosingClassDeclaration} = require('./ast.js');
+const {getEnclosingProperty} = require('./ast.js');
+const {ClassMember} = require('./class-member.js');
 
 /** @typedef {import('estree').Node} Node */
 /** @typedef {import('eslint').Rule.Node} EsLintNode */
 /** @typedef {import('eslint').Scope.Variable} Variable */
 /** @typedef {import('eslint').SourceCode} SourceCode */
 
-/** @type {Map<string|Variable, DomFragment>} */
+/** @type {Map<EsLintNode|ClassMember|Variable, DomFragment>} */
 const domFragments = new Map();
 
 class DomFragment {
@@ -37,26 +38,25 @@ class DomFragment {
    */
   static getOrCreate(estreeNode, sourceCode) {
     const node = /** @type {EsLintNode} */ (estreeNode);
-    const variable = getEnclosingVariable(node, sourceCode);
-    const key = variable ?? sourceCode.getText(getEnclosingProperty(node) ?? node);
+    const key = getKey(node, sourceCode);
 
     let result = domFragments.get(key);
     if (!result) {
       result = new DomFragment();
       domFragments.set(key, result);
-      if (variable) {
-        result.references = variable.references.map(r => (/** @type {EsLintNode} */ (r.identifier)));
-        result.references.push(/** @type {EsLintNode} */ (variable.identifiers[0]));
-      } else {
+      if ('parent' in key) {
+        result.expression = sourceCode.getText(node);
+        result.references.push(node);
+      } else if (key instanceof ClassMember) {
+        result.replacementLocation = /** @type {EsLintNode} */ (key.classDeclaration);
         result.expression = sourceCode.getText(node);
-        const classDeclaration = getEnclosingClassDeclaration(node);
-        if (classDeclaration) {
-          result.replacementLocation = classDeclaration;
-        }
+      } else {
+        result.references = key.references.map(r => (/** @type {EsLintNode} */ (r.identifier)));
+        result.references.push(/** @type {EsLintNode} */ (key.identifiers[0]));
       }
     }
-    if (!variable && !result.references.includes(node)) {
-      result.references.push(node);
+    if (key instanceof ClassMember) {
+      result.references = /** @type {EsLintNode[]} */ ([...key.references]);
     }
     return result;
   }
@@ -183,4 +183,20 @@ function attributeValue(outputString) {
   return '"' + outputString + '"';
 }
 
+/**
+ * @param {EsLintNode} node
+ * @param {SourceCode} sourceCode
+ */
+function getKey(node, sourceCode) {
+  const variable = getEnclosingVariable(node, sourceCode);
+  if (variable) {
+    return variable;
+  }
+  const property = getEnclosingProperty(node);
+  if (property) {
+    return ClassMember.getOrCreate(property, sourceCode);
+  }
+  return node;
+}
+
 exports.DomFragment = DomFragment;

scripts/eslint_rules/tests/no-imperative-dom-api.test.js

@@ -88,7 +88,7 @@ class SomeWidget extends UI.Widget.Widget {
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html\`
     <div>
-      <div class="container some-class" @click=\${this.onClick.bind(this)}></div>
+      <div class="some-class container" @click=\${this.onClick.bind(this)}></div>
     </div>\`,
     target, {host: input});
 };
@@ -315,5 +315,53 @@ class SomeWidget extends UI.Widget.Widget {
 }`,
       errors: [{messageId: 'preferTemplateLiterals'}],
     },
+    {
+      filename: 'front_end/ui/components/component/file.ts',
+      code: `
+class Widget1 extends UI.Widget.Widget {
+  constructor() {
+    super();
+    this.contentElement.createChild('div', 'widget1');
+  }
+}
+
+class Widget2 extends UI.Widget.Widget {
+  constructor() {
+    super();
+    this.contentElement.createChild('div', 'widget2');
+  }
+}`,
+      output: `
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div>
+      <div class="widget1"></div>
+    </div>\`,
+    target, {host: input});
+};
+
+class Widget1 extends UI.Widget.Widget {
+  constructor() {
+    super();
+  }
+}
+
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div>
+      <div class="widget2"></div>
+    </div>\`,
+    target, {host: input});
+};
+
+class Widget2 extends UI.Widget.Widget {
+  constructor() {
+    super();
+  }
+}`,
+      errors: [{messageId: 'preferTemplateLiterals'}, {messageId: 'preferTemplateLiterals'}],
+    },
   ],
 });