Replace top-level variables with a lit template

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

Author: danilsomsikov

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

@@ -173,14 +173,23 @@ module.exports = {
         node: domFragment.replacementLocation,
         messageId: 'preferTemplateLiterals',
         fix(fixer) {
+          const template = 'html`' + domFragment.toTemplateLiteral(sourceCode).join('') + '`';
           let replacementLocation = domFragment.replacementLocation;
+
+          if (replacementLocation.type === 'VariableDeclarator') {
+            domFragment.initializer = null;
+            return [
+              fixer.replaceText(replacementLocation.init, template),
+              ...getRangesToRemove(domFragment).map(range => fixer.removeRange(range)),
+            ];
+          }
+
           if (replacementLocation.parent.type === 'ExportNamedDeclaration') {
             replacementLocation = replacementLocation.parent;
           }
-          const template = domFragment.toTemplateLiteral(sourceCode).join('');
           const text = `
 export const DEFAULT_VIEW = (input, _output, target) => {
-  render(html\`${template}\`,
+  render(${template},
     target, {host: input});
 };
 

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

@@ -55,6 +55,7 @@ class DomFragment {
         result.references = key.references.filter(r => !key.identifiers.includes(r.identifier))
                                 .map(r => ({node: /** @type {EsLintNode} */ (r.identifier)}));
         result.initializer = /** @type {EsLintNode} */ (key.identifiers[0]);
+        result.replacementLocation = result.initializer.parent;
         result.expression = key.name;
       }
     }

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

@@ -373,6 +373,7 @@ class SomeWidget extends UI.Widget.Widget {
     const filterInput = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.editName), 'edit', undefined, 'edit-name');
     toolbar.appendToolbarItem(filterInput);
     const anotherElement = document.createElement('div');
+    anotherElement.className = 'another-element';
     this.process(filterInput, anotherElement);
   }
 }`,
@@ -394,11 +395,12 @@ class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();
     const filterInput = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.editName), 'edit', undefined, 'edit-name');
-    const anotherElement = document.createElement('div');
+    const anotherElement = html\`
+    <div class="another-element"></div>\`;
     this.process(filterInput, anotherElement);
   }
 }`,
-      errors: [{messageId: 'preferTemplateLiterals'}],
+      errors: [{messageId: 'preferTemplateLiterals'}, {messageId: 'preferTemplateLiterals'}],
     },
     {
       filename: 'front_end/ui/components/component/file.ts',