eslint-plugin-ember icon indicating copy to clipboard operation
eslint-plugin-ember copied to clipboard

New rule: Lint against modifier which does not use the element

Open chrisrng opened this issue 2 years ago • 0 comments

Why: This is simply abusing modifiers to make them behave like observers (cc @chriskrycho)

If a class-based modifier:

  • If using any method other than modify, check for use of this.element.
  • If using modify, check for use of the first argument, which is always the element.

If a function-based modifier: check for use of the first argument, which is always the element.

Sample error case:

import Modifier from 'ember-modifier';

export default class WrongModifier extends Modifier {
  didReceiveArguments() {
    if (this.args.named.shouldFire) {
      this.args.named.myCallback?.();
    }
  }
}

Sample success case:

import Modifier from 'ember-modifier';

export default class ScrollPositionModifier extends Modifier {
  modify(element, [scrollPosition], { relative }) {
    if(relative) {
      element.scrollTop += scrollPosition;
    } else {
      element.scrollTop = scrollPosition;
    }
  }
}

chrisrng avatar Jul 13 '22 15:07 chrisrng