ESLint: fix cannot read property type of undefined error

I got this error in my editor a few times when editing
TimelineUIUtils.ts. I'm not sure exactly where from, but these test
cases added in this CL failed and recreated it. This CL makes some of
the checks slightly stricter to catch and early exit.

Bug: none
Change-Id: Ie849179dc18a3acb7c26bb95e7b0ea8d98e776c0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7557440
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

Author: jackfranklin

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

@@ -63,7 +63,10 @@ export function getEnclosingExpression(node: Node): Node|null {
   return null;
 }
 
-export function getEnclosingProperty(node: Node): Node|null {
+export function getEnclosingProperty(node: Node|undefined): Node|null {
+  if (!node) {
+    return null;
+  }
   if (isMemberExpression(
           node, n => n.type === 'ThisExpression', n => ['Identifier', 'PrivateIdentifier'].includes(n.type))) {
     return node;

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

@@ -68,20 +68,20 @@ export const domApi: RuleCreator = {
         if (isIdentifier(property, 'setAttribute')) {
           const attribute = firstArg;
           const value = secondArg;
-          if (attribute.type === 'Literal' && value && value.type !== 'SpreadElement' && attribute.value) {
+          if (attribute?.type === 'Literal' && value && value.type !== 'SpreadElement' && attribute.value) {
             domFragment.attributes.push({key: attribute.value.toString(), value});
             return true;
           }
         }
-        if (isIdentifier(property, 'appendChild')) {
+        if (isIdentifier(property, 'appendChild') && firstArg) {
           domFragment.appendChild(firstArg, sourceCode);
           return true;
         }
         if (domFragment.tagName === 'select' && isIdentifier(property, 'add')) {
           if (secondArg) {
             const index = domFragment.children.indexOf(DomFragment.getOrCreate(secondArg, sourceCode));
             domFragment.insertChildAt(secondArg, index, sourceCode);
-          } else {
+          } else if (firstArg) {
             domFragment.appendChild(firstArg, sourceCode);
           }
           return true;

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

@@ -277,7 +277,10 @@ export class DomFragment {
   }
 }
 
-function getEnclosingVariable(node: Node, sourceCode: SourceCode): Variable|null {
+function getEnclosingVariable(node: Node|undefined, sourceCode: SourceCode): Variable|null {
+  if (!node) {
+    return null;
+  }
   if (node.type === 'Identifier') {
     let scope: Scope|null = sourceCode.getScope(node);
     const variableName = node.name;

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

@@ -16,6 +16,20 @@ new RuleTester().run('no-imperative-dom-api', rule, {
           }
       }`,
     },
+    {
+      filename: 'front_end/ui/components/component/file.ts',
+      code: `
+        const el = document.createElement('div');
+        el.appendChild();
+      `,
+    },
+    {
+      filename: 'front_end/ui/components/component/file.ts',
+      code: `
+        const el = document.createElement('div');
+        el.setAttribute();
+      `,
+    },
   ],
 
   invalid: [