[sources] Highlight JSX in every file that looks like JavaScript.
This morally reverts https://crrev.com/c/4020557, and changes the code
highlighting logic to allow JSX constructs in all files that look like
JavaScript. The reason here is that in the React ecosystem, it's far too
common to use .js file extension than using the proper .jsx file
extension. Even the official React examples page[^1] points to examples
that use .js instead of .jsx, so we'd break a lot of users for no good
reason if we're strict here.
[^1]: https://reactjs.org/community/examples.html
Bug: chromium:1320204
Change-Id: I01b0c7a7667c604aeda7b98356669f94126966de
Fixed: chromium:1383863
Before: https://imgur.com/uKB1HS7.png
After: https://imgur.com/agHmr6P.png
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4020515
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Jaroslav Sevcik <jarin@chromium.org>
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Reviewed-by: Jaroslav Sevcik <jarin@chromium.org>
diff --git a/front_end/ui/components/code_highlighter/CodeHighlighter.ts b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
index 33a67d6..c48ab49 100644
--- a/front_end/ui/components/code_highlighter/CodeHighlighter.ts
+++ b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
@@ -66,6 +66,9 @@
export async function languageFromMIME(mimeType: string): Promise<CodeMirror.LanguageSupport|null> {
switch (mimeType) {
+ // The correct MIME type for JavaScript is text/javascript, but we also support
+ // the legacy JavaScript MIME types here for backwards compatibility.
+ // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#legacy_javascript_mime_types
case 'application/javascript':
case 'application/ecmascript':
case 'application/x-ecmascript':
@@ -82,11 +85,11 @@
case 'text/x-ecmascript':
case 'text/x-javascript':
case 'text/javascript':
- // The correct MIME type for JavaScript is text/javascript, but we also support
- // the legacy JavaScript MIME types here for backwards compatibility.
- // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#legacy_javascript_mime_types
- return CodeMirror.javascript.javascript();
case 'text/jsx':
+ // We intentionally allow JSX in normal .js as well as .jsx files,
+ // because there are simply too many existing applications and
+ // examples out there that use JSX within .js files, and we don't
+ // want to break them.
return CodeMirror.javascript.javascript({jsx: true});
case 'text/typescript':
return CodeMirror.javascript.javascript({typescript: true});
diff --git a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
index 5a40013..ee4fe8c 100644
--- a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
+++ b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
@@ -66,8 +66,16 @@
}`, 'text/typescript'));
it('can highlight JSX', testHighlight(`
+[keyword function] [definition App]() {
+ [keyword return] (
+ <[tag div] [attribute className]=[attribute-value "App"]>
+ Hello World!
+ </[tag div]>);
+ }`, 'text/jsx'));
+
+ it('can highlight JSX within JavaScript files', testHighlight(`
[keyword const] [definition t] = <[tag div] [attribute disabled]>hello</[tag div]>
-`, 'text/jsx'));
+`, 'text/javascript'));
it('can highlight HTML', testHighlight(`
[meta <!doctype html>]
