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

Closes #8440

15 files changed, 165 insertions, 0 deletions

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>;
+}