feat: JSX Support (#3038)

10 files changed, 70 insertions, 9 deletions

diff --git a/cli/file_fetcher.rs b/cli/file_fetcher.rs
index 9c0ef920c..128bba2ef 100644
--- a/cli/file_fetcher.rs
+++ b/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,
@@ -1343,6 +1345,10 @@ mod tests {
       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
     );
@@ -1351,6 +1357,10 @@ mod tests {
       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
     );
@@ -1372,6 +1382,10 @@ mod tests {
       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
     );
@@ -1380,6 +1394,10 @@ mod tests {
       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
     );
diff --git a/cli/msg.rs b/cli/msg.rs
index 4416c7d71..20ab9db13 100644
--- a/cli/msg.rs
+++ b/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",
   }
diff --git a/cli/state.rs b/cli/state.rs
index bc407f4c0..8781a7aaa 100644
--- a/cli/state.rs
+++ b/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 => {
diff --git a/cli/tests/046_jsx_test.tsx b/cli/tests/046_jsx_test.tsx
new file mode 100644
index 000000000..4e9380eb8
--- /dev/null
+++ b/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 />)
diff --git a/cli/tests/046_jsx_test.tsx.out b/cli/tests/046_jsx_test.tsx.out
new file mode 100644
index 000000000..85cfe824b
--- /dev/null
+++ b/cli/tests/046_jsx_test.tsx.out
@@ -0,0 +1 @@
+{ factory: [Function: View], props: null, children: [] }
diff --git a/cli/tests/047_jsx_test.jsx b/cli/tests/047_jsx_test.jsx
new file mode 100644
index 000000000..553c4c5a5
--- /dev/null
+++ b/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 />)
diff --git a/cli/tests/047_jsx_test.jsx.out b/cli/tests/047_jsx_test.jsx.out
new file mode 100644
index 000000000..85cfe824b
--- /dev/null
+++ b/cli/tests/047_jsx_test.jsx.out
@@ -0,0 +1 @@
+{ factory: [Function: View], props: null, children: [] }
diff --git a/cli/tests/integration_tests.rs b/cli/tests/integration_tests.rs
index 0e0407180..930ad9477 100644
--- a/cli/tests/integration_tests.rs
+++ b/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",
diff --git a/js/compiler.ts b/js/compiler.ts
index 56804ef9f..77d88dd8b 100644
--- a/js/compiler.ts
+++ b/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;
 
diff --git a/tsconfig.json b/tsconfig.json
index f62cf4c6d..cf252cfd7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,6 +17,7 @@
     "sourceMap": true,
     "strict": true,
     "target": "esnext",
+    "jsx": "react",
     "types": []
   },
   "files": [