BBEdit Codeless Language Module for TypeScript syntax coloring and class/interface/function folding.

TypeScript.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<!-- https://gist.github.com/isao/5f6fbe89a438086c36d8
BBEdit Language Module for TypeScript

Put this file in
   ~/Library/Application Support/BBEdit/Language Modules
or equivalent.

Forked from
- https://gist.github.com/davethesoftwaredev/4056693
- https://gist.github.com/vtbassmatt/7242970

Which in turn were based on the language file for CoffeeScript found at
http://joyofmodeling.org/index.php/OSX/coffeescript-syntax-coloring-in-text-wrangler.html

See also http://www.barebones.com/support/develop/

-->
<plist version="1.0">
<dict>
    <key>BBEditDocumentType</key>
    <string>CodelessLanguageModule</string>

    <key>BBLMLanguageDisplayName</key>
    <string>TypeScript</string>

    <key>BBLMLanguageCode</key>
    <string>TypS</string>

    <key>BBLMColorsSyntax</key>
    <true/>

    <key>BBLMScansFunctions</key>
    <true/>

    <key>BBLMIsCaseSensitive</key>
    <true/>

    <key>BBLMKeywordList</key>
    <array>
        <string>abstract</string>
        <string>any</string>
        <string>arguments</string>
        <string>Array</string>
        <string>as</string>
        <string>async</string>
        <string>await</string>
        <string>bool</string>
        <string>boolean</string>
        <string>Boolean</string>
        <string>break</string>
        <string>case</string>
        <string>catch</string>
        <string>class</string>
        <string>const</string>
        <string>constructor</string>
        <string>continue</string>
        <string>Date</string>
        <string>debugger</string>
        <string>declare</string>
        <string>default</string>
        <string>delete</string>
        <string>do</string>
        <string>else</string>
        <string>enum</string>
        <string>Error</string>
        <string>export</string>
        <string>extends</string>
        <string>false</string>
        <string>finally</string>
        <string>for</string>
        <string>from</string>
        <string>function</string>
        <string>Function</string>
        <string>get</string>
        <string>if</string>
        <string>implements</string>
        <string>import</string>
        <string>in</string>
        <string>Infinity</string>
        <string>instanceof</string>
        <string>interface</string>
        <string>isNaN</string>
        <string>keyof</string>
        <string>let</string>
        <string>Math</string>
        <string>module</string>
        <string>namespace</string>
        <string>NaN</string>
        <string>new</string>
        <string>null</string>
        <string>number</string>
        <string>Number</string>
        <string>Object</string>
        <string>of</string>
        <string>private</string>
        <string>Promise</string>
        <string>protected</string>
        <string>public</string>
        <string>RegExp</string>
        <string>readonly</string>
        <string>return</string>
        <string>self</string>
        <string>set</string>
        <string>static</string>
        <string>string</string>
        <string>String</string>
        <string>super</string>
        <string>switch</string>
        <string>then</string>
        <string>this</string>
        <string>throw</string>
        <string>true</string>
        <string>try</string>
        <string>type</string>
        <string>typeof</string>
        <string>undefined</string>
        <string>unknown</string>
        <string>var</string>
        <string>void</string>
        <string>while</string>
        <string>with</string>
        <string>yield</string>
    </array>

    <key>BBLMSuffixMap</key>
    <array>
        <dict>
            <key>BBLMLanguageSuffix</key>
            <string>.ts</string>
        </dict>
        <dict>
            <key>BBLMLanguageSuffix</key>
            <string>.tsx</string>
        </dict>
    </array>

    <key>BBLMBalanceSpecialRunKinds</key>
    <array>
        <string>com.barebones.bblm.JavaScript.regexp</string>
        <string>com.barebones.bblm.syntax-error</string>
    </array>

    <key>Language Features</key>
    <dict>
        <key>Identifier and Keyword Character Class</key>
        <string>0-9A-Z_a-z$</string>

        <key>Comment Pattern</key>
        <string><![CDATA[(?x:
            (?>  (?<!\\)    //  .*      $   ) |
            (?> /\* (?s:.*?) (?> \*/ | \z ) )
        )]]></string>

        <key>Function Pattern</key>
        <string><![CDATA[(?x:
            (?P<leadspace>^[ \t]*)
            (?P<function>
                (?>export\s+)?
                (?>abstract\s+)?
                (?>class|interface|function)\s+
                    (?P<function_name>
                        ([A-Za-z_$][\w$.]*)
                    )
                (?s:.+?)
                \r(?P=leadspace)\}
            )
        )]]></string>

        <key>String Pattern</key>
        <string><![CDATA[(?x:
            (?> "   [^"\r]*   ") |
            (?> '   [^'\r]*   ') |
            (?> `   [^`]*     `)
        )]]></string>

        <key>Skip Pattern</key>
        <string><![CDATA[
        (?x:
            (?P>comment) |
            (?P>string)
        )]]></string>

    </dict>
</dict>
</plist>

This was getting slow on some very large TypeScript files, and I realized the string pattern could be simplified...

When installed, BBedit gets very slow entering text in files of extension '.ts'. For example, enter this:

function someVeryLongFunctionName() { }

function anotherVeryLongFunctionName() { }

function stillAnotherVeryLongFunctionName() { }

/*
The more times you duplicate this line, the slower typing gets. Try about 500.
*/

Duplicate that comment line many times. Then try typing within the file. It takes about two seconds to insert each character.

I did quite a bit of experimenting to reduce my code to the above clip. I had a few hundred lines of code and only a few end-of-line comments sprinkled about. Replace that long comment with lots of code, and you get the same effect.

The effect vanishes when you greatly shorten the function names. The longer the function name, the longer character insertion takes. The more long function names you have, the longer and longer it takes to insert a character. I tend to be pretty descriptive with my function names, so my Typescript files are slowing to a crawl.

I haven't tried experimenting with other sort of identifiers to see if they produce the same effect.

The problem occurs regardless of whether the closing braces are on their own lines, regardless of whether the functions contain code. I played with fixing it but don't grok the syntax well enough.

@jtlapp: interesting, I wonder if that's because of the alternation in the comment regex: (?> /\* (?s:.*?) (?: \*/ | \z ) )

If you don't mind not matching the "or end of file" condition, you can remove the | \z part.

update: didn't seem to help.

I replaced some (?: with (?>, and tweaked the function pattern. Perf issue seems to have gone away, perhaps because of v12.1 update to 64 bit.