💼 This rule is enabled in the 📋 template-lint-migration config.
Disallows usage of modifiers from @ember/render-modifiers.
The modifiers from @ember/render-modifiers ({{did-insert}}, {{did-update}}, {{will-destroy}}) should be replaced with alternatives from ember-render-helpers or other modern approaches.
Examples of incorrect code for this rule:
<template>
<div {{did-insert this.setup}}></div>
</template><template>
<div {{did-update this.update}}></div>
</template><template>
<div {{will-destroy this.cleanup}}></div>
</template>Examples of correct code for this rule:
<template>
<div {{on "click" this.handleClick}}></div>
</template>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) => {
const handleEvent = () => {};
element.addEventListener('eventName', handleEvent);
return () => element.removeEventListener('eventName', handelEvent);
});
}