Skip to content

Commit 25bdb49

Browse files
RunDevelopmentRunDevelopment
authored
TSX: Temporary fix for the collisions of JSX tags and TS generics (#2596)
1 parent 129faf5 commit 25bdb49

File tree

5 files changed

+267
-6
lines changed

5 files changed

+267
-6
lines changed

‎components/prism-jsx.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
var javascript = Prism.util.clone(Prism.languages.javascript);
44

55
Prism.languages.jsx = Prism.languages.extend('markup', javascript);
6-
Prism.languages.jsx.tag.pattern= /<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:$-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])+\}))?|\{\s*\.{3}\s*[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\s*\}))*\s*\/?)?>/i;
6+
Prism.languages.jsx.tag.pattern = /<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'">=]+|\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])+\}))?|\{\s*\.{3}\s*[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\s*\}))*\s*\/?)?>/i;
77

88
Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
9-
Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i;
9+
Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s'">]+)/i;
1010
Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
1111

1212
Prism.languages.insertBefore('inside', 'attr-name', {

‎components/prism-jsx.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/prism-tsx.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
1-
var typescript = Prism.util.clone(Prism.languages.typescript);
2-
Prism.languages.tsx = Prism.languages.extend('jsx', typescript);
1+
(function (Prism) {
2+
var typescript = Prism.util.clone(Prism.languages.typescript);
3+
Prism.languages.tsx = Prism.languages.extend('jsx', typescript);
4+
5+
// This will prevent collisions between TSX tags and TS generic types.
6+
// Idea by https://github.com/karlhorky
7+
// Discussion: https://github.com/PrismJS/prism/issues/2594#issuecomment-710666928
8+
var tag = Prism.languages.tsx.tag;
9+
tag.pattern = RegExp(/(^|[^\w$]|(?=<\/))/.source + '(?:' + tag.pattern.source + ')', tag.pattern.flags);
10+
tag.lookbehind = true;
11+
}(Prism));

‎components/prism-tsx.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/languages/tsx/issue2594.test

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
function Add1(a, b) { return <div>a + b</div> }
2+
3+
type Bar = Foo<string>;
4+
5+
function Add2(a, b) { return <div>a + b</div> }
6+
7+
function handleSubmit(event: FormEvent<HTMLFormElement>) {
8+
event.preventDefault();
9+
}
10+
11+
function handleChange(event: ChangeEvent<HTMLInputElement>) {
12+
console.log(event.target.value);
13+
}
14+
15+
function handleClick(event: MouseEvent) {
16+
console.log(event.button);
17+
}
18+
19+
export default function Form() {
20+
return (
21+
<form onSubmit={handleSubmit}>
22+
<input onChange={handleChange} placeholder="Name" />
23+
<button onClick={handleClick}></button>
24+
</form>
25+
);
26+
}
27+
28+
----------------------------------------------------
29+
30+
[
31+
["keyword", "function"],
32+
["function", "Add1"],
33+
["punctuation", "("],
34+
["parameter", [
35+
"a",
36+
["punctuation", ","],
37+
" b"
38+
]],
39+
["punctuation", ")"],
40+
["punctuation", "{"],
41+
["keyword", "return"],
42+
["tag", [
43+
["tag", [
44+
["punctuation", "<"],
45+
"div"
46+
]],
47+
["punctuation", ">"]
48+
]],
49+
["plain-text", "a + b"],
50+
["tag", [
51+
["tag", [
52+
["punctuation", "</"],
53+
"div"
54+
]],
55+
["punctuation", ">"]
56+
]],
57+
["punctuation", "}"],
58+
59+
["keyword", "type"],
60+
["class-name", [
61+
"Bar"
62+
]],
63+
["operator", "="],
64+
" Foo",
65+
["operator", "<"],
66+
["builtin", "string"],
67+
["operator", ">"],
68+
["punctuation", ";"],
69+
70+
["keyword", "function"],
71+
["function", "Add2"],
72+
["punctuation", "("],
73+
["parameter", [
74+
"a",
75+
["punctuation", ","],
76+
" b"
77+
]],
78+
["punctuation", ")"],
79+
["punctuation", "{"],
80+
["keyword", "return"],
81+
["tag", [
82+
["tag", [
83+
["punctuation", "<"],
84+
"div"
85+
]],
86+
["punctuation", ">"]
87+
]],
88+
["plain-text", "a + b"],
89+
["tag", [
90+
["tag", [
91+
["punctuation", "</"],
92+
"div"
93+
]],
94+
["punctuation", ">"]
95+
]],
96+
["punctuation", "}"],
97+
98+
["keyword", "function"],
99+
["function", "handleSubmit"],
100+
["punctuation", "("],
101+
["parameter", [
102+
"event",
103+
["operator", ":"],
104+
" FormEvent",
105+
["operator", "<"],
106+
"HTMLFormElement",
107+
["operator", ">"]
108+
]],
109+
["punctuation", ")"],
110+
["punctuation", "{"],
111+
"\r\n event",
112+
["punctuation", "."],
113+
["function", "preventDefault"],
114+
["punctuation", "("],
115+
["punctuation", ")"],
116+
["punctuation", ";"],
117+
["punctuation", "}"],
118+
119+
["keyword", "function"],
120+
["function", "handleChange"],
121+
["punctuation", "("],
122+
["parameter", [
123+
"event",
124+
["operator", ":"],
125+
" ChangeEvent",
126+
["operator", "<"],
127+
"HTMLInputElement",
128+
["operator", ">"]
129+
]],
130+
["punctuation", ")"],
131+
["punctuation", "{"],
132+
["builtin", "console"],
133+
["punctuation", "."],
134+
["function", "log"],
135+
["punctuation", "("],
136+
"event",
137+
["punctuation", "."],
138+
"target",
139+
["punctuation", "."],
140+
"value",
141+
["punctuation", ")"],
142+
["punctuation", ";"],
143+
["punctuation", "}"],
144+
145+
["keyword", "function"],
146+
["function", "handleClick"],
147+
["punctuation", "("],
148+
["parameter", [
149+
"event",
150+
["operator", ":"],
151+
" MouseEvent"
152+
]],
153+
["punctuation", ")"],
154+
["punctuation", "{"],
155+
["builtin", "console"],
156+
["punctuation", "."],
157+
["function", "log"],
158+
["punctuation", "("],
159+
"event",
160+
["punctuation", "."],
161+
"button",
162+
["punctuation", ")"],
163+
["punctuation", ";"],
164+
["punctuation", "}"],
165+
166+
["keyword", "export"],
167+
["keyword", "default"],
168+
["keyword", "function"],
169+
["function", "Form"],
170+
["punctuation", "("],
171+
["punctuation", ")"],
172+
["punctuation", "{"],
173+
["keyword", "return"],
174+
["punctuation", "("],
175+
["tag", [
176+
["tag", [
177+
["punctuation", "<"],
178+
"form"
179+
]],
180+
["attr-name", [
181+
"onSubmit"
182+
]],
183+
["script", [
184+
["script-punctuation", "="],
185+
["punctuation", "{"],
186+
"handleSubmit",
187+
["punctuation", "}"]
188+
]],
189+
["punctuation", ">"]
190+
]],
191+
["plain-text", "\r\n "],
192+
["tag", [
193+
["tag", [
194+
["punctuation", "<"],
195+
"input"
196+
]],
197+
["attr-name", [
198+
"onChange"
199+
]],
200+
["script", [
201+
["script-punctuation", "="],
202+
["punctuation", "{"],
203+
"handleChange",
204+
["punctuation", "}"]
205+
]],
206+
["attr-name", [
207+
"placeholder"
208+
]],
209+
["attr-value", [
210+
["punctuation", "="],
211+
["punctuation", "\""],
212+
"Name",
213+
["punctuation", "\""]
214+
]],
215+
["punctuation", "/>"]
216+
]],
217+
["plain-text", "\r\n "],
218+
["tag", [
219+
["tag", [
220+
["punctuation", "<"],
221+
"button"
222+
]],
223+
["attr-name", [
224+
"onClick"
225+
]],
226+
["script", [
227+
["script-punctuation", "="],
228+
["punctuation", "{"],
229+
"handleClick",
230+
["punctuation", "}"]
231+
]],
232+
["punctuation", ">"]
233+
]],
234+
["tag", [
235+
["tag", [
236+
["punctuation", "</"],
237+
"button"
238+
]],
239+
["punctuation", ">"]
240+
]],
241+
["plain-text", "\r\n "],
242+
["tag", [
243+
["tag", [
244+
["punctuation", "</"],
245+
"form"
246+
]],
247+
["punctuation", ">"]
248+
]],
249+
["punctuation", ")"],
250+
["punctuation", ";"],
251+
["punctuation", "}"]
252+
]

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy