feat(cli): support React 17 JSX transforms (#12631)

Closes #8440

18 files changed, 357 insertions, 1 deletions

diff --git a/cli/tests/integration/lsp_tests.rs b/cli/tests/integration/lsp_tests.rs
index 6e009bd20..fc4f6dbc6 100644
--- a/cli/tests/integration/lsp_tests.rs
+++ b/cli/tests/integration/lsp_tests.rs
@@ -3684,3 +3684,82 @@ fn lsp_lint_with_config() {
   }
   shutdown(&mut client);
 }
+
+#[test]
+fn lsp_jsx_import_source_pragma() {
+  let _g = http_server();
+  let mut client = init("initialize_params.json");
+  did_open(
+    &mut client,
+    json!({
+      "textDocument": {
+        "uri": "file:///a/file.tsx",
+        "languageId": "typescriptreact",
+        "version": 1,
+        "text":
+"/** @jsxImportSource http://localhost:4545/jsx */
+
+function A() {
+  return \"hello\";
+}
+
+export function B() {
+  return <A></A>;
+}
+",
+      }
+    }),
+  );
+  let (maybe_res, maybe_err) = client
+    .write_request::<_, _, Value>(
+      "deno/cache",
+      json!({
+        "referrer": {
+          "uri": "file:///a/file.tsx",
+        },
+        "uris": [
+          {
+            "uri": "http://127.0.0.1:4545/jsx/jsx-runtime",
+          }
+        ],
+      }),
+    )
+    .unwrap();
+  assert!(maybe_err.is_none());
+  assert!(maybe_res.is_some());
+  let (maybe_res, maybe_err) = client
+    .write_request::<_, _, Value>(
+      "textDocument/hover",
+      json!({
+        "textDocument": {
+          "uri": "file:///a/file.tsx"
+        },
+        "position": {
+          "line": 0,
+          "character": 25
+        }
+      }),
+    )
+    .unwrap();
+  assert!(maybe_err.is_none());
+  assert_eq!(
+    maybe_res,
+    Some(json!({
+      "contents": {
+        "kind": "markdown",
+        "value": "**Resolved Dependency**\n\n**Code**: http&#8203;://localhost:4545/jsx/jsx-runtime\n",
+      },
+      "range": {
+        "start": {
+          "line": 0,
+          "character": 21
+        },
+        "end": {
+          "line": 0,
+          "character": 46
+        }
+      }
+    }))
+  );
+  shutdown(&mut client);
+}
diff --git a/cli/tests/integration/mod.rs b/cli/tests/integration/mod.rs
index 251fca515..21ffc5627 100644
--- a/cli/tests/integration/mod.rs
+++ b/cli/tests/integration/mod.rs
@@ -1100,7 +1100,7 @@ fn basic_auth_tokens() {
   eprintln!("{}", stderr_str);
 
   assert!(stderr_str.contains(
-    "Import 'http://127.0.0.1:4554/001_hello.js' failed: 404 Not Found"
+    "Import 'http://127.0.0.1:4554/001_hello.js' failed, not found."
   ));
 
   let output = util::deno_cmd()
diff --git a/cli/tests/integration/run_tests.rs b/cli/tests/integration/run_tests.rs
index f290c6e62..214eb8ece 100644
--- a/cli/tests/integration/run_tests.rs
+++ b/cli/tests/integration/run_tests.rs
@@ -1215,6 +1215,118 @@ itest!(jsx_import_from_ts {
   output: "jsx_import_from_ts.ts.out",
 });
 
+itest!(jsx_import_source_pragma {
+  args: "run --reload jsx_import_source_pragma.tsx",
+  output: "jsx_import_source.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_pragma_with_config {
+  args: "run --reload --config jsx/deno-jsx.jsonc jsx_import_source_pragma.tsx",
+  output: "jsx_import_source.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_pragma_with_dev_config {
+  args:
+    "run --reload --config jsx/deno-jsxdev.jsonc jsx_import_source_pragma.tsx",
+  output: "jsx_import_source_dev.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_no_pragma {
+  args:
+    "run --reload --config jsx/deno-jsx.jsonc jsx_import_source_no_pragma.tsx",
+  output: "jsx_import_source.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_no_pragma_dev {
+  args: "run --reload --config jsx/deno-jsxdev.jsonc jsx_import_source_no_pragma.tsx",
+  output: "jsx_import_source_dev.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_pragma_import_map {
+  args: "run --reload --import-map jsx/import-map.json jsx_import_source_pragma_import_map.tsx",
+  output: "jsx_import_source_import_map.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_pragma_import_map_dev {
+  args: "run --reload --import-map jsx/import-map.json --config jsx/deno-jsxdev-import-map.jsonc jsx_import_source_pragma_import_map.tsx",
+  output: "jsx_import_source_import_map_dev.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_import_map {
+  args: "run --reload --import-map jsx/import-map.json --config jsx/deno-jsx-import-map.jsonc jsx_import_source_no_pragma.tsx",
+  output: "jsx_import_source_import_map.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_import_map_dev {
+  args: "run --reload --import-map jsx/import-map.json --config jsx/deno-jsxdev-import-map.jsonc jsx_import_source_no_pragma.tsx",
+  output: "jsx_import_source_import_map_dev.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_pragma_no_check {
+  args: "run --reload --no-check jsx_import_source_pragma.tsx",
+  output: "jsx_import_source.out",
+  http_server: true,
+});
+
+itest!(jsx_import_source_pragma_with_config_no_check {
+  args: "run --reload --config jsx/deno-jsx.jsonc --no-check jsx_import_source_pragma.tsx",
+  output: "jsx_import_source.out",
+  http_server: true,
+});
+
+// itest!(jsx_import_source_pragma_with_dev_config_no_check {
+//   args:
+//     "run --reload --config jsx/deno-jsxdev.jsonc --no-check jsx_import_source_pragma.tsx",
+//   output: "jsx_import_source_dev.out",
+//   http_server: true,
+// });
+
+itest!(jsx_import_source_no_pragma_no_check {
+  args:
+    "run --reload --config jsx/deno-jsx.jsonc --no-check jsx_import_source_no_pragma.tsx",
+  output: "jsx_import_source.out",
+  http_server: true,
+});
+
+// itest!(jsx_import_source_no_pragma_dev_no_check {
+//   args: "run --reload --config jsx/deno-jsxdev.jsonc --no-check jsx_import_source_no_pragma.tsx",
+//   output: "jsx_import_source_dev.out",
+//   http_server: true,
+// });
+
+itest!(jsx_import_source_pragma_import_map_no_check {
+  args: "run --reload --import-map jsx/import-map.json --no-check jsx_import_source_pragma_import_map.tsx",
+  output: "jsx_import_source_import_map.out",
+  http_server: true,
+});
+
+// itest!(jsx_import_source_pragma_import_map_dev_no_check {
+//   args: "run --reload --import-map jsx/import-map.json --config jsx/deno-jsxdev-import-map.jsonc --no-check jsx_import_source_pragma_import_map.tsx",
+//   output: "jsx_import_source_import_map_dev.out",
+//   http_server: true,
+// });
+
+itest!(jsx_import_source_import_map_no_check {
+  args: "run --reload --import-map jsx/import-map.json --config jsx/deno-jsx-import-map.jsonc --no-check jsx_import_source_no_pragma.tsx",
+  output: "jsx_import_source_import_map.out",
+  http_server: true,
+});
+
+// itest!(jsx_import_source_import_map_dev_no_check {
+//   args: "run --reload --import-map jsx/import-map.json --config jsx/deno-jsxdev-import-map.jsonc --no-check jsx_import_source_no_pragma.tsx",
+//   output: "jsx_import_source_import_map_dev.out",
+//   http_server: true,
+// });
+
 // TODO(#11128): Flaky. Re-enable later.
 // itest!(single_compile_with_reload {
 //   args: "run --reload --allow-read single_compile_with_reload.ts",
diff --git a/cli/tests/testdata/compiler_api_test.ts b/cli/tests/testdata/compiler_api_test.ts
index 9870908d1..42d6f54eb 100644
--- a/cli/tests/testdata/compiler_api_test.ts
+++ b/cli/tests/testdata/compiler_api_test.ts
@@ -557,3 +557,81 @@ Deno.test({
     assertEquals(sourceMap.sourcesContent.length, 1);
   },
 });
