Skip to content

Commit 76c512c

Browse files
committed
Mark TSX Class Tags Differently from Normal Elements
Fixes #415 Adds an extra marker for tsx tags that are likly a javascript/typescript class instead of a standard html element
1 parent 9f6676a commit 76c512c

8 files changed

+408
-56
lines changed

TypeScriptReact.YAML-tmLanguage

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -94,16 +94,18 @@ repository:
9494

9595
jsx-tag-without-attributes:
9696
name: meta.tag.without-attributes.tsx
97-
begin: (<)\s*([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>)
98-
end: (</)\s*([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>)
97+
begin: (<)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?<!\.|-))\s*(>)
98+
end: (</)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?<!\.|-))\s*(>)
9999
beginCaptures:
100100
'1': {name: punctuation.definition.tag.begin.tsx}
101101
'2': {name: entity.name.tag.tsx}
102-
'3': {name: punctuation.definition.tag.end.tsx}
102+
'4': {name: support.class.component.tsx}
103+
'5': {name: punctuation.definition.tag.end.tsx}
103104
endCaptures:
104105
'1': {name: punctuation.definition.tag.begin.tsx}
105106
'2': {name: entity.name.tag.tsx}
106-
'3': {name: punctuation.definition.tag.end.tsx}
107+
'4': {name: support.class.component.tsx}
108+
'5': {name: punctuation.definition.tag.end.tsx}
107109
contentName: meta.jsx.children.tsx
108110
patterns:
109111
- include: '#jsx-children'
@@ -118,13 +120,14 @@ repository:
118120
(?=(<)\s*
119121
([_$a-zA-Z][-$\w.]*(?<!\.|-))
120122
(?=\s+(?!\?)|/?>))
121-
end: (/>)|(?:(</)\s*([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>))
123+
end: (/>)|(?:(</)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?<!\.|-))\s*(>))
122124
endCaptures:
123125
'0': { name: meta.tag.tsx }
124126
'1': { name: punctuation.definition.tag.end.tsx }
125127
'2': { name: punctuation.definition.tag.begin.tsx }
126128
'3': { name: entity.name.tag.tsx }
127-
'4': { name: punctuation.definition.tag.end.tsx }
129+
'5': { name: support.class.component.tsx }
130+
'6': { name: punctuation.definition.tag.end.tsx }
128131
patterns:
129132
- include: '#jsx-tag'
130133

@@ -135,13 +138,14 @@ repository:
135138
(?=(<)\s*
136139
([_$a-zA-Z][-$\w.]*(?<!\.|-))
137140
(?=\s+(?!\?)|/?>))
138-
end: (/>)|(?:(</)\s*([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>))
141+
end: (/>)|(?:(</)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?<!\.|-))\s*(>))
139142
endCaptures:
140143
'0': { name: meta.tag.tsx }
141144
'1': { name: punctuation.definition.tag.end.tsx }
142145
'2': { name: punctuation.definition.tag.begin.tsx }
143146
'3': { name: entity.name.tag.tsx }
144-
'4': { name: punctuation.definition.tag.end.tsx }
147+
'5': { name: support.class.component.tsx }
148+
'6': { name: punctuation.definition.tag.end.tsx }
145149
patterns:
146150
- include: '#jsx-tag'
147151

@@ -157,11 +161,12 @@ repository:
157161
- begin: |-
158162
(?x)
159163
(<)\s*
160-
([_$a-zA-Z][-$\w.]*(?<!\.|-))
164+
(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?<!\.|-))
161165
(?=\s+(?!\?)|/?>)
162166
beginCaptures:
163167
'1': { name: punctuation.definition.tag.begin.tsx }
164168
'2': { name: entity.name.tag.tsx }
169+
'4': { name: support.class.component.tsx }
165170
end: (?=[/]?>)
166171
patterns:
167172
- include: '#comment'

