Fix handling of different JSX pragmas in Typescript (#7878)

Fixes #7631

Before, if a JSX pragma was imported, the import was removed because
it did not think it was used as a value. This changes it so it knows
that the import is being used as a JSX pragma

packages/babel-plugin-transform-typescript/README.md

@@ -56,6 +56,15 @@ require("@babel/core").transform("code", {
   plugins: ["@babel/plugin-transform-typescript"]
 });
 ```
+## Options
+
+### `jsxPragma`
+
+`string`
+
+Replace the function used when compiling JSX expressions.
+
+This is so that we know that the import is not a type import, and should not be removed
 
 [const_enum]: https://www.typescriptlang.org/docs/handbook/enums.html#const-enums
 [namespace]: https://www.typescriptlang.org/docs/handbook/namespaces.html

packages/babel-plugin-transform-typescript/src/index.js

@@ -20,7 +20,7 @@ interface State {
   programPath: any;
 }
 
-export default declare(api => {
+export default declare((api, { jsxPragma = "React" }) => {
   api.assertVersion(7);
 
   return {
@@ -269,11 +269,11 @@ export default declare(api => {
       }
     }
 
-    if (binding.identifier.name != "React") {
+    if (binding.identifier.name !== jsxPragma) {
       return true;
     }
 
-    // "React" is referenced as a value if there are any JSX elements in the code.
+    // "React" or the JSX pragma is referenced as a value if there are any JSX elements in the code.
     let sourceFileHasJsx = false;
     programPath.traverse({
       JSXElement() {

packages/babel-plugin-transform-typescript/test/fixtures/imports/elide-preact-no/input.mjs

@@ -0,0 +1,3 @@
+// Don't elide Preact if a JSX element appears somewhere.
+import { h, render } from "preact";
+<div></div>;

packages/babel-plugin-transform-typescript/test/fixtures/imports/elide-preact-no/options.json

@@ -0,0 +1,3 @@
+{
+    "plugins": ["syntax-jsx", ["transform-typescript", { "jsxPragma": "h" }]]
+}

packages/babel-plugin-transform-typescript/test/fixtures/imports/elide-preact-no/output.mjs

@@ -0,0 +1,3 @@
+// Don't elide Preact if a JSX element appears somewhere.
+import { h } from "preact";
+<div></div>;

packages/babel-plugin-transform-typescript/test/fixtures/imports/elide-preact/input.mjs

@@ -0,0 +1,2 @@
+import { FooBar, h } from "preact";
+const x: FooBar = 0;

packages/babel-plugin-transform-typescript/test/fixtures/imports/elide-preact/output.mjs

@@ -0,0 +1 @@
+const x = 0;

packages/babel-plugin-transform-typescript/test/fixtures/imports/elide-react-no-2/options.json

@@ -1,3 +1,3 @@
 {
-    "plugins": ["syntax-jsx"]
+    "plugins": ["syntax-jsx", "transform-typescript"]
 }

packages/babel-plugin-transform-typescript/test/fixtures/imports/elide-react-no/options.json

@@ -1,3 +1,3 @@
 {
-    "plugins": ["syntax-jsx"]
+    "plugins": ["syntax-jsx", "transform-typescript"]
 }