feat: add support for "react-jsx" and jsxImportSource (#161)

Co-authored-by: benStre <strehle.benedikt@gmail.com>

js/mod.ts

@@ -129,14 +129,17 @@ export interface CompilerOptions {
   inlineSources?: boolean;
   /** Controls how JSX constructs are emitted in JavaScript files. This only
    * affects output of JS files that started in `.jsx` or `.tsx` files. */
-  jsx?: "jsx" | "preserve";
+  jsx?: "preserve" | "react-jsx" | "react-jsxdev" | "react-native" | "react";
   /** Changes the function called in `.js` files when compiling JSX Elements
    * using the classic JSX runtime. The most common change is to use `"h"` or
    * `"preact.h"`. */
   jsxFactory?: string;
   /** Specify the JSX fragment factory function to use when targeting react JSX
    * emit with jsxFactory compiler option is specified, e.g. `Fragment`. */
   jsxFragmentFactory?: string;
+  /** The string module specifier to implicitly import JSX factories from when
+   * transpiling JSX. */
+  jsxImportSource?: string;
   /** Enables the generation of sourcemap files. */
   sourceMap?: boolean;
 }

testdata/jsx/main.tsx

@@ -0,0 +1 @@
+const helloWorld = <div id="helloWorld"></div>;

tests/__snapshots__/jsx/jsx_default/bundle.js

@@ -0,0 +1,3 @@
+React.createElement("div", {
+    id: "helloWorld"
+});

tests/__snapshots__/jsx/jsx_default/transpile/deno.json

@@ -0,0 +1,3 @@
+{
+  "imports": {}
+}

tests/__snapshots__/jsx/jsx_default/transpile/local/jsx/main.tsx

@@ -0,0 +1,3 @@
+const helloWorld = /*#__PURE__*/ React.createElement("div", {
+  id: "helloWorld"
+});

tests/__snapshots__/jsx/jsx_default/transpile/modules.json

@@ -0,0 +1,3 @@
+{
+  "file:///jsx/main.tsx": "local/jsx/main.tsx"
+}

tests/__snapshots__/jsx/jsx_type_preserve/bundle.js

@@ -0,0 +1 @@
+<div id="helloWorld"></div>;

tests/__snapshots__/jsx/jsx_type_preserve/transpile/deno.json

@@ -0,0 +1,3 @@
+{
+  "imports": {}
+}

tests/__snapshots__/jsx/jsx_type_preserve/transpile/local/jsx/main.tsx

@@ -0,0 +1 @@
+const helloWorld = <div id="helloWorld"></div>;

tests/__snapshots__/jsx/jsx_type_preserve/transpile/modules.json

@@ -0,0 +1,3 @@
+{
+  "file:///jsx/main.tsx": "local/jsx/main.tsx"
+}

tests/__snapshots__/jsx/jsx_type_react/bundle.js

@@ -0,0 +1,3 @@
+React.createElement("div", {
+    id: "helloWorld"
+});

tests/__snapshots__/jsx/jsx_type_react/transpile/deno.json

@@ -0,0 +1,3 @@
+{
+  "imports": {}
+}

tests/__snapshots__/jsx/jsx_type_react/transpile/local/jsx/main.tsx

@@ -0,0 +1,3 @@
+const helloWorld = /*#__PURE__*/ React.createElement("div", {
+  id: "helloWorld"
+});

tests/__snapshots__/jsx/jsx_type_react/transpile/modules.json

@@ -0,0 +1,3 @@
+{
+  "file:///jsx/main.tsx": "local/jsx/main.tsx"
+}

tests/__snapshots__/jsx/jsx_type_reactjsx/deno.json

@@ -0,0 +1,3 @@
+{
+  "imports": {}
+}

tests/__snapshots__/jsx/jsx_type_reactjsx/local/jsx/main.tsx

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "/jsx-runtime";
+const helloWorld = /*#__PURE__*/ _jsx("div", {
+  id: "helloWorld"
+});

tests/__snapshots__/jsx/jsx_type_reactjsx/modules.json

@@ -0,0 +1,3 @@
+{
+  "file:///jsx/main.tsx": "local/jsx/main.tsx"
+}

tests/__snapshots__/jsx/jsx_type_reactjsx_with_custom_import_source/deno.json

@@ -0,0 +1,3 @@
+{
+  "imports": {}
+}

tests/__snapshots__/jsx/jsx_type_reactjsx_with_custom_import_source/local/jsx/main.tsx

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "example/jsx-runtime";
+const helloWorld = /*#__PURE__*/ _jsx("div", {
+  id: "helloWorld"
+});

tests/__snapshots__/jsx/jsx_type_reactjsx_with_custom_import_source/modules.json

@@ -0,0 +1,3 @@
+{
+  "file:///jsx/main.tsx": "local/jsx/main.tsx"
+}

tests/__snapshots__/jsx/jsx_type_reactnative/bundle.js

@@ -0,0 +1 @@
+<div id="helloWorld"></div>;

tests/__snapshots__/jsx/jsx_type_reactnative/transpile/deno.json

@@ -0,0 +1,3 @@
+{
+  "imports": {}
+}

tests/__snapshots__/jsx/jsx_type_reactnative/transpile/local/jsx/main.tsx

@@ -0,0 +1 @@
+const helloWorld = <div id="helloWorld"></div>;

tests/__snapshots__/jsx/jsx_type_reactnative/transpile/modules.json

@@ -0,0 +1,3 @@
+{
+  "file:///jsx/main.tsx": "local/jsx/main.tsx"
+}

tests/jsx_test.ts

@@ -0,0 +1,73 @@
+import {
+  resolveFixture,
+  testTranspile,
+  testTranspileAndBundle,
+} from "./utils.ts";
+
+Deno.test({
+  name: "jsx default",
+  fn: testTranspileAndBundle(
+    resolveFixture("jsx/main.tsx"),
+  ),
+});
+
+Deno.test({
+  name: "jsx type react",
+  fn: testTranspileAndBundle(
+    resolveFixture("jsx/main.tsx"),
+    {
+      compilerOptions: {
+        jsx: "react",
+      },
+    },
+  ),
+});
+
+Deno.test({
+  name: "jsx type react-native",
+  fn: testTranspileAndBundle(
+    resolveFixture("jsx/main.tsx"),
+    {
+      compilerOptions: {
+        jsx: "react-native",
+      },
+    },
+  ),
+});
+
+Deno.test({
+  name: "jsx type preserve",
+  fn: testTranspileAndBundle(
+    resolveFixture("jsx/main.tsx"),
+    {
+      compilerOptions: {
+        jsx: "preserve",
+      },
+    },
+  ),
+});
+
+Deno.test({
+  name: "jsx type react-jsx",
+  fn: testTranspile(
+    resolveFixture("jsx/main.tsx"),
+    {
+      compilerOptions: {
+        jsx: "react-jsx",
+      },
+    },
+  ),
+});
+
+Deno.test({
+  name: "jsx type react-jsx with custom import source",
+  fn: testTranspile(
+    resolveFixture("jsx/main.tsx"),
+    {
+      compilerOptions: {
+        jsx: "react-jsx",
+        jsxImportSource: "example",
+      },
+    },
+  ),
+});

wasm/src/lib.rs

@@ -30,6 +30,7 @@ pub struct CompilerOptions {
   pub jsx: String,
   pub jsx_factory: String,
   pub jsx_fragment_factory: String,
+  pub jsx_import_source: Option<String>,
   pub source_map: bool,
 }
 
@@ -45,6 +46,7 @@ impl Default for CompilerOptions {
       jsx: "react".to_string(),
       jsx_factory: "React.createElement".to_string(),
       jsx_fragment_factory: "React.Fragment".to_string(),
+      jsx_import_source: None,
       source_map: false,
     }
   }
@@ -62,19 +64,22 @@ impl From<CompilerOptions> for EmitOptions {
     Self {
       use_decorators_proposal: !options.experimental_decorators,
       use_ts_decorators: options.experimental_decorators,
-      precompile_jsx: false,
       emit_metadata: options.emit_decorator_metadata,
       imports_not_used_as_values,
       inline_source_map: options.inline_source_map,
       inline_sources: options.inline_sources,
       jsx_factory: options.jsx_factory,
       jsx_fragment_factory: options.jsx_fragment_factory,
-      transform_jsx: options.jsx == "react",
+      transform_jsx: options.jsx == "react"
+        || options.jsx == "react-jsx"
+        || options.jsx == "react-jsxdev",
       var_decl_imports: false,
       source_map: options.source_map,
-      jsx_automatic: false,
-      jsx_development: false,
-      jsx_import_source: None,
+      jsx_automatic: options.jsx == "react-jsx"
+        || options.jsx == "react-jsxdev",
+      jsx_development: options.jsx == "react-jsxdev",
+      jsx_import_source: options.jsx_import_source,
+      precompile_jsx: false,
     }
   }
 }