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

Closes #8440

cli/Cargo.toml

@@ -41,8 +41,8 @@ winres = "0.1.11"
 [dependencies]
 deno_ast = { version = "0.5.0", features = ["bundler", "codegen", "dep_graph", "module_specifier", "proposal", "react", "sourcemap", "transforms", "typescript", "view", "visit"] }
 deno_core = { version = "0.105.0", path = "../core" }
-deno_doc = "0.19.0"
-deno_graph = "0.10.0"
+deno_doc = "0.20.0"
+deno_graph = "0.11.1"
 deno_lint = { version = "0.19.0", features = ["docs"] }
 deno_runtime = { version = "0.31.0", path = "../runtime" }
 deno_tls = { version = "0.10.0", path = "../ext/tls" }

cli/ast/mod.rs

@@ -122,15 +122,26 @@ pub struct EmitOptions {
   pub inline_source_map: bool,
   /// Should the sources be inlined in the source map.  Defaults to `true`.
   pub inline_sources: bool,
-  // Should a corresponding .map file be created for the output. This should be
-  // false if inline_source_map is true. Defaults to `false`.
+  /// Should a corresponding .map file be created for the output. This should be
+  /// false if inline_source_map is true. Defaults to `false`.
   pub source_map: bool,
+  /// `true` if the program should use an implicit JSX import source/the "new"
+  /// JSX transforms.
+  pub jsx_automatic: bool,
+  /// If JSX is automatic, if it is in development mode, meaning that it should
+  /// import `jsx-dev-runtime` and transform JSX using `jsxDEV` import from the
+  /// JSX import source as well as provide additional debug information to the
+  /// JSX factory.
+  pub jsx_development: bool,
   /// When transforming JSX, what value should be used for the JSX factory.
   /// Defaults to `React.createElement`.
   pub jsx_factory: String,
   /// When transforming JSX, what value should be used for the JSX fragment
   /// factory.  Defaults to `React.Fragment`.
   pub jsx_fragment_factory: String,
+  /// The string module specifier to implicitly import JSX factories from when
+  /// transpiling JSX.
+  pub jsx_import_source: Option<String>,
   /// Should JSX be transformed or preserved.  Defaults to `true`.
   pub transform_jsx: bool,
   /// Should import declarations be transformed to variable declarations.
@@ -146,8 +157,11 @@ impl Default for EmitOptions {
       inline_source_map: true,
       inline_sources: true,
       source_map: false,
+      jsx_automatic: false,
+      jsx_development: false,
       jsx_factory: "React.createElement".into(),
       jsx_fragment_factory: "React.Fragment".into(),
+      jsx_import_source: None,
       transform_jsx: true,
       repl_imports: false,
     }
@@ -164,15 +178,25 @@ impl From<config_file::TsConfig> for EmitOptions {
         "error" => ImportsNotUsedAsValues::Error,
         _ => ImportsNotUsedAsValues::Remove,
       };
+    let (transform_jsx, jsx_automatic, jsx_development) =
+      match options.jsx.as_str() {
+        "react" => (true, false, false),
+        "react-jsx" => (true, true, false),
+        "react-jsxdev" => (true, true, true),
+        _ => (false, false, false),
+      };
     EmitOptions {
       emit_metadata: options.emit_decorator_metadata,
       imports_not_used_as_values,
       inline_source_map: options.inline_source_map,
       inline_sources: options.inline_sources,
       source_map: options.source_map,
+      jsx_automatic,
+      jsx_development,
       jsx_factory: options.jsx_factory,
       jsx_fragment_factory: options.jsx_fragment_factory,
-      transform_jsx: options.jsx == "react",
+      jsx_import_source: options.jsx_import_source,
+      transform_jsx,
       repl_imports: false,
     }
   }
@@ -355,6 +379,13 @@ fn fold_program(
         // this will use `Object.assign()` instead of the `_extends` helper
         // when spreading props.
         use_builtins: true,
+        runtime: if options.jsx_automatic {
+          Some(react::Runtime::Automatic)
+        } else {
+          None
+        },
+        development: options.jsx_development,
+        import_source: options.jsx_import_source.clone().unwrap_or_default(),
         ..Default::default()
       },
       top_level_mark,
@@ -495,6 +526,112 @@ function App() {
     assert_eq!(&code[..expected.len()], expected);
   }
 
