feat(transformer): add react preset (#2921)

crates/oxc_transformer/src/lib.rs

@@ -9,10 +9,7 @@
 mod compiler_assumptions;
 // Plugins: <https://babeljs.io/docs/plugins-list>
 mod decorators;
-mod react_display_name;
-mod react_jsx;
-mod react_jsx_self;
-mod react_jsx_source;
+mod react;
 mod typescript;
 
 use oxc_allocator::Allocator;
@@ -24,10 +21,10 @@ use oxc_span::SourceType;
 pub use crate::{
     compiler_assumptions::CompilerAssumptions,
     decorators::{Decorators, DecoratorsOptions},
-    react_display_name::{ReactDisplayName, ReactDisplayNameOptions},
-    react_jsx::{ReactJsx, ReactJsxOptions},
-    react_jsx_self::{ReactJsxSelf, ReactJsxSelfOptions},
-    react_jsx_source::{ReactJsxSource, ReactJsxSourceOptions},
+    react::{
+        React, ReactDisplayName, ReactDisplayNameOptions, ReactJsx, ReactJsxSelf, ReactJsxSource,
+        ReactJsxSourceOptions, ReactOptions,
+    },
     typescript::{TypeScript, TypeScriptOptions},
 };
 
@@ -40,12 +37,14 @@ pub struct TransformOptions {
     pub assumptions: CompilerAssumptions,
 
     // Plugins
+    /// [proposal-decorators](https://babeljs.io/docs/babel-plugin-proposal-decorators)
     pub decorators: DecoratorsOptions,
+
+    /// [preset-typescript](https://babeljs.io/docs/babel-preset-typescript)
     pub typescript: TypeScriptOptions,
-    pub react_jsx: ReactJsxOptions,
-    pub react_display_name: ReactDisplayNameOptions,
-    pub react_jsx_self: ReactJsxSelfOptions,
-    pub react_jsx_source: ReactJsxSourceOptions,
+
+    /// [preset-react](https://babeljs.io/docs/babel-preset-react)
+    pub react: ReactOptions,
 }
 
 #[allow(unused)]
@@ -55,15 +54,9 @@ pub struct Transformer<'a> {
     semantic: Semantic<'a>,
     options: TransformOptions,
 
-    // Stage 3
     decorators: Decorators,
-    // [preset-typescript](https://babeljs.io/docs/babel-preset-typescript)
     typescript: TypeScript,
-    // [preset-react](https://babeljs.io/docs/babel-preset-react)
-    react_display_name: ReactDisplayName,
-    react_jsx: ReactJsx,
-    react_jsx_self: ReactJsxSelf,
-    react_jsx_source: ReactJsxSource,
+    react: React,
 }
 
 impl<'a> Transformer<'a> {
@@ -80,10 +73,7 @@ impl<'a> Transformer<'a> {
             options,
             decorators: Decorators::default(),
             typescript: TypeScript::default(),
-            react_display_name: ReactDisplayName::default(),
-            react_jsx: ReactJsx::default(),
-            react_jsx_self: ReactJsxSelf::default(),
-            react_jsx_source: ReactJsxSource::default(),
+            react: React::default(),
         }
     }
 

crates/oxc_transformer/src/react/jsx/mod.rs

@@ -1,6 +1,4 @@
-mod options;
-
-pub use self::options::ReactJsxOptions;
+pub use super::options::ReactOptions;
 
 /// [plugin-transform-react-jsx](https://babeljs.io/docs/babel-plugin-transform-react-jsx)
 ///
