contains template #default Syntax coloring

[gezhigang1005]

contains template #default Syntax coloring

[IWANABETHATGUY]

please offer a minimum reproduce code snippet instead a screenshot

[IWANABETHATGUY]

<template>
    <div class="settings-main card">
        <a-input title="标题" >
            <template #default={row}>

            </template>
        </a-input>
    </div>
</template>

minimum reproduce snippet

[gezhigang1005]

So you can reproduce it

Volar： v0.29.8

VsCode： 1.62.3

appVersion: "5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55
Safari/537.36"

<template>
    <div class="settings-main card">
        <a-input title="标题" >
            <template #default={row}>

            </template>
        </a-input>
        <a-input title="标题" >
            <template #default={row}>

            </template>
        </a-input>
        <a-input title="标题" >
            <template #default={row}>

            </template>
        </a-input>
    </div>
</template>

[gezhigang1005]

Just add in the position of the deconstruction " It's good

#default="{row}"

<template>
    <div class="settings-main card">
        <a-input title="标题" >
            <template #default="{row}">

            </template>
        </a-input>
        <a-input title="标题" >
            <template #default="{row}">

            </template>
        </a-input>
        <a-input title="标题" >
            <template #default="{row}">

            </template>
        </a-input>
    </div>
</template>

[IWANABETHATGUY]

i wrote a sematic token extension MVP here https://github.com/IWANABETHATGUY/volar-semantic-token-demo,
maybe we could integrate this in volar so that we could reduce the syntax highlighting issue

[IWANABETHATGUY]

@johnsoncodehk any thought about this ?

[johnsoncodehk]

This is a tmLanguage issue, and may not be suitable to be solved by semitic token, because vscode relies on tmLanguage to parse embedded language. This will affect the language configuration of autoClosingPairs, wordPattern, code snippet... in interpolation.

It should modify here to resolve. html tmLanguage has resolved it already and I will refer to.
https://github.com/johnsoncodehk/volar/blob/b71700d1ce0ff8be7fda857b022530e02a58f2bd/extensions/vscode-vue-language-features/syntaxes/vue.tmLanguage.json#L783-L794

[IWANABETHATGUY]

This is a tmLanguage issue, and may not be suitable to be solved by semitic token, because vscode relies on tmLanguage to parse embedded language. This will affect the language configuration of autoClosingPairs, wordPattern, code snippet... in interpolation.

It should modify here to resolve. html tmLanguage has resolved it already and I will refer to.

https://github.com/johnsoncodehk/volar/blob/b71700d1ce0ff8be7fda857b022530e02a58f2bd/extensions/vscode-vue-language-features/syntaxes/vue.tmLanguage.json#L783-L794

agree, but tmLang seems more complicated and unpredicatable, we only use semantic token for html template, leave other with tmLang. semantic could be a experimental feature and disabled by default.What's more tree-sitter is incremental parser and parsing after every keystroke only took a few ms (normally 1-5ms) no matter how big the file is.

[johnsoncodehk]

agree, but tmLang seems more complicated and unpredicatable

Yes, even though I rewrote vue tmLanguage, I still don't fully understand how it works. :S

What's more tree-sitter is incremental parser and parsing after every keystroke only took a few ms (normally 1-5ms) no matter how big the file is.

It will not be so fast in real world, because the semantic token will be implemented based on the LSP request. All LSP performance problems will affect the semantic token. For example, the request blocking problem caused by the long diagnosis time, the user may see that the semantic token is updated only after the diagnosis is updated.

[IWANABETHATGUY]

the request blocking problem caused by the long diagnosis time, the user may see that the semantic token is updated only after the diagnosis is updated.

need to test on real project and open this feature on demand, so i don't think this would be a big problem

[IWANABETHATGUY]

agree, but tmLang seems more complicated and unpredicatable

Yes, even though I rewrote vue tmLanguage, I still don't fully understand how it works. :S

What's more tree-sitter is incremental parser and parsing after every keystroke only took a few ms (normally 1-5ms) no matter how big the file is.

It will not be so fast in real world, because the semantic token will be implemented based on the LSP request. All LSP performance problems will affect the semantic token. For example, the request blocking problem caused by the long diagnosis time, the user may see that the semantic token is updated only after the diagnosis is updated.

IIRC, vscode will fallback to regex based highlight when semantic token is hanging. We could also add a switch to control it ,
open it as needed.