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(),
                             ),
                         )

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", {});
+/*#__PURE__*/ React.createElement("a", null);

crates/swc/tests/fixture/issues-2xxx/2854/1/output/index.js

@@ -1,9 +1,9 @@
 export function App() {
-    return React.createElement(Form, null);
+    return /*#__PURE__*/ React.createElement(Form, null);
 }
 export function Form(param) {
     var _param_onChange = param.onChange, onChange = _param_onChange === void 0 ? function() {} : _param_onChange;
-    return React.createElement("input", {
+    return /*#__PURE__*/ React.createElement("input", {
         onChange: function onChange1() {
             onChange();
         }

crates/swc/tests/fixture/issues-6xxx/6244/1/output/index.map

@@ -1,5 +1,5 @@
 {
-  "mappings": ";AAAA,SAAQA,MAAM,QAAO,YAAW;AAChC,SAAQC,GAAG,QAAO,QAAO;AAEzB,MAAMC,eAAeC,SAASC,cAAc,CAAC;AAE7CJ,qBAAO,KAACC,UAAQC",
+  "mappings": ";AAAA,SAAQA,MAAM,QAAO,YAAW;AAChC,SAAQC,GAAG,QAAO,QAAO;AAEzB,MAAMC,eAAeC,SAASC,cAAc,CAAC;AAE7CJ,OAAO,mBAACC,UAAQC",
   "names": [
     "render",
     "App",

crates/swc/tests/fixture/issues-6xxx/6984/1/output/index.js

@@ -17,7 +17,7 @@ var App = /*#__PURE__*/ function(_React_Component) {
             key: "render",
             value: function render() {
                 console.log(this.props);
-                return React.createElement("div", null, "134");
+                return /*#__PURE__*/ React.createElement("div", null, "134");
             }
         }
     ]);

crates/swc/tests/fixture/issues-7xxx/7653/output/1.js

@@ -1 +1 @@
-export default function Home(){return React.createElement("div",{dangerouslySetInnerHTML:{__html:"Hello World"}})}
+export default function Home(){return /*#__PURE__*/React.createElement("div",{dangerouslySetInnerHTML:{__html:"Hello World"}})}

crates/swc/tests/fixture/issues-7xxx/7700/output/1.js

@@ -11,5 +11,5 @@ let positions = {
 };
 export function PositionRender({ isRtl, position }) {
     let display = ('fe-fe-fe' === isRtl ? rtlPositions : positions)[position];
-    return React.createElement("h1", null, "PositionRender: ", display);
+    return /*#__PURE__*/ React.createElement("h1", null, "PositionRender: ", display);
 }

crates/swc/tests/fixture/issues-7xxx/7700/output/2.js

@@ -15,5 +15,5 @@ export function PositionRender({ isRtl, position }) {
     ] : {
         positions
     })[position];
-    return React.createElement("h1", null, "PositionRender: ", display);
+    return /*#__PURE__*/ React.createElement("h1", null, "PositionRender: ", display);
 }

crates/swc/tests/fixture/issues-7xxx/7700/output/3.js

@@ -15,5 +15,5 @@ export function PositionRender({ isRtl, position }) {
     ] : {
         positions
     })[position];
-    return React.createElement("h1", null, "PositionRender: ", display);
+    return /*#__PURE__*/ React.createElement("h1", null, "PositionRender: ", display);
 }

crates/swc/tests/fixture/issues-7xxx/7700/output/4.js

@@ -13,5 +13,5 @@ export function PositionRender({ isRtl, position }) {
     let display = ('fe-fe-fe' === isRtl ? rtlPositions : {
         a: positions
     })[position];
-    return React.createElement("h1", null, "PositionRender: ", display);
+    return /*#__PURE__*/ React.createElement("h1", null, "PositionRender: ", display);
 }

crates/swc/tests/fixture/issues-7xxx/7700/output/5.js

@@ -15,5 +15,5 @@ export function PositionRender({ isRtl, position }) {
             positions
         ]
     })[position];
-    return React.createElement("h1", null, "PositionRender: ", display);
+    return /*#__PURE__*/ React.createElement("h1", null, "PositionRender: ", display);
 }

crates/swc/tests/fixture/issues-7xxx/7783/output/1.js

@@ -1 +1 @@
-export default function e(){return React.createElement("div",null,foo.a)}let foo={get a(){return`a ${this.b}`},get b(){return"b"}};
+export default function e(){return /*#__PURE__*/React.createElement("div",null,foo.a)}let foo={get a(){return`a ${this.b}`},get b(){return"b"}};

crates/swc/tests/fixture/issues-7xxx/7821/output/1.js

