Improve DOM API parsing for preferTemplateLiterals rule

- parse the event listeners
- parse the property methods like .classList.add
- fix the rendering for empty elements

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

Author: danilsomsikov

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

@@ -48,6 +48,8 @@ class DomFragment {
   /** @type {string|undefined} */ tagName;
   /** @type {Node[]} */ classList = [];
   /** @type {{key: string, value: Node}[]} */ attributes = [];
+  /** @type {{key: string, value: Node}[]} */ style = [];
+  /** @type {{key: string, value: Node}[]} */ eventListeners = [];
   /** @type {Node} */ textContent;
   /** @type {DomFragment[]} */ children = [];
   /** @type {DomFragment|undefined} */ parent;
@@ -97,13 +99,20 @@ class DomFragment {
     for (const attribute of this.attributes || []) {
       appendExpression(`${attribute.key}=${attributeValue(toOutputString(attribute.value))}`);
     }
+    for (const eventListener of this.eventListeners || []) {
+      appendExpression(`@${eventListener.key}=${attributeValue(toOutputString(eventListener.value))}`);
+    }
+    if (this.style.length) {
+      const style = this.style.map(s => `${s.key}:${toOutputString(s.value)}`).join('; ');
+      appendExpression(`style="${style}"`);
+    }
     if (lineLength > MAX_LINE_LENGTH) {
       components.push(`\n${' '.repeat(indent)}`);
     }
     components.push('>');
     if (this.textContent) {
       components.push(toOutputString(this.textContent));
-    } else {
+    } else if (this.children?.length) {
       for (const child of this.children || []) {
         components.push(...child.toTemplateLiteral(sourceCode, indent + 2));
       }
@@ -172,7 +181,17 @@ module.exports = {
       const isMethodCall = isAccessed && grandParent.type === 'CallExpression' && grandParent.callee === parent;
       const firstArg = isMethodCall ?  /** @type {Node} */(grandParent.arguments[0]) : null;
       const secondArg = isMethodCall ? /** @type {Node} */(grandParent.arguments[1]) : null;
-
+      const grandGrandParent = grandParent.parent;
+      const isPropertyMethodCall = isAccessed && grandParent.type === 'MemberExpression' &&
+          grandParent.object === parent && grandGrandParent.type === 'CallExpression' &&
+          grandGrandParent.callee === grandParent;
+      const propertyMethodArgument = isPropertyMethodCall ? /** @type {Node} */ (grandGrandParent.arguments[0]) : null;
+      const isSubpropertyAssignment = isAccessed && grandParent.type === 'MemberExpression' &&
+          grandParent.object === parent && grandParent.property.type === 'Identifier' &&
+          grandGrandParent.type === 'AssignmentExpression' && grandGrandParent.left === grandParent;
+      const subproperty =
+          isSubpropertyAssignment && grandParent.property.type === 'Identifier' ? grandParent.property : null;
+      const subpropertyValue = isSubpropertyAssignment ? /** @type {Node} */ (grandGrandParent.right) : null;
       reference.processed = true;
       if (isPropertyAssignment && isIdentifier(property, 'className')) {
         domFragment.classList.push(propertyValue);
@@ -182,9 +201,23 @@ module.exports = {
         const attribute = firstArg;
         const value = secondArg;
         if (attribute.type === 'Literal' && value.type !== 'SpreadElement') {
-          domFragment.attributes.push({
-            key: attribute.value.toString(),
-            value,
+          domFragment.attributes.push({key: attribute.value.toString(), value});
+        }
+      } else if (isMethodCall && isIdentifier(property, 'addEventListener')) {
+        const event = firstArg;
+        const value = secondArg;
+        if (event.type === 'Literal' && value.type !== 'SpreadElement') {
+          domFragment.eventListeners.push({key: event.value.toString(), value});
+        }
+      } else if (
+          isPropertyMethodCall && isIdentifier(property, 'classList') && isIdentifier(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, 'appendChild')) {

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

@@ -34,8 +34,7 @@ class SomeWidget extends UI.Widget.Widget {
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html\`
     <div>
-      <div>
-      </div>
+      <div></div>
     </div>\`,
     target, {host: input});
 };
@@ -66,6 +65,56 @@ 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();
+    this.contentElement.classList.add('some-class');
+    this.contentElement.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>\`,
+    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();
+    this.contentElement.style.width = '100%';
+    this.contentElement.style.marginLeft = '10px';
+  }
+}`,
+      output: `
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div style="width:100%; margin-left:10px"></div>\`,
+    target, {host: input});
+};
+
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();