no-imperative-dom-api: Inline local variables definition in template

By default we refer to the variable by name, but the variable definition would be removed if all it's references are processed.

Bug: 407751147
Change-Id: I0088e34c630c420868ff4e206a10dd68efaf4fdf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6438846
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>

Author: danilsomsikov

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

@@ -76,7 +76,10 @@ export class DomFragment {
 
   toTemplateLiteral(sourceCode: Readonly<SourceCode>, indent = 4): string[] {
     if (this.expression && !this.tagName) {
-      return [`\n${' '.repeat(indent)}`, '${', this.expression, '}'];
+      const value = this.initializer?.parent?.type === 'VariableDeclarator' ? this.initializer?.parent?.init : null;
+      const expression =
+          (this.references.every(r => r.processed) && value) ? sourceCode.getText(value) : this.expression;
+      return [`\n${' '.repeat(indent)}`, '${', expression, '}'];
     }
 
     function toOutputString(node: Node|string, quoteLiterals = false): string {

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

@@ -433,6 +433,8 @@ class SomeWidget extends UI.Widget.Widget {
     label.addEventListener('click', () => this.doSomething.bind(this));
     this.contentElement.appendChild(details);
     details.createChild('span');
+    const banner = createBanner();
+    this.contentElement.appendChild(banner);
   }
 }`,
       output: `
@@ -442,6 +444,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       \${label}
       \${details}
+      \${createBanner()}
     </div>\`,
     target, {host: input});
 };