refactor(es/react): Split jsx into automatic/classic

.changeset/fast-hairs-work.md

@@ -0,0 +1,5 @@
+---
+swc_common: major
+---
+
+refactor(es/react): Split jsx into automatic/classic

crates/jsdoc/tests/fixture.rs

@@ -154,4 +154,17 @@ impl Comments for SwcComments {
             leading.push(pure_comment);
         }
     }
+
+    fn for_each(&self, f: &mut dyn FnMut(&Comment)) {
+        for entry in self.leading.iter() {
+            for cmt in entry.value() {
+                f(cmt);
+            }
+        }
+        for entry in self.trailing.iter() {
+            for cmt in entry.value() {
+                f(cmt);
+            }
+        }
+    }
 }

crates/swc/benches/oxc.rs

@@ -62,8 +62,11 @@ fn full_group(c: &mut Criterion) {
                                         })),
                                         transform: Some(TransformConfig {
                                             react: swc_ecma_transforms::react::Options {
-                                                runtime: Some(Runtime::Automatic),
-                                                development: Some(react_dev),
+                                                runtime: Runtime::Automatic(Default::default()),
+                                                common: swc_ecma_transforms::react::CommonConfig {
+                                                    development: react_dev.into(),
+                                                    ..Default::default()
+                                                },
                                                 ..Default::default()
                                             },
                                             ..Default::default()

crates/swc/src/config/mod.rs

@@ -57,7 +57,7 @@ use swc_ecma_transforms::{
         decorators, explicit_resource_management::explicit_resource_management,
         export_default_from, import_attributes,
     },
-    react::{self, default_pragma, default_pragma_frag},
+    react::{self},
     resolver,
     typescript::{self, TsImportExportAssignConfig},
     Assumptions,
@@ -785,30 +785,29 @@ impl Options {
                                 typescript::typescript(ts_config, unresolved_mark, top_level_mark),
                                 syntax.typescript() && !syntax.jsx(),
                             ),
+                            // [TODO]: Remove tsx
                             Optional::new(
-                                typescript::tsx::<Option<&dyn Comments>>(
-                                    cm.clone(),
-                                    ts_config,
-                                    typescript::TsxConfig {
-                                        pragma: Some(
-                                            transform
-                                                .react
-                                                .pragma
-                                                .clone()
-                                                .unwrap_or_else(default_pragma),
+                                {
+                                    let (pragma, pragma_frag) = match transform.react.runtime {
+                                        react::Runtime::Classic(ref config) => (
+                                            Some(config.pragma.clone()),
+                                            Some(config.pragma_frag.clone()),
                                         ),
-                                        pragma_frag: Some(
-                                            transform
-                                                .react
-                                                .pragma_frag
-                                                .clone()
-                                                .unwrap_or_else(default_pragma_frag),
-                                        ),
-                                    },
-                                    comments.map(|v| v as _),
-                                    unresolved_mark,
-                                    top_level_mark,
-                                ),
+                                        _ => (None, None),
+                                    };
+
+                                    typescript::tsx::<Option<&dyn Comments>>(
+                                        cm.clone(),
+                                        ts_config,
+                                        typescript::TsxConfig {
+                                            pragma,
+                                            pragma_frag,
+                                        },
+                                        comments.map(|v| v as _),
+                                        unresolved_mark,
+                                        top_level_mark,
+                                    )
+                                },
                                 syntax.typescript() && syntax.jsx(),
                             ),
                         )
@@ -819,9 +818,9 @@ impl Options {
                     custom_before_pass(&program),
                     // handle jsx
                     Optional::new(
-                        react::react::<&dyn Comments>(
+                        react::react(
                             cm.clone(),
-                            comments.map(|v| v as _),
+                            comments.cloned(),
                             transform.react,
                             top_level_mark,
                             unresolved_mark,

crates/swc/tests/fixture/issues-10xxx/10018/output/idnex.jsx

@@ -1,3 +1,2 @@
-var _require = require("foo/jsx-runtime"), _jsx = _require.jsx;
 ;
-_jsx("a", {});
+React.createElement("a", null);

crates/swc/tests/fixture/issues-4xxx/4006/1/output/index.map

@@ -1,5 +1,5 @@
 {
-  "mappings": ";AAAA,SAASA,IAAI,EAAEC,GAAG,EAAEC,UAAU,QAAQ,MAAM;AAE5C,OAAO,MAAMC,YAAYD;IAkBrBE,SAAS;QACL,OAAOJ,IAAI,CAAC,UAAU,EAAE,IAAI,CAACK,IAAI,CAAC,KAAK,CAAC;IAC5C;IAPA,aAAc;QACV,KAAK,IAbTA,uBAAAA,QAAAA,KAAAA;QAcI,IAAI,CAACA,IAAI,GAAG;IAChB;AAKJ;AAlBI,iBAHSF,KAGFG,UAASL,GAAG,CAAC;;;;IAIpB,CAAC;AAED,iBATSE,KASFI,cAAa;IAChBF,MAAM;QAAEG,MAAMC;IAAO;AACzB;AAWJC,eAAeC,MAAM,CAAC,OAAOR",
+  "mappings": ";AAAA,SAASA,IAAI,EAAEC,GAAG,EAAEC,UAAU,QAAQ,MAAM;AAE5C,OAAO,MAAMC,YAAYD;IAkBrBE,SAAS;QACL,OAAOJ,IAAI,CAAC,UAAU,EAAE,IAAI,CAACK,IAAI,CAAC,KAAK,CAAC;IAC5C;IAPA,aAAc;QACV,KAAK,IAbTA,uBAAAA,QAAAA;QAcI,IAAI,CAACA,IAAI,GAAG;IAChB;AAKJ;AAlBI,iBAHSF,KAGFG,UAASL,GAAG,CAAC;;;;IAIpB,CAAC;AAED,iBATSE,KASFI,cAAa;IAChBF,MAAM;QAAEG,MAAMC;IAAO;AACzB;AAWJC,eAAeC,MAAM,CAAC,OAAOR",
   "names": [
     "html",
     "css",

crates/swc/tests/tsc-references/jsxJsxsCjsTransformCustomImportPragma.1.normal.js

@@ -4,30 +4,16 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var _jsxruntime = require("preact/jsx-runtime");
-var a = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {}),
-        "text",
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: "foo"
-        })
-    ]
-});
+var a = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", null), "text", /*#__PURE__*/ React.createElement("div", {
+    className: "foo"
+}));
 //// [react.tsx]
 /// <reference path="/.lib/react16.d.ts" />
 /* @jsxImportSource react */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var _jsxruntime = require("react/jsx-runtime");
 require("./preact");
