Passare alla sintassi di classe nativa di JS nei temi e plugin

Sviluppatore
1

Negli ultimi anni, ci siamo allontanati dalla sintassi legacy .extend({ ... }) di Ember verso la sintassi delle classi native come class extends Foo {...}.

Sebbene la sintassi legacy sia tecnicamente ancora supportata, gli strumenti JS moderni, inclusi IDE e Prettier 3.0, non supportano i decoratori nelle sintassi legacy basate su letterali di oggetti. Nell’ultima versione della nostra configurazione di linting consigliata, vedrai questi errori quando utilizzi la sintassi legacy:

ESLint: error Le classi JS native dovrebbero essere utilizzate invece delle classi classiche ember/no-classic-classes

Prettier: SyntaxError: I decoratori non possono essere utilizzati per decorare le proprietà dei letterali di oggetti

Quindi, se non l’hai già fatto, è ora di aggiornare il codice del tuo tema e plugin alla nuova sintassi. Ci sono due cose principali da aggiornare: nuove definizioni di classe e chiamate a modifyClass.

Definizioni di classe

Gran parte del lavoro può essere svolto utilizzando ember-native-class-codemod. Dalla directory del tuo tema/plugin, esegui:

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

Questo eseguirà i tuoi file e li trasformerà nella nuova sintassi delle classi native. A volte ti chiederà di intervenire manualmente. Rivedi sempre le modifiche al codice che apporta: non è perfetto.

Se hai molti temi/plugin da aggiornare, potresti essere interessato al nostro script di massa per le PR.

Chiamate a modifyClass

Se utilizzi decoratori all’interno di chiamate a modifyClass, devi utilizzare la nuova sintassi basata sulle classi native. Per maggiori informazioni, consulta la documentazione. Mentre apporti queste modifiche, tieni presente le limitazioni documentate.

10 Mi Piace
2

L’errore che ho ricevuto e che mi ha spinto a cercare questo argomento è stato discusso in Prettier si lamenta che @discourseComputed non può essere utilizzato per decorare le proprietà letterali

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

MODIFICA: OH. È proprio qui nel testo, ma giuro che la ricerca non l’ha trovato e l’AI mi ha mandato al mio argomento di un anno fa.

E purtroppo, sebbene la magia abbia funzionato sui miei controller e route, non sembra aver risolto i miei componenti.

1 Mi Piace