no-at-ember-render-modifiers.md

no-at-ember-render-modifiers

✅ The extends: 'recommended' property in a configuration file enables this rule.

@ember/render-modifiers were meant as a transitional tool from the pre-Octane era, and not long-term usage.

More information about this can be found on the @ember/render-modifiers README.

Examples

This rule forbids the following:

<div {{did-insert this.someFunction}}>

<div {{did-update this.someFunction}}>

<div {{will-destroy this.someFunction}}>

Migration

The migration path typically depends on what the render-modifier was used for, but if you need a custom modifier, the ember-modifier README covers everything you need to know for making custom modifiers.

For example, if render modifiers were used for setup/teardown, the migration to ember-modifier could be the following:

import Component from '@glimmer/component';
import { modifier } from 'ember-modifier';

export default class MyComponent extends Component {
  myModifier = modifier((element) => {
    let handleEvent = () => {};

    element.addEventListener('eventName', handleEvent);

    return () => element.removeEventListener('eventName', handelEvent);
  });
}

<div {{this.myModifier}}>

References

• @ember/render-modifiers (deprecated)
• ember-modifier