(javascript) fix jsx self-closing tag issues (#2322)

CHANGES.md

@@ -10,19 +10,23 @@ New themes:
 
 Core Changes:
 
-- none yet.
+- (javascript) fix JSX self-closing tag issues (#2322) [Josh Goebel][]
 
 Language Improvements:
 
 - none yet.
 
+[Josh Goebel]: https://github.com/yyyc514
+
 
 ## Version 9.17.1
 
 Fixes:
 
 - fix(parser): resolve IE 11 issue with Object.freeze() (#2319) [Josh Goebel][]
 
+[Josh Goebel]: https://github.com/yyyc514
+
 
 ## Version 9.17.0
 

src/languages/javascript.js

@@ -6,6 +6,8 @@ Website: https://developer.mozilla.org/en-US/docs/Web/JavaScript
 */
 
 function(hljs) {
+  var TAG_START = /<[A-Za-z0-9\\._:-]+/;
+  var TAG_FINISH = /\/[A-Za-z0-9\\._:-]+>|\/>/;
   var IDENT_RE = '[A-Za-z$_][0-9A-Za-z$_]*';
   var KEYWORDS = {
     keyword:
@@ -187,17 +189,13 @@ function(hljs) {
             end: /\s*/,
             skip: true,
           },
-          { // E4X / JSX
-            begin: /</, end: /(\/[A-Za-z0-9\\._:-]+|[A-Za-z0-9\\._:-]+\/)>/,
+          { // JSX
+            begin: TAG_START, end: TAG_FINISH,
             subLanguage: 'xml',
             contains: [
-              { begin: /<[A-Za-z0-9\\._:-]+\s*\/>/, skip: true },
               {
-                begin: /<[A-Za-z0-9\\._:-]+/, end: /(\/[A-Za-z0-9\\._:-]+|[A-Za-z0-9\\._:-]+\/)>/, skip: true,
-                contains: [
-                  { begin: /<[A-Za-z0-9\\._:-]+\s*\/>/, skip: true },
-                  'self'
-                ]
+                begin: TAG_START, end: TAG_FINISH, skip: true,
+                contains: ['self']
               }
             ]
           }

test/markup/javascript/jsx.expect.txt

@@ -3,5 +3,25 @@
 <span class="hljs-keyword">var</span> jsx = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">node</span>&gt;</span>...<span class="hljs-tag">&lt;<span class="hljs-name">child</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">child</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">node</span>&gt;</span></span>;
 <span class="hljs-keyword">var</span> jsx = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
 <span class="hljs-keyword">var</span> jsx = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">pre-node</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">child</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre-node</span>&gt;</span></span>;
+
 <span class="hljs-keyword">var</span> x = <span class="hljs-number">5</span>;
+
 <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">node</span> <span class="hljs-attr">attr</span>=<span class="hljs-string">"value"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">node</span>&gt;</span></span>);
+
+<span class="hljs-keyword">const</span> n = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> /&gt;</span></span>
+<span class="hljs-keyword">const</span> m = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> <span class="hljs-attr">x</span>=<span class="hljs-string">""</span> /&gt;</span></span>
+
+<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
+  render() {
+    <span class="hljs-keyword">return</span> (
+      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BrowserRouter</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/about"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{About}</span> /&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/contact"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Contact}</span> /&gt;</span>
+        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">BrowserRouter</span>&gt;</span></span>
+    );
+  }
+}
+
+<span class="hljs-keyword">var</span> x = <span class="hljs-number">5</span>;

test/markup/javascript/jsx.txt

@@ -3,5 +3,25 @@ var jsx = <node><child/></node>;
 var jsx = <node>...<child>...</child></node>;
 var jsx = <div><span><br /></span></div>;
 var jsx = <pre-node><child /></pre-node>;
+
 var x = 5;
+
 return (<node attr="value"></node>);
+
+const n = () => <X />
+const m = () => <X x="" />
+
+class App extends Component {
+  render() {
+    return (
+      <BrowserRouter>
+        <div>
+          <Route path="/about" component={About} />
+          <Route path="/contact" component={Contact} />
+        </div>
+      </BrowserRouter>
+    );
+  }
+}
+
+var x = 5;