TypeScriptReact.YAML-tmLanguage

# Similar to TypeScript.YAML-tmLanguage except:
#   - Remove type assertion (cast.expr.ts)
#   - Add the "as" keyword.
#   - Add JSX expression (HTML-like expression).
---
name: TypeScriptReact
scopeName: source.tsx
fileTypes: [tsx]
uuid: 805375ec-d614-41f5-8993-5843fe63ea82

patterns:
- include: '#expression'

repository:
  var-expr:
    name: meta.var.expr.tsx
    begin: (?<!\()\s*\b(var|let|const(?!\s+enum))\s+([a-zA-Z_$][\w$]*) 
    beginCaptures:
      '1': { name: storage.type.tsx }
      '2': { name: variable.tsx }
    end: '(?=$|[;=\}\{])|(?<=\})'
    patterns:
    - include: '#type-annotation'
    - include: '#string'
    - include: '#comment'

  control-statement:
    name: keyword.control.tsx
    match: (?<!\.)\b(break|catch|continue|debugger|declare|do|else|finally|for|if|return|switch|throw|try|while|with|super|switch|case)\b

  switch-case: 
    name: case.expr.tsx
    begin: '(?<!\.)\b(case|default)\b'
    beginCaptures:
      '1': { name: keyword.control.tsx }
    end: ':'
    patterns:
    - include: '#expression'

  declaration:
    name: meta.declaration.tsx
    patterns:
     - include: '#function-declaration'
     - include: '#object-declaration'
     - include: '#type-declaration'
     - include: '#enum-declaration'

  type-declaration:
    name: meta.type.declaration.tsx
    begin: \b(type)\b\s+([a-zA-Z_$][\w$]*)\s*=\s*
    beginCaptures:
      '1': { name: keyword.other.tsx }
      '2': { name: storage.type.tsx }
    end: (?=[,);>]|var|type|function|class|interface)
    patterns:
      - include: '#type'

  enum-declaration:
    name: meta.enum.declaration.tsx
    match: (?:\b(const)\s+)?\b(enum)\s+([a-zA-Z_$][\w$]*)
    captures:
      '1': { name: storage.modifier.tsx}
      '2': { name: storage.type.tsx }
      '3': { name: entity.name.class.tsx }

  object-declaration:
    name: meta.declaration.object.tsx
    begin: '\b(?:(export)\s+)?\b(?:(abstract)\s+)?\b(?<!\.)(class|interface)\b'
    beginCaptures:
      '1': { name: storage.modifier.tsx }
      '2': { name: storage.modifier.tsx }
      '3': { name: storage.type.tsx }
    end: (?<=\})
    endCaptures:
      '1': { name: brace.curly.tsx }
    patterns:
    - include: '#comment'
    - include: '#object-heritage' # Must be before object-name to consume the "extends" keyword.
    - include: '#object-name'
    - include: '#type-parameters' # Must be applied after object-name e.g. interface KeyValuePair<K, V>
    - include: '#object-body'

  object-name:
    name: meta.object.name.tsx
    match: '[a-zA-Z_$][\w$]*'
    captures:
      '0': { name: 'entity.name.class.tsx' }

  object-heritage:
    name: meta.object.heritage.tsx
    begin: '(?:\b(extends|implements))'
    beginCaptures:
      '1': { name: keyword.other.tsx }
    end: (?=\{)
    endCaptures:
      '1': { name: brace.curly.tsx }
    patterns:
    - include: '#comment'
    - include: '#type-parameters'
    - include: '#object-heritage-parent'

  object-heritage-parent:
    name: meta.object.heritage.parent.tsx
    match: '(?:\s*([a-zA-Z_$][\w$]*))'
    captures:
      '1': { name: storage.type.tsx }

  object-body:
    name: meta.object.body.tsx
    begin: \{
    beginCaptures:
      '0': { name: meta.brace.curly.tsx }
    end: \}
    endCaptures:
      '0': { name: meta.brace.curly.tsx }
    patterns:
    - include: "#string"
    - include: '#comment'
    - include: '#field-declaration'
    - include: '#method-declaration'
    - include: '#indexer-declaration'
    - include: '#type-annotation'
    - include: '#variable-initializer'
    - include: '#access-modifier'
    - include: '#static-modifier'
    - include: '#property-accessor'

  type-object:
    name: meta.object.type.tsx
    begin: \{
    beginCaptures:
      '0': { name: meta.brace.curly.tsx }
    end: \}
    endCaptures:
      '0': { name: meta.brace.curly.tsx }
    patterns:
    - include: '#comment'
    - include: '#field-declaration'
    - include: '#method-declaration'
    - include: '#indexer-declaration'
    - include: '#type-annotation'

  field-declaration:
    name: meta.field.declaration.tsx
    begin: '(?<!\()\s*\b([a-zA-Z_$][\w$]*)\s*(\?\s*)?(?=(=|:))'
    beginCaptures:
      '1': { name: variable.tsx }
      '2': { name: keyword.operator.tsx }
    end: '(?=\}|;|,|(?<!=)\n)|(?<=\})'
    patterns:
    - include: '#expression'

  method-declaration:
    name: meta.method.declaration.tsx
    begin: '\b(?:(abstract)\s+)?\b(?:(public|private|protected)\s+)?(?:(get|set)\s+)?(?:(new)|(?:([a-zA-Z_$][\.\w$]*)\s*(\??)))?\s*(?=\(|\<)'
    beginCaptures:
      '1': { name: storage.modifier.tsx }
      '2': { name: storage.modifier.tsx }
      '3': { name: storage.type.property.tsx }
      '4': { name: keyword.operator.tsx }
      '5': { name: entity.name.function.tsx }
      '6': { name: keyword.operator.tsx }
    end: '(?=\}|;|,)|(?<=\})'
    patterns:
    - include: '#comment'
    - include: '#type-parameters'
    - include: '#function-type-parameters'
    - include: '#type-annotation'
    - include: '#method-overload-declaration'
    - include: '#decl-block'

  method-overload-declaration:
    name: meta.method.overload.declaration.tsx
    match: '\b(?:(public|private|protected)\s+)?(?:(new)|(?:([a-zA-Z_$][\.\w$]*)\s*(\??)))?\s*(?=\(|\<)'
    captures:
      '1': { name: storage.modifier.tsx }
      '2': { name: keyword.operator.tsx }
      '3': { name: entity.name.function.tsx }
      '4': { name: keyword.operator.tsx }

  indexer-declaration:
    name: meta.indexer.declaration.tsx
    begin: \[
    beginCaptures:
      '0': { name: meta.brace.square.tsx }
    end: (\])\s*(\?\s*)?|$
    endCaptures:
      '1': { name: meta.brace.square.tsx }
      '2': { name: keyword.operator.tsx }
    patterns:
    - include: '#type-annotation'
    - include: '#indexer-parameter'
    - include: '#expression'

  indexer-parameter:
    name: meta.indexer.parameter.tsx
    match: ([a-zA-Z_$][\w$]*)(?=\:)
    captures:
      '1': { name: variable.parameter.tsx}
      
  function-declaration:
    name: meta.function.tsx
    begin: \b(?:(export)\s+)?(function\b)(?:\s+([a-zA-Z_$][\w$]*))?\s*
    beginCaptures:
      '1': { name: storage.modifier.tsx }
      '2': { name: storage.type.function.tsx }
      '3': { name: entity.name.function.tsx }
    end: (?=;|\})|(?<=\})
    patterns:
    - include: '#comment'
    - include: '#type-parameters'
    - include: '#function-type-parameters'
    - include: '#return-type'
    - include: '#function-overload-declaration'
    - include: '#decl-block'

  function-overload-declaration:
    name: meta.function.overload.tsx
    match: \b(?:(export)\s+)?(function\b)(?:\s+([a-zA-Z_$][\w$]*))?\s*
    captures:
      '1': { name: storage.modifier.tsx }
      '2': { name: storage.type.function.tsx }
      '3': { name: entity.name.function.tsx }

  block:
    name: meta.block.tsx
    begin: \{
    beginCaptures:
      '0': { name: meta.brace.curly.tsx }
    end: \}
    endCaptures:
      '0': { name: meta.brace.curly.tsx }
    patterns:
    - include: '#expression'
    - include: '#object-member'

  decl-block:
    name: meta.decl.block.tsx
    begin: \{
    beginCaptures:
      '0': { name: meta.brace.curly.tsx }
    end: \}
    endCaptures:
      '0': { name: meta.brace.curly.tsx }
    patterns:
    - include: '#expression'

  parameter-name:
    name: parameter.name.tsx
    match: '(?:\s*\b(public|private|protected)\b\s+)?(\.\.\.)?\s*([a-zA-Z_$][\w$]*)\s*(\??)'
    captures:
      '1': { name: storage.modifier.tsx }
      '2': { name: keyword.operator.tsx }
      '3': { name: variable.parameter.tsx }
      '4': { name: keyword.operator.tsx }

  return-type:
    name: meta.return.type.tsx
    begin: '(?<=\))\s*:'
    end: (?=$)|(?=\{|;|//)
    patterns:
    - include: '#type'

  type-annotation:
    name: meta.type.annotation.tsx
    begin: ":"
    end: (?=$|[,);\}\]]|//)|(?==[^>])|(?<=[\}>\]\)]|[a-zA-Z_$])\s*(?=\{)
    patterns:
    - include: '#type'
    - include: '#string'
    - include: '#comment'

  type:
    name: meta.type.tsx
    patterns:
    - include: '#type-primitive'
    - include: '#type-parameters'
    - include: '#type-tuple'
    - include: '#type-object'
    - include: '#type-operator'
    - include: '#type-paren-or-function-type-parameters'
    - include: '#type-function-return-type'
    - include: '#type-name'

  function-type-parameters:
    name: meta.function.type.parameter.tsx
    begin: \(
    beginCaptures:
      '0': { name: meta.brace.round.tsx }
    end: \)
    endCaptures:
      '0': { name: meta.brace.round.tsx }
    patterns:
    - include: '#comment'
    - include: '#parameter-name'
    - include: '#type-annotation'
    - include: '#variable-initializer'

  type-primitive:
    name: meta.type.primitive.tsx
    match: '\b(string|number|boolean|symbol|any|void)\b'
    captures:
      '1': { name: storage.type.tsx }

  # Parenthesis can contain either types and function parameters
  # (number | string) or (param: number, param2: string)
  # and it can be nested, for example
  # (number | (param: number, param2: string) => void)
  type-paren-or-function-type-parameters:
    name: meta.type.paren.cover.tsx
    begin: '(?:\b(new)\b)?\s*\('
    beginCaptures:
      '1': { name: keyword.control.tsx }
    end: '\)'
    patterns:
    - include: '#comment'
    - include: '#type'
    - include: '#function-type-parameters'
    
  type-operator:
    name: keyword.operator.type.tsx
    match: '[.|]'

  type-function-return-type:
    name: meta.type.function.return.tsx
    begin: '=>'
    beginCaptures:
      '0': { name: keyword.operator.tsx }
    end: (?=\s*[,\)\{=;>]|//|$)
    patterns:
    - include: '#type'

  type-tuple:
    name: meta.type.tuple.tsx
    begin: \[
    beginCaptures:
      '0': { name: meta.brace.square.tsx }
    end: \]
    endCaptures:
      '0': { name: meta.brace.square.tsx }
    patterns:
    - include: '#type'
    - include: '#comment'

  type-name:
    name: meta.type.name.tsx
    match: '[a-zA-Z_$][.\w$]*'
    captures:
      '1': { name: entity.name.type.tsx }

  type-parameters:
    name: meta.type.parameters.tsx
    begin: '([a-zA-Z_$][\w$]*)?(<)'
    beginCaptures:
      '1': { name: entity.name.type.tsx }
      '2': { name: meta.brace.angle.tsx }
    end: '(?=$)|(>)'  
    endCaptures:
      '2': { name: meta.brace.angle.tsx }
    patterns:
    - name: keyword.other.tsx
      match: '\b(extends)\b'
    - include: '#comment'
    - include: '#type'

  variable-initializer:
    begin: (=)
    beginCaptures:
      '1': { name: keyword.operator.tsx }
    end: (?=$|[,);=])
    patterns:
      - include: '#expression'  

  expression:
    name: meta.expression.tsx
    patterns:
    - include: '#jsx'
    - include: '#for-in-simple'
    - include: '#string'
    - include: '#regex'
    - include: '#template'
    - include: '#comment'
    - include: '#literal'
    - include: '#paren-expression'
    - include: '#var-expr'
    - include: '#declaration'
    - include: '#new-expr'
    - include: '#block'
    - include: '#expression-operator'
    - include: '#relational-operator'
    - include: '#arithmetic-operator'
    - include: '#logic-operator'
    - include: '#assignment-operator'
    - include: '#storage-keyword'
    - include: '#function-call'
    - include: '#switch-case'
    - include: '#control-statement'
    
  for-in-simple:
    name: forin.expr.tsx
    match: (?<=\()\s*\b(var|let|const)\s+([a-zA-Z_$][\w$]*)\s+(in|of)\b
    captures:
      '1': { name: storage.type.tsx }
      '3': { name: keyword.operator.tsx }

  function-call:
    name: functioncall.expr.tsx
    patterns:
    - include: '#type-parameters'
    - include: '#paren-expression'

  new-expr:
    name: new.expr.tsx
    begin: '\b(new)\b'
    beginCaptures:
      '1': { name: keyword.operator.tsx }
    # new-expr ends just before any type or call arguments. Type arguments will be picked up by #cast.
    end: '(?=[(;]|$)'
    patterns:
    - include: '#type'

  object-member:
    name: meta.object.member.tsx
    begin: '[a-zA-Z_$][\w$]*\s*:'
    end: (?=,|\})
    patterns:
    - include: '#expression'

  expression-operator:
    name: keyword.operator.tsx
    match: =>|\b(delete|export|import|in|instanceof|module|namespace|new|typeof|void|as)\b

  arithmetic-operator:
    name: keyword.operator.arithmetic.tsx
    match: \*|/|\-\-|\-|\+\+|\+|%

  relational-operator:
    name: keyword.operator.comparison.tsx
    match: ===|==|=|!=|!==|<=|>=|<>|<|>

  assignment-operator:
    name: keyword.operator.assignment.tsx
    match: <<=|>>=|>>>=|\*=|(?<!\()/=|%=|\+=|\-=|&=|\^=

  logic-operator:
    name: keyword.operator.arithmetic.tsx
    match: \!|&|~|\||&&|\|\|

  storage-keyword:
    name: storage.type.tsx
    match: \b(number|boolean|string|any|var|let|function|const)\b

  paren-expression:
    begin: \(
    beginCaptures:
      '0': {name: meta.brace.paren.tsx }
    end: \)
    endCaptures:
      '0': {name: meta.brace.paren.tsx }
    patterns:
    - include: '#expression'

  qstring-double:
    name: string.double.tsx
    begin: '"'
    end: '"|(?=$)'
    patterns:
    - include: '#string-character-escape'

  qstring-single:
    name: string.single.tsx
    begin: "'"
    end: "'|(?=$)"
    patterns:
    - include: '#string-character-escape'

  regex:
    name: string.regex.tsx
    begin: (?<=[=(:,\[]|^|return|&&|\|\||!)\s*(/)(?![/*+{}?])
    end: $|(/)[igm]*
    patterns:
    - name: constant.character.escape.tsx
      match: \\.
    - name: constant.character.class.tsx
      match: \[(\\\]|[^\]])*\]

  string:
    name: string.tsx
    patterns:
    - include: '#qstring-single'
    - include: '#qstring-double'

  template:
    name: meta.template.tsx
    begin: '`'
    beginCaptures:
      '0': { name: string.template.tsx}
    end: '`'
    endCaptures:
      '0': { name: string.template.tsx}
    patterns:
     - include: '#template-substitution-element'
     - include: '#template-string-contents'

  template-string-contents:
    name: string.template.tsx
    begin: '.*?'
    end: (?=(\$\{|`))
    patterns:
    - include: '#string-character-escape'

  string-character-escape:
    name: constant.character.escape
    match: \\(x\h{2}|[0-2][0-7]{,2}|3[0-6][0-7]?|37[0-7]?|[4-7][0-7]?|.|$)

  template-substitution-element:
    name: template.element.tsx
    begin: \$\{
    beginCaptures:
      '0': {name: keyword.operator.tsx}
    end: \}
    endCaptures:
      '0': {name: keyword.operator.tsx}
    patterns:
      - include: '#expression'

  comment:
    name: comment.tsx
    patterns:
    - include: '#comment-block-doc'
    - include: '#comment-block'
    - include: '#comment-line'

  comment-block-doc:
    name: comment.block.documentation.tsx
    begin: /\*\*(?!/)
    end: \*/

  comment-block:
    name: comment.block.tsx
    begin: /\*
    end: \*/

  comment-line:
    name: comment.line.tsx
    match: (//).*$

  literal:
    name: literal.tsx
    patterns:
    - include: '#numeric-literal'
    - include: '#boolean-literal'
    - include: '#null-literal'
    - include: '#undefined-literal'
    - include: '#array-literal'
    - include: '#this-literal'

  array-literal:
    name: meta.array.literal.tsx
    begin: \[
    beginCaptures:
      '0': { name: meta.brace.square.tsx }
    end: \]
    endCaptures:
      '0': { name: meta.brace.square.tsx }
    patterns:
    - include: '#expression'

  numeric-literal:
    name: constant.numeric.tsx 
    match: \b(?<=[^$])((0(x|X)[0-9a-fA-F]+)|([0-9]+(\.[0-9]+)?))\b

  boolean-literal:
    name: constant.language.boolean.tsx
    match: \b(false|true)\b

  null-literal:
    name: constant.language.null.tsx
    match: \b(null)\b
  
  this-literal:
    name: constant.language.this.tsx
    match: \b(this)\b
      
  undefined-literal:
    name: constant.language.tsx
    match: \b(undefined)\b

  access-modifier:
    name: storage.modifier.tsx
    match: \b(public|protected|private)\b
    
  static-modifier:
    name: keyword.other.tsx
    match: \b(static)\b

  property-accessor:
    name: storage.type.property.tsx
    match: \b(get|set)\b

  # jsx syntax is taken from https://github.com/babel/babel-sublime
  jsx-tag-attributes:
    patterns:
      - include: '#jsx-tag-attribute-name'
      - include: '#jsx-tag-attribute-assignment'
      - include: '#jsx-string-double-quoted'
      - include: '#jsx-string-single-quoted'
      - include: '#jsx-evaluated-code'

  jsx-tag-attribute-name:
    name: meta.tag.attribute-name.tsx
    match: >-
      (?x)
        \s*
        ([_$a-zA-Z][-$\w]*)
        (?=\s|=|/?>|/\*|//)
    captures:
      '1': {name: entity.other.attribute-name.tsx}

  jsx-tag-attribute-assignment:
    name: keyword.operator.assignment.tsx
    match: =(?=\s*(?:'|"|{|/\*|//|\n))

  jsx-string-double-quoted:
    name: string.quoted.double.tsx
    begin: '"'
    end: '"'
    beginCaptures:
      '0': {name: punctuation.definition.string.begin.tsx}
    endCaptures:
      '0': {name: punctuation.definition.string.end.tsx}
    patterns:
    - include: '#jsx-entities'

  jsx-string-single-quoted:
    name: string.quoted.single.tsx
    begin: "'"
    end: "'"
    beginCaptures:
      '0': {name: punctuation.definition.string.begin.tsx}
    endCaptures:
      '0': {name: punctuation.definition.string.end.tsx}
    patterns:
    - include: '#jsx-entities'

  jsx-entities:
    patterns:
    - name: constant.character.entity.tsx
      match: (&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)
      captures:
        '1': {name: punctuation.definition.entity.tsx}
        '3': {name: punctuation.definition.entity.tsx}
    - name: invalid.illegal.bad-ampersand.tsx
      match: '&'

  jsx-evaluated-code:
    name: meta.brace.curly.tsx
    begin: '{'
    end: '}'
    beginCaptures:
      '0': {name: punctuation.definition.brace.curly.start.tsx}
    endCaptures:
      '0': {name: punctuation.definition.brace.curly.end.tsx}
    patterns:
    - include: '#expression'

  jsx-tag-attributes-illegal:
    name: invalid.illegal.attribute.tsx
    match: \S+

  jsx-tag-without-attributes:
    name: tag.without-attributes.tsx
    begin: (<)([_$a-zA-Z][-$\w.]*(?<!\.|-))(>)
    end: (</)([_$a-zA-Z][-$\w.]*(?<!\.|-))(>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.begin.tsx}
      '2': {name: entity.name.tag.tsx}
      '3': {name: punctuation.definition.tag.end.tsx}
    endCaptures:
      '1': {name: punctuation.definition.tag.begin.tsx}
      '2': {name: entity.name.tag.tsx}
      '3': {name: punctuation.definition.tag.end.tsx}
    patterns:
    - include: '#jsx-children'

  jsx-tag-open:
    name: tag.open.tsx
    begin: >-
      (?x)
        (<)
        ([_$a-zA-Z][-$\w.]*(?<!\.|-))
        (?=\s+(?!\?)|/?>)
    end: (/?>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.begin.tsx}
      '2': {name: entity.name.tag.tsx}
    endCaptures:
      '1': {name: punctuation.definition.tag.end.tsx}
    patterns:
    - include: '#comment'
    - include: '#jsx-tag-attributes'
    - include: '#jsx-tag-attributes-illegal'

  jsx-tag-close:
    name: tag.close.tsx
    begin: (</)([_$a-zA-Z][-$\w.]*(?<!\.|-))
    end: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.begin.tsx}
      '2': {name: entity.name.tag.tsx}
    endCaptures:
      '1': {name: punctuation.definition.tag.end.tsx}
    patterns:
    - include: '#comment'

  jsx-tag-invalid:
    name: invalid.illegal.tag.incomplete.tsx
    match: <\s*>

  jsx-children:
    patterns:
    - include: '#jsx-tag-without-attributes'
    - include: '#jsx-tag-open'
    - include: '#jsx-tag-close'
    - include: '#jsx-tag-invalid'
    - include: '#jsx-evaluated-code'
    - include: '#jsx-entities'

  jsx:
    name: meta.jsx.tsx
    patterns:
    - include: '#jsx-tag-without-attributes'
    - include: '#jsx-tag-open'
    - include: '#jsx-tag-close'
    - include: '#jsx-tag-invalid'

    - name: meta.jsx.children.tsx
      begin: (?<=(?:'|"|})>)
      end: (?=</)
      patterns:
      - include: '#jsx-children'

...