テーマとプラグインにおけるJSネイティブクラス構文への移行

ここ数年、Ember の従来の .extend({ ... }) 構文から、class extends Foo {...} のようなネイティブクラス構文への移行を進めてきました。

従来の構文は技術的にはまだサポートされていますが、IDE や Prettier 3.0 を含む最新の JavaScript ツールは、従来のオブジェクトリテラルベースの構文でのデコレータをサポートしていません。推奨されるリンティング設定の最新バージョンでは、従来の構文を使用すると次のようなエラーが表示されます。

ESLint: error Native JS classes should be used instead of classic classes ember/no-classic-classes

Prettier: SyntaxError: Decorators cannot be used to decorate object literal properties

そのため、まだ更新していない場合は、テーマやプラグインのコードを新しい構文に更新する時期が来ています。更新する必要があるのは、主に新しいクラス定義と modifyClass の呼び出しの 2 つです。

クラス定義

作業の多くは ember-native-class-codemod を使用して行うことができます。テーマ/プラグイン リポジトリの中から、次を実行します。

NO_TELEMETRY=true npx ember-native-class-codemod@4.1.1 --no-classic-decorator **/*.js

これにより、ファイルが処理され、新しいネイティブクラス構文に変換されます。場合によっては、手動で介入するように求められます。コードの変更は常に確認してください。完璧ではありません。

多くのテーマ/プラグインを更新する必要がある場合は、mass-pr スクリプト が役立つかもしれません。

modifyClass の呼び出し

modifyClass の呼び出し内でデコレータを使用している場合は、新しいネイティブクラスベースの構文を使用する必要があります。詳細については、ドキュメント を参照してください。これらの変更を行う際は、記載されている制限事項を念頭に置いてください。

「いいね!」 10

このトピックを見つけようと思ったきっかけとなったエラーは、Prettier complains that @discourseComputed cannot be used to decorate literal properties で議論されていました。

SyntaxError: Decorators cannot be used to decorate object literal properties. (9:3)

編集:ああ。ここに書かれていますが、検索では見つからず、AIは1年前のトピックに誘導しました。

そして残念ながら、コントローラーとルートでは魔法が効きましたが、コンポーネントは修正されませんでした。

「いいね!」 1