GtkSourceView syntax highlighting for JavaScript / TypeScript / JSX

Merged

These definitions have been merged. All future development will occur in the parent project (GtkSourceView). This repo will not receive any more updates.

Introduction

GtkSourceView is the text editing component used by gedit and GNOME Builder.

Doesn't gedit / GNOME Builder already have syntax highlighting for JavaScript?

Yes, they do. And like highlighting for most languages, it is based on keyword / regular expression matching across the whole file. This isn't necessarily a problem; it has done the job well enough up to now.

I wanted to add TypeScript and JSX highlighting, reusing JavaScript highlighting as a base. Early on it became obvious this simple matching wasn't going to be enough:

var elementNotType = true ?
        <tag                        // JSX element
            attr="value"></tag>
        : boolean                   // ternary operator else clause
    , typeNotElement
        : boolean                   // type annotation
        = num
        <tag                        // less than operator
            && attr > value;

I couldn't just search for : type or <tag and highlight them differently; these are valid parts of JavaScript syntax.

Can this be done with better regular expressions?

Maybe, but something the syntax highlighting language definition reference doesn't mention is that regular expressions only have access to one line of text at a time. This makes recognizing the different cases in the example above almost impossible using regular expressions alone.

GtkSourceView also supports the use of contexts in language definitions, a way of partitioning a source file into sections that can be highlighted differently. By following the grammar of a particular language, one can use container contexts to "parse" a source file.

What... what did you do?

I rewrote JavaScript syntax highlighting so that it "understands" the different expressions and statements of the language, following the grammar defined in ECMA-262. (More specifically, it supports ES2019 and several finished ES2020 proposals, plus a few other related specifications.)

Then I added language definitions for TypeScript (up to 3.5) and JSX (and TypeScript JSX), by augmenting JavaScript highlighting in the correct places.

I also fixed up the definitions of a few other languages that are affected by the JavaScript rewrite, specifically HTML, JSON, and Objective-J. (I did a semi-rewrite for Objective-J, as the original language definition assumed the language was basically Objective-C.)

Why don't you submit this to GtkSourceView?

I plan to, but I'd like to have more people test these definitions first.

These new language definitions are... complex, and I'm sure there are corner cases I haven't thought of yet. I hope to fix any bugs found by others before opening a merge request with GtkSourceView.

Installation

Copy the files in language-specs into ~/.local/share/gtksourceview-4/language-specs, and the files in styles into ~/.local/share/gtksourceview-4/styles.

If you are using GtkSourceView 2.0 or 3.0, replace gtksourceview-4 in the above paths with gtksourceview-2.0 or gtksourceview-3.0, respectively.

How you can help

• If you have found code that is incorrectly highlighted, please open an issue with a code sample and screenshot if possible.

• If you have used these language definitions for a while and haven't encountered any highlighting errors, please add a 👍 reaction to this issue, just so I have a sense of how "ready" these definitions are to be submitted.

License

GNU Lesser General Public License 2.1 or later

Since I hope to have these merged into GtkSourceView soon, I have left the project name inside the files unchanged.