JSX: Add support for fragments short syntax. Fix #1421

PrismJS · May 15, 2018 · 38ce121 · 38ce121
1 parent e063992
commit 38ce121
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 3 deletions.
diff --git a/components/prism-jsx.js b/components/prism-jsx.js
@@ -3,8 +3,9 @@
 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{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\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.insertBefore('inside', 'attr-name', {
@@ -34,6 +35,9 @@ Prism.languages.insertBefore('inside', 'attr-value',{
 
 // The following will handle plain text inside tags
 var stringifyToken = function (token) {
+	if (!token) {
+		return '';
+	}
 	if (typeof token === 'string') {
 		return token;
 	}

diff --git a/components/prism-jsx.min.js b/components/prism-jsx.min.js
diff --git a/tests/languages/jsx/issue1421.test b/tests/languages/jsx/issue1421.test
@@ -0,0 +1,58 @@
+class Columns extends React.Component {
+  render() {
+    return (
+      <>
+        <td>Hello</td>
+        <td>World</td>
+      </>
+    );
+  }
+}
+
+----------------------------------------------------
+
+[
+	["keyword", "class"],
+	["class-name", ["Columns"]],
+	["keyword", "extends"],
+	["class-name", ["React", ["punctuation", "."], "Component"]],
+	["punctuation", "{"],
+	["function", "render"],
+	["punctuation", "("], ["punctuation", ")"],
+	["punctuation", "{"],
+	["keyword", "return"], ["punctuation", "("],
+	["tag", [
+		["tag", [["punctuation", "<"]]],
+		["punctuation", ">"]
+	]],
+	["plain-text", "\r\n        "],
+	["tag", [
+		["tag", [["punctuation", "<"], "td"]],
+		["punctuation", ">"]
+	]],
+	["plain-text", "Hello"],
+	["tag", [
+		["tag", [["punctuation", "</"], "td"]],
+		["punctuation", ">"]
+	]],
+	["plain-text", "\r\n        "],
+	["tag", [
+		["tag", [["punctuation", "<"], "td"]],
+		["punctuation", ">"]
+	]],
+	["plain-text", "World"],
+	["tag", [
+		["tag", [["punctuation", "</"], "td"]],
+		["punctuation", ">"]
+	]],
+	["plain-text", "\r\n      "],
+	["tag", [
+		["tag", [["punctuation", "</"]]],
+		["punctuation", ">"]
+	]],
+	["punctuation", ")"], ["punctuation", ";"],
+	["punctuation", "}"], ["punctuation", "}"]
+]
+
+----------------------------------------------------
+Checks for fragments short syntax. See #1421
diff --git a/tests/languages/jsx/tag_feature.test b/tests/languages/jsx/tag_feature.test
@@ -1,6 +1,7 @@
 var myDivElement = <div className="foo" />;
 var myElement = <MyComponent someProperty={true} />;
-<div {...foo}>
+<div {...foo}></div>
+<> </>
 
 ----------------------------------------------------
 
@@ -54,6 +55,26 @@ var myElement = <MyComponent someProperty={true} />;
 			["punctuation", "}"]
 		]],
 		["punctuation", ">"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "</"],
+			"div"
+		]],
+		["punctuation", ">"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "<"]
+		]],
+		["punctuation", ">"]
+	]],
+	["plain-text", " "],
+	["tag", [
+		["tag", [
+			["punctuation", "</"]
+		]],
+		["punctuation", ">"]
 	]]
 ]