Automatically updating themes and plugins to .gjs file format

Dev
1

In the latest version of Discourse’s standard linting config, we’ve enabled the require-strict-mode ember-template-lint rule. This will raise a linting error for any .hbs files.

To resolve the warnings, you should convert all your component, route, and connector templates to .gjs files. To make this easy, we’ve built the discourse-gjs-codemod, which builds on top of Ember’s @embroider/template-tag-codemod.

To use the codemod, first ensure that your linting dependencies are up-to-date by copying the latest package.json from the plugin skeleton or the theme skeleton. Then, run eslint and prettier:

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

If any issues could not be autofixed, resolve them manually now. Don’t run ember-template-lint yet - that’s expected to fail.

Now run the codemod using this command:

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

If there are any issues which cannot be automatically resolved, information will be printed to the terminal. Once you’ve resolved the problem, run the codemod again.

For more information about the .gjs file format, check out the official guide:

9 Likes
2

It wants a password?

 *) 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 doesn’t work. Maybe it’s still private?

4 Likes
3

:facepalm:

You’re right, it was private. It’s unlocked now:

5 Likes
4

That made a very big difference! A bunch of stuff happened.

So glad I’m not the only one that happens to. :rofl:

If you want to delete these three messages, no one will know. :slight_smile:

I can move them to a new topic, but not delete them. . .

5 Likes
5

What about this?

                                                                                                                                                           [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'

But it looks like it converted all but a couple of the templates, and though I don’t yet understand why, I’m not surprised, as they have some wacky stuff in them and I was in the process of re-writing them anyway.

1 Like
6

I think the peerdependency message is probably just a warning which can be ignored for the purposes of the codemod.

Not sure about the other error. Is there anything more useful further up in the log? Is this a public theme/plugin you could share?

7

Yeah. I think the errors are all spuriois. Only a couple things didn’t get converted. I’m not sure why, but like I said, I was planning on rewriting those anyway.

I think it was a dozen or more that it did manage to rewrite, so it’s an absolute miracle!

I will try it on some other stuff that is public soon.

Thanks!