테마 및 플러그인을 .gjs 파일 형식으로 자동 업데이트

개발
1

Discourse의 표준 린팅 설정 최신 버전에서 require-strict-mode ember-template-lint 규칙이 활성화되었습니다. 이로 인해 모든 .hbs 파일에 대해 린팅 오류가 발생하게 됩니다.

경고를 해결하려면 모든 컴포넌트, 라우트, 커넥터 템플릿을 .gjs 파일로 변환해야 합니다. 이를 쉽게 할 수 있도록, Ember의 @embroider/template-tag-codemod를 기반으로 구축된 discourse-gjs-codemod를 만들었습니다.

코드를 변환하려면 먼저 플러그인 스켈레톤 또는 테마 스켈레톤에서 최신 package.json을 복사하여 린팅 의존성이 최신 상태인지 확인하세요. 그런 다음 eslint와 prettier를 실행합니다:

pnpm i
pnpm eslint --fix .
pnpm prettier --write "**/*.{gjs,js,hbs,scss}"

자동 수정할 수 없는 문제가 있으면 이제 수동으로 해결하세요. 아직 ember-template-lint를 실행하지 마세요 - 실패하는 것이 예상됩니다.

이제 다음 명령을 사용하여 코드를 실행하세요:

pnpm dlx https://github.com/discourse/discourse-gjs-codemod

자동으로 해결할 수 없는 문제가 있으면 터미널에 정보가 출력됩니다. 문제를 해결한 후 코드를 다시 실행하세요.

.gjs 파일 형식에 대한 자세한 내용은 공식 가이드를 확인하세요:

2

비밀번호를 요구하나요?

 *) pfaffman@noreno:~/src/pfaffman/discourse-pfaffmanager$ pnpm dlx https://github.com/discourse/discourse-gjs-codemod
Username for 'https://github.com': pfaffman
Password for 'https://pfaffman@github.com':
/home/pfaffman/.cache/pnpm/dlx/txqdpi2aznswmhsvgh3pgqp3te/1971d72469d-323788:
 ERROR  Command failed with exit code 128: git ls-remote git+ssh://git@github.com/discourse/discourse-gjs-codemod.git HEAD
ERROR: Repository not found.
fatal: Could not read from remote repository.

https://github.com/discourse/discourse-gjs-codemods 도 작동하지 않습니다. 아직 비공개 상태일까요?

3

:facepalm:

맞아요, 비공개 상태였어요. 이제 공개했습니다:

4

정말 큰 차이가 있었어요! 여러 일이 일어났죠.

나만 그런 게 아니라니 다행이에요. :rofl:

이 세 가지 메시지를 삭제하고 싶으시면 아무도 모를 거예요. :slight_smile:

새 주제로 옮길 수는 있지만, 삭제는 할 수 없어요. . .

5

이건 어떨까요?

                                                                                                                                                           [107/859]
 WARN  Issues with peer dependencies found
.
├─┬ ember-auto-import 2.10.0
│ ├─┬ babel-loader 8.4.1
│ │ └── ✕ missing peer webpack@>=2
│ ├─┬ css-loader 5.2.7
│ │ └── ✕ missing peer webpack@"^4.27.0 || ^5.0.0"
│ ├─┬ style-loader 2.0.0
│ │ └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
│ └─┬ mini-css-extract-plugin 2.9.2
│   └── ✕ missing peer webpack@^5.0.0
└─┬ ember-source 5.12.0
  ├── ✕ missing peer @glimmer/component@^1.1.2
  └─┬ ember-auto-import 2.10.0
    └── ✕ missing peer webpack@^5.0.0
Peer dependencies that should be installed:
  @glimmer/component@^1.1.2   webpack@">=5.0.0 <6.0.0-0"

…


Done in 1.6s using pnpm v9.15.9
file:///home/pfaffman/.cache/pnpm/dlx/txqdpi2aznswmhsvgh3pgqp3te/1971d8d4970-32e7a4/node_modules/.pnpm/execa@9.6.0/node_modules/execa/lib/return/final-error.js:6
        return new ErrorClass(message, options);
               ^

ExecaError: Command failed with exit code 255: '/home/pfaffman/.cache/pnpm/dlx/txqdpi2aznswmhsvgh3pgqp3te/1971d8d4970-32e7a4/node_modules/.pnpm/@embroider+template-
tag-codemod@1.2.1-unstable.ce3535d_@glimmer+component@2.0.0_handlebars@4._arnanpbg4hbtumvl4wyacggoiu/node_modules/@embroider/template-tag-codemod/dist/src/cli.js' '
--relativeLocalPaths=false' '--nativeRouteTemplates=false' '--nativeLexicalThis=false' '--templateInsertion=end' --addNameToTemplateOnly '--customResolver=/home/pfa
ffman/.cache/pnpm/dlx/txqdpi2aznswmhsvgh3pgqp3te/1971d8d4970-32e7a4/node_modules/.pnpm/discourse-gjs-codemod@https+++codeload.github.com+discourse+discourse-gjs-cod
emod+tar.gz+a4bc_2dxbzd2itovnk6l7sa4geot32y/node_modules/discourse-gjs-codemod/custom-resolver.js' '--renamingRules=/home/pfaffman/.cache/pnpm/dlx/txqdpi2aznswmhsvg
h3pgqp3te/1971d8d4970-32e7a4/node_modules/.pnpm/discourse-gjs-codemod@https+++codeload.github.com+discourse+discourse-gjs-codemod+tar.gz+a4bc_2dxbzd2itovnk6l7sa4geo
t32y/node_modules/discourse-gjs-codemod/rules.js' '--renderTests=test/**/*.js' '--routeTemplates=**/templates/**/*.hbs' '--components=**/components/**/*.hbs'

하지만 템플릿 중 대부분이 변환된 것으로 보이며, 아직 그 이유를 정확히 이해하지는 못하지만 놀랍지 않습니다. 해당 템플릿에는 좀 특이한 부분이 있었고, 어차피 다시 작성하는 과정에 있었기 때문입니다.

6

peerdependency 메시지는 아마도 무시해도 되는 경고일 것 같습니다. 코드 변환(codemod) 목적이라면 무시해도 될 것 같습니다.

다른 오류에 대해서는 확실하지 않습니다. 로그에서 더 위로 올라가면 더 유용한 정보가 있을까요? 공개된 테마/플러그인이라면 공유해 주실 수 있나요?

7

네. 에러들은 전부 일시적인 것 같아요. 일부 항목만 변환되지 않았는데, 왜 그런지는 모르겠지만 어차피 그 부분은 다시 쓸 계획이었거든요.

대략 열두 개 이상은 성공적으로 변환된 것 같으니 정말 기적 같은 일이에요!

곧 공개될 다른 내용에도 적용해 볼게요.

감사합니다!

9

.gps 형식 업데이트와 관련하여 작은 질문이 있습니다. Discourse 개발 환경에서 해야 하는지, 아니면 Discourse에 직접 적용해야 하는지 궁금합니다.

저는 자체 호스팅된 Docker 기반 Discourse를 사용 중인데, 아래 명령어를 시도해 봤지만 작동하지 않습니다.

pnpm i
pnpm eslint --fix .
pnpm prettier --write “**/*.{gjs,js,hbs,scss}”

10

로컬 디스커스 개발 환경에서 수행해야 합니다.

11

스켈레톤에서 플러그인을 생성한 시점에 따라 eslint.config.mjs 파일도 가져와야 할 수 있습니다.