Syntax highlighting for `$: if( ) { }`

[hyunbinseo]

TL:DR;

Since the syntax highlighting works fine on VS Code, I was assuming that it was a GitHub linguist issue.

However, there was a feedback that it might be the grammar issue. Therefore, submitting this issue.

Reference https://github.com/github-linguist/linguist/issues/6673

Describe the issue

Svelte's $: if( ) { } syntax seems to be broken on github.com.

• Minimum Reproducible Example
• Example file with this code usage.

Currently, lang="ts" is required to correctly highlight this syntax.

[dummdidumm]

Given that it's somewhat of an edge case and that this syntax is going to be less used with Svelte 5+, I'm putting this in the "not that important" category. I also suspect this might have to do with the JS grammar, AFAIK we just reuse it here.

[jasonlyu123]

GitHub linguist is using a fork of a fork from an ancient version of svelte-atom. They switched to the latest Svelte atom a while ago but are having some trouble with some injections. They eventually reverted it because they couldn't fix the sunsetted internal highlighting tool they used.

Even if they're using the grammar we're using now, and the embed problem doesn't exist. I don't think it would solve the problem. What I suspect is that they are using some old version of Atom javascript when it comes to HTML-like Textmate grammar, which doesn't support optional chaining.

this also happens to vue

<script>
hi?.();
</script>

<script lang="ts">
hi?.();
</script>