feat: JSX Support (#3038)

cli/file_fetcher.rs

@@ -481,7 +481,9 @@ fn map_file_extension(path: &Path) -> msg::MediaType {
     None => msg::MediaType::Unknown,
     Some(os_str) => match os_str.to_str() {
       Some("ts") => msg::MediaType::TypeScript,
+      Some("tsx") => msg::MediaType::TSX,
       Some("js") => msg::MediaType::JavaScript,
+      Some("jsx") => msg::MediaType::JSX,
       Some("mjs") => msg::MediaType::JavaScript,
       Some("json") => msg::MediaType::Json,
       _ => msg::MediaType::Unknown,
@@ -1342,6 +1344,10 @@ mod tests {
       map_file_extension(Path::new("foo/bar.ts")),
       msg::MediaType::TypeScript
     );
+    assert_eq!(
+      map_file_extension(Path::new("foo/bar.tsx")),
+      msg::MediaType::TSX
+    );
     assert_eq!(
       map_file_extension(Path::new("foo/bar.d.ts")),
       msg::MediaType::TypeScript
@@ -1350,6 +1356,10 @@ mod tests {
       map_file_extension(Path::new("foo/bar.js")),
       msg::MediaType::JavaScript
     );
+    assert_eq!(
+      map_file_extension(Path::new("foo/bar.jsx")),
+      msg::MediaType::JSX
+    );
     assert_eq!(
       map_file_extension(Path::new("foo/bar.json")),
       msg::MediaType::Json
@@ -1371,6 +1381,10 @@ mod tests {
       map_content_type(Path::new("foo/bar.ts"), None),
       msg::MediaType::TypeScript
     );
+    assert_eq!(
+      map_content_type(Path::new("foo/bar.tsx"), None),
+      msg::MediaType::TSX
+    );
     assert_eq!(
       map_content_type(Path::new("foo/bar.d.ts"), None),
       msg::MediaType::TypeScript
@@ -1379,6 +1393,10 @@ mod tests {
       map_content_type(Path::new("foo/bar.js"), None),
       msg::MediaType::JavaScript
     );
+    assert_eq!(
+      map_content_type(Path::new("foo/bar.jsx"), None),
+      msg::MediaType::JSX
+    );
     assert_eq!(
       map_content_type(Path::new("foo/bar.json"), None),
       msg::MediaType::Json

cli/msg.rs

@@ -66,15 +66,19 @@ pub enum ErrorKind {
 #[derive(Clone, Copy, PartialEq, Debug)]
 pub enum MediaType {
   JavaScript = 0,
-  TypeScript = 1,
-  Json = 2,
-  Unknown = 3,
+  JSX = 1,
+  TypeScript = 2,
+  TSX = 3,
+  Json = 4,
+  Unknown = 5,
 }
 
 pub fn enum_name_media_type(mt: MediaType) -> &'static str {
   match mt {
     MediaType::JavaScript => "JavaScript",
+    MediaType::JSX => "JSX",
     MediaType::TypeScript => "TypeScript",
+    MediaType::TSX => "TSX",
     MediaType::Json => "Json",
     MediaType::Unknown => "Unknown",
   }

cli/state.rs

@@ -297,7 +297,9 @@ impl ThreadSafeState {
         msg::MediaType::Json => {
           state_.json_compiler.compile_async(state_.clone(), &out)
         }
-        msg::MediaType::TypeScript => {
+        msg::MediaType::TypeScript
+        | msg::MediaType::TSX
+        | msg::MediaType::JSX => {
           state_.ts_compiler.compile_async(state_.clone(), &out)
         }
         msg::MediaType::JavaScript => {

cli/tests/046_jsx_test.tsx

@@ -0,0 +1,9 @@
+const React = {
+  createElement(factory: any, props: any, ...children: any[]) {
+    return {factory, props, children}
+  }
+}
+const View = () => (
+  <div class="deno">land</div>
+)
+console.log(<View />)

cli/tests/046_jsx_test.tsx.out

@@ -0,0 +1 @@
+{ factory: [Function: View], props: null, children: [] }

cli/tests/047_jsx_test.jsx

@@ -0,0 +1,9 @@
+const React = {
+  createElement(factory, props, ...children) {
+    return {factory, props, children}
+  }
+}
+const View = () => (
+  <div class="deno">land</div>
+)
+console.log(<View />)

cli/tests/047_jsx_test.jsx.out

@@ -0,0 +1 @@
+{ factory: [Function: View], props: null, children: [] }

cli/tests/integration_tests.rs

@@ -322,6 +322,16 @@ itest!(_045_proxy {
   output: "045_proxy_test.ts.out",
 });
 
+itest!(_046_tsx {
+  args: "run --reload 046_jsx_test.tsx",
+  output: "046_jsx_test.tsx.out",
+});
+
+itest!(_047_jsx {
+  args: "run  --reload 047_jsx_test.jsx",
+  output: "047_jsx_test.jsx.out",
+});
+
 itest!(async_error {
   exit_code: 1,
   args: "run --reload async_error.ts",

js/compiler.ts

@@ -24,9 +24,11 @@ import { writeFileSync } from "./write_file.ts";
 // Update carefully!
 enum MediaType {
   JavaScript = 0,
-  TypeScript = 1,
-  Json = 2,
-  Unknown = 3
+  JSX = 1,
+  TypeScript = 2,
+  TSX = 3,
+  Json = 4,
+  Unknown = 5
 }
 
 // Startup boilerplate. This is necessary because the compiler has its own
@@ -198,8 +200,12 @@ function getExtension(fileName: string, mediaType: MediaType): ts.Extension {
   switch (mediaType) {
     case MediaType.JavaScript:
       return ts.Extension.Js;
+    case MediaType.JSX:
+      return ts.Extension.Jsx;
     case MediaType.TypeScript:
       return fileName.endsWith(".d.ts") ? ts.Extension.Dts : ts.Extension.Ts;
+    case MediaType.TSX:
+      return ts.Extension.Tsx;
     case MediaType.Json:
       return ts.Extension.Json;
     case MediaType.Unknown:
@@ -221,7 +227,8 @@ class Host implements ts.CompilerHost {
     resolveJsonModule: true,
     sourceMap: true,
     stripComments: true,
-    target: ts.ScriptTarget.ESNext
+    target: ts.ScriptTarget.ESNext,
+    jsx: ts.JsxEmit.React
   };
 
   private _sourceFileCache: Record<string, SourceFile> = {};
@@ -511,7 +518,6 @@ window.compilerMain = function compilerMain(): void {
   window.onmessage = ({ data }: { data: CompilerReq }): void => {
     const { rootNames, configPath, config, bundle } = data;
     const host = new Host(bundle);
-
     let emitSkipped = true;
     let diagnostics: ts.Diagnostic[] | undefined;
 

tsconfig.json

@@ -17,6 +17,7 @@
     "sourceMap": true,
     "strict": true,
     "target": "esnext",
+    "jsx": "react",
     "types": []
   },
   "files": [