Skip to content

Commit d61f62a

Browse files
authored
Merge pull request #449 from mjbvz/mark-tsx-class-tags
Mark TSX Class Tags Differently from Normal Html Elements
2 parents 9f6676a + 970dc1e commit d61f62a

8 files changed

+238
-50
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+
'3': {name: support.class.component.tsx}
103+
'4': {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+
'3': {name: support.class.component.tsx}
108+
'4': {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+
'4': { name: support.class.component.tsx }
130+
'5': { 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+
'4': { name: support.class.component.tsx }
148+
'5': { 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+
'3': { name: support.class.component.tsx }
165170
end: (?=[/]?>)
166171
patterns:
167172
- include: '#comment'

TypeScriptReact.tmLanguage

Lines changed: 30 additions & 5 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>
@@ -6543,6 +6543,11 @@
65436543
<string>entity.name.tag.tsx</string>
65446544
</dict>
65456545
<key>3</key>
6546+
<dict>
6547+
<key>name</key>
6548+
<string>support.class.component.tsx</string>
6549+
</dict>
6550+
<key>4</key>
65466551
<dict>
65476552
<key>name</key>
65486553
<string>punctuation.definition.tag.end.tsx</string>
@@ -6561,6 +6566,11 @@
65616566
<string>entity.name.tag.tsx</string>
65626567
</dict>
65636568
<key>3</key>
6569+
<dict>
6570+
<key>name</key>
6571+
<string>support.class.component.tsx</string>
6572+
</dict>
6573+
<key>4</key>
65646574
<dict>
65656575
<key>name</key>
65666576
<string>punctuation.definition.tag.end.tsx</string>
@@ -6587,7 +6597,7 @@
65876597
([_$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>
@@ -6611,6 +6621,11 @@
66116621
<string>entity.name.tag.tsx</string>
66126622
</dict>
66136623
<key>4</key>
6624+
<dict>
6625+
<key>name</key>
6626+
<string>support.class.component.tsx</string>
6627+
</dict>
6628+
<key>5</key>
66146629
<dict>
66156630
<key>name</key>
66166631
<string>punctuation.definition.tag.end.tsx</string>
@@ -6632,7 +6647,7 @@
66326647
([_$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>
@@ -6656,6 +6671,11 @@
66566671
<string>entity.name.tag.tsx</string>
66576672
</dict>
66586673
<key>4</key>
6674+
<dict>
6675+
<key>name</key>
6676+
<string>support.class.component.tsx</string>
6677+
</dict>
6678+
<key>5</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>3</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
^

tests/baselines/Issue415.baseline.txt

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
original file
2+
-----------------------------------
3+
// @onlyOwnGrammar - As this has jsx
4+
(<View />);
5+
(<dot.view />);
6+
(<dot.View />);
7+
(<dot.View />);
8+
(<View></View>);
9+
(<dot.View></dot.View>);
10+
(<dot.View><b>bold</b></dot.View>);
11+
-----------------------------------
12+
13+
Grammar: TypeScriptReact.tmLanguage
14+
-----------------------------------
15+
>// @onlyOwnGrammar - As this has jsx
16+
^^
17+
source.tsx comment.line.double-slash.tsx punctuation.definition.comment.tsx
18+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
19+
source.tsx comment.line.double-slash.tsx
20+
>(<View />);
21+
^
22+
source.tsx meta.brace.round.tsx
23+
^
24+
source.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
25+
^^^^
26+
source.tsx meta.tag.tsx entity.name.tag.tsx support.class.component.tsx
27+
^
28+
source.tsx meta.tag.tsx
29+
^^
30+
source.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
31+
^
32+
source.tsx meta.brace.round.tsx
33+
^
34+
source.tsx punctuation.terminator.statement.tsx
35+
>(<dot.view />);
36+
^
37+
source.tsx meta.brace.round.tsx
38+
^
39+
source.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
40+
^^^^^^^^
41+
source.tsx meta.tag.tsx entity.name.tag.tsx support.class.component.tsx
42+
^
43+
source.tsx meta.tag.tsx
44+
^^
45+
source.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
46+
^
47+
source.tsx meta.brace.round.tsx
48+
^
49+
source.tsx punctuation.terminator.statement.tsx
50+
>(<dot.View />);
51+
^
52+
source.tsx meta.brace.round.tsx
53+
^
54+
source.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
55+
^^^^^^^^
56+
source.tsx meta.tag.tsx entity.name.tag.tsx support.class.component.tsx
57+
^
58+
source.tsx meta.tag.tsx
59+
^^
60+
source.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
61+
^
62+
source.tsx meta.brace.round.tsx
63+
^
64+
source.tsx punctuation.terminator.statement.tsx
65+
>(<dot.View />);
66+
^
67+
source.tsx meta.brace.round.tsx
68+
^
69+
source.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
70+
^^^^^^^^
71+
source.tsx meta.tag.tsx entity.name.tag.tsx support.class.component.tsx
72+
^
73+
source.tsx meta.tag.tsx
74+
^^
75+
source.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
76+
^
77+
source.tsx meta.brace.round.tsx
78+
^
79+
source.tsx punctuation.terminator.statement.tsx
80+
>(<View></View>);
81+
^
82+
source.tsx meta.brace.round.tsx
83+
^
84+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
85+
^^^^
86+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
87+
^
88+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
89+
^^
90+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
91+
^^^^
92+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
93+
^
94+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
95+
^
96+
source.tsx meta.brace.round.tsx
97+
^
98+
source.tsx punctuation.terminator.statement.tsx
99+
>(<dot.View></dot.View>);
100+
^
101+
source.tsx meta.brace.round.tsx
102+
^
103+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
104+
^^^^^^^^
105+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
106+
^
107+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
108+
^^
109+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
110+
^^^^^^^^
111+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
112+
^
113+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
114+
^
115+
source.tsx meta.brace.round.tsx
116+
^
117+
source.tsx punctuation.terminator.statement.tsx
118+
>(<dot.View><b>bold</b></dot.View>);
119+
^
120+
source.tsx meta.brace.round.tsx
121+
^
122+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
123+
^^^^^^^^
124+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
125+
^
126+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
127+
^
128+
source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
129+
^
130+
source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
131+
^
132+
source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
133+
^^^^
134+
source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx
135+
^^
136+
source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
137+
^
138+
source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
139+
^
140+
source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
141+
^^
142+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
143+
^^^^^^^^
144+
source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx support.class.component.tsx
145+
^
146+
source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.end.tsx
147+
^
148+
source.tsx meta.brace.round.tsx
149+
^
150+
source.tsx punctuation.terminator.statement.tsx

0 commit comments

Comments
 (0)