@@ -18,11 +16,11 @@ pub use self::options::ReactJsxOptions;
 #[derive(Debug, Default)]
 pub struct ReactJsx {
     #[allow(unused)]
-    options: ReactJsxOptions,
+    options: ReactOptions,
 }
 
 impl ReactJsx {
-    pub fn new(options: ReactJsxOptions) -> Self {
+    pub fn new(options: ReactOptions) -> Self {
         Self { options }
     }
 }

crates/oxc_transformer/src/react/jsx_source/mod.rs

@@ -0,0 +1,18 @@
+use serde::Deserialize;
+
+#[derive(Debug, Default, Clone, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ReactJsxSourceOptions;
+
+/// [plugin-transform-react-jsx-source](https://babeljs.io/docs/babel-plugin-transform-react-jsx-source)
+#[derive(Debug, Default)]
+pub struct ReactJsxSource {
+    #[allow(unused)]
+    options: ReactJsxSourceOptions,
+}
+
+impl ReactJsxSource {
+    pub fn new(options: ReactJsxSourceOptions) -> Self {
+        Self { options }
+    }
+}

crates/oxc_transformer/src/react/mod.rs

@@ -0,0 +1,51 @@
+mod display_name;
+mod jsx;
+mod jsx_self;
+mod jsx_source;
+mod options;
+
+pub use self::{
+    display_name::{ReactDisplayName, ReactDisplayNameOptions},
+    jsx::ReactJsx,
+    jsx_self::{ReactJsxSelf, ReactJsxSelfOptions},
+    jsx_source::{ReactJsxSource, ReactJsxSourceOptions},
+    options::ReactOptions,
+};
+
+/// [Preset React](https://babel.dev/docs/babel-preset-react)
+///
+/// This preset includes the following plugins:
+///
+/// * [plugin-transform-react-jsx](https://babeljs.io/docs/babel-plugin-transform-react-jsx)
+/// * [plugin-transform-react-jsx-self](https://babeljs.io/docs/babel-plugin-transform-react-jsx-self)
+/// * [plugin-transform-react-jsx](https://babeljs.io/docs/babel-plugin-transform-react-jsx)
+/// * [plugin-transform-react-display-name](https://babeljs.io/docs/babel-plugin-transform-react-display-name)
+#[derive(Default)]
+pub struct React {
+    jsx: ReactJsx,
+    jsx_self: ReactJsxSelf,
+    jsx_source: ReactJsxSource,
+    display_name: ReactDisplayName,
+}
+
+impl React {
+    pub fn new(&mut self, options: ReactOptions) -> &mut Self {
+        self.jsx = ReactJsx::new(options);
+        self
+    }
+
+    pub fn with_jsx_self(&mut self, options: ReactJsxSelfOptions) -> &mut Self {
+        self.jsx_self = ReactJsxSelf::new(options);
+        self
+    }
+
+    pub fn with_jsx_source(&mut self, options: ReactJsxSourceOptions) -> &mut Self {
+        self.jsx_source = ReactJsxSource::new(options);
+        self
+    }
+
+    pub fn with_display_name(&mut self, options: ReactDisplayNameOptions) -> &mut Self {
+        self.display_name = ReactDisplayName::new(options);
+        self
+    }
+}

crates/oxc_transformer/src/react/options.rs

@@ -4,7 +4,7 @@ use serde::Deserialize;
 
 #[derive(Debug, Clone, Deserialize)]
 #[serde(rename_all = "camelCase")]
-pub struct ReactJsxOptions {
+pub struct ReactOptions {
     // Both Runtimes
     //
     /// Decides which runtime to use.
@@ -53,7 +53,7 @@ pub struct ReactJsxOptions {
     // `useBuiltIns` and `useSpread` are deprecated in babel 8.
 }
 
-impl Default for ReactJsxOptions {
+impl Default for ReactOptions {
     fn default() -> Self {
         Self {
             runtime: ReactJsxRuntime::default(),

crates/oxc_transformer/src/react_jsx_source/mod.rs

@@ -1,30 +0,0 @@
-use serde::Deserialize;
-
-#[derive(Debug, Default, Clone, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub struct ReactJsxSourceOptions;
-
-/// [plugin-transform-react-jsx](https://babeljs.io/docs/babel-plugin-transform-react-jsx)
-///
-/// This plugin generates production-ready JS code.
-///
-/// If you are developing a React app in a development environment,
-/// please use @babel/plugin-transform-react-jsx-development for a better debugging experience.
-///
-/// This plugin is included in `preset-react`.
-///
-/// ## Example
-///
-/// In: `<sometag />`
-/// Out: `<sometag __source={ { fileName: 'this/file.js', lineNumber: 10, columnNumber: 1 } } />`
-#[derive(Debug, Default)]
-pub struct ReactJsxSource {
-    #[allow(unused)]
-    options: ReactJsxSourceOptions,
-}
-
-impl ReactJsxSource {
-    pub fn new(options: ReactJsxSourceOptions) -> Self {
-        Self { options }
-    }
-}

crates/oxc_transformer/src/typescript/mod.rs

@@ -4,7 +4,11 @@ use serde::Deserialize;
 #[serde(rename_all = "camelCase")]
 pub struct TypeScriptOptions;
 
-/// [plugin-transform-typescript](https://babeljs.io/docs/babel-plugin-transform-typescript)
+/// [Preset TypeScript](https://babeljs.io/docs/babel-preset-typescript)
+///
+/// This preset includes the following plugins:
+///
+/// * [transform-typescript](https://babeljs.io/docs/babel-plugin-transform-typescript)
 ///
 /// This plugin adds support for the types syntax used by the TypeScript programming language.
 /// However, this plugin does not add the ability to type-check the JavaScript passed to it.

tasks/transform_conformance/src/test_case.rs

@@ -14,8 +14,7 @@ use oxc_semantic::SemanticBuilder;
 use oxc_span::{SourceType, VALID_EXTENSIONS};
 use oxc_tasks_common::{normalize_path, print_diff_in_terminal, BabelOptions};
 use oxc_transformer::{
-    DecoratorsOptions, ReactDisplayNameOptions, ReactJsxOptions, ReactJsxSelfOptions,
-    ReactJsxSourceOptions, TransformOptions, Transformer, TypeScriptOptions,
+    DecoratorsOptions, ReactOptions, TransformOptions, Transformer, TypeScriptOptions,
 };
 
 use crate::{fixture_root, root, TestRunnerEnv};
@@ -96,21 +95,9 @@ pub trait TestCase {
                 .get_plugin("transform-typescript")
                 .map(get_options::<TypeScriptOptions>)
                 .unwrap_or_default(),
-            react_display_name: options
-                .get_plugin("transform-react-display-name")
-                .map(get_options::<ReactDisplayNameOptions>)
-                .unwrap_or_default(),
-            react_jsx: options
+            react: options
                 .get_plugin("transform-react-jsx")
-                .map(get_options::<ReactJsxOptions>)
-                .unwrap_or_default(),
-            react_jsx_self: options
-                .get_plugin("transform-react-jsx-self")
-                .map(get_options::<ReactJsxSelfOptions>)
-                .unwrap_or_default(),
-            react_jsx_source: options
-                .get_plugin("transform-react-jsx-source")
-                .map(get_options::<ReactJsxSourceOptions>)
+                .map(get_options::<ReactOptions>)
                 .unwrap_or_default(),
         }
     }