Skip to content

Commit c0fe727

Browse files
committed
Jsx tag start depends on surrounding context
Fixes #268
1 parent 5cae319 commit c0fe727

7 files changed

+94
-656
lines changed

TypeScriptReact.YAML-tmLanguage

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -120,35 +120,47 @@ repository:
120120
- include: '#jsx-children'
121121

122122
jsx-tag:
123-
name: meta.tag.tsx
123+
# We need to differentiate between the relational '<' operator and the beginning of a tag using the surrounding context.
124124
begin: >-
125125
(?x)
126-
(<)
126+
(?<=[({\[,?=>]|&&|\|\||\?|\Wreturn|^return|\Wdefault|^)\s*
127+
(?!(<)([_$a-zA-Z][-$\w.]*(?<!\.|-))(>)) #look ahead is not start of tag without attributes
128+
(?!<[_$[:alpha:]][_$[:alnum:]]*((\s+extends\s+[^=>])|,)) # look ahead is not type parameter of arrow
129+
(?=(<)
127130
([_$a-zA-Z][-$\w.]*(?<!\.|-))
128-
(?=\s+(?!\?)|/?>)
129-
beginCaptures:
130-
'1': { name: punctuation.definition.tag.begin.tsx }
131-
'2': { name: entity.name.tag.tsx }
131+
(?=\s+(?!\?)|/?>))
132132
end: (/>)|(?:(</)([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>))
133133
endCaptures:
134+
'0': { name: meta.tag.tsx }
134135
'1': { name: punctuation.definition.tag.end.tsx }
135136
'2': { name: punctuation.definition.tag.begin.tsx }
136137
'3': { name: entity.name.tag.tsx }
137138
'4': { name: punctuation.definition.tag.end.tsx }
138139
patterns:
139-
- begin: \G(?![/]?>)
140-
end: (?=[/]?>)
141-
patterns:
142-
- include: '#comment'
143-
- include: '#jsx-tag-attributes'
144-
- include: '#jsx-tag-attributes-illegal'
145-
- begin: (>)
140+
- name: meta.tag.tsx
141+
begin: >-
142+
(?x)
143+
(<)
144+
([_$a-zA-Z][-$\w.]*(?<!\.|-))
145+
(?=\s+(?!\?)|/?>)
146146
beginCaptures:
147-
'1': { name: punctuation.definition.tag.end.tsx }
148-
end: (?=</)
149-
contentName: meta.jsx.children.tsx
147+
'1': { name: punctuation.definition.tag.begin.tsx }
148+
'2': { name: entity.name.tag.tsx }
149+
end: (?=(/>)|(?:(</)([_$a-zA-Z][-$\w.]*(?<!\.|-))\s*(>)))
150150
patterns:
151-
- include: '#jsx-children'
151+
- begin: \G(?![/]?>)
152+
end: (?=[/]?>)
153+
patterns:
154+
- include: '#comment'
155+
- include: '#jsx-tag-attributes'
156+
- include: '#jsx-tag-attributes-illegal'
157+
- begin: (>)
158+
beginCaptures:
159+
'1': { name: punctuation.definition.tag.end.tsx }
160+
end: (?=</)
161+
contentName: meta.jsx.children.tsx
162+
patterns:
163+
- include: '#jsx-children'
152164

153165
jsx-tag-invalid:
154166
name: invalid.illegal.tag.incomplete.tsx

TypeScriptReact.tmLanguage

Lines changed: 65 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4527,30 +4527,23 @@
45274527
</dict>
45284528
<key>jsx-tag</key>
45294529
<dict>
4530-
<key>name</key>
4531-
<string>meta.tag.tsx</string>
45324530
<key>begin</key>
45334531
<string>(?x)
4534-
(&lt;)
4532+
(?&lt;=[({\[,?=&gt;]|&amp;&amp;|\|\||\?|\Wreturn|^return|\Wdefault|^)\s*
4533+
(?!(&lt;)([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))(&gt;)) #look ahead is not start of tag without attributes
4534+
(?!&lt;[_$[:alpha:]][_$[:alnum:]]*((\s+extends\s+[^=&gt;])|,)) # look ahead is not type parameter of arrow
4535+
(?=(&lt;)
45354536
([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))
4536-
(?=\s+(?!\?)|/?&gt;)</string>
4537-
<key>beginCaptures</key>
4538-
<dict>
4539-
<key>1</key>
4540-
<dict>
4541-
<key>name</key>
4542-
<string>punctuation.definition.tag.begin.tsx</string>
4543-
</dict>
4544-
<key>2</key>
4545-
<dict>
4546-
<key>name</key>
4547-
<string>entity.name.tag.tsx</string>
4548-
</dict>
4549-
</dict>
4537+
(?=\s+(?!\?)|/?&gt;))</string>
45504538
<key>end</key>
45514539
<string>(/&gt;)|(?:(&lt;/)([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))\s*(&gt;))</string>
45524540
<key>endCaptures</key>
45534541
<dict>
4542+
<key>0</key>
4543+
<dict>
4544+
<key>name</key>
4545+
<string>meta.tag.tsx</string>
4546+
</dict>
45544547
<key>1</key>
45554548
<dict>
45564549
<key>name</key>
@@ -4575,46 +4568,73 @@
45754568
<key>patterns</key>
45764569
<array>
45774570
<dict>
4571+
<key>name</key>
4572+
<string>meta.tag.tsx</string>
45784573
<key>begin</key>
4579-
<string>\G(?![/]?&gt;)</string>
4580-
<key>end</key>
4581-
<string>(?=[/]?&gt;)</string>
4582-
<key>patterns</key>
4583-
<array>
4584-
<dict>
4585-
<key>include</key>
4586-
<string>#comment</string>
4587-
</dict>
4588-
<dict>
4589-
<key>include</key>
4590-
<string>#jsx-tag-attributes</string>
4591-
</dict>
4592-
<dict>
4593-
<key>include</key>
4594-
<string>#jsx-tag-attributes-illegal</string>
4595-
</dict>
4596-
</array>
4597-
</dict>
4598-
<dict>
4599-
<key>begin</key>
4600-
<string>(&gt;)</string>
4574+
<string>(?x)
4575+
(&lt;)
4576+
([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))
4577+
(?=\s+(?!\?)|/?&gt;)</string>
46014578
<key>beginCaptures</key>
46024579
<dict>
46034580
<key>1</key>
46044581
<dict>
46054582
<key>name</key>
4606-
<string>punctuation.definition.tag.end.tsx</string>
4583+
<string>punctuation.definition.tag.begin.tsx</string>
4584+
</dict>
4585+
<key>2</key>
4586+
<dict>
4587+
<key>name</key>
4588+
<string>entity.name.tag.tsx</string>
46074589
</dict>
46084590
</dict>
46094591
<key>end</key>
4610-
<string>(?=&lt;/)</string>
4611-
<key>contentName</key>
4612-
<string>meta.jsx.children.tsx</string>
4592+
<string>(?=(/&gt;)|(?:(&lt;/)([_$a-zA-Z][-$\w.]*(?&lt;!\.|-))\s*(&gt;)))</string>
46134593
<key>patterns</key>
46144594
<array>
46154595
<dict>
4616-
<key>include</key>
4617-
<string>#jsx-children</string>
4596+
<key>begin</key>
4597+
<string>\G(?![/]?&gt;)</string>
4598+
<key>end</key>
4599+
<string>(?=[/]?&gt;)</string>
4600+
<key>patterns</key>
4601+
<array>
4602+
<dict>
4603+
<key>include</key>
4604+
<string>#comment</string>
4605+
</dict>
4606+
<dict>
4607+
<key>include</key>
4608+
<string>#jsx-tag-attributes</string>
4609+
</dict>
4610+
<dict>
4611+
<key>include</key>
4612+
<string>#jsx-tag-attributes-illegal</string>
4613+
</dict>
4614+
</array>
4615+
</dict>
4616+
<dict>
4617+
<key>begin</key>
4618+
<string>(&gt;)</string>
4619+
<key>beginCaptures</key>
4620+
<dict>
4621+
<key>1</key>
4622+
<dict>
4623+
<key>name</key>
4624+
<string>punctuation.definition.tag.end.tsx</string>
4625+
</dict>
4626+
</dict>
4627+
<key>end</key>
4628+
<string>(?=&lt;/)</string>
4629+
<key>contentName</key>
4630+
<string>meta.jsx.children.tsx</string>
4631+
<key>patterns</key>
4632+
<array>
4633+
<dict>
4634+
<key>include</key>
4635+
<string>#jsx-children</string>
4636+
</dict>
4637+
</array>
46184638
</dict>
46194639
</array>
46204640
</dict>

0 commit comments

Comments
 (0)