From 77d9170f844b917a011d3806709d11a07bf4fd49 Mon Sep 17 00:00:00 2001 From: Dunqing <29533304+Dunqing@users.noreply.github.com> Date: Fri, 13 Sep 2024 13:20:59 +0000 Subject: [PATCH] fix(transformer/react): isStaticChildren should be false when there is only one child (#5745) We found a warning report [here](https://github.com/facebook/react/blob/206df66e70652e85711c3177ce1a0459609a7771/packages/react/src/jsx/ReactJSXElement.js#L614-L632). It caused by we transform incorrectly --- crates/oxc_transformer/src/react/jsx.rs | 5 +++-- tasks/transform_conformance/oxc.snap.md | 4 ++-- tasks/transform_conformance/src/lib.rs | 5 ++--- .../test/fixtures/static-children/input.jsx | 7 +++++++ .../test/fixtures/static-children/options.json | 4 ++++ .../test/fixtures/static-children/output.js | 11 +++++++++++ 6 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/input.jsx create mode 100644 tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/options.json create mode 100644 tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/output.js diff --git a/crates/oxc_transformer/src/react/jsx.rs b/crates/oxc_transformer/src/react/jsx.rs index 7c3976af561a6..4b64dcf900da4 100644 --- a/crates/oxc_transformer/src/react/jsx.rs +++ b/crates/oxc_transformer/src/react/jsx.rs @@ -507,6 +507,7 @@ impl<'a> ReactJsx<'a> { let mut need_jsxs = false; let children = e.children(); + let mut children_len = children.len(); // Append children to object properties in automatic mode if is_automatic { @@ -515,7 +516,7 @@ impl<'a> ReactJsx<'a> { children.iter().filter_map(|child| self.transform_jsx_child(child, ctx)), allocator, ); - let children_len = children.len(); + children_len = children.len(); if children_len != 0 { let value = if children_len == 1 { children.pop().unwrap() @@ -603,7 +604,7 @@ impl<'a> ReactJsx<'a> { if is_development { arguments.push(Argument::from(self.ctx.ast.expression_boolean_literal( SPAN, - if is_fragment { false } else { children.len() > 1 }, + if is_fragment { false } else { children_len > 1 }, ))); } diff --git a/tasks/transform_conformance/oxc.snap.md b/tasks/transform_conformance/oxc.snap.md index 214de89da1632..5bb8cb0d9be3c 100644 --- a/tasks/transform_conformance/oxc.snap.md +++ b/tasks/transform_conformance/oxc.snap.md @@ -1,6 +1,6 @@ commit: 3bcfee23 -Passed: 41/52 +Passed: 42/53 # All Passed: * babel-plugin-transform-nullish-coalescing-operator @@ -167,7 +167,7 @@ rebuilt : SymbolId(2): [] x Output mismatch -# babel-plugin-transform-react-jsx (27/30) +# babel-plugin-transform-react-jsx (28/31) * refresh/does-not-transform-it-because-it-is-not-used-in-the-AST/input.jsx x Output mismatch diff --git a/tasks/transform_conformance/src/lib.rs b/tasks/transform_conformance/src/lib.rs index 0166d12e6f991..a6af116f7e017 100644 --- a/tasks/transform_conformance/src/lib.rs +++ b/tasks/transform_conformance/src/lib.rs @@ -101,7 +101,7 @@ impl TestRunner { root: &Path, filter: Option<&String>, ) -> (IndexMap>, IndexMap>) { - let cwd = babel_root(); + let cwd = root.parent().unwrap_or(root); // use `IndexMap` to keep the order of the test cases the same in insert order. let mut transform_files = IndexMap::>::new(); let mut exec_files = IndexMap::>::new(); @@ -119,8 +119,7 @@ impl TestRunner { return None; } } - TestCaseKind::new(&cwd, path) - .filter(|test_case| !test_case.skip_test_case()) + TestCaseKind::new(cwd, path).filter(|test_case| !test_case.skip_test_case()) }) .partition(|p| matches!(p, TestCaseKind::Transform(_))); diff --git a/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/input.jsx b/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/input.jsx new file mode 100644 index 0000000000000..3b411b163891b --- /dev/null +++ b/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/input.jsx @@ -0,0 +1,7 @@ +
+ { /* + There is only one child, so the isStaticChildren option should be false. + Please see: https://github.com/facebook/react/blob/206df66e70652e85711c3177ce1a0459609a7771/packages/react/src/jsx/ReactJSXElement.js#L614-L632 + */} +
+
\ No newline at end of file diff --git a/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/options.json b/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/options.json new file mode 100644 index 0000000000000..bb40e72854126 --- /dev/null +++ b/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/options.json @@ -0,0 +1,4 @@ +{ + "plugins": [["transform-react-jsx-development"]], + "sourceType": "module" +} diff --git a/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/output.js b/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/output.js new file mode 100644 index 0000000000000..0d276859955ca --- /dev/null +++ b/tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/output.js @@ -0,0 +1,11 @@ +var _jsxFileName = "/tests/babel-plugin-transform-react-jsx/test/fixtures/static-children/input.jsx"; +import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime"; +_jsxDEV("div", { children: _jsxDEV("div", {}, void 0, false, { + fileName: _jsxFileName, + lineNumber: 6, + columnNumber: 3 +}, this) }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 1, + columnNumber: 1 +}, this); \ No newline at end of file