(typescript) Using `namespace` as a variable name breaks highlighter state

[pkaminski]

Describe the issue When I use namespace as the name of the variable, everything that follows is highlighted incorrectly. While namespace is a TS keyword it's fine to use it as a variable name too.

Which language seems to have the issue? typescript

Are you using highlight or highlightAuto? highlight

Sample Code to Reproduce

const message = 'foo';
const namespace = 'bar';
function baz() {}

https://jsfiddle.net/g0fu1zmw/1/ https://www.typescriptlang.org/play?#code/MYewdgzgLgBAtgUwhAhgcwTAvDA5AMxBFwG4BYAKFEljBUQgAcVhMdcAjFAJ1MvwCuYYFACW4GFwBeACgCUMAN4BfSkA

Expected behavior See GitHub or TS playground renderings above, for example. It's fine (though not ideal) if namespace is highlighted as a keyword in this context, as long as it doesn't break highlighting of everything that follows.

Additional information Original problem report in https://github.com/Reviewable/Reviewable/issues/1134.

[joshgoebel]

Can you provide a more complex example than this for proper namespace use:

namespace Validation {

Or are namespaces always so simple?

[pkaminski]

I'm far from an expert on TypeScript but I think that's pretty much it, though it can be prefixed by a few other keywords, and can also be nested in case that matters:

declare namespace Foo {
  export namespace Bar {
  }
}

[joshgoebel]

Then I think we could solve this with a multi-matcher (see second example of beginScope: https://highlightjs.readthedocs.io/en/latest/mode-reference.html#beginscope)... to match patterns like:

"namespace" [ws] [className] [ws] "{"

Much better than the existing match namespace and then get stuck until you see a {.

[akhtarmdsaad]

Please go through my pull request. I think it resolves the issue.