diff --git a/packages/babel-helper-builder-react-jsx-experimental/src/index.js b/packages/babel-helper-builder-react-jsx-experimental/src/index.js index 9f795a72081d..b70bb5a36f9b 100644 --- a/packages/babel-helper-builder-react-jsx-experimental/src/index.js +++ b/packages/babel-helper-builder-react-jsx-experimental/src/index.js @@ -303,12 +303,15 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`, "JSXElement|JSXFragment"(path) { if (path.type === "JSXFragment") imports.add("Fragment"); const openingPath = path.get("openingElement"); - const validChildren = openingPath.parent.children.filter( - child => - !t.isJSXEmptyExpression(child) && - !(t.isJSXText(child) && child.value.trim() === ""), - ); - + const validChildren = openingPath.parent.children.filter(child => { + if (t.isJSXText(child)) { + const args = []; + t.react.cleanJSXElementLiteralChild(child, args); + return args.length > 0; + } else { + return !t.isJSXEmptyExpression(child); + } + }); let importName; if (path.type === "JSXElement" && shouldUseCreateElement(path)) { importName = "createElement"; diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/input.js new file mode 100644 index 000000000000..e4bc0b7035e2 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/input.js @@ -0,0 +1,5 @@ +class MobileHomeActivityTaskPriorityIcon extends React.PureComponent { + render() { + return  {this.props.value} ; + } +} diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/output.mjs new file mode 100644 index 000000000000..65cfda12fc6a --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/output.mjs @@ -0,0 +1,10 @@ +import { jsxs as _jsxs } from "react/jsx-runtime"; + +class MobileHomeActivityTaskPriorityIcon extends React.PureComponent { + render() { + return /*#__PURE__*/_jsxs(Text, { + children: ["\xA0", this.props.value, "\xA0"] + }); + } + +} diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/input.js new file mode 100644 index 000000000000..b637892cb8fc --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/input.js @@ -0,0 +1,7 @@ +/** @jsxRuntime classic */ + +class MobileHomeActivityTaskPriorityIcon extends React.PureComponent { + render() { + return  {this.props.value}nbsp;; + } +} diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/output.js new file mode 100644 index 000000000000..71e93a72cf4c --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/output.js @@ -0,0 +1,7 @@ +/** @jsxRuntime classic */ +class MobileHomeActivityTaskPriorityIcon extends React.PureComponent { + render() { + return /*#__PURE__*/React.createElement(Text, null, "\xA0", this.props.value, "nbsp;"); + } + +} diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/input.js new file mode 100644 index 000000000000..b637892cb8fc --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/input.js @@ -0,0 +1,7 @@ +/** @jsxRuntime classic */ + +class MobileHomeActivityTaskPriorityIcon extends React.PureComponent { + render() { + return  {this.props.value}nbsp;; + } +} diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/output.js new file mode 100644 index 000000000000..71e93a72cf4c --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/output.js @@ -0,0 +1,7 @@ +/** @jsxRuntime classic */ +class MobileHomeActivityTaskPriorityIcon extends React.PureComponent { + render() { + return /*#__PURE__*/React.createElement(Text, null, "\xA0", this.props.value, "nbsp;"); + } + +} diff --git a/packages/babel-types/src/index.js b/packages/babel-types/src/index.js index b0586a4f90ec..dfd665a8811c 100644 --- a/packages/babel-types/src/index.js +++ b/packages/babel-types/src/index.js @@ -2,6 +2,7 @@ import isReactComponent from "./validators/react/isReactComponent"; import isCompatTag from "./validators/react/isCompatTag"; import buildChildren from "./builders/react/buildChildren"; +import cleanJSXElementLiteralChild from "./utils/react/cleanJSXElementLiteralChild"; // asserts export { default as assertNode } from "./asserts/assertNode"; @@ -93,4 +94,5 @@ export const react = { isReactComponent, isCompatTag, buildChildren, + cleanJSXElementLiteralChild, };