+  #[test]
+  fn test_transpile_jsx_import_source_pragma() {
+    let specifier = resolve_url_or_path("https://deno.land/x/mod.tsx")
+      .expect("could not resolve specifier");
+    let source = r#"
+/** @jsxImportSource jsx_lib */
+
+function App() {
+  return (
+    <div><></></div>
+  );
+}"#;
+    let module = parse_module(ParseParams {
+      specifier: specifier.as_str().to_string(),
+      source: SourceTextInfo::from_string(source.to_string()),
+      media_type: deno_ast::MediaType::Jsx,
+      capture_tokens: false,
+      maybe_syntax: None,
+      scope_analysis: true,
+    })
+    .unwrap();
+    let (code, _) = transpile(&module, &EmitOptions::default()).unwrap();
+    let expected = r#"import { jsx as _jsx, Fragment as _Fragment } from "jsx_lib/jsx-runtime";
+/** @jsxImportSource jsx_lib */ function App() {
+    return(/*#__PURE__*/ _jsx("div", {
+        children: /*#__PURE__*/ _jsx(_Fragment, {
+        })
+    }));
+"#;
+    assert_eq!(&code[..expected.len()], expected);
+  }
+
+  #[test]
+  fn test_transpile_jsx_import_source_no_pragma() {
+    let specifier = resolve_url_or_path("https://deno.land/x/mod.tsx")
+      .expect("could not resolve specifier");
+    let source = r#"
+function App() {
+  return (
+    <div><></></div>
+  );
+}"#;
+    let module = parse_module(ParseParams {
+      specifier: specifier.as_str().to_string(),
+      source: SourceTextInfo::from_string(source.to_string()),
+      media_type: deno_ast::MediaType::Jsx,
+      capture_tokens: false,
+      maybe_syntax: None,
+      scope_analysis: true,
+    })
+    .unwrap();
+    let emit_options = EmitOptions {
+      jsx_automatic: true,
+      jsx_import_source: Some("jsx_lib".to_string()),
+      ..Default::default()
+    };
+    let (code, _) = transpile(&module, &emit_options).unwrap();
+    let expected = r#"import { jsx as _jsx, Fragment as _Fragment } from "jsx_lib/jsx-runtime";
+function App() {
+    return(/*#__PURE__*/ _jsx("div", {
+        children: /*#__PURE__*/ _jsx(_Fragment, {
+        })
+    }));
+}
+"#;
+    assert_eq!(&code[..expected.len()], expected);
+  }
+
+  // TODO(@kitsonk) https://github.com/swc-project/swc/issues/2656
+  //   #[test]
+  //   fn test_transpile_jsx_import_source_no_pragma_dev() {
+  //     let specifier = resolve_url_or_path("https://deno.land/x/mod.tsx")
+  //       .expect("could not resolve specifier");
+  //     let source = r#"
+  // function App() {
+  //   return (
+  //     <div><></></div>
+  //   );
+  // }"#;
+  //     let module = parse_module(ParseParams {
+  //       specifier: specifier.as_str().to_string(),
+  //       source: SourceTextInfo::from_string(source.to_string()),
+  //       media_type: deno_ast::MediaType::Jsx,
+  //       capture_tokens: false,
+  //       maybe_syntax: None,
+  //       scope_analysis: true,
+  //     })
+  //     .unwrap();
+  //     let emit_options = EmitOptions {
+  //       jsx_automatic: true,
+  //       jsx_import_source: Some("jsx_lib".to_string()),
+  //       jsx_development: true,
+  //       ..Default::default()
+  //     };
+  //     let (code, _) = transpile(&module, &emit_options).unwrap();
+  //     let expected = r#"import { jsx as _jsx, Fragment as _Fragment } from "jsx_lib/jsx-dev-runtime";
+  // function App() {
+  //     return(/*#__PURE__*/ _jsx("div", {
+  //         children: /*#__PURE__*/ _jsx(_Fragment, {
+  //         })
+  //     }));
+  // }
+  // "#;
+  //     assert_eq!(&code[..expected.len()], expected);
+  //   }
+
   #[test]
   fn test_transpile_decorators() {
     let specifier = resolve_url_or_path("https://deno.land/x/mod.ts")

cli/compat/esm_resolver.rs

@@ -14,12 +14,12 @@ use regex::Regex;
 use std::path::PathBuf;
 
 #[derive(Debug, Default)]
-pub(crate) struct NodeEsmResolver<'a> {
-  maybe_import_map_resolver: Option<ImportMapResolver<'a>>,
+pub(crate) struct NodeEsmResolver {
+  maybe_import_map_resolver: Option<ImportMapResolver>,
 }
 
-impl<'a> NodeEsmResolver<'a> {
-  pub fn new(maybe_import_map_resolver: Option<ImportMapResolver<'a>>) -> Self {
+impl NodeEsmResolver {
+  pub fn new(maybe_import_map_resolver: Option<ImportMapResolver>) -> Self {
     Self {
       maybe_import_map_resolver,
     }
@@ -30,7 +30,7 @@ impl<'a> NodeEsmResolver<'a> {
   }
 }
 
-impl Resolver for NodeEsmResolver<'_> {
+impl Resolver for NodeEsmResolver {
   fn resolve(
     &self,
     specifier: &str,

cli/config_file.rs

@@ -1,7 +1,9 @@
 // Copyright 2018-2021 the Deno authors. All rights reserved. MIT license.
 
 use crate::fs_util::canonicalize_path;
+
 use deno_core::error::anyhow;
+use deno_core::error::custom_error;
 use deno_core::error::AnyError;
 use deno_core::error::Context;
 use deno_core::serde::Deserialize;
@@ -17,6 +19,9 @@ use std::fmt;
 use std::path::Path;
 use std::path::PathBuf;
 
+pub(crate) type MaybeImportsResult =
+  Result<Option<Vec<(ModuleSpecifier, Vec<String>)>>, AnyError>;
+
 /// The transpile options that are significant out of a user provided tsconfig
 /// file, that we want to deserialize out of the final config for a transpile.
 #[derive(Debug, Deserialize)]
@@ -31,13 +36,16 @@ pub struct EmitConfigOptions {
   pub jsx: String,
   pub jsx_factory: String,
   pub jsx_fragment_factory: String,
+  pub jsx_import_source: Option<String>,
 }
 
 /// There are certain compiler options that can impact what modules are part of
 /// a module graph, which need to be deserialized into a structure for analysis.
 #[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct CompilerOptions {
+  pub jsx: Option<String>,
+  pub jsx_import_source: Option<String>,
   pub types: Option<Vec<String>>,
 }
 
@@ -404,15 +412,50 @@ impl ConfigFile {
 
   /// If the configuration file contains "extra" modules (like TypeScript
   /// `"types"`) options, return them as imports to be added to a module graph.
-  pub fn to_maybe_imports(
-    &self,
-  ) -> Option<Vec<(ModuleSpecifier, Vec<String>)>> {
+  pub fn to_maybe_imports(&self) -> MaybeImportsResult {
+    let mut imports = Vec::new();
+    let compiler_options_value =
+      if let Some(value) = self.json.compiler_options.as_ref() {
+        value
+      } else {
+        return Ok(None);
+      };
+    let compiler_options: CompilerOptions =
+      serde_json::from_value(compiler_options_value.clone())?;
+    let referrer = ModuleSpecifier::from_file_path(&self.path)
+      .map_err(|_| custom_error("TypeError", "bad config file specifier"))?;
+    if let Some(types) = compiler_options.types {
+      imports.extend(types);
+    }
+    if compiler_options.jsx == Some("react-jsx".to_string()) {
+      imports.push(format!(
+        "{}/jsx-runtime",
+        compiler_options.jsx_import_source.ok_or_else(|| custom_error("TypeError", "Compiler option 'jsx' set to 'react-jsx', but no 'jsxImportSource' defined."))?
+      ));
+    } else if compiler_options.jsx == Some("react-jsxdev".to_string()) {
+      imports.push(format!(
+        "{}/jsx-dev-runtime",
+        compiler_options.jsx_import_source.ok_or_else(|| custom_error("TypeError", "Compiler option 'jsx' set to 'react-jsxdev', but no 'jsxImportSource' defined."))?
+      ));
+    }
+    if !imports.is_empty() {
+      Ok(Some(vec![(referrer, imports)]))
+    } else {
+      Ok(None)
+    }
+  }
+
+  /// Based on the compiler options in the configuration file, return the
+  /// implied JSX import source module.
+  pub fn to_maybe_jsx_import_source_module(&self) -> Option<String> {
     let compiler_options_value = self.json.compiler_options.as_ref()?;
     let compiler_options: CompilerOptions =
       serde_json::from_value(compiler_options_value.clone()).ok()?;
-    let referrer = ModuleSpecifier::from_file_path(&self.path).ok()?;
-    let types = compiler_options.types?;
-    Some(vec![(referrer, types)])
+    match compiler_options.jsx.as_deref() {
+      Some("react-jsx") => Some("jsx-runtime".to_string()),
+      Some("react-jsxdev") => Some("jsx-dev-runtime".to_string()),
+      _ => None,
+    }
   }
 
   pub fn to_fmt_config(&self) -> Result<Option<FmtConfig>, AnyError> {

cli/dts/lib.deno.unstable.d.ts

@@ -277,15 +277,20 @@ declare namespace Deno {
     /** Emit the source alongside the source maps within a single file; requires
      * `inlineSourceMap` or `sourceMap` to be set. Defaults to `false`. */
     inlineSources?: boolean;
-    /** Support JSX in `.tsx` files: `"react"`, `"preserve"`, `"react-native"`.
+    /** Support JSX in `.tsx` files: `"react"`, `"preserve"`, `"react-native"`,
+     * `"react-jsx", `"react-jsxdev"`.
      * Defaults to `"react"`. */
-    jsx?: "react" | "preserve" | "react-native";
+    jsx?: "react" | "preserve" | "react-native" | "react-jsx" | "react-jsx-dev";
     /** Specify the JSX factory function to use when targeting react JSX emit,
      * e.g. `React.createElement` or `h`. Defaults to `React.createElement`. */
     jsxFactory?: string;
     /** Specify the JSX fragment factory function to use when targeting react
      * JSX emit, e.g. `Fragment`. Defaults to `React.Fragment`. */
     jsxFragmentFactory?: string;
+    /** Declares the module specifier to be used for importing the `jsx` and
+     * `jsxs` factory functions when using jsx as `"react-jsx"` or
+     * `"react-jsxdev"`. Defaults to `"react"`. */
+    jsxImportSource?: string;
     /** Resolve keyof to string valued property names only (no numbers or
      * symbols). Defaults to `false`. */
     keyofStringsOnly?: string;