@@ -1,9 +1,9 @@
 var Blocks = {
     Block1: function() {
-        return React.createElement(React.Fragment, null, "'Block1xx'");
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, "'Block1xx'");
     },
     Block2: function() {
-        return React.createElement(React.Fragment, null, "'Block2xx'");
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, "'Block2xx'");
     },
     Layout1: function() {
         var e;
@@ -15,5 +15,5 @@ var Blocks = {
     }
 };
 export function render() {
-    return React.createElement(Blocks.Layout1, null);
+    return /*#__PURE__*/ React.createElement(Blocks.Layout1, null);
 }

crates/swc/tests/fixture/issues-8xxx/8199/output/1.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const IconSpecHotkey = (param)=>{
     let { icon } = param;
-    return _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", {
         children: icon
     });
 };

crates/swc/tests/fixture/issues-8xxx/8210/output/1.js

@@ -1,7 +1,7 @@
 const { jsxDEV: _jsxDEV } = require("react/jsx-dev-runtime");
 const Component = ()=>{
-    return _jsxDEV("p", {
-        thing: _jsxDEV("a", {}, void 0, false, {
+    return /*#__PURE__*/ _jsxDEV("p", {
+        thing: /*#__PURE__*/ _jsxDEV("a", {}, void 0, false, {
             fileName: "$DIR/tests/fixture/issues-8xxx/8210/input/1.js",
             lineNumber: 2,
             columnNumber: 23

crates/swc/tests/fixture/issues-8xxx/8243/output/1.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Foo = (props)=>{
-    return originalMessage ? _jsx(Bar, {
-        children: _jsx(Baz, {
+    return originalMessage ? /*#__PURE__*/ _jsx(Bar, {
+        children: /*#__PURE__*/ _jsx(Baz, {
             children: ()=>null
         })
     }) : null;

crates/swc/tests/fixture/issues-8xxx/8243/output/2.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Foo = (props)=>{
-    return originalMessage ? _jsx(Bar, {
-        children: _jsx(Baz, {
+    return originalMessage ? /*#__PURE__*/ _jsx(Bar, {
+        children: /*#__PURE__*/ _jsx(Baz, {
             children: ()=>null
         })
     }) : null;

crates/swc/tests/fixture/issues-8xxx/8243/output/3.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Foo = (props)=>{
-    return originalMessage ? _jsx(Bar, {
-        children: _jsx(Baz, {
+    return originalMessage ? /*#__PURE__*/ _jsx(Bar, {
+        children: /*#__PURE__*/ _jsx(Baz, {
             children: ()=>null
         })
     }) : null;

crates/swc/tests/fixture/issues-8xxx/8243/output/4.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Foo = (props)=>{
-    return originalMessage ? _jsx(Bar, {
-        children: _jsx(Baz, {
+    return originalMessage ? /*#__PURE__*/ _jsx(Bar, {
+        children: /*#__PURE__*/ _jsx(Baz, {
             children: ()=>null
         })
     }) : null;

crates/swc/tests/fixture/issues-8xxx/8594/output/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 (function(FooNs) {
     FooNs.Shared = ()=>'I\'m shared component';
-    FooNs.Main = ()=>React.createElement(FooNs.Shared, null);
+    FooNs.Main = ()=>/*#__PURE__*/ React.createElement(FooNs.Shared, null);
 })(FooNs || (FooNs = {}));
 export var FooNs;

crates/swc/tests/fixture/issues-8xxx/8640/output/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 (function(Ns) {
     Ns.Context = React.createContext();
-    Ns.Component = ()=>React.createElement(Ns.Context.Provider, null);
+    Ns.Component = ()=>/*#__PURE__*/ React.createElement(Ns.Context.Provider, null);
 })(Ns || (Ns = {}));
 export var Ns;

crates/swc/tests/fixture/issues-9xxx/9204/output/1.js

@@ -1,4 +1,4 @@
 let Foo = createFoo();
 export function App() {
-    return React.createElement("view", null, React.createElement(Foo, null));
+    return /*#__PURE__*/ React.createElement("view", null, /*#__PURE__*/ React.createElement(Foo, null));
 }

crates/swc/tests/fixture/sourcemap/002/output/index.map

@@ -1,5 +1,5 @@
 {
-  "mappings": ";;AAAA,eAAe,SAASA,WAAW,KAAQ;QAAR,AAAEC,OAAF,MAAEA;IACjC,qBAAO,oBAACC,aAAKD,KAAKE,GAAG;AACzB;AAEA,OAAO,SAAeC;;;YAClB;;gBAAO;oBACHC,OAAO;wBACHJ,MAAM;4BACFE,KAAK;wBACT;oBACJ;gBACJ;;;IACJ",
+  "mappings": ";;AAAA,eAAe,SAASA,WAAW,KAAQ;QAAR,AAAEC,OAAF,MAAEA;IACjC,OAAO,kCAACC,aAAKD,KAAKE,GAAG;AACzB;AAEA,OAAO,SAAeC;;;YAClB;;gBAAO;oBACHC,OAAO;wBACHJ,MAAM;4BACFE,KAAK;wBACT;oBACJ;gBACJ;;;IACJ",
   "names": [
     "StaticPage",
     "data",

crates/swc/tests/fixture/sourcemap/003/output/index.map

@@ -1,5 +1,5 @@
 {
-  "mappings": "uGAAA,gBAAe,SAASA,EAAW,CAAQ,MAAR,AAAEC,EAAF,EAAEA,KACjC,OAAO,oBAACC,WAAKD,EAAKE,GAAG,CACzB,CAEA,OAAO,SAAeC,+DAClB,SAAO,CACHC,MAAO,CACHJ,KAAM,CACFE,IAAK,KACT,CACJ,CACJ,IACJ",
+  "mappings": "uGAAA,gBAAe,SAASA,EAAW,CAAQ,MAAR,AAAEC,EAAF,EAAEA,KACjC,OAAO,iCAACC,WAAKD,EAAKE,GAAG,CACzB,CAEA,OAAO,SAAeC,+DAClB,SAAO,CACHC,MAAO,CACHJ,KAAM,CACFE,IAAK,KACT,CACJ,CACJ,IACJ",
   "names": [
     "StaticPage",
     "data",

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

@@ -1,10 +1,10 @@
 //// [checkJsxUnionSFXContextualTypeInferredCorrectly.tsx]
 import React from 'react';
 export function ComponentWithUnion(props) {
-    return React.createElement("h1", null);
+    return /*#__PURE__*/ React.createElement("h1", null);
 }
 export function HereIsTheError() {
-    return React.createElement(ComponentWithUnion, {
+    return /*#__PURE__*/ React.createElement(ComponentWithUnion, {
         multi: !1,
         value: 's',
         onChange: function(val) {

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

@@ -4,13 +4,13 @@ export { dom as default };
 import "./renderer";
 //// [other.tsx]
 import { dom as h } from "./renderer";
-export var prerendered = h("h", null);
+export var prerendered = /*#__PURE__*/ h("h", null);
 //// [othernoalias.tsx]
 import { otherdom } from "./renderer";
-export var prerendered2 = otherdom("h", null);
+export var prerendered2 = /*#__PURE__*/ otherdom("h", null);
 //// [reacty.tsx]
 import React from "./renderer";
-export var prerendered3 = React.createElement("h", null);
+export var prerendered3 = /*#__PURE__*/ React.createElement("h", null);
 //// [index.tsx]
 //!   x Expression expected
 //!    ,-[3:1]

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

@@ -8,7 +8,7 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 var _this = this;
 import { predom } from "./renderer2";
 export var MySFC = function(props) {
-    return predom.apply(void 0, [
+    return /*#__PURE__*/ predom.apply(void 0, [
         "p",
         null,
         props.x,
@@ -23,7 +23,7 @@ export var MyClass = /*#__PURE__*/ function() {
         _class_call_check(this, MyClass), this.props = props;
     }
     return MyClass.prototype.render = function() {
-        return predom.apply(void 0, [
+        return /*#__PURE__*/ predom.apply(void 0, [
             "p",
             null,
             this.props.x,
@@ -34,17 +34,17 @@ export var MyClass = /*#__PURE__*/ function() {
         ].concat(_to_consumable_array(this.props.children)));
     }, MyClass;
 }();
-export var tree = predom(MySFC, {
+export var tree = /*#__PURE__*/ predom(MySFC, {
     x: 1,
     y: 2
-}, predom(MyClass, {
+}, /*#__PURE__*/ predom(MyClass, {
     x: 3,
     y: 4
-}), predom(MyClass, {
+}), /*#__PURE__*/ predom(MyClass, {
     x: 5,
     y: 6
 }));
-export default predom("h", null);
+export default /*#__PURE__*/ predom("h", null);
 //// [index.tsx]
 import "@swc/helpers/_/_class_call_check";
 import "@swc/helpers/_/_to_consumable_array";

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

@@ -4,7 +4,7 @@ export { };
 export { };
 //// [component.tsx]
 import { predom } from "./renderer2";
-export default predom("h", null);
+export default /*#__PURE__*/ predom("h", null);
 //// [index.tsx]
 import "./renderer";
 import "./component";