Support class properties as DOM fragments in the preferTemplateLiterals

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

Author: danilsomsikov

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

@@ -180,7 +180,7 @@ module.exports = {
      */
     function getOrCreateDomFragment(node) {
       const variable = getEnclosingVariable(node);
-      const key = variable ?? sourceCode.getText(node);
+      const key = variable ?? sourceCode.getText(getEnclosingProperty(node) ?? node);
 
       let result = domFragments.get(key);
       if (!result) {
@@ -230,6 +230,14 @@ module.exports = {
       return null;
     }
 
+    function getEnclosingProperty(node) {
+      if (node.parent.type === 'AssignmentExpression' && node.parent.right === node &&
+          isMemberExpression(node.parent.left, n => n.type === 'ThisExpression', n => n.type === 'Identifier')) {
+        return /** @type {Node} */ (node.parent.left);
+      }
+      return null;
+    }
+
     /**
      * @param {Node} event
      * @return {string|null}
@@ -381,7 +389,7 @@ module.exports = {
      * @param {DomFragment} domFragment
      */
     function maybeReportDomFragment(domFragment) {
-      if (!domFragment.replacementLocation || domFragment.parent) {
+      if (!domFragment.replacementLocation || domFragment.parent || !domFragment.tagName) {
         return;
       }
       context.report({
@@ -410,9 +418,11 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 
     return {
       MemberExpression(node) {
-        if (node.object.type === 'ThisExpression' && isIdentifier(node.property, 'contentElement')) {
+        if (node.object.type === 'ThisExpression') {
           const domFragment = getOrCreateDomFragment(node);
-          domFragment.tagName = 'div';
+          if (isIdentifier(node.property, 'contentElement')) {
+            domFragment.tagName = 'div';
+          }
         }
         if (isIdentifier(node.object, 'document') && isIdentifier(node.property, 'createElement')
             && node.parent.type === 'CallExpression' && node.parent.callee === node) {

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

@@ -78,15 +78,18 @@ class SomeWidget extends UI.Widget.Widget {
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();
-    this.contentElement.classList.add('some-class');
-    this.contentElement.addEventListener('click', this.onClick.bind(this));
+    this.container = this.contentElement.createChild('div', 'some-class');
+    this.container.classList.add('container');
+    this.container.addEventListener('click', this.onClick.bind(this));
   }
 }`,
       output: `
 
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html\`
-    <div class="some-class" @click=\${this.onClick.bind(this)}></div>\`,
+    <div>
+      <div class="some-class container" @click=\${this.onClick.bind(this)}></div>
+    </div>\`,
     target, {host: input});
 };