Au cours des dernières années, nous nous sommes éloignés de la syntaxe héritée .extend({ ... }) d’Ember pour adopter la syntaxe des classes natives comme class extends Foo {...}.
Bien que la syntaxe héritée soit techniquement toujours prise en charge, les outils JS modernes, y compris les IDE et Prettier 3.0, ne prennent pas en charge les décorateurs dans les syntaxes héritées basées sur des littéraux d’objets. Dans la dernière version de notre configuration de linting recommandée, vous verrez ces erreurs lors de l’utilisation de la syntaxe héritée :
ESLint : error Les classes JS natives doivent être utilisées à la place des classes classiques ember/no-classic-classes
Prettier : SyntaxError : Les décorateurs ne peuvent pas être utilisés pour décorer les propriétés de littéraux d'objets
Donc, si vous ne l’avez pas encore fait, il est temps de mettre à jour votre code de thème et de plugin vers la nouvelle syntaxe. Il y a deux points principaux à mettre à jour : les nouvelles définitions de classe et les appels modifyClass.
Définitions de classe
Une grande partie du travail peut être effectuée à l’aide du ember-native-class-codemod. Depuis votre dépôt de thème/plugin, exécutez :
NO_TELEMETRY=true npx ember-native-class-codemod@4.1.1 --no-classic-decorator **/*.js
Cela parcourra vos fichiers et les transformera vers la nouvelle syntaxe de classe native. Parfois, il vous demandera d’intervenir manuellement. Examinez toujours les modifications de code qu’il apporte - il n’est pas parfait.
Si vous avez de nombreux thèmes/plugins à mettre à jour, vous pourriez être intéressé par notre script de masse-PR.
Appels modifyClass
Si vous utilisez des décorateurs dans des appels modifyClass, vous devez utiliser la nouvelle syntaxe basée sur les classes natives. Pour plus d’informations à ce sujet, consultez la documentation. Lorsque vous apportez ces modifications, veuillez tenir compte des limitations documentées.