@ethlete/eslint-plugin 1.0.0-next.24 → 1.0.0-next.26

package/src/rules/no-window-location.js

@@ -1,6 +1,8 @@
 // @ts-check
 'use strict';
 
+const { isGlobalReference } = require('./internals/import-resolution');
+
 /**
  * Disallows reading URL state from window.location properties.
  *
@@ -52,29 +54,55 @@ const noWindowLocation = {
     schema: [],
   },
   create(context) {
+    const isGlobalObject = (node) =>
+      node.type === 'Identifier' &&
+      (node.name === 'window' || node.name === 'globalThis') &&
+      isGlobalReference(context.sourceCode, node);
+
+    const findVariable = (identifier) => {
+      for (let scope = context.sourceCode.getScope(identifier); scope; scope = scope.upper) {
+        const variable = scope.set.get(identifier.name);
+        if (variable) return variable;
+      }
+
+      return null;
+    };
+
+    const isLocation = (node) => {
+      if (node.type === 'Identifier') {
+        if (node.name === 'location' && isGlobalReference(context.sourceCode, node)) return true;
+
+        const definitions = findVariable(node)?.defs ?? [];
+
+        return (
+          definitions.length === 1 &&
+          definitions[0].type === 'Variable' &&
+          definitions[0].node.id.type === 'Identifier' &&
+          definitions[0].parent.kind === 'const' &&
+          !!definitions[0].node.init &&
+          isLocation(definitions[0].node.init)
+        );
+      }
+
+      return (
+        node.type === 'MemberExpression' &&
+        !node.computed &&
+        isGlobalObject(node.object) &&
+        node.property.type === 'Identifier' &&
+        node.property.name === 'location'
+      );
+    };
+
     return {
-      // ── window.location.{prop} reads ────────────────────────────────────────
       MemberExpression(node) {
-        if (node.property.type !== 'Identifier') return;
+        if (node.property.type !== 'Identifier' || node.computed) return;
         const prop = node.property.name;
 
         if (!LOCATION_STATE_PROPS.has(prop)) return;
+        if (!isLocation(node.object)) return;
 
-        // Must be window.location.{prop} — check the object is window.location
-        const parent = node.object;
-        if (
-          parent.type !== 'MemberExpression' ||
-          parent.object.type !== 'Identifier' ||
-          parent.object.name !== 'window' ||
-          parent.property.type !== 'Identifier' ||
-          parent.property.name !== 'location'
-        ) {
-          return;
-        }
-
-        // Skip assignments TO window.location.href (navigation redirect)
         if (prop === 'href' && node.parent.type === 'AssignmentExpression' && node.parent.left === node) {
-          return;
+          if (node.parent.operator === '=') return;
         }
 
         context.report({
@@ -84,18 +112,28 @@ const noWindowLocation = {
         });
       },
 
-      // ── new URLSearchParams(window.location.search) ─────────────────────────
+      VariableDeclarator(node) {
+        if (node.id.type !== 'ObjectPattern' || !node.init || !isLocation(node.init)) return;
+
+        for (const property of node.id.properties) {
+          if (property.type !== 'Property' || property.computed || property.key.type !== 'Identifier') continue;
+          if (!LOCATION_STATE_PROPS.has(property.key.name)) continue;
+
+          context.report({
+            node: property,
+            messageId: 'noWindowLocation',
+            data: { prop: property.key.name, replacement: LOCATION_STATE_PROPS.get(property.key.name) },
+          });
+        }
+      },
+
       NewExpression(node) {
         if (node.callee.type !== 'Identifier' || node.callee.name !== 'URLSearchParams') return;
         const arg = node.arguments[0];
         if (!arg) return;
         if (
           arg.type === 'MemberExpression' &&
-          arg.object.type === 'MemberExpression' &&
-          arg.object.object.type === 'Identifier' &&
-          arg.object.object.name === 'window' &&
-          arg.object.property.type === 'Identifier' &&
-          arg.object.property.name === 'location' &&
+          isLocation(arg.object) &&
           arg.property.type === 'Identifier' &&
           arg.property.name === 'search'
         ) {

package/src/rules/prefer-clone-equal.js

@@ -25,7 +25,20 @@
  *   import { clone, equal } from '@ethlete/core';
  */
 
