feat(pack): support config jsx runtime by tsconfig

crates/pack-core/src/client/context.rs

@@ -278,7 +278,7 @@ pub async fn get_client_module_options_context(
     } else {
         false
     };
-    let jsx_runtime_options = get_jsx_transform_options(
+    let jsx_transform_options = get_jsx_transform_options(
         project_path.clone(),
         mode,
         false,
@@ -300,7 +300,6 @@ pub async fn get_client_module_options_context(
 
     let foreign_enable_webpack_loaders =
         *webpack_loader_options(project_path.clone(), config, foreign_conditions).await?;
-
     // Now creates a webpack rules that applies to all codes.
     let enable_webpack_loaders =
         *webpack_loader_options(project_path.clone(), config, loader_conditions).await?;
@@ -378,10 +377,6 @@ pub async fn get_client_module_options_context(
             enable_typeof_window_inlining: Some(TypeofWindow::Object),
             source_maps,
             import_externals: *config.import_externals().await?,
-            enable_typescript_transform: Some(
-                TypescriptTransformOptions::default().resolved_cell(),
-            ),
-            enable_jsx: Some(JsxTransformOptions::default().resolved_cell()),
             ignore_dynamic_requests: true,
             ..Default::default()
         },
@@ -406,6 +401,8 @@ pub async fn get_client_module_options_context(
     let foreign_codes_options_context = ModuleOptionsContext {
         ecmascript: EcmascriptOptionsContext {
             enable_typeof_window_inlining: None,
+            enable_jsx: Some(jsx_transform_options),
+            enable_typescript_transform: Some(tsconfig),
             ..module_options_context.ecmascript
         },
         enable_webpack_loaders: foreign_enable_webpack_loaders,
@@ -417,6 +414,10 @@ pub async fn get_client_module_options_context(
 
     let internal_context = ModuleOptionsContext {
         ecmascript: EcmascriptOptionsContext {
+            enable_typescript_transform: Some(
+                TypescriptTransformOptions::default().resolved_cell(),
+            ),
+            enable_jsx: Some(JsxTransformOptions::default().resolved_cell()),
             ..module_options_context.ecmascript.clone()
         },
         enable_postcss_transform: None,
@@ -428,7 +429,7 @@ pub async fn get_client_module_options_context(
         // we try resolve it once at the root and pass down a context to all
         // the modules.
         ecmascript: EcmascriptOptionsContext {
-            enable_jsx: Some(jsx_runtime_options),
+            enable_jsx: Some(jsx_transform_options),
             enable_typescript_transform: Some(tsconfig),
             enable_decorators: Some(decorators_options.to_resolved().await?),
             ..module_options_context.ecmascript.clone()

crates/pack-core/src/transform_options.rs

@@ -124,10 +124,6 @@ pub async fn get_jsx_transform_options(
 
     let is_emotion_enabled = config.styles().await?.emotion.is_some();
 
-    // [NOTE]: ref: WEB-901
-    // next.js does not allow to overriding react runtime config via tsconfig /
-    // jsconfig, it forces overrides into automatic runtime instead.
-    // [TODO]: we need to emit / validate config message like next.js devserver does
     let react_transform_options = JsxTransformOptions {
         development: mode.await?.is_react_development(),
         // https://github.com/vercel/next.js/blob/3dc2c1c7f8441cdee31da9f7e0986d654c7fd2e7/packages/next/src/build/swc/options.ts#L112
@@ -147,12 +143,23 @@ pub async fn get_jsx_transform_options(
                 .as_str()
                 .map(|s| s.into());
 
+            // Map TypeScript jsx compiler option to JSX runtime
+            // TypeScript jsx values: "react" -> classic, "react-jsx" | "react-jsxdev" -> automatic
+            let jsx_runtime = json["compilerOptions"]["jsx"]
+                .as_str()
+                .and_then(|jsx| match jsx {
+                    "react" => Some("classic".into()),
+                    "react-jsx" | "react-jsxdev" => Some("automatic".into()),
+                    _ => None,
+                });
+
             Some(JsxTransformOptions {
                 import_source: if jsx_import_source.is_some() {
                     jsx_import_source
                 } else {
                     react_transform_options.import_source.clone()
                 },
+                runtime: jsx_runtime.or_else(|| react_transform_options.runtime.clone()),
                 ..react_transform_options.clone()
             })
         })

crates/pack-tests/tests/snapshot/basic/foreign_jsx_transform/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}