Add Decorator syntax

[zhengbli]

Ported from microsoft/TypeScript-Sublime-Plugin#377

Hi,

I want to use decorators, but they mess up the syntax coloring.
Could support for decorators be added? Even if it is only to avoid messing up the rest of the code?

Currently, the decorators look odd, but when a parameter decorator is combined with a pair: method(@AdapterParam() {req, res}: AdapterData), the syntax is lost.

I wish I could send a pull request, but I can't seem to understand how the tmLanguage system works.
A patch for me locally would also be awesome (in case you don't want support for experimental features).

Thanks a lot!

[joskuijpers]

+1

[amcdnl]

Also seeing this ...

[Inspiravetion]

pleeeeeeease

[Ciantic]

Btw the file in question (for VSCode) needed to modify is here:

C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\typescript\syntaxes\TypeScript.tmLanguage

it's not overly cryptic, but I'll try to modify this file and restart TS maybe if it's not that hard to achieve I'll post my change here.

[Ciantic]

No sorry, I can't fix this because my problem is not decorator sign, it's something else! For some reason my connect (even without the @ sign) is big block of white:

[anubmat]

@Ciantic, if you haven't fixed the problem yet, can you please paste your code here?

[Ciantic]

@anubmat I haven't found a fix yet, but colors sure are changing:

I added the @ sign to the arithmetic-operation, see that @ is now same color as + sign above.

        <key>arithmetic-operator</key>
        <dict>
            <key>match</key>
            <string>\*|/|\-\-|\-|\+\+|\+|%|@</string>
            <key>name</key>
            <string>keyword.operator.arithmetic.ts</string>
        </dict>

I just threw @ in the end for testing purposes.

[Ciantic]

I'm having a problem to find a code where it fails. I think I had it somewhere but if my connect example is working as expected I can't use it to test against. Do you @anubmat have some code which produces the error? Can you paste it as code and not a screenshot.

[anubmat]

Thanks, but I meant can you paste your typescript code "as code" so that I can repro the error you are facing.

[Ciantic]

@anubmat that is the thing, I can't reproduce the error right now. I thought I had a error when I saw this big block of white produced by this:

declare var connect;
interface IProps {}

connect(
    (state): IProps => ({
        type: state.view && state.view.type || null,
    }),
    (): IProps => ({
        onClick: () => {
            console.log("whooot!");
            alert("whoot");
        },
    })
)

and I had @ sign before connect there, so I thought it was the reason, but above code probably works as expected and is mostly just white cause for other reasons.

I did however encounter bug with coloring and decorator sign somewhere, not sure where, so that is why I was asking for a code to reproduce too.

[thorn0]

Yep, object literals and arrow functions are monochrome for now. See #115.

[petewalker]

Note, there's a high-level grammar for ES6 Decorators here: https://github.com/wycats/javascript-decorators/blob/master/README.md

[sheetalkamat]

d0d1952 should handle this.