-const { MODULE_REFERENCE_SELECTOR, getModuleReference, isGlobalReference } = require('./internals/import-resolution');
+const {
+  MODULE_REFERENCE_SELECTOR,
+  getModuleReference,
+  isGlobalReference,
+  resolveIdentifier,
+} = require('./internals/import-resolution');
+
+const LODASH_SOURCES = new Set(['lodash', 'lodash-es']);
+
+/** @type {Record<string, { messageId: 'preferClone' | 'preferEqual'; method: string }>} */
+const LODASH_METHODS = {
+  cloneDeep: { messageId: 'preferClone', method: 'lodash cloneDeep' },
+  isEqual: { messageId: 'preferEqual', method: 'isEqual' },
+};
 
 /** @type {import('eslint').Rule.RuleModule} */
 const preferCloneEqual = {
@@ -49,7 +62,43 @@ const preferCloneEqual = {
       CallExpression(node) {
         const { callee } = node;
 
-        // ── JSON.parse(JSON.stringify(expr)) ─────────────────────────────────
+        if (
+          callee.type === 'MemberExpression' &&
+          !callee.computed &&
+          callee.object.type === 'Identifier' &&
+          callee.property.type === 'Identifier' &&
+          Object.hasOwn(LODASH_METHODS, callee.property.name)
+        ) {
+          const resolved = resolveIdentifier(context.sourceCode, callee.object);
+          if (
+            resolved?.source &&
+            LODASH_SOURCES.has(resolved.source) &&
+            (resolved.name === '*' || resolved.name === 'default')
+          ) {
+            const { messageId, method } = LODASH_METHODS[callee.property.name];
+            context.report({ node, messageId, data: { method } });
+            return;
+          }
+        }
+
+        if (
+          isGlobalReference(context.sourceCode, callee) &&
+          callee.name === 'require' &&
+          node.arguments[0]?.type === 'Literal' &&
+          LODASH_SOURCES.has(String(node.arguments[0].value))
+        ) {
+          const { parent } = node;
+          const method =
+            parent.type === 'MemberExpression' && parent.object === node && parent.property.type === 'Identifier'
+              ? parent.property.name
+              : null;
+          if (method && Object.hasOwn(LODASH_METHODS, method)) {
+            const { messageId, method: label } = LODASH_METHODS[method];
+            context.report({ node, messageId, data: { method: label } });
+          }
+          return;
+        }
+
         if (
           callee.type === 'MemberExpression' &&
           callee.object.type === 'Identifier' &&
@@ -71,7 +120,6 @@ const preferCloneEqual = {
           }
         }
 
-        // ── structuredClone(expr) ─────────────────────────────────────────────
         if (isGlobalReference(context.sourceCode, callee) && callee.name === 'structuredClone') {
           context.report({ node, messageId: 'preferClone', data: { method: 'structuredClone()' } });
         }
@@ -82,9 +130,6 @@ const preferCloneEqual = {
         if (!reference) return;
         const src = reference.source;
 
-        // ── lodash cloneDeep / isEqual ────────────────────────────────────────
-        // import { cloneDeep } from 'lodash' / 'lodash-es'
-        // import { isEqual } from 'lodash' / 'lodash-es'
         if (src === 'lodash' || src === 'lodash-es') {
           for (const { name } of reference.named) {
             if (name === 'cloneDeep') {
@@ -96,13 +141,21 @@ const preferCloneEqual = {
           return;
         }
 
-        // import cloneDeep from 'lodash/cloneDeep'
+        if (src === 'lodash.clonedeep') {
+          context.report({ node, messageId: 'preferClone', data: { method: 'lodash cloneDeep' } });
+          return;
+        }
+
+        if (src === 'lodash.isequal') {
+          context.report({ node, messageId: 'preferEqual', data: { method: 'isEqual' } });
+          return;
+        }
+
         if (src === 'lodash/cloneDeep' || src === 'lodash-es/cloneDeep') {
           context.report({ node, messageId: 'preferClone', data: { method: 'lodash cloneDeep' } });
           return;
         }
 
-        // import isEqual from 'lodash/isEqual'
         if (src === 'lodash/isEqual' || src === 'lodash-es/isEqual') {
           context.report({ node, messageId: 'preferEqual', data: { method: 'isEqual' } });
         }

package/src/rules/prefer-concise-angular-host-directives.js

@@ -7,7 +7,7 @@ const { getAngularDecoratorName } = require('./internals/import-resolution');
 /** @typedef {import('estree').Property & { range: [number, number] }} TPropertyNode */
 /** @typedef {import('estree').ArrayExpression & { elements: Array<import('estree').Expression | import('estree').SpreadElement | null> }} TArrayExpressionNode */
 /** @typedef {import('estree').ObjectExpression & { properties: Array<TPropertyNode | import('estree').SpreadElement> }} TObjectExpressionNode */
-/** @typedef {{ bodyText: string; hasComma: boolean; originalIndex: number; orderIndex: number; property: TPropertyNode; trailingText: string }} TPropertyEntry */
+/** @typedef {{ bodyText: string; endsWithLineComment: boolean; hasComma: boolean; originalIndex: number; orderIndex: number; property: TPropertyNode; trailingText: string }} TPropertyEntry */
 
 const HOST_DIRECTIVE_PROPERTY_ORDER = ['directive', 'inputs', 'outputs'];
 
@@ -20,6 +20,24 @@ const getPropertyName = (key) => {
   return null;
 };
 
+/**
+ * @param {any} node
+ */
+const unwrapTypeAssertions = (node) => {
+  let current = node;
+
+  while (
+    current &&
+    (current.type === 'TSAsExpression' ||
+      current.type === 'TSSatisfiesExpression' ||
+      current.type === 'TSNonNullExpression')
+  ) {
+    current = current.expression;
+  }
+
+  return current;
+};
+
 /**
  * @param {TDecoratorName} decoratorName
  * @param {import('estree').Node} node
@@ -35,9 +53,10 @@ const getHostDirectivesArray = (decoratorName, node) => {
   for (const property of metadata.properties) {
     if (!property || property.type !== 'Property') continue;
     if (getPropertyName(property.key) !== 'hostDirectives') continue;
-    if (property.value.type !== 'ArrayExpression') return null;
+    const value = unwrapTypeAssertions(property.value);
+    if (value.type !== 'ArrayExpression') return null;
 
-    return /** @type {TArrayExpressionNode} */ (property.value);
+    return /** @type {TArrayExpressionNode} */ (value);
   }
 
   return null;
@@ -66,6 +85,11 @@ const getHostDirectiveConfigProperties = (node) => {
   return properties;
 };
 
+/**
+ * @param {string} text
+ */
+const startsWithLineBreak = (text) => /^\s*/.exec(text)?.[0].includes('\n') ?? false;
+
 /**
  * @param {TObjectExpressionNode} node
  * @param {import('eslint').SourceCode} sourceCode
@@ -98,6 +122,7 @@ const buildSortedObjectText = (node, sourceCode) => {
 
       return {
         bodyText,
+        endsWithLineComment: trailingComment?.type === 'Line',
         hasComma: Boolean(comma),
         originalIndex,
         orderIndex: orderIndexMap.get(getPropertyName(property.key)) ?? HOST_DIRECTIVE_PROPERTY_ORDER.length,
@@ -120,10 +145,12 @@ const buildSortedObjectText = (node, sourceCode) => {
   return (
     '{' +
     sortedEntries
-      .map(
-        (entry, index) =>
-          `${entry.bodyText}${index < sortedEntries.length - 1 || trailingComma ? ',' : ''}${entry.trailingText}`,
-      )
+      .map((entry, index) => {
+        const followingText = sortedEntries[index + 1]?.bodyText ?? suffix;
+        const needsLineBreak = entry.endsWithLineComment && !startsWithLineBreak(followingText);
+
+        return `${entry.bodyText}${index < sortedEntries.length - 1 || trailingComma ? ',' : ''}${entry.trailingText}${needsLineBreak ? '\n' : ''}`;
+      })
       .join('') +
     suffix +
     '}'
@@ -181,9 +208,10 @@ const preferConciseAngularHostDirectives = {
         if (!hostDirectives) return;
 
         for (const element of hostDirectives.elements) {
-          if (!element || element.type !== 'ObjectExpression') continue;
+          const unwrapped = unwrapTypeAssertions(element);
+          if (!unwrapped || unwrapped.type !== 'ObjectExpression') continue;
 
-          const config = /** @type {TObjectExpressionNode} */ (element);
+          const config = /** @type {TObjectExpressionNode} */ (unwrapped);
           const properties = getHostDirectiveConfigProperties(config);
           if (!properties) continue;
 
@@ -191,12 +219,12 @@ const preferConciseAngularHostDirectives = {
             const directiveValue = getDirectiveValueNode(config);
             if (!directiveValue) continue;
 
-            const hasComments = sourceCode.getCommentsInside(config).length > 0;
+            const hasComments = sourceCode.getCommentsInside(element).length > 0;
 
             context.report({
               node: config,
               messageId: 'preferShorthand',
-              fix: hasComments ? null : (fixer) => fixer.replaceText(config, sourceCode.getText(directiveValue)),
+              fix: hasComments ? null : (fixer) => fixer.replaceText(element, sourceCode.getText(directiveValue)),
             });
 
             continue;

package/src/rules/prefer-concise-angular-style-metadata.js

@@ -20,9 +20,16 @@ const getPropertyName = (key) => {
  * @returns {import('estree').Expression | null}
  */
 const getSingleArrayElement = (property) => {
-  if (property.value.type !== 'ArrayExpression' || property.value.elements.length !== 1) return null;
+  /** @type {any} */
+  let value = property.value;
 
-  const firstElement = /** @type {TArrayElement} */ (property.value.elements[0]);
+  while (value.type === 'TSAsExpression' || value.type === 'TSSatisfiesExpression') {
+    value = value.expression;
+  }
+
+  if (value.type !== 'ArrayExpression' || value.elements.length !== 1) return null;
+
+  const firstElement = /** @type {TArrayElement} */ (value.elements[0]);
   if (!firstElement || firstElement.type === 'SpreadElement') return null;
 
   return firstElement;
@@ -35,6 +42,7 @@ const preferConciseAngularStyleMetadata = {
     docs: {
       description:
         'Prefer `styleUrl` over single-item `styleUrls`, and avoid wrapping a single `styles` entry in an array.',
+      recommended: true,
     },
     fixable: 'code',
     messages: {

package/src/rules/prefer-element-dimensions.js

@@ -29,7 +29,7 @@ const { ANGULAR_CORE, getImportedName } = require('./internals/import-resolution
  *   // or
  *   dimensions = signalElementDimensions(inject(ElementRef));
  *   // Then:
- *   effect(() => { const w = this.dimensions().rect.width; }); // ✅ reactive
+ *   effect(() => { const w = this.dimensions().rect().width; }); // ✅ reactive
  */
 
 /** Size-related properties read from DOM elements. */
@@ -45,25 +45,48 @@ const ELEMENT_SIZE_PROPS = new Set([
 /** Size-related methods called on DOM elements. */
 const ELEMENT_SIZE_METHODS = new Set(['getBoundingClientRect', 'getClientRects']);
 
+const SYNCHRONOUS_ARRAY_METHODS = new Set([
+  'map',
+  'flatMap',
+  'filter',
+  'forEach',
+  'find',
+  'findLast',
+  'findIndex',
+  'findLastIndex',
+  'some',
+  'every',
+  'reduce',
+  'reduceRight',
+  'sort',
+]);
+
 /**
- * Returns the name of the wrapping reactive context ('effect' | 'computed') if
- * the node is inside one, crossing exactly one function boundary.
  * @param {import('eslint').SourceCode} sourceCode
  * @param {import('eslint').Rule.Node} node
  * @returns {string | null}
  */
 const getReactiveContext = (sourceCode, node) => {
-  let crossedFunctionBoundary = false;
+  /** @type {any} */
   let current = node.parent;
 
   while (current) {
-    if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {
-      crossedFunctionBoundary = true;
-    }
+    if (
+      current.type === 'ArrowFunctionExpression' ||
+      current.type === 'FunctionExpression' ||
+      current.type === 'FunctionDeclaration'
+    ) {
+      const host = current.parent;
+      if (host?.type !== 'CallExpression' || !host.arguments.includes(current)) return null;
 
-    if (crossedFunctionBoundary && current.type === 'CallExpression') {
-      const calleeName = getImportedName(sourceCode, current.callee, ANGULAR_CORE);
+      const calleeName = getImportedName(sourceCode, host.callee, ANGULAR_CORE);
       if (calleeName === 'effect' || calleeName === 'computed') return calleeName;
+
+      const isSynchronousArrayCallback =
+        host.callee.type === 'MemberExpression' &&
+        host.callee.property.type === 'Identifier' &&
+        SYNCHRONOUS_ARRAY_METHODS.has(host.callee.property.name);
+      if (!isSynchronousArrayCallback) return null;
     }
 
     current = current.parent;
@@ -72,6 +95,236 @@ const getReactiveContext = (sourceCode, node) => {
   return null;
 };
 
+const DOM_QUERY_METHODS = new Set(['querySelector', 'getElementById', 'closest', 'elementFromPoint']);
+const DOM_LIST_QUERY_METHODS = new Set([
+  'querySelectorAll',
+  'getElementsByClassName',
+  'getElementsByTagName',
+  'getElementsByName',
+]);
+const ELEMENT_NAVIGATION_PROPS = new Set([
+  'parentElement',
+  'offsetParent',
+  'firstElementChild',
+  'lastElementChild',
+  'nextElementSibling',
+  'previousElementSibling',
+]);
+const ELEMENT_INJECTORS = new Set(['injectHostElement', 'injectAngularRootElement', 'injectBoundaryElement']);
+const ELEMENT_TYPE_NAME = /^(Element|HTMLElement|SVGElement|HTML\w*Element|SVG\w*Element)$/u;
+
+/**
+ * @param {any} typeAnnotation
+ */
+const isElementType = (typeAnnotation) => {
+  const type = typeAnnotation?.type === 'TSTypeAnnotation' ? typeAnnotation.typeAnnotation : typeAnnotation;
+
+  if (type?.type === 'TSUnionType') return type.types.some(isElementType);
+
+  return (
+    type?.type === 'TSTypeReference' &&
+    type.typeName.type === 'Identifier' &&
+    ELEMENT_TYPE_NAME.test(type.typeName.name)
+  );
+};
+
+/**
+ * @param {any} node
+ */
+const isDocumentReference = (node) =>
+  (node.type === 'Identifier' && node.name === 'document') ||
+  (node.type === 'MemberExpression' &&
+    !node.computed &&
+    node.property.type === 'Identifier' &&
+    /^(document|doc)$/u.test(node.property.name));
+
+/**
+ * @param {any} node
+ */
+const getThisClassBody = (node) => {
+  let current = node.parent;
+
+  while (current) {
+    if (current.type === 'ClassBody') return current;
+    current = current.parent;
+  }
+
+  return null;
+};
+
+const ELEMENT_COLLECTION_NAME = /(Children|Elements)$/u;
+
+/**
+ * @param {any} node
+ * @returns {string | null}
+ */
+const getReferenceName = (node) => {
+  if (node.type === 'Identifier') return node.name;
+  if (node.type === 'MemberExpression' && !node.computed && node.property.type === 'Identifier') {
+    return node.property.name;
+  }
+
+  return null;
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} node
+ * @param {Set<any>} seen
+ * @returns {boolean}
+ */
+const isElementCollection = (sourceCode, node, seen) => {
+  if (!node || seen.has(node)) return false;
+  seen.add(node);
+
+  if (node.type === 'ChainExpression' || node.type === 'TSNonNullExpression') {
+    return isElementCollection(sourceCode, node.expression, seen);
+  }
+
+  if (node.type === 'ArrayExpression') {
+    return (
+      node.elements.length > 0 &&
+      node.elements.every(
+        (/** @type {any} */ element) =>
+          element?.type === 'SpreadElement' && isElementCollection(sourceCode, element.argument, seen),
+      )
+    );
+  }
+
+  if (node.type === 'CallExpression') {
+    const name = getReferenceName(node.callee);
+    if (name && DOM_LIST_QUERY_METHODS.has(name)) return true;
+    if (name === 'from' && node.arguments[0]) return isElementCollection(sourceCode, node.arguments[0], seen);
+
+    return !!name && ELEMENT_COLLECTION_NAME.test(name);
+  }
+
+  const name = getReferenceName(node);
+  if (name === 'children') return true;
+  if (name && ELEMENT_COLLECTION_NAME.test(name)) return true;
+  if (node.type !== 'Identifier') return false;
+
+  /** @type {import('eslint').Scope.Scope | null} */
+  let scope = sourceCode.getScope(node);
+
+  while (scope) {
+    const variable = scope.set.get(node.name);
+
+    if (variable) {
+      const definition = /** @type {any} */ (variable.defs[0]);
+
+      return definition?.type === 'Variable' && isElementCollection(sourceCode, definition.node.init, seen);
+    }
+
+    scope = scope.upper;
+  }
+
+  return false;
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} node
+ * @param {Set<any>} seen
+ * @returns {boolean}
+ */
+const isElementExpression = (sourceCode, node, seen = new Set()) => {
+  if (!node || seen.has(node)) return false;
+  seen.add(node);
+
+  switch (node.type) {
+    case 'ChainExpression':
+    case 'TSNonNullExpression':
+      return isElementExpression(sourceCode, node.expression, seen);
+    case 'TSAsExpression':
+    case 'TSTypeAssertion':
+      return isElementType(node.typeAnnotation) || isElementExpression(sourceCode, node.expression, seen);
+    case 'CallExpression': {
+      const { callee } = node;
+
+      if (callee.type === 'Identifier') return ELEMENT_INJECTORS.has(callee.name);
+
+      return (
+        callee.type === 'MemberExpression' &&
+        callee.property.type === 'Identifier' &&
+        DOM_QUERY_METHODS.has(callee.property.name)
+      );
+    }
+    case 'MemberExpression': {
+      if (node.computed) {
+        const list = node.object;
+
+        return (
+          list.type === 'CallExpression' &&
+          list.callee.type === 'MemberExpression' &&
+          list.callee.property.type === 'Identifier' &&
+          DOM_LIST_QUERY_METHODS.has(list.callee.property.name)
+        );
+      }
+
+      if (node.property.type !== 'Identifier') return false;
+
+      const prop = node.property.name;
+      if (prop === 'nativeElement' || ELEMENT_NAVIGATION_PROPS.has(prop)) return true;
+      if (prop === 'documentElement' || prop === 'body') return isDocumentReference(node.object);
+      if (node.object.type !== 'ThisExpression') return false;
+
+      const classBody = getThisClassBody(node);
+      const field = classBody?.body.find(
+        (/** @type {any} */ member) =>
+          member.type === 'PropertyDefinition' &&
+          !member.computed &&
+          member.key.type === 'Identifier' &&
+          member.key.name === prop,
+      );
+
+      return !!field && (isElementType(field.typeAnnotation) || isElementExpression(sourceCode, field.value, seen));
+    }
+    case 'Identifier': {
+      /** @type {import('eslint').Scope.Scope | null} */
+      let scope = sourceCode.getScope(node);
+
+      while (scope) {
+        const variable = scope.set.get(node.name);
+
+        if (variable) {
+          const definition = /** @type {any} */ (variable.defs[0]);
+          if (!definition) return false;
+          if (isElementType(definition.name.typeAnnotation)) return true;
+
+          if (definition.type === 'Parameter') {
+            const host = definition.node.parent;
+            const isArrayCallback =
+              host?.type === 'CallExpression' &&
+              host.arguments[0] === definition.node &&
+              host.callee.type === 'MemberExpression' &&
+              host.callee.property.type === 'Identifier' &&
+              SYNCHRONOUS_ARRAY_METHODS.has(host.callee.property.name) &&
+              definition.node.params[0] === definition.name;
+
+            return isArrayCallback && isElementCollection(sourceCode, host.callee.object, seen);
+          }
+
+          if (definition.type !== 'Variable') return false;
+
+          const loop = definition.parent?.parent;
+          if (loop?.type === 'ForOfStatement' && loop.left === definition.parent) {
+            return isElementCollection(sourceCode, loop.right, seen);
+          }
+
+          return isElementExpression(sourceCode, definition.node.init, seen);
+        }
+
+        scope = scope.upper;
+      }
+
+      return false;
+    }
+    default:
+      return false;
+  }
+};
+
 /** @type {import('eslint').Rule.RuleModule} */
 const preferElementDimensions = {
   meta: {
@@ -89,10 +342,10 @@ const preferElementDimensions = {
   },
   create(context) {
     return {
-      // el.offsetWidth, el.clientWidth, etc.
       MemberExpression(node) {
         if (node.property.type !== 'Identifier') return;
         if (!ELEMENT_SIZE_PROPS.has(node.property.name)) return;
+        if (!isElementExpression(context.sourceCode, node.object)) return;
 
         const reactiveCtx = getReactiveContext(context.sourceCode, node);
         if (!reactiveCtx) return;
@@ -104,12 +357,12 @@ const preferElementDimensions = {
         });
       },
 
-      // el.getBoundingClientRect(), el.getClientRects()
       CallExpression(node) {
         const { callee } = node;
         if (callee.type !== 'MemberExpression') return;
         if (callee.property.type !== 'Identifier') return;
         if (!ELEMENT_SIZE_METHODS.has(callee.property.name)) return;
+        if (!isElementExpression(context.sourceCode, callee.object)) return;
 
         const reactiveCtx = getReactiveContext(context.sourceCode, node);
         if (!reactiveCtx) return;