Skip to content

Commit

Permalink
TSX: Temporary fix for the collisions of JSX tags and TS generics (#2596
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@RunDevelopment
RunDevelopment authored Nov 4, 2020
1 parent 129faf5 commit 25bdb49
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 6 deletions.
4 changes: 2 additions & 2 deletions components/prism-jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
var javascript = Prism.util.clone(Prism.languages.javascript);

Prism.languages.jsx = Prism.languages.extend('markup', javascript);
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;
Prism.languages.jsx.tag.pattern = /<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'">=]+|\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])+\}))?|\{\s*\.{3}\s*[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\s*\}))*\s*\/?)?>/i;

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

Prism.languages.insertBefore('inside', 'attr-name', {
Expand Down
2 changes: 1 addition & 1 deletion components/prism-jsx.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 11 additions & 2 deletions components/prism-tsx.js
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,11 @@
var typescript = Prism.util.clone(Prism.languages.typescript);
Prism.languages.tsx = Prism.languages.extend('jsx', typescript);
(function (Prism) {
var typescript = Prism.util.clone(Prism.languages.typescript);
Prism.languages.tsx = Prism.languages.extend('jsx', typescript);

// This will prevent collisions between TSX tags and TS generic types.
// Idea by https://github.com/karlhorky
// Discussion: https://github.com/PrismJS/prism/issues/2594#issuecomment-710666928
var tag = Prism.languages.tsx.tag;
tag.pattern = RegExp(/(^|[^\w$]|(?=<\/))/.source + '(?:' + tag.pattern.source + ')', tag.pattern.flags);
tag.lookbehind = true;
}(Prism));
2 changes: 1 addition & 1 deletion components/prism-tsx.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

252 changes: 252 additions & 0 deletions tests/languages/tsx/issue2594.test
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
function Add1(a, b) { return <div>a + b</div> }

type Bar = Foo<string>;

function Add2(a, b) { return <div>a + b</div> }

function handleSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
}

function handleChange(event: ChangeEvent<HTMLInputElement>) {
console.log(event.target.value);
}

function handleClick(event: MouseEvent) {
console.log(event.button);
}

export default function Form() {
return (
<form onSubmit={handleSubmit}>
<input onChange={handleChange} placeholder="Name" />
<button onClick={handleClick}></button>
</form>
);
}

----------------------------------------------------

[
["keyword", "function"],
["function", "Add1"],
["punctuation", "("],
["parameter", [
"a",
["punctuation", ","],
" b"
]],
["punctuation", ")"],
["punctuation", "{"],
["keyword", "return"],
["tag", [
["tag", [
["punctuation", "<"],
"div"
]],
["punctuation", ">"]
]],
["plain-text", "a + b"],
["tag", [
["tag", [
["punctuation", "</"],
"div"
]],
["punctuation", ">"]
]],
["punctuation", "}"],

["keyword", "type"],
["class-name", [
"Bar"
]],
["operator", "="],
" Foo",
["operator", "<"],
["builtin", "string"],
["operator", ">"],
["punctuation", ";"],

["keyword", "function"],
["function", "Add2"],
["punctuation", "("],
["parameter", [
"a",
["punctuation", ","],
" b"
]],
["punctuation", ")"],
["punctuation", "{"],
["keyword", "return"],
["tag", [
["tag", [
["punctuation", "<"],
"div"
]],
["punctuation", ">"]
]],
["plain-text", "a + b"],
["tag", [
["tag", [
["punctuation", "</"],
"div"
]],
["punctuation", ">"]
]],
["punctuation", "}"],

["keyword", "function"],
["function", "handleSubmit"],
["punctuation", "("],
["parameter", [
"event",
["operator", ":"],
" FormEvent",
["operator", "<"],
"HTMLFormElement",
["operator", ">"]
]],
["punctuation", ")"],
["punctuation", "{"],
"\r\n event",
["punctuation", "."],
["function", "preventDefault"],
["punctuation", "("],
["punctuation", ")"],
["punctuation", ";"],
["punctuation", "}"],

["keyword", "function"],
["function", "handleChange"],
["punctuation", "("],
["parameter", [
"event",
["operator", ":"],
" ChangeEvent",
["operator", "<"],
"HTMLInputElement",
["operator", ">"]
]],
["punctuation", ")"],
["punctuation", "{"],
["builtin", "console"],
["punctuation", "."],
["function", "log"],
["punctuation", "("],
"event",
["punctuation", "."],
"target",
["punctuation", "."],
"value",
["punctuation", ")"],
["punctuation", ";"],
["punctuation", "}"],

["keyword", "function"],
["function", "handleClick"],
["punctuation", "("],
["parameter", [
"event",
["operator", ":"],
" MouseEvent"
]],
["punctuation", ")"],
["punctuation", "{"],
["builtin", "console"],
["punctuation", "."],
["function", "log"],
["punctuation", "("],
"event",
["punctuation", "."],
"button",
["punctuation", ")"],
["punctuation", ";"],
["punctuation", "}"],

["keyword", "export"],
["keyword", "default"],
["keyword", "function"],
["function", "Form"],
["punctuation", "("],
["punctuation", ")"],
["punctuation", "{"],
["keyword", "return"],
["punctuation", "("],
["tag", [
["tag", [
["punctuation", "<"],
"form"
]],
["attr-name", [
"onSubmit"
]],
["script", [
["script-punctuation", "="],
["punctuation", "{"],
"handleSubmit",
["punctuation", "}"]
]],
["punctuation", ">"]
]],
["plain-text", "\r\n "],
["tag", [
["tag", [
["punctuation", "<"],
"input"
]],
["attr-name", [
"onChange"
]],
["script", [
["script-punctuation", "="],
["punctuation", "{"],
"handleChange",
["punctuation", "}"]
]],
["attr-name", [
"placeholder"
]],
["attr-value", [
["punctuation", "="],
["punctuation", "\""],
"Name",
["punctuation", "\""]
]],
["punctuation", "/>"]
]],
["plain-text", "\r\n "],
["tag", [
["tag", [
["punctuation", "<"],
"button"
]],
["attr-name", [
"onClick"
]],
["script", [
["script-punctuation", "="],
["punctuation", "{"],
"handleClick",
["punctuation", "}"]
]],
["punctuation", ">"]
]],
["tag", [
["tag", [
["punctuation", "</"],
"button"
]],
["punctuation", ">"]
]],
["plain-text", "\r\n "],
["tag", [
["tag", [
["punctuation", "</"],
"form"
]],
["punctuation", ">"]
]],
["punctuation", ")"],
["punctuation", ";"],
["punctuation", "}"]
]

0 comments on commit 25bdb49

Please sign in to comment.