Support external expressions as children of DOM fragments

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

Author: danilsomsikov

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

@@ -213,6 +213,9 @@ export const DEFAULT_VIEW = (input, _output, target) => {
       },
       'Program:exit'() {
         for (const domFragment of DomFragment.values()) {
+          if (!domFragment.tagName) {
+            continue;
+          }
           for (const reference of domFragment.references) {
             if (processReference(reference.node, domFragment)) {
               reference.processed = true;

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.expression = key.name;
       }
     }
     if (key instanceof ClassMember) {

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

@@ -397,6 +397,34 @@ class SomeWidget extends UI.Widget.Widget {
     const anotherElement = document.createElement('div');
     this.process(filterInput, anotherElement);
   }
+}`,
+      errors: [{messageId: 'preferTemplateLiterals'}],
+    },
+    {
+      filename: 'front_end/ui/components/component/file.ts',
+      code: `
+class SomeWidget extends UI.Widget.Widget {
+  constructor(label: HTMLElement) {
+    super();
+    this.contentElement.appendChild(label);
+    label.addEventListener('click', () => this.doSomething.bind(this));
+  }
+}`,
+      output: `
+
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html\`
+    <div>
+      \${label}
+    </div>\`,
+    target, {host: input});
+};
+
+class SomeWidget extends UI.Widget.Widget {
+  constructor(label: HTMLElement) {
+    super();
+    label.addEventListener('click', () => this.doSomething.bind(this));
+  }
 }`,
       errors: [{messageId: 'preferTemplateLiterals'}],
     },