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/intraExpressionInferencesJsx.1.normal.js

@@ -1,11 +1,12 @@
 //// [intraExpressionInferencesJsx.tsx]
 /// <reference path="/.lib/react16.d.ts" />
 // repro from #52798
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 var Component = function(param) {
     var animations = param.animations, style = param.style;
-    return /*#__PURE__*/ React.createElement(React.Fragment, null);
+    return /*#__PURE__*/ _jsx(_Fragment, {});
 };
-/*#__PURE__*/ React.createElement(Component, {
+/*#__PURE__*/ _jsx(Component, {
     animations: {
         test: {
             kind: "a",
@@ -17,7 +18,7 @@ var Component = function(param) {
         return "";
     }
 });
-/*#__PURE__*/ React.createElement(Component, {
+/*#__PURE__*/ _jsx(Component, {
     animations: {
         test: {
             kind: "a",
@@ -34,7 +35,7 @@ var Component = function(param) {
         return "";
     }
 });
-/*#__PURE__*/ React.createElement(Component, {
+/*#__PURE__*/ _jsx(Component, {
     animations: {
         test: {
             kind: "a",
@@ -52,25 +53,25 @@ var Component = function(param) {
     }
 });
 function Foo(props) {
-    return /*#__PURE__*/ React.createElement("div", null);
+    return /*#__PURE__*/ _jsx("div", {});
 }
-/*#__PURE__*/ React.createElement(Foo, {
+/*#__PURE__*/ _jsx(Foo, {
     a: function() {
         return 10;
     },
     b: function(arg) {
         arg.toString();
     }
 });
-/*#__PURE__*/ React.createElement(Foo, {
+/*#__PURE__*/ _jsx(Foo, {
     a: function(x) {
         return 10;
     },
     b: function(arg) {
         arg.toString();
     }
 });
-/*#__PURE__*/ React.createElement(Foo, {
+/*#__PURE__*/ _jsx(Foo, {
     a: function(x) {
         return 10;
     },

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

@@ -1 +1,2 @@
 //// [intraExpressionInferencesJsx.tsx]
+import "react/jsx-runtime";

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

@@ -4,4 +4,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var a = /*#__PURE__*/ React.createElement("div", null, "text");
+var _jsxdevruntime = require("react/jsx-dev-runtime");
+var a = /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("div", {
+    children: "text"
+}, void 0, false, {
+    fileName: "jsxJsxsCjsTransformChildren.tsx",
+    lineNumber: 2,
+    columnNumber: 11
+}, void 0);

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

@@ -1,4 +1,4 @@
 //// [jsxJsxsCjsTransformChildren.tsx]
 Object.defineProperty(exports, "__esModule", {
     value: !0
-});
+}), require("react/jsx-dev-runtime");

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

@@ -4,6 +4,21 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var a = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", null), "text", /*#__PURE__*/ React.createElement("div", {
-    className: "foo"
-}));
+var _jsxdevruntime = require("react/jsx-dev-runtime");
+var a = /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)(_jsxdevruntime.Fragment, {
+    children: [
+        /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("p", {}, void 0, false, {
+            fileName: "jsxJsxsCjsTransformCustomImport.tsx",
+            lineNumber: 3,
+            columnNumber: 3
+        }, void 0),
+        "text",
+        /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("div", {
+            className: "foo"
+        }, void 0, false, {
+            fileName: "jsxJsxsCjsTransformCustomImport.tsx",
+            lineNumber: 5,
+            columnNumber: 3
+        }, void 0)
+    ]
+}, void 0, true);

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

@@ -1,4 +1,4 @@
 //// [jsxJsxsCjsTransformCustomImport.tsx]
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), React.Fragment;
+}), require("react/jsx-dev-runtime").Fragment;

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

@@ -4,30 +4,46 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var _jsxruntime = require("preact/jsx-runtime");
-var a = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+var _jsxdevruntime = require("react/jsx-dev-runtime");
+var a = /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)(_jsxdevruntime.Fragment, {
     children: [
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {}),
+        /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("p", {}, void 0, false, {
+            fileName: "preact.tsx",
+            lineNumber: 4,
+            columnNumber: 3
+        }, void 0),
         "text",
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("div", {
             className: "foo"
-        })
+        }, void 0, false, {
+            fileName: "preact.tsx",
+            lineNumber: 6,
+            columnNumber: 3
+        }, void 0)
     ]
-});
+}, void 0, true);
 //// [react.tsx]
 /// <reference path="/.lib/react16.d.ts" />
 /* @jsxImportSource react */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var _jsxruntime = require("react/jsx-runtime");
+var _jsxdevruntime = require("react/jsx-dev-runtime");
 require("./preact");
-var a = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+var a = /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)(_jsxdevruntime.Fragment, {
     children: [
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {}),
+        /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("p", {}, void 0, false, {
+            fileName: "react.tsx",
+            lineNumber: 5,
+            columnNumber: 3
+        }, void 0),
         "text",
-        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("div", {
             className: "foo"
-        })
+        }, void 0, false, {
+            fileName: "react.tsx",
+            lineNumber: 7,
+            columnNumber: 3
+        }, void 0)
     ]
-});
+}, void 0, true);

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

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

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

@@ -6,12 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _jsxdevruntime = require("react/jsx-dev-runtime");
+var _react = require("react");
 var props = {
     answer: 42
 };
-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"
+var a = /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("div", _object_spread_props._(_object_spread._({}, props), {
+    children: "text"
+}), "foo", false, {
+    fileName: "jsxJsxsCjsTransformKeyProp.tsx",
+    lineNumber: 3,
+    columnNumber: 11
+}, void 0);
+var b = /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props._(_object_spread._({}, props), {
+    key: "bar",
+    __source: {
+        fileName: "jsxJsxsCjsTransformKeyProp.tsx",
+        lineNumber: 4,
+        columnNumber: 11
+    },
+    __self: void 0
 }), "text");

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

@@ -2,11 +2,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
-var _object_spread = require("@swc/helpers/_/_object_spread"), _object_spread_props = require("@swc/helpers/_/_object_spread_props"), props = {
+var _object_spread = require("@swc/helpers/_/_object_spread"), _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+require("react/jsx-dev-runtime"), require("react");
+var props = {
     answer: 42
 };
-_object_spread._({
-    key: "foo"
-}, props), _object_spread_props._(_object_spread._({}, props), {
-    key: "bar"
+_object_spread_props._(_object_spread._({}, props), {
+    children: "text"
+}), _object_spread_props._(_object_spread._({}, props), {
+    key: "bar",
+    __source: {
+        fileName: "jsxJsxsCjsTransformKeyProp.tsx",
+        lineNumber: 4,
+        columnNumber: 11
+    },
+    __self: void 0
 });