Wechseln zuJS-native Klassen-Syntax in Themes und Plugins

In den letzten Jahren haben wir uns von der alten .extend({ ... })-Syntax von Ember hin zur nativen Klassensyntax wie class extends Foo {...} bewegt.

Obwohl die alte Syntax technisch noch unterstützt wird, unterstützen moderne JS-Tools, einschließlich IDEs und Prettier 3.0, keine Decorators in den alten, auf Objektliteralen basierenden Syntaxen. In der neuesten Version unserer empfohlenen Linting-Konfiguration sehen Sie die folgenden Fehler, wenn Sie die alte Syntax verwenden:

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

Wenn Sie dies also noch nicht getan haben, ist es an der Zeit, Ihren Theme- und Plugin-Code auf die neue Syntax zu aktualisieren. Es gibt zwei Hauptbereiche, die aktualisiert werden müssen: neue Klassendefinitionen und modifyClass-Aufrufe.

Klassendefinitionen

Ein Großteil der Arbeit kann mit dem ember-native-class-codemod erledigt werden. Führen Sie von Ihrem Theme-/Plugin-Repository aus Folgendes aus:

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

Dadurch werden Ihre Dateien durchlaufen und in die neue native Klassensyntax umgewandelt. Manchmal werden Sie aufgefordert, manuell einzugreifen. Überprüfen Sie immer die vorgenommenen Codeänderungen – sie sind nicht perfekt.

Wenn Sie viele Themes/Plugins zu aktualisieren haben, sind Sie möglicherweise an unserem Massen-PR-Skript interessiert.

modifyClass-Aufrufe

Wenn Sie Decorators innerhalb von modifyClass-Aufrufen verwenden, müssen Sie die neue native klassenbasierte Syntax verwenden. Weitere Informationen dazu finden Sie in der Dokumentation. Beachten Sie bei diesen Änderungen die dokumentierten Einschränkungen.

10 „Gefällt mir“

Der Fehler, der mich dazu veranlasste, dieses Thema zu finden, wurde hier diskutiert: Prettier beschwert sich, dass @discourseComputed nicht zum Dekorieren von Literal-Eigenschaften verwendet werden kann

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

EDIT: OH. Es steht hier im Text, aber ich schwöre, die Suche hat es nicht gefunden, und die KI hat mich zu meinem ein Jahr alten Thema geschickt.

Und leider, obwohl die Magie bei meinen Controllern und Routen funktionierte, scheint sie meine Komponenten nicht behoben zu haben.

1 „Gefällt mir“