+
+Deno.test({
+  name: "Deno.emit() - JSX import source pragma",
+  async fn() {
+    const { files } = await Deno.emit(
+      "file:///a.tsx",
+      {
+        sources: {
+          "file:///a.tsx": `/** @jsxImportSource https://example.com/jsx */
+          
+          export function App() {
+            return (
+              <div><></></div>
+            );
+          }`,
+          "https://example.com/jsx/jsx-runtime": `export function jsx(
+            _type,
+            _props,
+            _key,
+            _source,
+            _self,
+          ) {}
+          export const jsxs = jsx;
+          export const jsxDEV = jsx;
+          export const Fragment = Symbol("Fragment");
+          console.log("imported", import.meta.url);
+          `,
+        },
+      },
+    );
+    assert(files["file:///a.tsx.js"]);
+    assert(
+      files["file:///a.tsx.js"].startsWith(
+        `import { Fragment as _Fragment, jsx as _jsx } from "https://example.com/jsx/jsx-runtime";\n`,
+      ),
+    );
+  },
+});
+
+Deno.test({
+  name: "Deno.emit() - JSX import source no pragma",
+  async fn() {
+    const { files } = await Deno.emit(
+      "file:///a.tsx",
+      {
+        compilerOptions: {
+          jsx: "react-jsx",
+          jsxImportSource: "https://example.com/jsx",
+        },
+        sources: {
+          "file:///a.tsx": `export function App() {
+            return (
+              <div><></></div>
+            );
+          }`,
+          "https://example.com/jsx/jsx-runtime": `export function jsx(
+            _type,
+            _props,
+            _key,
+            _source,
+            _self,
+          ) {}
+          export const jsxs = jsx;
+          export const jsxDEV = jsx;
+          export const Fragment = Symbol("Fragment");
+          console.log("imported", import.meta.url);
+          `,
+        },
+      },
+    );
+    assert(files["file:///a.tsx.js"]);
+    assert(
+      files["file:///a.tsx.js"].startsWith(
+        `import { Fragment as _Fragment, jsx as _jsx } from "https://example.com/jsx/jsx-runtime";\n`,
+      ),
+    );
+  },
+});
diff --git a/cli/tests/testdata/jsx/deno-jsx-import-map.jsonc b/cli/tests/testdata/jsx/deno-jsx-import-map.jsonc
new file mode 100644
index 000000000..5adbfa8b5
--- /dev/null
+++ b/cli/tests/testdata/jsx/deno-jsx-import-map.jsonc
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "jsx"
+  }
+}
diff --git a/cli/tests/testdata/jsx/deno-jsx.jsonc b/cli/tests/testdata/jsx/deno-jsx.jsonc
new file mode 100644
index 000000000..311409ea3
--- /dev/null
+++ b/cli/tests/testdata/jsx/deno-jsx.jsonc
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "http://localhost:4545/jsx"
+  }
+}
diff --git a/cli/tests/testdata/jsx/deno-jsxdev-import-map.jsonc b/cli/tests/testdata/jsx/deno-jsxdev-import-map.jsonc
new file mode 100644
index 000000000..7481d5a2d
--- /dev/null
+++ b/cli/tests/testdata/jsx/deno-jsxdev-import-map.jsonc
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsxdev",
+    "jsxImportSource": "jsx"
+  }
+}
diff --git a/cli/tests/testdata/jsx/deno-jsxdev.jsonc b/cli/tests/testdata/jsx/deno-jsxdev.jsonc
new file mode 100644
index 000000000..ae5bdf9f1
--- /dev/null
+++ b/cli/tests/testdata/jsx/deno-jsxdev.jsonc
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsxdev",
+    "jsxImportSource": "http://localhost:4545/jsx"
+  }
+}
diff --git a/cli/tests/testdata/jsx/import-map.json b/cli/tests/testdata/jsx/import-map.json
new file mode 100644
index 000000000..baab76f20
--- /dev/null
+++ b/cli/tests/testdata/jsx/import-map.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "jsx/jsx-runtime": "http://localhost:4545/jsx/jsx-runtime/index.ts",
+    "jsx/jsx-dev-runtime": "http://localhost:4545/jsx/jsx-dev-runtime/index.ts"
+  }
+}
diff --git a/cli/tests/testdata/jsx/jsx-dev-runtime/index.ts b/cli/tests/testdata/jsx/jsx-dev-runtime/index.ts
new file mode 100644
index 000000000..15e2029c8
--- /dev/null
+++ b/cli/tests/testdata/jsx/jsx-dev-runtime/index.ts
@@ -0,0 +1,12 @@
+// deno-lint-ignore-file no-explicit-any
+export function jsx(
+  _type: any,
+  _props: any,
+  _key: any,
+  _source: any,
+  _self: any,
+) {}
+export const jsxs = jsx;
+export const jsxDEV = jsx;
+export const Fragment = Symbol("Fragment");
+console.log("imported", import.meta.url);
diff --git a/cli/tests/testdata/jsx/jsx-runtime/index.ts b/cli/tests/testdata/jsx/jsx-runtime/index.ts
new file mode 100644
index 000000000..15e2029c8
--- /dev/null
+++ b/cli/tests/testdata/jsx/jsx-runtime/index.ts
@@ -0,0 +1,12 @@
+// deno-lint-ignore-file no-explicit-any
+export function jsx(
+  _type: any,
+  _props: any,
+  _key: any,
+  _source: any,
+  _self: any,
+) {}
+export const jsxs = jsx;
+export const jsxDEV = jsx;
+export const Fragment = Symbol("Fragment");
+console.log("imported", import.meta.url);
diff --git a/cli/tests/testdata/jsx_import_source.out b/cli/tests/testdata/jsx_import_source.out
new file mode 100644
index 000000000..b9555987a
--- /dev/null
+++ b/cli/tests/testdata/jsx_import_source.out
@@ -0,0 +1,2 @@
+[WILDCARD]
+imported http://localhost:4545/jsx/jsx-runtime
diff --git a/cli/tests/testdata/jsx_import_source_dev.out b/cli/tests/testdata/jsx_import_source_dev.out
new file mode 100644
index 000000000..38d7a12f0
--- /dev/null
+++ b/cli/tests/testdata/jsx_import_source_dev.out
@@ -0,0 +1,2 @@
+[WILDCARD]
+imported http://localhost:4545/jsx/jsx-dev-runtime
diff --git a/cli/tests/testdata/jsx_import_source_import_map.out b/cli/tests/testdata/jsx_import_source_import_map.out
new file mode 100644
index 000000000..0d3238967
--- /dev/null
+++ b/cli/tests/testdata/jsx_import_source_import_map.out
@@ -0,0 +1,2 @@
+[WILDCARD]
+imported http://localhost:4545/jsx/jsx-runtime/index.ts
diff --git a/cli/tests/testdata/jsx_import_source_import_map_dev.out b/cli/tests/testdata/jsx_import_source_import_map_dev.out
new file mode 100644
index 000000000..56f514d90
--- /dev/null
+++ b/cli/tests/testdata/jsx_import_source_import_map_dev.out
@@ -0,0 +1,2 @@
+[WILDCARD]
+imported http://localhost:4545/jsx/jsx-dev-runtime/index.ts
diff --git a/cli/tests/testdata/jsx_import_source_no_pragma.tsx b/cli/tests/testdata/jsx_import_source_no_pragma.tsx
new file mode 100644
index 000000000..2c756054f
--- /dev/null
+++ b/cli/tests/testdata/jsx_import_source_no_pragma.tsx
@@ -0,0 +1,7 @@
+function A() {
+  return "hello";
+}
+
+export function B() {
+  return <A></A>;
+}
diff --git a/cli/tests/testdata/jsx_import_source_pragma.tsx b/cli/tests/testdata/jsx_import_source_pragma.tsx
new file mode 100644
index 000000000..c19e53d4f
--- /dev/null
+++ b/cli/tests/testdata/jsx_import_source_pragma.tsx
@@ -0,0 +1,9 @@
+/** @jsxImportSource http://localhost:4545/jsx */
+
+function A() {
+  return "hello";
+}
+
+export function B() {
+  return <A></A>;
+}
diff --git a/cli/tests/testdata/jsx_import_source_pragma_import_map.tsx b/cli/tests/testdata/jsx_import_source_pragma_import_map.tsx
new file mode 100644
index 000000000..548365f18
--- /dev/null
+++ b/cli/tests/testdata/jsx_import_source_pragma_import_map.tsx
@@ -0,0 +1,9 @@
+/** @jsxImportSource jsx */
+
+function A() {
+  return "hello";
+}
+
+export function B() {
+  return <A></A>;
+}