TypeScriptReact.tmLanguage

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6527,9 +6527,9 @@
65276527
<key>name</key>
65286528
<string>meta.tag.without-attributes.tsx</string>
65296529
<key>begin</key>
6530-
<string>(&lt;)\s*([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))\s*(&gt;)</string>
6530+
<string>(&lt;)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?&lt;!\.|-))\s*(&gt;)</string>
65316531
<key>end</key>
6532-
<string>(&lt;/)\s*([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))\s*(&gt;)</string>
6532+
<string>(&lt;/)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?&lt;!\.|-))\s*(&gt;)</string>
65336533
<key>beginCaptures</key>
65346534
<dict>
65356535
<key>1</key>
@@ -6542,7 +6542,12 @@
65426542
<key>name</key>
65436543
<string>entity.name.tag.tsx</string>
65446544
</dict>
6545-
<key>3</key>
6545+
<key>4</key>
6546+
<dict>
6547+
<key>name</key>
6548+
<string>support.class.component.tsx</string>
6549+
</dict>
6550+
<key>5</key>
65466551
<dict>
65476552
<key>name</key>
65486553
<string>punctuation.definition.tag.end.tsx</string>
@@ -6560,7 +6565,12 @@
65606565
<key>name</key>
65616566
<string>entity.name.tag.tsx</string>
65626567
</dict>
6563-
<key>3</key>
6568+
<key>4</key>
6569+
<dict>
6570+
<key>name</key>
6571+
<string>support.class.component.tsx</string>
6572+
</dict>
6573+
<key>5</key>
65646574
<dict>
65656575
<key>name</key>
65666576
<string>punctuation.definition.tag.end.tsx</string>
@@ -6584,10 +6594,10 @@
65846594
(?!(&lt;)\s*([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))\s*(&gt;)) #look ahead is not start of tag without attributes
65856595
(?!&lt;\s*[_$[:alpha:]][_$[:alnum:]]*((\s+extends\s+[^=&gt;])|,)) # look ahead is not type parameter of arrow
65866596
(?=(&lt;)\s*
6587-
([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))
6597+
([_$a-zA-Z][-$\w.]*)(?&lt;!\.|-)
65886598
(?=\s+(?!\?)|/?&gt;))</string>
65896599
<key>end</key>
6590-
<string>(/&gt;)|(?:(&lt;/)\s*([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))\s*(&gt;))</string>
6600+
<string>(/&gt;)|(?:(&lt;/)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?&lt;!\.|-))\s*(&gt;))</string>
65916601
<key>endCaptures</key>
65926602
<dict>
65936603
<key>0</key>
@@ -6610,7 +6620,12 @@
66106620
<key>name</key>
66116621
<string>entity.name.tag.tsx</string>
66126622
</dict>
6613-
<key>4</key>
6623+
<key>5</key>
6624+
<dict>
6625+
<key>name</key>
6626+
<string>support.class.component.tsx</string>
6627+
</dict>
6628+
<key>6</key>
66146629
<dict>
66156630
<key>name</key>
66166631
<string>punctuation.definition.tag.end.tsx</string>
@@ -6629,10 +6644,10 @@
66296644
<key>begin</key>
66306645
<string>(?x)
66316646
(?=(&lt;)\s*
6632-
([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))
6647+
([_$a-zA-Z][-$\w.]*)(?&lt;!\.|-)
66336648
(?=\s+(?!\?)|/?&gt;))</string>
66346649
<key>end</key>
6635-
<string>(/&gt;)|(?:(&lt;/)\s*([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))\s*(&gt;))</string>
6650+
<string>(/&gt;)|(?:(&lt;/)\s*(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?&lt;!\.|-))\s*(&gt;))</string>
66366651
<key>endCaptures</key>
66376652
<dict>
66386653
<key>0</key>
@@ -6655,7 +6670,12 @@
66556670
<key>name</key>
66566671
<string>entity.name.tag.tsx</string>
66576672
</dict>
6658-
<key>4</key>
6673+
<key>5</key>
6674+
<dict>
6675+
<key>name</key>
6676+
<string>support.class.component.tsx</string>
6677+
</dict>
6678+
<key>6</key>
66596679
<dict>
66606680
<key>name</key>
66616681
<string>punctuation.definition.tag.end.tsx</string>
@@ -6686,7 +6706,7 @@
66866706
<key>begin</key>
66876707
<string>(?x)
66886708
(&lt;)\s*
6689-
([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))
6709+
(([a-z][a-z0-9]*|([_$a-zA-Z][-$\w.]*))(?&lt;!\.|-))
66906710
(?=\s+(?!\?)|/?&gt;)</string>
66916711
<key>beginCaptures</key>
66926712
<dict>
@@ -6700,6 +6720,11 @@
67006720
<key>name</key>
67016721
<string>entity.name.tag.tsx</string>
67026722
</dict>
6723+
<key>4</key>
6724+
<dict>
6725+
<key>name</key>
6726+
<string>support.class.component.tsx</string>
6727+
</dict>
67036728
</dict>
67046729
<key>end</key>
67056730
<string>(?=[/]?&gt;)</string>

tests/baselines/Issue161.baseline.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ Grammar: TypeScriptReact.tmLanguage
9393
^
9494
source.tsx meta.block.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
9595
^^^^^^^
96-
source.tsx meta.block.tsx meta.tag.tsx entity.name.tag.tsx
96+
source.tsx meta.block.tsx meta.tag.tsx entity.name.tag.tsx support.class.component.tsx
9797
^^
9898
source.tsx meta.block.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
9999
^

tests/baselines/Issue264.baseline.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Grammar: TypeScriptReact.tmLanguage
1818
^
1919
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
2020
^^^^
21-
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
21+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
2222
^
2323
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
2424
^^
@@ -51,7 +51,7 @@ Grammar: TypeScriptReact.tmLanguage
5151
^^
5252
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
5353
^^^^
54-
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
54+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
5555
^
5656
source.tsx meta.tag.without-attributes.tsx
5757
^

0 commit comments

Comments
 (0)