테마 및 플러그인에서 JS 네이티브 클래스 문법으로 전환

개발
1

지난 몇 년간 우리는 Ember의 레거시 .extend({ ... }) 구문에서 class extends Foo {...}와 같은 네이티브 클래스 구문으로 전환해 왔습니다.

레거시 구문은 기술적으로는 여전히 지원되지만, IDE와 Prettier 3.0을 포함한 최신 JS 도구들은 레거시 객체 리터럴 기반 구문에서 데코레이터를 지원하지 않습니다. 권장 린팅 설정의 최신 버전에서 레거시 구문을 사용하면 다음과 같은 오류가 표시됩니다:

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 호출입니다.

클래스 정의

대부분의 작업은 ember-native-class-codemod을 사용하여 수행할 수 있습니다. 테마/플러그인 저장소 내에서 다음을 실행하세요:

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

이 명령은 파일들을 순회하며 새로운 네이티브 클래스 구문으로 변환합니다. 때로는 수동으로 개입하도록 프롬프트가 표시될 수 있습니다. 생성된 코드 변경 사항을 항상 검토하세요. 완벽하지 않을 수 있습니다.

업데이트해야 할 테마/플러그인이 많다면 대량 PR 스크립트에 관심이 있을 수 있습니다.

modifyClass 호출

modifyClass 호출 내부에서 데코레이터를 사용하는 경우, 새로운 네이티브 클래스 기반 구문을 사용해야 합니다. 자세한 내용은 문서를 확인하세요. 이러한 변경을 수행할 때 문서화된 제한 사항을 염두에 두시기 바랍니다.

2

이 주제를 찾게 된 계기가 된 오류는 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년 전 내 주제로 안내했었습니다.

불행히도, 컨트롤러와 라우트에서는 마법이 잘 먹혔지만, 컴포넌트는 해결되지 않은 것 같습니다.