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:
  # statements and expression repository need to include jsx first followed by whaterver ts grammar says
  statements:
    patterns:
    - include: '#jsx'

  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:
    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*(>))
    endCaptures:
      '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:
    - 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'

...