Support private properties in no-imperative-dom-api rule and fix initializer removal

Bug: 407751147
Change-Id: I7c153236c26554058d691ac4c37af55c247219e6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6439036
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: danilsomsikov

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

@@ -32,11 +32,14 @@ export function getEnclosingExpression(node: Node): Node|null {
 }
 
 export function getEnclosingProperty(node: Node): Node|null {
-  if (isMemberExpression(node, n => n.type === 'ThisExpression', n => n.type === 'Identifier')) {
+  if (isMemberExpression(
+          node, n => n.type === 'ThisExpression', n => ['Identifier', 'PrivateIdentifier'].includes(n.type))) {
     return node;
   }
   if (node.parent?.type === 'AssignmentExpression' && node.parent.right === node &&
-      isMemberExpression(node.parent.left, n => n.type === 'ThisExpression', n => n.type === 'Identifier')) {
+      isMemberExpression(
+          node.parent.left, n => n.type === 'ThisExpression',
+          n => ['Identifier', 'PrivateIdentifier'].includes(n.type))) {
     return node.parent.left;
   }
   return null;

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

@@ -41,9 +41,10 @@ export class ClassMember {
       classMember = new ClassMember(classDeclaration);
       classMembers.set(memberName, classMember);
     }
-    classMember.references.add(node);
-    if (node.type === 'AssignmentExpression') {
+    if (node.parent?.type === 'AssignmentExpression') {
       classMember.initializer = node;
+    } else {
+      classMember.references.add(node);
     }
     return classMember;
   }

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

@@ -505,6 +505,41 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     target, {host: input});
 };
 
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+  }
+}`,
+      errors: [{messageId: 'preferTemplateLiterals'}],
+    },
+    {
+      filename: 'front_end/ui/components/component/file.ts',
+      code: `
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    const toolbar = this.contentElement.createChild('devtools-toolbar');
+    this.filterInput = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.editName), 'edit', undefined, 'edit-name');
+    toolbar.appendToolbarItem(this.filterInput);
+    this.#banner = this.contentElement.createChild('div', 'banner');
+    this.#banner.textContent = 'some-text';
+  }
+}`,
+      output: `
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div>
+      <devtools-toolbar>
+        <devtools-button title=\${i18nString(UIStrings.editName)}
+            .variant=\${Buttons.Button.Variant.TOOLBAR} .iconName=\${'edit'}
+            .jslogContext=\${'edit-name'}></devtools-button>
+      </devtools-toolbar>
+      <div class="banner">some-text</div>
+    </div>\`,
+    target, {host: input});
+};
+
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();