Created lexers for gjs and gts (used by Ember projects)

[ijlee2]

Background

This pull request (PR) provides a simpler, more maintainable implementation than #2163.

In Ember.js, we use the extension *.gjs and *.gts to write JavaScript/TypeScript and template code in the same file. Templates are marked by a <template> tag. The main use case of *.{gjs,gts}: Developers can write single-file components, an idea that we can find in other web frameworks.

To my understanding, GitLab and dev.to rely on rouge for syntax highlighting. This PR would especially help developers who use GitLab, because they currently can't see diffs in *.{gjs,gts} highlighted in their PRs.

Related issues on GitLab:

• https://gitlab.com/gitlab-org/gitlab/-/issues/421133
• https://gitlab.com/gitlab-org/gitlab/-/issues/545542#note_2531285924
• https://gitlab.com/gitlab-org/gitlab/-/issues/573281

Solution

*.gjs and *.gts are just JavaScript and TypeScript with some Handlebars-like code (technically, it's Glimmer). As a result, I believe the best solution is to delegate syntax highlighting to existing javascript, typescript, and handlebars lexers, since they've been tested out for years (not just in the context of Ember, but also of others).

The new gjs and gts lexers are only responsible for locating the starting <template> and the ending </template> tags. As an aside, I've used this separation of concerns successfully to implement syntax highlighting for Sublime Text.

Note

There's a possibility that, in the future, *.{gjs,gts} allows the <style> tag in addition to the <template> tag. The Ember community hasn't come to a consensus on where this tag should appear and how it should be invoked. So, to limit the scope, I allowed the gjs and gts lexers to not handle the <style> tag for now.

Demos (Testing)

In the screenshots below, we should see the JavaScript part of a *.gjs file highlighted in the same manner as in a *.js file. Similarly, the TypeScript part of a *.gts file, as in a *.ts file. In both *.gjs and *.gts, the template code inside a <template> tag should be highlighted as if it were in an *.hbs file.

Example 1: Component

gjs, theme is default

gjs, theme is github

gjs, theme is github-dark

gts, theme is default

gts, theme is github

gts, theme is github-dark

Example 2: Test for the component

gjs, theme is default

gjs, theme is github

gjs, theme is github-dark

gts, theme is default

gts, theme is github

gts, theme is github-dark

[ijlee2]

To the reviewers: I fixed the lint errors found in CI (new line missing at EOF).

Will move the PR to draft so that @dknutsen from #2163 can look into adding specs to this branch.

[ijlee2]

Hi, this PR is ready for review again. @dknutsen, @lukasnys, and I'd like to get #2165 reviewed and merged (instead of #2163). Thanks in advance.

[ijlee2]

@tancnle Could you help with reviewing this pull request?

[lukasnys]

@tancnle is there anything we can do to help move this forward?

[BoussonKarel]

+1

[tancnle]

Apology for the delay. Thank you for your work on this MR, @ijlee2. LGTM 🚀

[ijlee2]

@tancnle Thank you again for your help!

Q. When could we expect a new release in rouge? Do we then notify people on GitLab in https://gitlab.com/gitlab-org/gitlab/-/issues/573281?

[lukasnys]

@tancnle I'm not sure if you had seen @ijlee2's comment (apologies if you did), but would you be able to give an estimate on when this change would be included in a new release of rouge?