Commit 4362e42cd4c0271abd976145a85098092a51db80
2019-02-12T23:30:14
Support JSX/TSX class-name with dot (#1725) Adds class-name highlighting for JSX/TSX tag names containing dots.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
diff --git a/components/prism-jsx.js b/components/prism-jsx.js
index 970acb7..57e483e 100644
--- a/components/prism-jsx.js
+++ b/components/prism-jsx.js
@@ -7,7 +7,7 @@ Prism.languages.jsx.tag.pattern= /<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|'
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*$/;
+Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
Prism.languages.insertBefore('inside', 'attr-name', {
'spread': {
diff --git a/components/prism-jsx.min.js b/components/prism-jsx.min.js
index 1889718..6653a12 100644
--- a/components/prism-jsx.min.js
+++ b/components/prism-jsx.min.js
@@ -1 +1 @@
-!function(t){var n=t.util.clone(t.languages.javascript);t.languages.jsx=t.languages.extend("markup",n),t.languages.jsx.tag.pattern=/<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?)?>/i,t.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/i,t.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i,t.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*$/,t.languages.insertBefore("inside","attr-name",{spread:{pattern:/\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,inside:{punctuation:/\.{3}|[{}.]/,"attr-value":/\w+/}}},t.languages.jsx.tag),t.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,inside:{"script-punctuation":{pattern:/^=(?={)/,alias:"punctuation"},rest:t.languages.jsx},alias:"language-javascript"}},t.languages.jsx.tag);var e=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(e).join(""):""},a=function(n){for(var s=[],g=0;g<n.length;g++){var i=n[g],o=!1;if("string"!=typeof i&&("tag"===i.type&&i.content[0]&&"tag"===i.content[0].type?"</"===i.content[0].content[0].content?s.length>0&&s[s.length-1].tagName===e(i.content[0].content[1])&&s.pop():"/>"===i.content[i.content.length-1].content||s.push({tagName:e(i.content[0].content[1]),openedBraces:0}):s.length>0&&"punctuation"===i.type&&"{"===i.content?s[s.length-1].openedBraces++:s.length>0&&s[s.length-1].openedBraces>0&&"punctuation"===i.type&&"}"===i.content?s[s.length-1].openedBraces--:o=!0),(o||"string"==typeof i)&&s.length>0&&0===s[s.length-1].openedBraces){var p=e(i);g<n.length-1&&("string"==typeof n[g+1]||"plain-text"===n[g+1].type)&&(p+=e(n[g+1]),n.splice(g+1,1)),g>0&&("string"==typeof n[g-1]||"plain-text"===n[g-1].type)&&(p=e(n[g-1])+p,n.splice(g-1,1),g--),n[g]=new t.Token("plain-text",p,null,p)}i.content&&"string"!=typeof i.content&&a(i.content)}};t.hooks.add("after-tokenize",function(t){("jsx"===t.language||"tsx"===t.language)&&a(t.tokens)})}(Prism);
\ No newline at end of file
+!function(t){var n=t.util.clone(t.languages.javascript);t.languages.jsx=t.languages.extend("markup",n),t.languages.jsx.tag.pattern=/<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?)?>/i,t.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/i,t.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i,t.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,t.languages.insertBefore("inside","attr-name",{spread:{pattern:/\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,inside:{punctuation:/\.{3}|[{}.]/,"attr-value":/\w+/}}},t.languages.jsx.tag),t.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,inside:{"script-punctuation":{pattern:/^=(?={)/,alias:"punctuation"},rest:t.languages.jsx},alias:"language-javascript"}},t.languages.jsx.tag);var e=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(e).join(""):""},a=function(n){for(var s=[],g=0;g<n.length;g++){var i=n[g],o=!1;if("string"!=typeof i&&("tag"===i.type&&i.content[0]&&"tag"===i.content[0].type?"</"===i.content[0].content[0].content?s.length>0&&s[s.length-1].tagName===e(i.content[0].content[1])&&s.pop():"/>"===i.content[i.content.length-1].content||s.push({tagName:e(i.content[0].content[1]),openedBraces:0}):s.length>0&&"punctuation"===i.type&&"{"===i.content?s[s.length-1].openedBraces++:s.length>0&&s[s.length-1].openedBraces>0&&"punctuation"===i.type&&"}"===i.content?s[s.length-1].openedBraces--:o=!0),(o||"string"==typeof i)&&s.length>0&&0===s[s.length-1].openedBraces){var p=e(i);g<n.length-1&&("string"==typeof n[g+1]||"plain-text"===n[g+1].type)&&(p+=e(n[g+1]),n.splice(g+1,1)),g>0&&("string"==typeof n[g-1]||"plain-text"===n[g-1].type)&&(p=e(n[g-1])+p,n.splice(g-1,1),g--),n[g]=new t.Token("plain-text",p,null,p)}i.content&&"string"!=typeof i.content&&a(i.content)}};t.hooks.add("after-tokenize",function(t){("jsx"===t.language||"tsx"===t.language)&&a(t.tokens)})}(Prism);
\ No newline at end of file
diff --git a/tests/languages/jsx/tag_feature.test b/tests/languages/jsx/tag_feature.test
index 4bc5d10..9255ea1 100644
--- a/tests/languages/jsx/tag_feature.test
+++ b/tests/languages/jsx/tag_feature.test
@@ -2,6 +2,7 @@ var myDivElement = <div className="foo" />;
var myElement = <MyComponent someProperty={true} />;
<div {...foo}></div>
<> </>
+<Tree.TreeNode.Item leaf={true}></Tree.TreeNode.Item>
----------------------------------------------------
@@ -75,6 +76,27 @@ var myElement = <MyComponent someProperty={true} />;
["punctuation", "</"]
]],
["punctuation", ">"]
+ ]],
+ ["tag", [
+ ["tag", [
+ ["punctuation", "<"],
+ ["class-name", "Tree.TreeNode.Item"]
+ ]],
+ ["attr-name", ["leaf"]],
+ ["script", [
+ ["script-punctuation", "="],
+ ["punctuation", "{"],
+ ["boolean", "true"],
+ ["punctuation", "}"]
+ ]],
+ ["punctuation", ">"]
+ ]],
+ ["tag", [
+ ["tag", [
+ ["punctuation", "</"],
+ ["class-name", "Tree.TreeNode.Item"]
+ ]],
+ ["punctuation", ">"]
]]
]
diff --git a/tests/languages/tsx/tag_feature.test b/tests/languages/tsx/tag_feature.test
index 3d5c0e9..97e8e71 100644
--- a/tests/languages/tsx/tag_feature.test
+++ b/tests/languages/tsx/tag_feature.test
@@ -1,6 +1,7 @@
var myDivElement = <div className="foo" />;
var myElement = <MyComponent someProperty={true} />;
<div {...foo} />
+<Tree.TreeNode.Item leaf={true}></Tree.TreeNode.Item>
class Test extends Component {
render() {
return <p onClick={this.clickHandler}>Hello world.</p>;
@@ -61,6 +62,28 @@ class Test extends Component {
["punctuation", "/>"]
]],
+ ["tag", [
+ ["tag", [
+ ["punctuation", "<"],
+ ["class-name", "Tree.TreeNode.Item"]
+ ]],
+ ["attr-name", ["leaf"]],
+ ["script", [
+ ["script-punctuation", "="],
+ ["punctuation", "{"],
+ ["boolean", "true"],
+ ["punctuation", "}"]
+ ]],
+ ["punctuation", ">"]
+ ]],
+ ["tag", [
+ ["tag", [
+ ["punctuation", "</"],
+ ["class-name", "Tree.TreeNode.Item"]
+ ]],
+ ["punctuation", ">"]
+ ]],
+
["keyword", "class"],
["class-name", ["Test"]],
["keyword", "extends"],