Handle variables in the preferTemplateLiterals lint rule

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

Author: danilsomsikov

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

@@ -141,31 +141,64 @@ module.exports = {
     const queue = [];
     const sourceCode = context.getSourceCode();
 
-    /** @type {Map<string, DomFragment>} */
+    /** @type {Map<string|Variable, DomFragment>} */
     const domFragments = new Map();
 
     /**
      * @param {Node} node
      * @return {DomFragment}
      */
     function getOrCreateDomFragment(node) {
-      const key = sourceCode.getText(node);
+      const variable = getEnclosingVariable(node);
+      const key = variable ?? sourceCode.getText(node);
 
       let result = domFragments.get(key);
       if (!result) {
         result = new DomFragment();
         queue.push(result);
         domFragments.set(key, result);
-        result.expression = sourceCode.getText(node);
-        const classDeclaration = getEnclosingClassDeclaration(node);
-        if (classDeclaration) {
-          result.replacementLocation = classDeclaration;
+        if (variable) {
+          result.references = variable.references.map(r => ({node: /** @type {Node} */ (r.identifier)}));
+        } else {
+          result.expression = sourceCode.getText(node);
+          const classDeclaration = getEnclosingClassDeclaration(node);
+          if (classDeclaration) {
+            result.replacementLocation = classDeclaration;
+          }
         }
       }
-      result.references.push({node});
+      if (!variable) {
+        result.references.push({node});
+      }
       return result;
     }
 
+    /**
+     * @param {Node} node
+     * @return {Variable|null}
+     */
+    function getEnclosingVariable(node) {
+      if (node.type === 'Identifier') {
+        let scope = sourceCode.getScope(node);
+        const variableName = node.name;
+        while (scope) {
+          const variable = scope.variables.find(v => v.name === variableName);
+          if (variable) {
+            return variable;
+          }
+          scope = scope.upper;
+        }
+      }
+      if (node.parent.type === 'VariableDeclarator') {
+        const variables = sourceCode.getDeclaredVariables(node.parent);
+        if (variables.length > 1) {
+          return null;  // Destructuring assignment
+        }
+        return variables[0];
+      }
+      return null;
+    }
+
     /**
      *  @param {DomFragmentReference} reference
      *  @param {DomFragment} domFragment

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

@@ -119,6 +119,36 @@ 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 div = document.createElement('div');
+    div.className = 'some-class';
+    this.contentElement.appendChild(div);
+  }
+}`,
+      output: `
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div>
+      <div class="some-class"></div>
+    </div>\`,
+    target, {host: input});
+};
+
+class SomeWidget extends UI.Widget.Widget {
+  constructor() {
+    super();
+    const div = document.createElement('div');
+    div.className = 'some-class';
+  }
 }`,
       errors: [{messageId: 'preferTemplateLiterals'}],
     },