fix: update JSX mode to reflect React JSX (#5451)

ace-modes.d.ts

@@ -553,9 +553,6 @@ declare module "ace-code/src/mode/jssm_highlight_rules" {
 declare module "ace-code/src/mode/jsx" {
   export const Mode: new () => import(".").Ace.SyntaxMode;
 }
-declare module "ace-code/src/mode/jsx_highlight_rules" {
-  export const JsxHighlightRules: new () => import(".").Ace.HighlightRules;
-}
 declare module "ace-code/src/mode/julia" {
   export const Mode: new () => import(".").Ace.SyntaxMode;
 }

demo/kitchen-sink/docs/jsx.jsx

@@ -1,9 +1,9 @@
-/*EXPECTED
-hello world!
-*/
-class Test {
-    static function run() : void {
-        // console.log("hello world!");
-        log "hello world!";
-    }
+import * as React from "react";
+
+export default () => {
+  return (
+    <div variant="p">
+      Keywords here are not highlighted, for example class or instance.
+    </div>
+  );
 }

src/ext/modelist.js

@@ -125,7 +125,7 @@ var supportedModes = {
     Jack:        ["jack"],
     Jade:        ["jade|pug"],
     Java:        ["java"],
-    JavaScript:  ["js|jsm|jsx|cjs|mjs"],
+    JavaScript:  ["js|jsm|cjs|mjs"],
     JEXL:        ["jexl"],
     JSON:        ["json"],
     JSON5:       ["json5"],

src/mode/_test/tokens_jsx.json

@@ -1,51 +1,62 @@
 [[
-   "comment",
-  ["comment","/*EXPECTED"]
-],[
-   "comment",
-  ["comment","hello world!"]
-],[
-   "start",
-  ["comment","*/"]
-],[
    "start",
-  ["keyword","class"],
+  ["keyword","import"],
   ["text"," "],
-  ["language.support.class","Test"],
+  ["keyword.operator","*"],
   ["text"," "],
-  ["paren.lparen","{"]
+  ["identifier","as"],
+  ["text"," "],
+  ["identifier","React"],
+  ["text"," "],
+  ["keyword","from"],
+  ["text"," "],
+  ["string","\"react\""],
+  ["punctuation.operator",";"]
+],[
+   "start"
 ],[
    "start",
-  ["text","    "],
-  ["keyword","static"],
+  ["keyword","export"],
   ["text"," "],
-  ["storage.type","function"],
+  ["keyword","default"],
   ["text"," "],
-  ["entity.name.function","run"],
   ["paren.lparen","("],
   ["paren.rparen",")"],
   ["text"," "],
-  ["punctuation.operator",":"],
-  ["text"," "],
-  ["keyword","void"],
+  ["storage.type","=>"],
   ["text"," "],
   ["paren.lparen","{"]
 ],[
    "start",
-  ["text","        "],
-  ["comment","// console.log(\"hello world!\");"]
-],[
-   "start",
-  ["text","        "],
-  ["keyword","log"],
+  ["text","  "],
+  ["keyword","return"],
   ["text"," "],
-  ["string","\"hello world!\""],
-  ["punctuation.operator",";"]
+  ["paren.lparen","("]
 ],[
-   "start",
+   ["jsx",1],
   ["text","    "],
-  ["paren.rparen","}"]
+  ["meta.tag.punctuation.tag-open.xml","<"],
+  ["meta.tag.tag-name.xml","div"],
+  ["text.tag-whitespace.xml"," "],
+  ["entity.other.attribute-name.xml","variant"],
+  ["keyword.operator.attribute-equals.xml","="],
+  ["string.attribute-value.xml","\"p\""],
+  ["meta.tag.punctuation.tag-close.xml",">"]
+],[
+   ["jsx",1],
+  ["string","      Keywords here are not highlighted, for example class or instance."]
 ],[
    "start",
+  ["string","    "],
+  ["meta.tag.punctuation.end-tag-open.xml","</"],
+  ["meta.tag.tag-name.xml","div"],
+  ["meta.tag.punctuation.tag-close.xml",">"]
+],[
+   "start",
+  ["text","  "],
+  ["paren.rparen",")"],
+  ["punctuation.operator",";"]
+],[
+   "no_regex",
   ["paren.rparen","}"]
 ]]

src/mode/jsx.js

@@ -1,52 +1,19 @@
 "use strict";
 
 var oop = require("../lib/oop");
-var TextMode = require("./text").Mode;
-var JsxHighlightRules = require("./jsx_highlight_rules").JsxHighlightRules;
-var MatchingBraceOutdent = require("./matching_brace_outdent").MatchingBraceOutdent;
-var CStyleFoldMode = require("./folding/cstyle").FoldMode;
+var jsMode = require("./javascript").Mode;
 
 function Mode() {
-    this.HighlightRules = JsxHighlightRules;
-    this.$outdent = new MatchingBraceOutdent();
-    this.$behaviour = this.$defaultBehaviour;
-    this.foldingRules = new CStyleFoldMode();
+    jsMode.call(this);
+    this.$highlightRuleConfig = {jsx: true};
 }
-oop.inherits(Mode, TextMode);
+oop.inherits(Mode, jsMode);
 
 (function() {
-
-    this.lineCommentStart = "//";
-    this.blockComment = {start: "/*", end: "*/"};
-
-    this.getNextLineIndent = function(state, line, tab) {
-        var indent = this.$getIndent(line);
-
-        var tokenizedLine = this.getTokenizer().getLineTokens(line, state);
-        var tokens = tokenizedLine.tokens;
-
-        if (tokens.length && tokens[tokens.length-1].type == "comment") {
-            return indent;
-        }
-
-        if (state == "start") {
-            var match = line.match(/^.*[\{\(\[]\s*$/);
-            if (match) {
-                indent += tab;
-            }
-        }
-
-        return indent;
+    // disable jshint
+    this.createWorker = function() {
+        return null;
     };
-
-    this.checkOutdent = function(state, line, input) {
-        return this.$outdent.checkOutdent(line, input);
-    };
-
-    this.autoOutdent = function(state, doc, row) {
-        this.$outdent.autoOutdent(doc, row);
-    };
-
     this.$id = "ace/mode/jsx";
 }).call(Mode.prototype);