From 5d7acfd9cbbb9780879d0d7a046f716572a477f7 Mon Sep 17 00:00:00 2001 From: magic-akari Date: Thu, 23 Mar 2023 11:58:28 +0800 Subject: [PATCH] fix(es/react): Respect `import_source` in new jsx (#7128) **Related issue:** - Closes https://github.com/swc-project/swc/issues/6987. --- ...sformKeyPropCustomImportPragma.1.normal.js | 4 +-- ...ormKeyPropCustomImportPragma.2.minified.js | 2 +- .../swc_ecma_transforms_react/src/jsx/mod.rs | 2 +- .../tests/jsx/fixture/issue-6987/input.js | 24 ++++++++++++++++++ .../tests/jsx/fixture/issue-6987/options.json | 6 +++++ .../tests/jsx/fixture/issue-6987/output.mjs | 25 +++++++++++++++++++ 6 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/input.js create mode 100644 crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/options.json create mode 100644 crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/output.mjs diff --git a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js index 06ab7740edb2..d838486b6dfe 100644 --- a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js +++ b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js @@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", { var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default; var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default; var _jsxRuntime = require("preact/jsx-runtime"); -var _react = require("react"); +var _preact = require("preact"); var props = { answer: 42 }; var a = /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", _objectSpreadProps(_objectSpread({}, props), { children: "text" }), "foo"); -var b = /*#__PURE__*/ (0, _react.createElement)("div", _objectSpreadProps(_objectSpread({}, props), { +var b = /*#__PURE__*/ (0, _preact.createElement)("div", _objectSpreadProps(_objectSpread({}, props), { key: "bar" }), "text"); //// [react.tsx] diff --git a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js index 9f53a9f73266..4b5fee103a77 100644 --- a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js +++ b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js @@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: !0 }); var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default, _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default; -require("preact/jsx-runtime"), require("react"); +require("preact/jsx-runtime"), require("preact"); var props = { answer: 42 }; diff --git a/crates/swc_ecma_transforms_react/src/jsx/mod.rs b/crates/swc_ecma_transforms_react/src/jsx/mod.rs index 54d77e01ced0..d227d2060841 100644 --- a/crates/swc_ecma_transforms_react/src/jsx/mod.rs +++ b/crates/swc_ecma_transforms_react/src/jsx/mod.rs @@ -993,7 +993,7 @@ where src: Str { span: DUMMY_SP, raw: None, - value: "react".into(), + value: self.import_source.clone(), } .into(), type_only: Default::default(), diff --git a/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/input.js b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/input.js new file mode 100644 index 000000000000..4a95ae81a8c2 --- /dev/null +++ b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/input.js @@ -0,0 +1,24 @@ +import { isValidElement, Children } from "react"; + +import * as styles from "./CheckmarkList.styles"; + + +const CheckmarkList = ({ children}) => { + const listItems = () => + Children.map(children, (child, index) => { + if (!isValidElement(child)) { + return null; + } + const { children: liChildren, css: liCss, ...otherProps } = child.props; + + return ( +
  • + {liChildren} +
    • + ); + }); + + return ; +}; + +export { CheckmarkList }; diff --git a/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/options.json b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/options.json new file mode 100644 index 000000000000..ff4d32278307 --- /dev/null +++ b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/options.json @@ -0,0 +1,6 @@ +{ + "runtime": "automatic", + "importSource": "@emotion/react", + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment" +} diff --git a/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/output.mjs b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/output.mjs new file mode 100644 index 000000000000..6da3dafea15f --- /dev/null +++ b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/output.mjs @@ -0,0 +1,25 @@ +import { jsx as _jsx } from "@emotion/react/jsx-runtime"; +import { createElement as _createElement } from "@emotion/react"; +import { isValidElement, Children } from "react"; +import * as styles from "./CheckmarkList.styles"; +const CheckmarkList = ({ children })=>{ + const listItems = ()=>Children.map(children, (child, index)=>{ + if (!/*#__PURE__*/ isValidElement(child)) { + return null; + } + const { children: liChildren , css: liCss , ...otherProps } = child.props; + return /*#__PURE__*/ _createElement("li", { + ...otherProps, + key: `checkmark-list-item-${index}`, + css: [ + styles.listItem, + liCss + ] + }, liChildren); + }); + return /*#__PURE__*/ _jsx("ul", { + css: styles.list, + children: listItems() + }); +}; +export { CheckmarkList };