Create Tree-sitter syntax defintion for SFC Vue files

[FeBe95]

What problem does this feature solve?

TL;DR: New JavaScript features (e.g. the nullish coalescing operator ??) break syntax highlighting in .vue files on GitHub:

<script>const foo = bar ?? baz</script>

Why?

GitHub uses the TextMate syntax definitions of this repository for its syntax highlighting of Vue SFC files (see: https://github.com/github-linguist/linguist/blob/main/vendor/README.md). Any TextMate-based syntax definition that injects JavaScript code will then use atom/language-javascript for its JavaScript highlighting. Unfortunately, this repository is unmaintained and was archived almost 3 years ago. Therefore, it will not support any new JavaScript language features.

→ All .html files on GitHub are already highlighted using Tree-sitter (see: https://github.com/github-linguist/linguist/blob/1b43482ac6ab97394a70946cb041f3fa5f3284b5/script/list-grammars#L18):

<script>const foo = bar ?? baz</script>

Lengthy discussion on this topic, for reference:

• JS nullish coalescing and optional chaining operators break syntax highlighting on GitHub #5118

What does the proposed solution look like?

1. Create Tree-sitter syntax files that can be used by all supporting code editors.
2. Make GitHub use these new files instead of the old TextMate syntax files.

Note

There are two unmaintained third-party repositories that have implemented a Tree-sitter syntax for Vue. They could be used for "inspiration" to create official tree-sitter syntax files:

• Vue 2: ikatyang/tree-sitter-vue
• Vue 3: xiaoxin-sky/tree-sitter-vue3