@ethlete/eslint-plugin 1.0.0-next.25 → 1.0.0-next.27

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;

package/src/rules/prefer-match-media.js

@@ -37,7 +37,12 @@
  *   // … etc. All from @ethlete/core.
  */
 
-const { MODULE_REFERENCE_SELECTOR, getModuleReference, isImportedAs } = require('./internals/import-resolution');
+const {
+  MODULE_REFERENCE_SELECTOR,
+  getModuleReference,
+  isGlobalReference,
+  isImportedAs,
+} = require('./internals/import-resolution');
 
 const CDK_LAYOUT = '@angular/cdk/layout';
 
@@ -62,7 +67,15 @@ const preferMatchMedia = {
       CallExpression(node) {
         const { callee } = node;
 
-        // ── window.matchMedia() ───────────────────────────────────────────────
+        if (
+          callee.type === 'Identifier' &&
+          callee.name === 'matchMedia' &&
+          isGlobalReference(context.sourceCode, callee)
+        ) {
+          context.report({ node, messageId: 'preferMatchMedia' });
+          return;
+        }
+
         if (
           callee.type === 'MemberExpression' &&
           callee.property.type === 'Identifier' &&
@@ -74,9 +87,10 @@ const preferMatchMedia = {
           return;
         }
 
-        // ── inject(BreakpointObserver) ────────────────────────────────────────
         if (
           isImportedAs(context.sourceCode, callee, 'inject') &&
+          node.arguments[0]?.type === 'Identifier' &&
+          isGlobalReference(context.sourceCode, node.arguments[0]) &&
           isImportedAs(context.sourceCode, node.arguments[0], 'BreakpointObserver', CDK_LAYOUT)
         ) {
           context.report({ node, messageId: 'noBreakpointObserver' });

package/src/rules/prefer-rxjs-timer.js

@@ -21,6 +21,9 @@
 
 const { isGlobalReference } = require('./internals/import-resolution');
 
+const GLOBAL_OBJECTS = new Set(['window', 'globalThis', 'self']);
+const WINDOW_MEMBERS = new Set(['win', 'window', '_win', '_window']);
+
 /** @type {import('eslint').Rule.RuleModule} */
 const preferRxjsTimer = {
   meta: {
@@ -44,13 +47,33 @@ const preferRxjsTimer = {
     schema: [],
   },
   create(context) {
+    const getTimerName = (callee) => {
+      if (callee.type === 'Identifier') {
+        return isGlobalReference(context.sourceCode, callee) ? callee.name : null;
+      }
+      if (callee.type !== 'MemberExpression' || callee.computed || callee.property.type !== 'Identifier') return null;
+
+      const { object } = callee;
+      const isWindow =
+        (object.type === 'Identifier' &&
+          GLOBAL_OBJECTS.has(object.name) &&
+          isGlobalReference(context.sourceCode, object)) ||
+        (object.type === 'MemberExpression' &&
+          object.object.type === 'ThisExpression' &&
+          !object.computed &&
+          object.property.type === 'Identifier' &&
+          WINDOW_MEMBERS.has(object.property.name));
+
+      return isWindow ? callee.property.name : null;
+    };
+
     return {
       CallExpression(node) {
         const { callee } = node;
 
-        // ── Global timer calls ────────────────────────────────────────────────
-        if (isGlobalReference(context.sourceCode, callee)) {
-          const { name } = callee;
+        const timerName = getTimerName(callee);
+        if (timerName) {
+          const name = timerName;
           if (name === 'setTimeout') {
             context.report({ node, messageId: 'preferTimer' });
             return;
@@ -65,7 +88,6 @@ const preferRxjsTimer = {
           }
         }
 
-        // ── Member calls: .addEventListener / .removeEventListener ────────────
         if (callee.type === 'MemberExpression' && callee.property.type === 'Identifier') {
           const methodName = callee.property.name;
           if (methodName === 'addEventListener') {

package/src/rules/prefer-scroll-state.js

@@ -41,7 +41,6 @@ const preferScrollState = {
         const { callee } = node;
         const args = node.arguments;
 
-        // ── el.addEventListener('scroll', fn) / window.addEventListener('scroll', fn) ──
         if (
           callee.type === 'MemberExpression' &&
           callee.property.type === 'Identifier' &&
@@ -53,7 +52,6 @@ const preferScrollState = {
           return;
         }
 
-        // ── fromEvent(el, 'scroll') ──────────────────────────────────────────
         if (
           callee.type === 'Identifier' &&
           callee.name === 'fromEvent' &&
@@ -64,7 +62,6 @@ const preferScrollState = {
           return;
         }
 
-        // ── renderer.listen(el, 'scroll', fn) ───────────────────────────────
         if (
           callee.type === 'MemberExpression' &&
           callee.property.type === 'Identifier' &&
@@ -77,7 +74,6 @@ const preferScrollState = {
       },
 
       AssignmentExpression(node) {
-        // ── el.onscroll = fn ────────────────────────────────────────────────
         const { left } = node;
         if (
           left.type === 'MemberExpression' &&

package/src/rules/prefer-static-boolean-properties.js

@@ -57,6 +57,7 @@ const preferStaticBooleanProperties = {
     docs: {
       description:
         'Prefer a static attribute over a property binding for static boolean values when the input uses a booleanAttribute transform.',
+      recommended: true,
     },
     hasSuggestions: true,
     schema: [],

package/src/rules/prefer-viewport-size.js

@@ -20,8 +20,37 @@
  *   const h = viewport().height;
  */
 
-/** Properties on window that report viewport dimensions. */
+const { isGlobalReference } = require('./internals/import-resolution');
+
 const VIEWPORT_PROPERTIES = new Set(['innerWidth', 'innerHeight']);
+const GLOBAL_OBJECTS = new Set(['window', 'globalThis', 'self']);
+
+/**
+ * @param {any} node
+ * @returns {string | null}
+ */
+const getPropertyName = (node) => {
+  if (!node.computed && node.property.type === 'Identifier') return node.property.name;
+  if (node.computed && node.property.type === 'Literal' && typeof node.property.value === 'string') {
+    return node.property.value;
+  }
+
+  return null;
+};
+
+/**
+ * @param {any} node
+ */
+const getThisClassBody = (node) => {
+  let current = node.parent;
+
+  while (current) {
+    if (current.type === 'ClassBody') return current;
+    current = current.parent;
+  }
+
+  return null;
+};
 
 /** @type {import('eslint').Rule.RuleModule} */
 const preferViewportSize = {
@@ -38,30 +67,138 @@ const preferViewportSize = {
     schema: [],
   },
   create(context) {
-    return {
-      MemberExpression(node) {
-        if (node.property.type !== 'Identifier') return;
-        if (!VIEWPORT_PROPERTIES.has(node.property.name)) return;
+    const { sourceCode } = context;
+    /** @type {WeakMap<any, Set<string>>} */
+    const classWindowMembers = new WeakMap();
+
+    /**
+     * @param {any} classBody
+     * @returns {Set<string>}
+     */
+    const getClassWindowMembers = (classBody) => {
+      const cached = classWindowMembers.get(classBody);
+      if (cached) return cached;
+
+      /** @type {Set<string>} */
+      const members = new Set();
+      classWindowMembers.set(classBody, members);
+
+      /** @param {any} node */
+      const visit = (node) => {
+        if (!node || typeof node.type !== 'string') return;
+        if (node !== classBody && node.type === 'ClassBody') return;
 
-        // Only flag when the object is clearly a window-like reference.
-        const obj = node.object;
-        const objText = context.sourceCode.getText(obj).toLowerCase();
+        if (
+          node.type === 'PropertyDefinition' &&
+          !node.computed &&
+          node.key.type === 'Identifier' &&
+          isWindowLike(node.value)
+        ) {
+          members.add(node.key.name);
+        }
 
-        const isWindowRef =
-          objText === 'window' ||
-          objText.endsWith('.defaultview') ||
-          objText.endsWith('?.defaultview') ||
-          // document.defaultView without optional chain
-          /defaultview$/.test(objText);
+        if (
+          node.type === 'AssignmentExpression' &&
+          node.left.type === 'MemberExpression' &&
+          node.left.object.type === 'ThisExpression' &&
+          !node.left.computed &&
+          node.left.property.type === 'Identifier' &&
+          isWindowLike(node.right)
+        ) {
+          members.add(node.left.property.name);
+        }
+
+        for (const key of Object.keys(node)) {
+          if (key === 'parent') continue;
+
+          const value = node[key];
+          if (Array.isArray(value)) value.forEach(visit);
+          else if (value && typeof value.type === 'string') visit(value);
+        }
+      };
+
+      visit(classBody);
+
+      return members;
+    };
 
-        if (!isWindowRef) return;
+    /**
+     * @param {any} node
+     * @param {Set<any>} seen
+     * @returns {boolean}
+     */
+    const isWindowLike = (node, seen = new Set()) => {
+      if (!node || seen.has(node)) return false;
+      seen.add(node);
+
+      if (node.type === 'ChainExpression' || node.type === 'TSNonNullExpression' || node.type === 'TSAsExpression') {
+        return isWindowLike(node.expression, seen);
+      }
+
+      if (node.type === 'Identifier') {
+        if (isGlobalReference(sourceCode, node)) return GLOBAL_OBJECTS.has(node.name);
+
+        /** @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' && isWindowLike(definition.node.init, seen);
+          }
+
+          scope = scope.upper;
+        }
+
+        return false;
+      }
+
+      if (node.type !== 'MemberExpression') return false;
+
+      const name = getPropertyName(node);
+      if (name === 'defaultView') return true;
+      if (name && GLOBAL_OBJECTS.has(name) && isWindowLike(node.object, seen)) return true;
+      if (node.object.type !== 'ThisExpression' || !name) return false;
+
+      const classBody = getThisClassBody(node);
+
+      return !!classBody && getClassWindowMembers(classBody).has(name);
+    };
+
+    return {
+      MemberExpression(node) {
+        const prop = getPropertyName(node);
+        if (!prop || !VIEWPORT_PROPERTIES.has(prop)) return;
+        if (!isWindowLike(node.object)) return;
 
         context.report({
           node,
           messageId: 'preferViewportSize',
-          data: { prop: node.property.name },
+          data: { prop },
         });
       },
+      'Program:exit'(program) {
+        const globalScope = sourceCode.getScope(program);
+        const declaredGlobalReferences = [...VIEWPORT_PROPERTIES].flatMap((name) => {
+          const variable = globalScope.set.get(name);
+
+          return variable && variable.defs.length === 0 ? variable.references : [];
+        });
+
+        for (const reference of [...globalScope.through, ...declaredGlobalReferences]) {
+          const { identifier } = reference;
+          if (!VIEWPORT_PROPERTIES.has(identifier.name)) continue;
+
+          context.report({
+            node: identifier,
+            messageId: 'preferViewportSize',
+            data: { prop: identifier.name },
+          });
+        }
+      },
     };
   },
 };