TypeScript-TmLanguage/TypeScriptReact.YAML-tmLanguage

# [PackageDev] target_format: plist, ext: tmLanguage
# Similar to TypeScript.YAML-tmLanguage except:
#   - Remove type assertion (cast.expr.tsx)
#   - Add JSX expression (HTML-like expression).
---
name: TypeScriptReact
scopeName: source.tsx
fileTypes: [tsx]
uuid: 805375ec-d614-41f5-8993-5843fe63ea82

repository:
  # Additions:
  # expression repository need to include jsx first followed by whaterver ts grammar says
  expression:
    patterns:
    - include: '#jsx'

  # Overrides:
  
  # We need to override this to make sure cast is not matched from typescript
  # We can safely include jsx because thats the first rule matched anyways so it wont impact at all
  cast:
    patterns:
    - include: '#jsx'

  # 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.jsxAttributeValue.quoted.double.tsx
    begin: '"'
    end: '"'
    beginCaptures:
      '0': {name: punctuation.definition.string.jsxAttributeValue.begin.tsx}
    endCaptures:
      '0': {name: punctuation.definition.string.jsxAttributeValue.end.tsx}
    patterns:
    - include: '#jsx-attributeValue-entities'

  jsx-string-single-quoted:
    name: string.jsxAttributeValue.quoted.single.tsx
    begin: "'"
    end: "'"
    beginCaptures:
      '0': {name: punctuation.definition.string.jsxAttributeValue.begin.tsx}
    endCaptures:
      '0': {name: punctuation.definition.string.jsxAttributeValue.end.tsx}
    patterns:
    - include: '#jsx-attributeValue-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-attributeValue-entities:
    patterns:
    - name: constant.character.entity.jsxAttributeValue.tsx
      match: (&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)
      captures:
        '1': {name: punctuation.definition.entity.jsxAttributeValue.tsx}
        '3': {name: punctuation.definition.entity.jsxAttributeValue.tsx}
    - name: invalid.illegal.bad-ampersand.jsxAttributeValue.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: meta.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}
    contentName: meta.jsx.children.tsx
    patterns:
    - include: '#jsx-children'

  jsx-tag:
    # We need to differentiate between the relational '<' operator and the beginning of a tag using the surrounding context.
    begin: >-
      (?x)
        (?<=[({\[,?=>]|&&|\|\||\?|\Wreturn|^return|\Wdefault|^)\s*
        (?!(<)([_$a-zA-Z][-$\w.]*(?<!\.|-))(>)) #look ahead is not start of tag without attributes
        (?!<[_$[:alpha:]][_$[:alnum:]]*((\s+extends\s+[^=>])|,)) # look ahead is not type parameter of arrow
        (?=(<)
        ([_$a-zA-Z][-$\w.]*(?<!\.|-))
        (?=\s+(?!\?)|/?>))
    end: (/>)|(?:(</)([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>))
    endCaptures:
      '0': { name: meta.tag.tsx }
      '1': { name: punctuation.definition.tag.end.tsx }
      '2': { name: punctuation.definition.tag.begin.tsx }
      '3': { name: entity.name.tag.tsx }
      '4': { name: punctuation.definition.tag.end.tsx }
    patterns:
    - name: meta.tag.tsx
      begin: >-
        (?x)
          (<)
          ([_$a-zA-Z][-$\w.]*(?<!\.|-))
          (?=\s+(?!\?)|/?>)
      beginCaptures:
        '1': { name: punctuation.definition.tag.begin.tsx }
        '2': { name: entity.name.tag.tsx }
      end: (?=(/>)|(?:(</)([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>)))
      patterns:
      - begin: \G(?![/]?>)
        end: (?=[/]?>)
        patterns:
        - include: '#comment'
        - include: '#jsx-tag-attributes'
        - include: '#jsx-tag-attributes-illegal'
      - begin: (>)
        beginCaptures:
          '1': { name: punctuation.definition.tag.end.tsx }
        end: (?=</)
        contentName: meta.jsx.children.tsx
        patterns:
        - include: '#jsx-children'

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

  jsx-children:
    patterns:
    - include: '#jsx-tag-without-attributes'
    - include: '#jsx-tag'
    - 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'
    - include: '#jsx-tag-invalid'

...