-var a = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {}),
-        "text",
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: "foo"
-        })
-    ]
-});
+var a = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", null), "text", /*#__PURE__*/ React.createElement("div", {
+    className: "foo"
+}));

crates/swc/tests/tsc-references/jsxJsxsCjsTransformCustomImportPragma.2.minified.js

@@ -1,10 +1,8 @@
 //// [preact.tsx]
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), require("preact/jsx-runtime").Fragment;
+}), React.Fragment;
 //// [react.tsx]
 Object.defineProperty(exports, "__esModule", {
     value: !0
-});
-var _jsxruntime = require("react/jsx-runtime");
-require("./preact"), _jsxruntime.Fragment;
+}), require("./preact"), React.Fragment;

crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _jsxruntime = require("preact/jsx-runtime");
-var _preact = require("preact");
 var props = {
     answer: 42
 };
-var a = /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, props), {
-    children: "text"
-}), "foo");
-var b = /*#__PURE__*/ (0, _preact.createElement)("div", _object_spread_props._(_object_spread._({}, props), {
+var a = /*#__PURE__*/ React.createElement("div", _object_spread._({
+    key: "foo"
+}, props), "text");
+var b = /*#__PURE__*/ React.createElement("div", _object_spread_props._(_object_spread._({}, props), {
     key: "bar"
 }), "text");
 //// [react.tsx]
@@ -25,15 +23,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _jsxruntime = require("react/jsx-runtime");
-var _react = require("react");
 require("./preact");
 var props2 = {
     answer: 42
 };
-var a2 = /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, props2), {
-    children: "text"
-}), "foo");
-var b2 = /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props._(_object_spread._({}, props2), {
+var a2 = /*#__PURE__*/ React.createElement("div", _object_spread._({
+    key: "foo"
+}, props2), "text");
+var b2 = /*#__PURE__*/ React.createElement("div", _object_spread_props._(_object_spread._({}, props2), {
     key: "bar"
 }), "text");

crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js

@@ -2,27 +2,25 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
-var _object_spread = require("@swc/helpers/_/_object_spread"), _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-require("preact/jsx-runtime"), require("preact");
-var props = {
+var _object_spread = require("@swc/helpers/_/_object_spread"), _object_spread_props = require("@swc/helpers/_/_object_spread_props"), props = {
     answer: 42
 };
-_object_spread_props._(_object_spread._({}, props), {
-    children: "text"
-}), _object_spread_props._(_object_spread._({}, props), {
+_object_spread._({
+    key: "foo"
+}, props), _object_spread_props._(_object_spread._({}, props), {
     key: "bar"
 });
 //// [react.tsx]
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
 var _object_spread = require("@swc/helpers/_/_object_spread"), _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-require("react/jsx-runtime"), require("react"), require("./preact");
+require("./preact");
 var props2 = {
     answer: 42
 };
-_object_spread_props._(_object_spread._({}, props2), {
-    children: "text"
-}), _object_spread_props._(_object_spread._({}, props2), {
+_object_spread._({
+    key: "foo"
+}, props2), _object_spread_props._(_object_spread._({}, props2), {
     key: "bar"
 });