Skip to content

Commit

Permalink
JSX: Improved spread operator in tag attributes (#2159)
Browse files Browse the repository at this point in the history
This allows any number of spaces around JSX attribute spread expressions.
  • Loading branch information
0xc14m1z authored and RunDevelopment committed Jan 6, 2020
1 parent 8678045 commit fd857e7
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 3 deletions.
4 changes: 2 additions & 2 deletions components/prism-jsx.js
Expand Up @@ -3,15 +3,15 @@
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{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?)?>/i;
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.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i;
Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;

Prism.languages.insertBefore('inside', 'attr-name', {
'spread': {
pattern: /\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,
pattern: /\{\s*\.{3}\s*[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\s*\}/,
inside: {
'punctuation': /\.{3}|[{}.]/,
'attr-value': /\w+/
Expand Down
2 changes: 1 addition & 1 deletion components/prism-jsx.min.js

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

72 changes: 72 additions & 0 deletions tests/languages/jsx/spread_in_tags.test
@@ -0,0 +1,72 @@
<div {...foo}></div>
<div { ...foo }></div>
<div { ... foo }></div>

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

[
["tag", [
["tag", [
["punctuation", "<"],
"div"
]],
["spread", [
["punctuation", "{"],
["punctuation", "..."],
["attr-value", "foo"],
["punctuation", "}"]
]],
["punctuation", ">"]
]],
["tag", [
["tag", [
["punctuation", "</"],
"div"
]],
["punctuation", ">"]
]],
["tag", [
["tag", [
["punctuation", "<"],
"div"
]],
["spread", [
["punctuation", "{"],
["punctuation", "..."],
["attr-value", "foo"],
["punctuation", "}"]
]],
["punctuation", ">"]
]],
["tag", [
["tag", [
["punctuation", "</"],
"div"
]],
["punctuation", ">"]
]],
["tag", [
["tag", [
["punctuation", "<"],
"div"
]],
["spread", [
["punctuation", "{"],
["punctuation", "..."],
["attr-value", "foo"],
["punctuation", "}"]
]],
["punctuation", ">"]
]],
["tag", [
["tag", [
["punctuation", "</"],
"div"
]],
["punctuation", ">"]
]]
]

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

Allow spaces in spread operator brackets in JSX tags.

0 comments on commit fd857e7

Please sign in to comment.